Skip to content

Commit

Permalink
First pass on mobile styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@pfrazee
pfrazee committed Feb 18, 2021
1 parent 674dd48 commit 5b914dd
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 23 deletions.
59 changes: 55 additions & 4 deletions static/css/common.css
View file
Expand Up @@ -85,12 +85,33 @@ body {
}
}

header {
header .menu {
position: fixed;
z-index: 100;
z-index: 101;
top: 10px;
left: 20px;
height: calc(100vh - 20px);
left: 0;
padding-left: 20px;
height: calc(100vh - 10px);
}

header .mobile-top {
display: none;
position: fixed;
z-index: 102;
top: 0;
left: 0;
width: 100vw;
height: 50px;
}

header .mobile-bot {
display: none;
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100vw;
height: 50px;
}

main {
Expand Down Expand Up @@ -119,6 +140,36 @@ main {
}
}

@media (max-width: 1000px) {
body {
padding: 50px 0;
}

main {
margin: 0 auto;
}

header .menu {
padding-left: 10px;
padding-right: 10px;
transform: translateX(-100%);
transition: transform 0.5s;
}

header .menu.open {
transform: translateX(0%);
border-right: 1px solid #ccc;
}

header .mobile-top {
display: flex;
}

header .mobile-bot {
display: flex;
}
}

.unread {
background: #f2f3ff !important;
border-color: #e0e1ff !important;
Expand Down
83 changes: 64 additions & 19 deletions static/js/com/header.js
View file
Expand Up @@ -8,6 +8,7 @@ const CHECK_NOTIFICATIONS_INTERVAL = 5e3
export class Header extends LitElement {
static get properties () {
return {
isMenuOpen: {type: Boolean},
unreadNotificationsCount: {type: Number}
}
}
Expand All @@ -18,6 +19,7 @@ export class Header extends LitElement {

constructor () {
super()
this.isMenuOpen = false
this.unreadNotificationsCount = 0
setInterval(this.checkNotifications.bind(this), CHECK_NOTIFICATIONS_INTERVAL)
session.onChange(() => this.requestUpdate())
Expand All @@ -33,28 +35,67 @@ export class Header extends LitElement {
this.unreadNotificationsCount = await session.api.notifications.count({after: clearedAt})
}

getNavClass (str) {
getMenuNavClass (str) {
const additions = str === location.pathname ? 'text-blue-700' : ''
return `pl-3 pr-4 py-3 font-semibold rounded hover:bg-gray-100 ${additions}`
}

getMobileNavClass (str) {
const additions = str === location.pathname ? 'text-blue-700' : ''
return `px-6 py-2 text-2xl font-semibold rounded hover:bg-gray-100 ${additions}`
}

render () {
let info = session.getSavedInfo()
return html`
<header class="flex flex-col leading-none text-lg">
<span class="font-bold px-3 py-2 text-3xl text-gray-600">
C T Z N R Y
</span>
<a href="/" class=${this.getNavClass('/')}>
<span class="fas mr-1.5 fa-fw navicon fa-stream"></span>
Home
</a>
${session.hasOneSaved() ? html`
<a href="/notifications" class=${this.getNavClass('/notifications')}>
<span class="far mr-1.5 fa-fw navicon fa-bell"></span>
Notifications ${this.unreadNotificationsCount > 0 ? `(${this.unreadNotificationsCount})` : ''}
<header>
<div class="menu ${this.isMenuOpen ? 'open' : 'closed'} flex flex-col leading-none text-lg bg-white">
<span class="font-bold px-3 py-2 text-3xl text-gray-600">
C T Z N R Y
</span>
<a href="/" class=${this.getMenuNavClass('/')}>
<span class="fas mr-1.5 fa-fw navicon fa-home"></span>
Home
</a>
${session.hasOneSaved() ? html`
<a href="/notifications" class=${this.getMenuNavClass('/notifications')}>
<span class="far mr-1.5 fa-fw navicon fa-bell"></span>
Notifications ${this.unreadNotificationsCount > 0 ? `(${this.unreadNotificationsCount})` : ''}
</a>
` : ''}
${this.renderSessionCtrls()}
</div>
<div class="mobile-top box-border flex bg-white border-b border-gray-300">
<a class=${this.getMobileNavClass()} @click=${this.onToggleMenu}>
<span class="fas fa-fw fa-bars"></span>
</a>
` : ''}
${this.renderSessionCtrls()}
<span class="flex-grow"></span>
<a class="font-bold px-3 py-2 text-2xl text-gray-600" href="/">
C T Z N R Y
</a>
<span class="flex-grow"></span>
${session.hasOneSaved() ? html`
<a href="/${info.userId}" title=${info.userId} class="p-1.5 px-5">
<img class="inline-block w-9 h-9 object-cover rounded-full" src=${AVATAR_URL(info.userId)}>
</a>
` : html`
<a href="/login"><span class="fas fa-fw fa-sign-in-alt mr-1.5"></span> Log in</a>
`
}
</div>
<div class="mobile-bot box-border flex bg-white border-t border-gray-300">
<a href="/" class="flex-1 text-center ${this.getMobileNavClass('/')}">
<span class="fas fa-fw navicon fa-home"></span>
</a>
${session.hasOneSaved() ? html`
<a href="/notifications" class="flex-1 text-center ${this.getMobileNavClass('/notifications')}">
<span class="far fa-fw navicon fa-bell"></span>
${this.unreadNotificationsCount > 0 ? `(${this.unreadNotificationsCount})` : ''}
</a>
` : html`<span class="flex-1"></span>`}
<span class="flex-1"></span>
<span class="flex-1"></span>
</div>
</header>
`
}
Expand All @@ -64,7 +105,7 @@ export class Header extends LitElement {
let info = session.getSavedInfo()
return html`
<a
class="relative ${this.getNavClass()} mt-1"
class="relative ${this.getMenuNavClass()} mt-1"
href="/${info.userId}"
title=${info.userId}
>
Expand All @@ -73,21 +114,25 @@ export class Header extends LitElement {
Profile
</a>
<span class="flex-grow"></span>
<a class=${this.getNavClass()} href="#" @click=${this.onLogOut}>
<a class=${this.getMenuNavClass()} href="#" @click=${this.onLogOut}>
<span class="fas fa-fw fa-sign-out-alt mr-1.5"></span> Log out
</a>
`
} else {
return html`
<a class=${this.getNavClass()} href="/login"><span class="fas fa-fw fa-sign-in-alt mr-1.5"></span> Log in</a>
<a class=${this.getNavClass()} href="/signup"><span class="fas fa-fw fa-user-plus mr-1.5"></span> <strong>Sign up</strong></a>
<a class=${this.getMenuNavClass()} href="/login"><span class="fas fa-fw fa-sign-in-alt mr-1.5"></span> Log in</a>
<a class=${this.getMenuNavClass()} href="/signup"><span class="fas fa-fw fa-user-plus mr-1.5"></span> <strong>Sign up</strong></a>
`
}
}

// events
// =

onToggleMenu (e) {
this.isMenuOpen = !this.isMenuOpen
}

async onClickNewPost (e) {
e.preventDefault()
window.location = '/?composer'
Expand Down

1 comment on commit 5b914dd

@vercel
Copy link

@vercel vercel bot commented on 5b914dd Feb 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.