web: fixed mobile issues

After doing thorough testing on mobile I have scrapped my original
flexbox design in favor of sticky headers. I will not be implmenting a
bottom toolbar like twitter. Instead I will find another way to add user
tools in mobile mode. This approach works better on desktop as well.

Let's simplify and use new CSS tools we have to our advantage and make a
unified design that works on both desktop and mobile better.

web/css/responsive.css

@@ -8,14 +8,11 @@
 
 	/* Utility */
 	.vertical-hide {
-		display: none;
+		display: none !important;
 	}
 
 	/* Application Framework */
-	#container {
+	#view {
-		flex-flow: column-reverse;
-	}
-	#content {
 		width: initial;
 		border-right: none;
 	}
@@ -23,17 +20,6 @@
 	    padding: 12px;
 	}
 
-	/* Navigation */
-	#nav {
-		flex-flow: row;
-		border-right: none;
-	}
-	#nav > * {
-		flex: auto;
-		margin-bottom: 0;
-		font-size: 1.3em;
-	}
-
 	/* Event */
 	.pfp { /* TODO sync up with userpic */
 		width: 44px;

web/css/styles.css

@@ -44,8 +44,6 @@ body {
 	font-size: var(--fsNormal);
 	margin: 0;
 	padding: 0;
-	width: 100%;
-	height: 100%;
 }
 
 /* Utilities */
@@ -94,15 +92,23 @@ button.action {
 .bottom-border { /* TODO rename to bdr-bottom */
 	border-bottom: solid 1px var(--clrBorder);
 }
+.sticky {
+	position: sticky;
+	top: 0;
+}
 
 /* Navigation */
 #nav {
-	display: flex;
-	flex-flow: column;
 	border-right: 1px solid var(--clrBorder);
 	padding: 16px;
 }
-#nav > * {
+#nav > div {
+	position: sticky;
+	top: 16px;
+	display: flex;
+	flex-flow: column;
+}
+#nav > div > * {
 	margin-bottom: 38px;
 }
 #app-icon-logo {
@@ -123,37 +129,23 @@ button.nav {
 #container {
 	display: flex;
 	flex-flow: row;
-	width: 100vw;
-	height: 100vh;
-	overflow: hidden;
 }
-#content {
+#view {
 	flex: auto;
-	display: flex;
-	flex-direction: column;
 	border-right: 1px solid var(--clrBorder);
-	overflow: hidden;
 	width: 750px;
 }
-#content {
+#view header {
-	flex: auto;
+	position: sticky;
-	display: flex;
+	top: 0;
-	flex-direction: column;
+	background: var(--clrBg);
-	border-right: 1px solid var(--clrBorder);
-	overflow: hidden;
-	width: 750px;
 }
-#content header > label {
+#view header > label {
 	padding: 22px 15px;
 	font-size: 22px;
 	font-weight: 800;
 	display: block;
 }
-#view {
-	height: 100%;
-	overflow-y: scroll;
-	flex: 1;
-}
 
 /* Events & Content */
 .event {
@@ -169,10 +161,9 @@ button.nav {
 	text-align: center;
 	padding: 15px;
 }
-.userpic {
+.userpic { /* TODO remove .userpic and use helper class */
 	flex-shrink: 1;
 }
-
 .pfp {
 	border-radius: 50%;
 	width: 64px;

web/index.html

@@ -6,7 +6,6 @@
 		<title>Damus</title>
 		<link rel="stylesheet" href="css/styles.css?v=116">
 		<link rel="stylesheet" href="css/responsive.css?v=7">
-		<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>
 		<script defer src="js/ui/render.js?v=1"></script>
@@ -26,24 +25,21 @@
 		</script>
 		<div id="container">
 			<div class="flex-fill vertical-hide"></div>
-			<div id="nav" class="flex-noshrink">
+			<div id="nav" class="flex-noshrink vertical-hide">
-				<div id="app-icon-logo" class="vertical-hide">
+				<div>
-					<!--<img src="https://damus.io/img/damus.svg">-->
+					<div id="app-icon-logo">
-					<i class="fa-regular fa-fw fa-hand-peace"></i>
+						<!--<img src="https://damus.io/img/damus.svg">-->
+						<i class="fa-regular fa-fw fa-hand-peace"></i>
+					</div>
+					<button class="nav icon" title="Home">
+						<i class="fa fa-fw fa-home"></i><span class="hide">Home</span>
+					</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>
 				</div>
-				<button class="nav icon">
-					<i class="fa fa-fw fa-home"></i><span class="hide">Home</span>
-				</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>
-			</div>
-			<div id="content">
-				<header class="flex-noshrink">
-					<label>Home</label>
-				</header>
-				<div id="view"></div>
 			</div>
+			<div id="view"></div>
 			<div class="flex-fill vertical-hide"></div>
 		</div>
 		<div class="modal closed" id="reply-modal">

web/js/ui/render.js

@@ -4,6 +4,9 @@
 
 function render_home_view(model) {
 	return `
+	<header>
+		<label>Home</label>
+	</header>
 	<div id="newpost">
 		<div><!-- empty to accomodate profile pic --></div>
 		<div>