Redesign

2017-11-03 18:10:31 +01:00
parent a459f2aa9a
commit 8af94d4800
10 changed files with 172 additions and 151 deletions
--- a/layout/sidebar/sidebar.pixy
+++ b/layout/sidebar/sidebar.pixy
@ -0,0 +1,66 @@
+component Sidebar(user *arn.User)
+	aside#sidebar
+		.user-image-container
+			if user != nil
+				Avatar(user)
+			else
+				img.user-image.lazy(src=utils.EmptyImage(), data-src="/images/brand/64.png", data-webp="true", alt="Anime Notifier")
+		
+		if user != nil
+			SidebarButton("Home", "/animelist/watching", "home")
+			//- SidebarButton("Dash", "/dashboard", "tachometer")
+		else
+			SidebarButton("Home", "/", "home")
+		
+		SidebarButton("Forum", "/forum", "comment")
+		SidebarButton("Explore", "/explore", "th")
+		//- SidebarButton("Artworks", "/artworks", "paint-brush")
+		SidebarButton("Soundtracks", "/soundtracks", "headphones")
+		//- SidebarButton("AMVs", "/amvs", "video-camera")
+		//- SidebarButton("Games", "/games", "gamepad")
+		SidebarButton("Users", "/users", "globe")
+		//- SidebarButton("Search", "/search", "search")
+
+		if user != nil
+			//- if user.Role == "admin"
+			//- 	SidebarButton("Groups", "/groups", "users")
+			
+			SidebarButton("Shop", "/shop", "shopping-cart")
+
+			//- if user.Role == "admin" || user.Role == "editor"
+			//- 	SidebarButton("Statistics", "/statistics", "pie-chart")
+
+			SidebarButton("Settings", "/settings", "cog")
+
+		.spacer
+
+		.sidebar-link(aria-label="Search")
+			.sidebar-button
+				Icon("search")
+				FuzzySearch
+
+		if user != nil
+			if user.Role == "admin"
+				SidebarButton("Admin", "/admin", "wrench")
+			
+			if user.Role == "editor"
+				SidebarButton("Editor", "/editor", "pencil")
+
+		SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle")
+
+		if user != nil
+			SidebarButtonNoAJAX("Logout", "/logout", "sign-out")
+		else
+			SidebarButton("Login", "/login", "sign-in")
+
+component SidebarButton(name string, target string, icon string)
+	a.sidebar-link.ajax(href=target, aria-label=name, data-bubble="true")
+		.sidebar-button
+			Icon(icon)
+			span.sidebar-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
--- a/layout/sidebar/sidebar.scarlet
+++ b/layout/sidebar/sidebar.scarlet
@ -0,0 +1,61 @@
+sidebar-spacing-y = 0.7rem
+
+#sidebar
+	vertical
+	position fixed
+	left 0
+	top 0
+	z-index 10
+	min-width 200px
+	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
+		flex-shrink 0
+
+> 800px
+	#sidebar
+		opacity 1
+		transform none
+		position static
+		pointer-events auto
+		box-shadow none
+		border-right ui-border
+		background rgba(0, 0, 0, 0.03)
+
+.sidebar-visible
+	transform translateX(0) !important
+	pointer-events auto !important
+	opacity 1 !important
+
+.sidebar-link
+	color text-color
+	
+	&.active
+		.sidebar-button
+			// background tab-hover-background
+			// color white
+			color link-color
+			text-shadow link-hover-text-shadow
+
+.sidebar-button
+	horizontal
+	default-transition
+	align-items center
+	padding sidebar-spacing-y 1rem
+	// background ui-background
+
+	.icon
+		font-size 1rem
+		margin-right 0.75rem