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.
This commit is contained in:
Thomas Mathews
parent
5983a254df
commit
0616d963d5
4 changed files with 36 additions and 60 deletions
|
|
@ -8,14 +8,11 @@
|
|||
|
||||
/* Utility */
|
||||
.vertical-hide {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Application Framework */
|
||||
#container {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
#content {
|
||||
#view {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--clrBorder);
|
||||
overflow: hidden;
|
||||
width: 750px;
|
||||
#view header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--clrBg);
|
||||
}
|
||||
#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;
|
||||
|
|
|
|||
|
|
@ -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="app-icon-logo" class="vertical-hide">
|
||||
<!--<img src="https://damus.io/img/damus.svg">-->
|
||||
<i class="fa-regular fa-fw fa-hand-peace"></i>
|
||||
<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>
|
||||
</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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue