From 6fbe6a34ab12f97c4a4e05bad41d80926961e275 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 19 Jul 2017 16:56:02 +0200 Subject: [PATCH] Mobile layout --- layout/layout.pixy | 24 ++++++++++++++++++++ mixins/Navigation.pixy | 46 +++++++++++++++++++++++++++++---------- pages/users/users.scarlet | 5 ++++- scripts/Actions.ts | 5 +++++ scripts/AnimeNotifier.ts | 5 +++++ scripts/Application.ts | 5 ++++- styles/navigation.scarlet | 6 +---- styles/sidebar.scarlet | 44 +++++++++++++++++++++++++++++++++++++ 8 files changed, 122 insertions(+), 18 deletions(-) create mode 100644 styles/sidebar.scarlet diff --git a/layout/layout.pixy b/layout/layout.pixy index 313da78e..96d77b14 100644 --- a/layout/layout.pixy +++ b/layout/layout.pixy @@ -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 diff --git a/mixins/Navigation.pixy b/mixins/Navigation.pixy index 500f525c..046cdb67 100644 --- a/mixins/Navigation.pixy +++ b/mixins/Navigation.pixy @@ -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,9 +28,16 @@ component LoggedInMenu(user *arn.User) .extension-navigation NavigationButton("Watching list", "/extension/embed", "home") - NavigationButton("Dash", "/", "dashboard") - NavigationButton("Profile", "/+", "user") - 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 + + .extra-navigation + NavigationButton("Profile", "/+", "user") + + .extra-navigation + NavigationButton("Forum", "/forum", "comment") .extra-navigation NavigationButton("Soundtracks", "/soundtracks", "headphones") @@ -36,7 +47,8 @@ component LoggedInMenu(user *arn.User) .extra-navigation NavigationButton("Users", "/users", "globe") - NavigationButton("Explore", "/explore", "th") + .extra-navigation + NavigationButton("Explore", "/explore", "th") //- .extra-navigation //- NavigationButton("Statistics", "/statistics", "pie-chart") @@ -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 \ No newline at end of file + 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 \ No newline at end of file diff --git a/pages/users/users.scarlet b/pages/users/users.scarlet index cb7c18ef..141ac59d 100644 --- a/pages/users/users.scarlet +++ b/pages/users/users.scarlet @@ -4,4 +4,7 @@ border-radius 3px .user-image - margin 0.4rem \ No newline at end of file + margin 0.4rem + +.user + display flex \ No newline at end of file diff --git a/scripts/Actions.ts b/scripts/Actions.ts index 66bd6dde..5c77caf0 100644 --- a/scripts/Actions.ts +++ b/scripts/Actions.ts @@ -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) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 2b8cafd1..63c9a9f9 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -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() { diff --git a/scripts/Application.ts b/scripts/Application.ts index 4f4057cd..9f86505a 100644 --- a/scripts/Application.ts +++ b/scripts/Application.ts @@ -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 diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index a2204384..cfbf44eb 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -43,7 +43,7 @@ display none #search - display none + flex 1 border-radius 0 background transparent border none @@ -75,10 +75,6 @@ #navigation justify-content flex-start - - #search - display block - flex 1 .extra-navigation display block diff --git a/styles/sidebar.scarlet b/styles/sidebar.scarlet new file mode 100644 index 00000000..6dbe64f2 --- /dev/null +++ b/styles/sidebar.scarlet @@ -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 \ No newline at end of file