damus.io

commit 1b49a7029bb7ba69adeba555e1d88196bb98c6dd
parent d6e65341dc1999a78eda86184bd607a389a0344a
Author: William Casarin <jb55@jb55.com>
Date:   Sat, 12 Nov 2022 14:06:15 -0800

web: mobile-friendly nav

Diffstat:
M
web/css/styles.css
 | 
26
++++++++------------------
M
web/index.html
 | 
28
++++++++++++++--------------

2 files changed, 22 insertions(+), 32 deletions(-)
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -47,9 +47,6 @@ body {
 }
 
 /* Utilities */
-.flex-fill {
-	flex: 1;
-}
 .hide {
 	display: none;
 }
@@ -103,24 +100,18 @@ button.nav {
 }
 
 #container {
-	display: flex;
-
-	/*
-	flex-direction: row;
-	width: 100vw;
-	height: 100vh;
-	overflow: hidden;*/
-}
-#nav {
-	flex-shrink: 1;
+	margin: auto;
+	max-width: 750px;
 	border-right: 1px solid var(--clrBorder);
+	border-left: 1px solid var(--clrBorder);
 }
-#content {
+#nav {
 	display: flex;
-	flex-direction: column;
-	border-right: 1px solid var(--clrBorder);
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid var(--clrBorder);
 }
-#content header > label {
+#container header > label {
 	padding: 22px 15px;
 	font-size: 22px;
 	font-weight: 800;
@@ -128,7 +119,6 @@ button.nav {
 }
 
 #view {
-	max-width: 750px;
 	overflow-y: scroll;
 	flex: 1;
 }
diff --git a/web/index.html b/web/index.html
@@ -4,7 +4,7 @@
         <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=111">
+        <link rel="stylesheet" href="css/styles.css?v=112">
         <link rel="stylesheet" href="css/damus.css?v=211">
         <link rel="stylesheet" href="css/fontawesome.css?v=2">
         <script defer src="js/ui/util.js?v=1"></script>
@@ -24,15 +24,17 @@
         });
         </script>
         <div id="container">
-            <div class="flex-fill"></div>
             <div id="nav">
-                <div id="app-icon-logo">
-                    <i class="fa-regular fa-fw fa-hand-peace"></i>
-                </div>
                 <div>
                     <button class="nav icon">
                         <i class="fa fa-fw fa-home"></i><span class="hide">Home</span>
-                    </button></div>
+                    </button>
+		</div>
+
+                <div id="app-icon-logo">
+			<!--<img src="https://damus.io/img/damus.svg">-->
+			<i class="fa-regular fa-fw fa-hand-peace"></i>
+                </div>
 
                 <!--
                 <div>
@@ -47,15 +49,13 @@
                 <div>
                     <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></div>
-            </div>
-            <div id="content">
-                <header>
-                    <label>Home</label>
-                </header>
-                <div id="view"></div>
+                    </button>
+		</div>
             </div>
-            <div class="flex-fill"></div>
+            <header>
+               <label>Home</label>
+            </header>
+            <div id="view"></div>
         </div>
         <div class="modal closed" id="reply-modal">
             <div id="reply-modal-content" class="modal-content">