Mobile layout

This commit is contained in:
Eduard Urbach 2017-07-19 16:56:02 +02:00
parent 39e6853d7d
commit 6fbe6a34ab
8 changed files with 122 additions and 18 deletions

View File

@ -26,10 +26,34 @@ component Layout(app *aero.Application, ctx *aero.Context, user *arn.User, openG
main#content.fade!= content
LoadingAnimation
StatusMessage
aside#sidebar
Sidebar(user)
if user != nil
#user(data-id=user.ID)
script(src="/scripts")
component Sidebar(user *arn.User)
.user-image-container
if user != nil
Avatar(user)
else
img.user-image.lazy(data-src="/images/brand/64", alt="Anime Notifier")
SidebarButton("Home", "/", "home")
SidebarButton("Forum", "/forum", "comment")
SidebarButton("Explore", "/explore", "th")
SidebarButton("Soundtracks", "/soundtracks", "headphones")
SidebarButton("Users", "/users", "globe")
if user != nil
if user.Role != ""
SidebarButton("Statistics", "/statistics", "pie-chart")
SidebarButton("Settings", "/settings", "cog")
SidebarButtonNoAJAX("Logout", "/logout", "sign-out")
else
SidebarButton("Login", "/login", "sign-in")
component StatusMessage
#status-message.fade.fade-out
#status-message-text

View File

@ -6,16 +6,20 @@ component Navigation(user *arn.User)
component LoggedOutMenu
nav#navigation.logged-out
NavigationButton("About", "/", "home")
NavigationButton("Explore", "/explore", "th")
NavigationButton("Forum", "/forum", "comment")
.navigation-link.action(data-action="toggleSidebar", data-trigger="click", aria-label="Menu", title="Menu")
.navigation-button
Icon("bars")
span.navigation-text Menu
//- NavigationButton("Explore", "/explore", "th")
//- NavigationButton("Forum", "/forum", "comment")
FuzzySearch
.extra-navigation
NavigationButton("Users", "/users", "globe")
//- .extra-navigation
//- NavigationButton("Users", "/users", "globe")
NavigationButton("Soundtracks", "/soundtracks", "headphones")
//- NavigationButton("Soundtracks", "/soundtracks", "headphones")
NavigationButton("Login", "/login", "sign-in")
@ -24,8 +28,15 @@ component LoggedInMenu(user *arn.User)
.extension-navigation
NavigationButton("Watching list", "/extension/embed", "home")
NavigationButton("Dash", "/", "dashboard")
.navigation-link.action(data-action="toggleSidebar", data-trigger="click", aria-label="Menu", title="Menu")
.navigation-button
Icon("bars")
span.navigation-text Menu
.extra-navigation
NavigationButton("Profile", "/+", "user")
.extra-navigation
NavigationButton("Forum", "/forum", "comment")
.extra-navigation
@ -36,6 +47,7 @@ component LoggedInMenu(user *arn.User)
.extra-navigation
NavigationButton("Users", "/users", "globe")
.extra-navigation
NavigationButton("Explore", "/explore", "th")
//- .extra-navigation
@ -55,8 +67,20 @@ component NavigationButton(name string, target string, icon string)
Icon(icon)
span.navigation-text= name
component SidebarButton(name string, target string, icon string)
a.sidebar-link.ajax(href=target, aria-label=name, title=name, data-bubble="true")
.sidebar-button
Icon(icon)
span.sidebar-text= name
component NavigationButtonNoAJAX(name string, target string, icon string)
a.navigation-link(href=target, aria-label=name)
.navigation-button
Icon(icon)
span.navigation-text= name
component SidebarButtonNoAJAX(name string, target string, icon string)
a.sidebar-link(href=target, aria-label=name, data-bubble="true")
.sidebar-button
Icon(icon)
span.sidebar-text= name

View File

@ -5,3 +5,6 @@
.user-image
margin 0.4rem
.user
display flex

View File

@ -3,6 +3,11 @@ import { AnimeNotifier } from "./AnimeNotifier"
import { Diff } from "./Diff"
import { findAll } from "./Utils"
// Toggle sidebar
export function toggleSidebar(arn: AnimeNotifier) {
arn.app.find("sidebar").classList.toggle("sidebar-visible")
}
// Save new data from an input field
export function save(arn: AnimeNotifier, input: HTMLElement) {
arn.loading(true)

View File

@ -115,6 +115,11 @@ export class AnimeNotifier {
// Push manager
this.pushManager = new PushManager()
// Sidebar control
document.body.addEventListener("click", e => {
this.app.find("sidebar").classList.remove("sidebar-visible")
})
}
async onContentLoaded() {

View File

@ -160,7 +160,10 @@ export class Application {
let url = this.getAttribute("href")
e.preventDefault()
e.stopPropagation()
// if(this.dataset.bubble !== "true") {
// e.stopPropagation()
// }
if(!url || url === self.currentPath)
return

View File

@ -43,7 +43,7 @@
display none
#search
display none
flex 1
border-radius 0
background transparent
border none
@ -76,10 +76,6 @@
#navigation
justify-content flex-start
#search
display block
flex 1
.extra-navigation
display block

44
styles/sidebar.scarlet Normal file
View File

@ -0,0 +1,44 @@
sidebar-spacing-y = 0.75rem
#sidebar
vertical
position fixed
left 0
top 0
min-width 265px
height 100%
background ui-background
transform translateX(-100%)
overflow-x hidden
overflow-y auto
opacity 0
pointer-events none
box-shadow shadow-medium
transition opacity transition-speed ease, transform transition-speed ease
will-change opacity transition
.user-image-container
horizontal
justify-content center
margin 0.8rem 0
.sidebar-visible
transform translateX(0) !important
pointer-events all !important
opacity 1 !important
.sidebar-link
// color text-color
&.active
.sidebar-button
background rgb(245, 245, 245)
.sidebar-button
horizontal
align-items center
padding sidebar-spacing-y content-padding
// background ui-background
.icon
font-size 1.3rem
margin-right content-padding