commit a28fad9ef266228a23956c31ffb084d8787abb25
parent 9f2af26fa614986dc12ff78375723a7bddc58835
Author: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Fri, 18 Nov 2022 09:25:34 -0800
web: Added nav icon state for desktop.
Diffstat:
11 files changed, 161 insertions(+), 136 deletions(-)
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -1,52 +1,10 @@
-/* Hello welcome to my styles. Here are some notes.
- *
- * - I use Noto Sans because it supports most languages.
- * - I will implement light mode first and then attempt dark.
- * - All variables should be declared at the top.
- * - Use as little as possible, write from scratch, and utilize helper
- * classes.
- * - No transpilers!
- */
-
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');
-
-:root {
- /* Colors */
- --clrBg: #fff;
- --clrPanel: #f9f9f9;
- --clrBorder: #f2f2f2;
- --clrBtn: #202020;
- --clrText: #202020;
- --clrTextLight: #868686;
- --clrTextLighter: #abb4ca;
- --clrHeart: #ff5050;
- --clrWarn: #fbc560;
-
- /* Font Sizes */
- --fsSmall: 12px;
- --fsNormal: 16px;
- --fsReduced: 14px;
- --fsEnlarged: 18px;
-
- /* Font Families */
- --ffDefault: "Noto Sans", sans-serif;
-
- /* Z Layers */
- --zDefault: 0;
- --zPFP: 1;
- --zHeader: 2;
- --zGlobal: 3;
- --zModal: 4;
-
- /* Icon */
- --iconSize: 24px;
-}
*:focus-visible {
/* Technically this is bad and something else should be done to indicate
* that something is in focus.
*/
outline: none;
}
+
body {
background: var(--clrBg);
color: var(--clrText);
@@ -56,82 +14,6 @@ body {
padding: 0;
}
-/* Utilities */
-.flex-fill {
- flex: auto;
-}
-.flex-noshrink {
- /*flex-shrink: 0;*/
- flex: none;
-}
-.hide {
- display: none !important;
-}
-.loader {
- font-size: 24px;
-}
-button.action:disabled {
- cursor: default;
- background-color: var(--clrTextLight);
-}
-button {
- background: #171717;
- cursor: pointer;
-}
-button.icon {
- border: none;
- background: transparent;
- 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;
- background: #171717;
- padding: 10px 15px;
- font-size: 16px;
- color: white;
- font-weight: 800;
-}
-img.icon {
- width: var(--iconSize);
- height: var(--iconSize);
-}
-.float-right {
- float: right;
-}
-.clickable {
- cursor: pointer;
-}
-.bottom-border { /* TODO rename to bdr-bottom */
- border-bottom: solid 1px var(--clrBorder);
-}
-.sticky {
- position: sticky;
- top: 0;
-}
-.event-message {
- background: #f2f2f2;
- padding: 10px;
- border-radius: 12px;
- color: #444;
-}
-.flex {
- display: flex;
-}
-
-/* Icon */
-
-img.invert {
- /* This class is good for white on black icons; */
- filter: invert(1);
-}
-
/* Navigation */
#nav {
border-right: 1px solid var(--clrBorder);
@@ -148,6 +30,19 @@ img.invert {
padding: 10px;
position: relative;
}
+#nav > div[data-active] img.active {
+ display: none;
+}
+#nav > div[data-active="home"] [role="home"] img.inactive,
+#nav > div[data-active="explore"] [role="explore"] img.inactive,
+#nav > div[data-active="notifications"] [role="notifications"] img.inactive {
+ display: none;
+}
+#nav > div[data-active="home"] [role="home"] img.active,
+#nav > div[data-active="explore"] [role="explore"] img.active,
+#nav > div[data-active="notifications"] [role="notifications"] img.active {
+ display: block;
+}
#app-icon-logo > img {
width: 36px;
height: 36px;
diff --git a/web/css/utils.css b/web/css/utils.css
@@ -0,0 +1,77 @@
+.flex-fill {
+ flex: auto;
+}
+.flex-noshrink {
+ /*flex-shrink: 0;*/
+ flex: none;
+}
+
+.hide {
+ display: none !important;
+}
+
+.loader {
+ font-size: 24px;
+}
+
+button.action:disabled {
+ cursor: default;
+ background-color: var(--clrTextLight);
+}
+button {
+ background: #171717;
+ cursor: pointer;
+}
+button.icon {
+ border: none;
+ background: transparent;
+ 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;
+ background: #171717;
+ padding: 10px 15px;
+ font-size: 16px;
+ color: white;
+ font-weight: 800;
+}
+img.icon {
+ width: var(--iconSize);
+ height: var(--iconSize);
+}
+.float-right {
+ float: right;
+}
+.clickable {
+ cursor: pointer;
+}
+.bottom-border { /* TODO rename to bdr-bottom */
+ border-bottom: solid 1px var(--clrBorder);
+}
+.sticky {
+ position: sticky;
+ top: 0;
+}
+.event-message {
+ background: #f2f2f2;
+ padding: 10px;
+ border-radius: 12px;
+ color: #444;
+}
+.flex {
+ display: flex;
+}
+
+/* Icon */
+
+img.invert {
+ /* This class is good for white on black icons; */
+ filter: invert(1);
+}
diff --git a/web/css/vars.css b/web/css/vars.css
@@ -0,0 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');
+
+:root {
+ /* Colors */
+ --clrBg: #fff;
+ --clrPanel: #f9f9f9;
+ --clrBorder: #f2f2f2;
+ --clrBtn: #202020;
+ --clrText: #202020;
+ --clrTextLight: #868686;
+ --clrTextLighter: #abb4ca;
+ --clrHeart: #ff5050;
+ --clrWarn: #fbc560;
+
+ /* Font Sizes */
+ --fsSmall: 12px;
+ --fsNormal: 16px;
+ --fsReduced: 14px;
+ --fsEnlarged: 18px;
+
+ /* Font Families */
+ --ffDefault: "Noto Sans", sans-serif;
+
+ /* Z Layers */
+ --zDefault: 0;
+ --zPFP: 1;
+ --zHeader: 2;
+ --zGlobal: 3;
+ --zModal: 4;
+
+ /* Icon */
+ --iconSize: 24px;
+}
diff --git a/web/icon/explore-active.svg b/web/icon/explore-active.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="M352 256C352 278.2 350.8 299.6 348.7 320H163.3C161.2 299.6 159.1 278.2 159.1 256C159.1 233.8 161.2 212.4 163.3 192H348.7C350.8 212.4 352 233.8 352 256zM503.9 192C509.2 212.5 512 233.9 512 256C512 278.1 509.2 299.5 503.9 320H380.8C382.9 299.4 384 277.1 384 256C384 234 382.9 212.6 380.8 192H503.9zM493.4 160H376.7C366.7 96.14 346.9 42.62 321.4 8.442C399.8 29.09 463.4 85.94 493.4 160zM344.3 160H167.7C173.8 123.6 183.2 91.38 194.7 65.35C205.2 41.74 216.9 24.61 228.2 13.81C239.4 3.178 248.7 0 256 0C263.3 0 272.6 3.178 283.8 13.81C295.1 24.61 306.8 41.74 317.3 65.35C328.8 91.38 338.2 123.6 344.3 160H344.3zM18.61 160C48.59 85.94 112.2 29.09 190.6 8.442C165.1 42.62 145.3 96.14 135.3 160H18.61zM131.2 192C129.1 212.6 127.1 234 127.1 256C127.1 277.1 129.1 299.4 131.2 320H8.065C2.8 299.5 0 278.1 0 256C0 233.9 2.8 212.5 8.065 192H131.2zM194.7 446.6C183.2 420.6 173.8 388.4 167.7 352H344.3C338.2 388.4 328.8 420.6 317.3 446.6C306.8 470.3 295.1 487.4 283.8 498.2C272.6 508.8 263.3 512 255.1 512C248.7 512 239.4 508.8 228.2 498.2C216.9 487.4 205.2 470.3 194.7 446.6H194.7zM190.6 503.6C112.2 482.9 48.59 426.1 18.61 352H135.3C145.3 415.9 165.1 469.4 190.6 503.6V503.6zM321.4 503.6C346.9 469.4 366.7 415.9 376.7 352H493.4C463.4 426.1 399.8 482.9 321.4 503.6V503.6z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/explore.svg b/web/icon/explore.svg
@@ -1 +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
+<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 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM256 464C263.4 464 282.1 456.8 303.6 415.6C312.4 397.9 319.1 376.4 325.6 352H186.4C192 376.4 199.6 397.9 208.4 415.6C229 456.8 248.6 464 256 464zM178.5 304H333.5C335.1 288.7 336 272.6 336 256C336 239.4 335.1 223.3 333.5 208H178.5C176.9 223.3 176 239.4 176 256C176 272.6 176.9 288.7 178.5 304V304zM325.6 160C319.1 135.6 312.4 114.1 303.6 96.45C282.1 55.22 263.4 48 256 48C248.6 48 229 55.22 208.4 96.45C199.6 114.1 192 135.6 186.4 160H325.6zM381.8 208C383.2 223.5 384 239.6 384 256C384 272.4 383.2 288.5 381.8 304H458.4C462.1 288.6 464 272.5 464 256C464 239.5 462.1 223.4 458.4 208H381.8zM342.1 66.61C356.2 92.26 367.4 124.1 374.7 160H440.6C419.2 118.9 384.4 85.88 342.1 66.61zM169.9 66.61C127.6 85.88 92.84 118.9 71.43 160H137.3C144.6 124.1 155.8 92.26 169.9 66.61V66.61zM48 256C48 272.5 49.93 288.6 53.57 304H130.2C128.8 288.5 128 272.4 128 256C128 239.6 128.8 223.5 130.2 208H53.57C49.93 223.4 48 239.5 48 256zM440.6 352H374.7C367.4 387.9 356.2 419.7 342.1 445.4C384.4 426.1 419.2 393.1 440.6 352zM137.3 352H71.43C92.84 393.1 127.6 426.1 169.9 445.4C155.8 419.7 144.6 387.9 137.3 352V352z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/home.svg b/web/icon/home-active.svg
diff --git a/web/icon/home.svg b/web/icon/home.svg
@@ -1 +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
+<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="M352 224C352 259.3 323.3 288 288 288C252.7 288 224 259.3 224 224C224 188.7 252.7 160 288 160C323.3 160 352 188.7 352 224zM320 320C364.2 320 400 355.8 400 400C400 408.8 392.8 416 384 416H192C183.2 416 176 408.8 176 400C176 355.8 211.8 320 256 320H320zM272.5 5.7C281.4-1.9 294.6-1.9 303.5 5.7L567.5 229.7C577.6 238.3 578.9 253.4 570.3 263.5C561.7 273.6 546.6 274.9 536.5 266.3L512 245.5V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V245.5L39.53 266.3C29.42 274.9 14.28 273.6 5.7 263.5C-2.876 253.4-1.634 238.3 8.473 229.7L272.5 5.7zM112 204.8V432C112 449.7 126.3 464 144 464H432C449.7 464 464 449.7 464 432V204.8L288 55.47L112 204.8z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/logo-inverted.svg b/web/icon/logo-inverted.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="M412 160c-8.326 0-16.3 1.51-23.68 4.27C375.1 151.8 358.9 144 340 144c-11.64 0-22.44 3.223-32.03 8.418l11.12-68.95c.6228-3.874 .9243-7.725 .9243-11.53c0-36.08-28.91-71.95-72.09-71.95c-34.68 0-65.31 25.16-71.03 60.54L173.4 82.22L168.9 72.77c-12.4-25.75-38.07-40.78-64.89-40.78c-40.8 0-72.01 33.28-72.01 72.07c0 10.48 2.296 21.11 7.144 31.18L89.05 238.9C64.64 250.4 48 275.7 48 303.1v80c0 22.06 10.4 43.32 27.83 56.86l45.95 35.74c29.35 22.83 65.98 35.41 103.2 35.41l78.81 .0352C400.9 512 480 432.1 480 335.8v-107.5C480 189.6 447.9 160 412 160zM320 212.3C320 201.1 328.1 192 340 192c11.02 0 20 9.078 20 20.25v55.5C360 278.9 351 288 340 288C328.1 288 320 278.9 320 267.8V212.3zM247.9 47.98c12.05 0 24.13 9.511 24.13 23.98c0 1.277-.1022 2.57-.3134 3.871L248.4 220.5C240.7 217.6 232.4 215.1 223.9 215.1c0 0 .002 0 0 0c-4.475 0-8.967 .4199-13.38 1.254l-10.55 1.627l24.32-150.7C226.2 56.42 236.4 47.98 247.9 47.98zM79.1 104c0-13.27 10.79-24.04 24.02-24.04c8.937 0 17.5 5.023 21.61 13.61l61.29 127.3L137.3 228.5L82.38 114.4C80.76 111.1 79.1 107.5 79.1 104zM303.8 464l-78.81-.0352c-26.56 0-52.72-8.984-73.69-25.3l-45.97-35.75C99.47 398.4 96 391.3 96 383.1v-80c0-11.23 7.969-21.11 17.59-23.22l105.3-16.23C220.6 264.2 222.3 263.1 223.9 263.1c11.91 0 24.09 9.521 24.09 24.06c0 11.04-7.513 20.95-17.17 23.09L172.8 319c-12.03 1.633-20.78 11.92-20.78 23.75c0 20.21 18.82 24.08 23.7 24.08c2.645 0 64.61-8.619 65.54-8.826c23.55-5.227 41.51-22.23 49.73-43.64C303.3 327.5 320.6 336 340 336c8.326 0 16.31-1.51 23.69-4.27C376 344.2 393.1 352 412 352c.1992 0 10.08-.4453 18.65-2.92C423.9 413.5 369.9 464 303.8 464zM432 283.8C432 294.9 423 304 412 304c-11.02 0-20-9.078-20-20.25v-55.5C392 217.1 400.1 208 412 208c11.02 0 20 9.078 20 20.25V283.8z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/notifications-active.svg b/web/icon/notifications-active.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 32V51.2C329 66.03 384 130.6 384 208V226.8C384 273.9 401.3 319.2 432.5 354.4L439.9 362.7C448.3 372.2 450.4 385.6 445.2 397.1C440 408.6 428.6 416 416 416H32C19.4 416 7.971 408.6 2.809 397.1C-2.353 385.6-.2883 372.2 8.084 362.7L15.5 354.4C46.74 319.2 64 273.9 64 226.8V208C64 130.6 118.1 66.03 192 51.2V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32H256zM224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512z"/></svg>+
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
@@ -4,7 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Damus</title>
- <link rel="stylesheet" href="css/styles.css?v=120">
+ <link rel="stylesheet" href="css/vars.css?v=1">
+ <link rel="stylesheet" href="css/utils.css?v=1">
+ <link rel="stylesheet" href="css/styles.css?v=13">
<link rel="stylesheet" href="css/responsive.css?v=10">
<link rel="stylesheet" href="css/fontawesome.css?v=2">
<script defer src="js/util.js?v=1"></script>
@@ -46,18 +48,24 @@
<div id="container">
<div class="flex-fill vertical-hide"></div>
<div id="nav" class="flex-noshrink vertical-hide">
- <div>
+ <div data-active="home">
<div id="app-icon-logo">
- <img class="icon svg" title="Damus" src="icon/logo.svg"/>
+ <img class="icon svg" title="Damus" src="icon/logo-inverted.svg"/>
</div>
- <button id="home-button" class="nav icon" title="Home" onclick="switch_view('home')">
- <img class="icon svg" src="icon/home.svg"/>
+ <button role="home" class="nav icon"
+ title="Home" onclick="switch_view('home')">
+ <img class="icon svg inactive" src="icon/home.svg"/>
+ <img class="icon svg active" src="icon/home-active.svg"/>
</button>
- <button id="explore-button" class="nav icon" title="Explore" onclick="switch_view('explore')">
- <img class="icon svg" src="icon/explore.svg"/>
+ <button role="explore" class="nav icon"
+ title="Explore" onclick="switch_view('explore')">
+ <img class="icon svg inactive" src="icon/explore.svg"/>
+ <img class="icon svg active" src="icon/explore-active.svg"/>
</button>
- <button role="notifications" class="nav icon" title="Notifications" onclick="switch_view('notifications')">
- <img class="icon svg" src="icon/notifications.svg"/>
+ <button role="notifications" class="nav icon"
+ title="Notifications" onclick="switch_view('notifications')">
+ <img class="icon svg inactive" src="icon/notifications.svg"/>
+ <img class="icon svg active" src="icon/notifications-active.svg"/>
<div class="new-notifications hide"></div>
</button>
<button title="Sign Out" class="nav icon" onclick="press_logout()">
@@ -75,13 +83,17 @@
<!-- To be loaded dynamically. -->
</div>
<div>
- <textarea placeholder="What's up?" oninput="post_input_changed(this)" class="post-input" id="post-input"></textarea>
+ <textarea placeholder="What's up?"
+ oninput="post_input_changed(this)"
+ class="post-input" id="post-input"></textarea>
<div class="post-tools">
<input id="content-warning-input" class="cw hide" type="text" placeholder="Reason"/>
- <button title="Mark this message as sensitive." onclick="toggle_cw(this)" class="cw icon">
+ <button title="Mark this message as sensitive."
+ onclick="toggle_cw(this)" class="cw icon">
<i class="fa-solid fa-triangle-exclamation"></i>
</button>
- <button onclick="send_post(this)" class="action" role="send" id="post-button" disabled>Send</button>
+ <button onclick="send_post(this)" class="action"
+ role="send" id="post-button" disabled>Send</button>
</div>
</div>
</div>
diff --git a/web/js/damus.js b/web/js/damus.js
@@ -631,6 +631,8 @@ function switch_view(name, opts={})
// TODO find out if having multiple event divs is slow
redraw_timeline_events(DAMUS, name)
+ find_node("#nav > div[data-active]").dataset.active = name;
+
if (current_el)
current_el.classList.remove("hide");
}
@@ -659,7 +661,7 @@ function log_error(fmt, ...args) {
}
function log_debug(fmt, ...args) {
- console.log("[debug] " + fmt, ...args)
+ console.debug(fmt, ...args)
}
function load_our_contacts(contacts, our_pubkey, ev) {
