commit 0b22b2f8d984b9a4c085885215db6ef3020a4176
parent 870a9222e7b80d067774bcd4439b833831d60c2e
Author: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Mon, 14 Nov 2022 21:26:35 -0800
web: Added explore button to mobile & use svg icons
Diffstat:
8 files changed, 58 insertions(+), 27 deletions(-)
diff --git a/web/css/responsive.css b/web/css/responsive.css
@@ -32,6 +32,5 @@
.pfp { /* TODO sync up with userpic */
width: 44px;
height: 44px;
- font-size: 2.2em;
}
}
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -81,6 +81,11 @@ button.icon {
padding: 0;
margin: 0;
}
+button.icon > img.icon {
+ /* Remove the space below the image. */
+ display: block;
+ margin: 0 auto;
+}
button.action {
border: none;
border-radius: 50px;
@@ -110,10 +115,17 @@ button.action {
color: #444;
}
+/* Icon */
+
+img.invert {
+ /* This class is good for white on black icons; */
+ filter: invert(1);
+}
+
/* Navigation */
#nav {
border-right: 1px solid var(--clrBorder);
- padding: 16px;
+ padding: 10px;
}
#nav > div {
position: sticky;
@@ -122,20 +134,16 @@ button.action {
flex-flow: column;
}
#nav > div > * {
- margin-bottom: 38px;
-}
-#app-icon-logo {
- font-size: 28px;
- text-align: center;
+ margin-bottom: 20px;
+ padding: 10px;
}
#app-icon-logo > img {
- border-radius: 50%;
- width: 42px;
- height: 42px;
+ width: 36px;
+ height: 36px;
}
-button.nav {
- color: var(--clrBtn);
- font-size: 24px;
+button.nav > img.icon {
+ width: 28px;
+ height: 28px;
}
#gnav {
display: none;
@@ -152,12 +160,16 @@ button.nav {
border-radius: 50%;
background: var(--clrText);
color: var(--clrBg);
- padding: 5px;
+ padding: 10px;
border: transparent 5px solid;
transition: top 0.05s linear;
transform: translateX(-50%) translateY(-50%);
z-index: calc(var(--zGlobal) - 1);
}
+#gnav button > .icon {
+ width: 28px;
+ height: 28px;
+}
#gnav button[role="open-gnav"] {
z-index: var(--zGlobal);
padding: 15px;
@@ -165,6 +177,12 @@ button.nav {
#gnav.open button[role="sign-out"] {
top: -75px;
}
+#gnav.open button[role="explore"] {
+ top: -150px;
+}
+#gnav.open button[role="home"] {
+ top: -225px;
+}
/* Application Framework */
#container {
@@ -213,13 +231,12 @@ button.nav {
position: relative;
border-radius: 50%;
z-index: var(--zPFP);
- font-size: 3.25em;
object-fit: fill;
}
.pfp.deleted {
- background: var(--clrText);
font-size: 32px;
color: var(--clrBg);
+ background: var(--clrText);
}
.pfp.deleted > i {
top: 40%;
diff --git a/web/icon/explore.svg b/web/icon/explore.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M288 64C288 80.85 281.5 96.18 270.8 107.6L297.7 165.2C309.9 161.8 322.7 160 336 160C374.1 160 410.4 175.5 436.3 200.7L513.9 143.7C512.7 138.7 512 133.4 512 128C512 92.65 540.7 64 576 64C611.3 64 640 92.65 640 128C640 163.3 611.3 192 576 192C563.7 192 552.1 188.5 542.3 182.4L464.7 239.4C474.5 258.8 480 280.8 480 304C480 322.5 476.5 340.2 470.1 356.5L537.5 396.9C548.2 388.8 561.5 384 576 384C611.3 384 640 412.7 640 448C640 483.3 611.3 512 576 512C540.7 512 512 483.3 512 448C512 444.6 512.3 441.3 512.8 438.1L445.4 397.6C418.1 428.5 379.8 448 336 448C264.6 448 205.4 396.1 193.1 328H123.3C113.9 351.5 90.86 368 64 368C28.65 368 0 339.3 0 304C0 268.7 28.65 240 64 240C90.86 240 113.9 256.5 123.3 280H193.1C200.6 240.9 222.9 207.1 254.2 185.5L227.3 127.9C226.2 127.1 225.1 128 224 128C188.7 128 160 99.35 160 64C160 28.65 188.7 0 224 0C259.3 0 288 28.65 288 64V64zM336 400C389 400 432 357 432 304C432 250.1 389 208 336 208C282.1 208 240 250.1 240 304C240 357 282.1 400 336 400z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/home.svg b/web/icon/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.6 483.2 483.9 512 448.5 512H128.1C92.75 512 64.09 483.3 64.09 448V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5H575.8zM288 160C252.7 160 224 188.7 224 224C224 259.3 252.7 288 288 288C323.3 288 352 259.3 352 224C352 188.7 323.3 160 288 160zM256 320C211.8 320 176 355.8 176 400C176 408.8 183.2 416 192 416H384C392.8 416 400 408.8 400 400C400 355.8 364.2 320 320 320H256z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/logo.svg b/web/icon/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 287.4V32c0-17.67-14.31-32-32-32S192 14.33 192 32v216.3C218.7 248.4 243.7 263.1 256 287.4zM170.8 251.2c2.514-.7734 5.043-1.027 7.57-1.516L93.41 51.39C88.21 39.25 76.34 31.97 63.97 31.97c-20.97 0-31.97 18.01-31.97 32.04c0 4.207 .8349 8.483 2.599 12.6l81.97 191.3L170.8 251.2zM416 224c-17.69 0-32 14.33-32 32v64c0 17.67 14.31 32 32 32s32-14.33 32-32V256C448 238.3 433.7 224 416 224zM320 352c17.69 0 32-14.33 32-32V224c0-17.67-14.31-32-32-32s-32 14.33-32 32v96C288 337.7 302.3 352 320 352zM368 361.9C356.3 375.3 339.2 384 320 384c-27.41 0-50.62-17.32-59.73-41.55c-7.059 21.41-23.9 39.23-47.08 46.36l-47.96 14.76c-1.562 .4807-3.147 .7105-4.707 .7105c-6.282 0-12.18-3.723-14.74-9.785c-.8595-2.038-1.264-4.145-1.264-6.213c0-6.79 4.361-13.16 11.3-15.3l46.45-14.29c17.2-5.293 29.76-20.98 29.76-38.63c0-34.19-32.54-40.07-40.02-40.07c-3.89 0-7.848 .5712-11.76 1.772l-104 32c-18.23 5.606-28.25 22.21-28.25 38.22c0 4.266 .6825 8.544 2.058 12.67L68.19 419C86.71 474.5 138.7 512 197.2 512H272c82.54 0 151.8-57.21 170.7-134C434.6 381.8 425.6 384 416 384C396.8 384 379.7 375.3 368 361.9z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/notifications.svg b/web/icon/notifications.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 32V49.88C328.5 61.39 384 124.2 384 200V233.4C384 278.8 399.5 322.9 427.8 358.4L442.7 377C448.5 384.2 449.6 394.1 445.6 402.4C441.6 410.7 433.2 416 424 416H24C14.77 416 6.365 410.7 2.369 402.4C-1.628 394.1-.504 384.2 5.26 377L20.17 358.4C48.54 322.9 64 278.8 64 233.4V200C64 124.2 119.5 61.39 192 49.88V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32V32zM216 96C158.6 96 112 142.6 112 200V233.4C112 281.3 98.12 328 72.31 368H375.7C349.9 328 336 281.3 336 233.4V200C336 142.6 289.4 96 232 96H216zM288 448C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/sign-out.svg b/web/icon/sign-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M368 96c26.5 0 48-21.5 48-47.1S394.5 0 368 0s-48.01 21.5-48.01 48S341.5 96 368 96zM488 240l-48.38-.125c-3.5 0-6.625-2.375-7.625-5.75L418.1 188.8c-9.25-30.25-34-53.13-64.88-60.13L275 110.9C249.4 105 222.5 111 201.8 127.1L185 140C174.4 63.12 149.4 0 96 0C52.25 0 0 44.37 0 255.1C0 372.7 16.62 512 96 512c24.62 0 51.88-14.12 71.12-64H114.5C108.8 458.2 102.5 464 96 464c-26.5 0-48-93.13-48-208S69.5 48 96 48S144 141.1 144 256c0 41.5-3 79.63-7.75 112H120C106.8 368 96 378.8 96 392S106.8 416 120 416h75c22.38 0 42.63-13.38 51.5-33.1L260 350.5l-9.625-5.875c-11.38-7-21-16.5-28.25-27.75l-19.88 46.25C201 366.1 198.1 368 195 368H185.5C189.6 337.1 192 300.5 192 256c0-19.5-.5-39.5-1.625-59.38L231.1 165c9.5-7.25 21.75-9.875 33.38-7.375L279.4 161L244 248.4c-10.38 25.5-.625 54.75 23 68.87l83.75 50.63c2.375 1.625 3.75 4.125 3.875 6.875c0 .75-.125 1.5-.25 2.25L321 481.4C319.2 487.5 320 494.1 323.1 499.6c3.125 5.625 8.25 9.75 14.38 11.5C339.8 511.6 341.9 512 344.1 512c10.75 0 20.12-7.125 23.12-17.38l33.25-104.5c7-24.37-3.25-50.25-24.88-63.37L323.8 295.5l42-104.7c2.75 3.5 5 7.625 6.375 12l14 45.37c7 23.63 28.75 39.75 53.38 39.75L487.9 288C501.1 288 512 277.2 512 264C512 250.8 501.3 240 488 240z"/></svg>+
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
@@ -24,12 +24,18 @@
damus_web_init();
});
</script>
- <nav id="gnav">
+ <nav id="gnav" class="">
<button class="icon" role="open-gnav" title="Open Menu" onclick="toggle_gnav(this)">
- <i class="fa fa-fw fa-hand-peace"></i>
+ <img class="icon svg invert" src="icon/logo.svg"/>
+ </button>
+ <button class="icon" role="home" title="Home" onclick="switch_view('home')">
+ <img class="icon svg invert" src="icon/home.svg"/>
+ </button>
+ <button class="icon" role="explore" title="Explore" onclick="switch_view('explore')">
+ <img class="icon svg invert" src="icon/explore.svg"/>
</button>
<button class="icon" role="sign-out" title="Sign Out" onclick="press_logout()">
- <i class="fa fa-fw fa-arrow-right-from-bracket"></i>
+ <img class="icon svg invert" src="icon/sign-out.svg"/>
</button>
</nav>
<div id="container">
@@ -37,17 +43,16 @@
<div id="nav" class="flex-noshrink vertical-hide">
<div>
<div id="app-icon-logo">
- <!--<img src="https://damus.io/img/damus.svg">-->
- <i class="fa-regular fa-fw fa-hand-peace"></i>
+ <img class="icon svg" title="Damus" src="icon/logo.svg"/>
</div>
- <button id="home-button" onclick="switch_view('home')" class="nav icon" title="Home">
- <i class="fa fa-fw fa-home"></i><span class="hide">Home</span>
+ <button id="home-button" class="nav icon" title="Home" onclick="switch_view('home')">
+ <img class="icon svg" src="icon/home.svg"/>
</button>
- <button id="explore-button" onclick="switch_view('explore')" class="nav icon" title="Explore">
- <i class="fa fa-fw fa-globe"></i><span class="hide">Explore</span>
+ <button id="explore-button" class="nav icon" title="Explore" onclick="switch_view('explore')">
+ <img class="icon svg" src="icon/explore.svg"/>
</button>
- <button onclick="press_logout()" title="Sign Out" class="nav icon">
- <i class="fa fa-fw fa-arrow-right-from-bracket"></i><span class="hide">Sign Out</span>
+ <button title="Sign Out" class="nav icon" onclick="press_logout()">
+ <img class="icon svg" src="icon/sign-out.svg"/>
</button>
</div>
</div>
