Started working on dark theme

2017-11-03 09:34:21 +01:00 · 2017-11-03 09:34:21 +01:00 · 2b51baf236
commit 2b51baf236
parent 6ec1cd5692
19 changed files with 155 additions and 135 deletions
--- a/config.json
+++ b/config.json
@ -6,6 +6,7 @@
 	],
 	"styles": [
 		"include/config",
+		"include/dark",
 		"include/mixins",
 		"reset",
 		"base",
--- a/layout/layout.pixy
+++ b/layout/layout.pixy
@ -23,12 +23,14 @@ component Layout(app *aero.Application, ctx *aero.Context, user *arn.User, openG
 				//- #header
 				//- 	Navigation(user)
 				#columns
-					aside#sidebar
-						Sidebar(user)
-					#content-container
-						main#content.fade!= content
+					Sidebar(user)
+					Content(content)
 				LoadingAnimation
 				StatusMessage
 			if user != nil
 				#user(data-id=user.ID)
-			script(src="/scripts")
+			script(src="/scripts")
+
+component Content(content string)
+	#content-container
+		main#content.fade!= content
--- a/main.go
+++ b/main.go
@ -100,7 +100,6 @@ func configure(app *aero.Application) *aero.Application {
 	app.Ajax("/users", users.Active)
 	app.Ajax("/users/osu", users.Osu)
 	app.Ajax("/users/staff", users.Staff)
-	app.Ajax("/users/anime/watching", users.AnimeWatching)
 	app.Ajax("/statistics", statistics.Get)
 	app.Ajax("/statistics/anime", statistics.Anime)
 	app.Ajax("/login", login.Get)
--- a/mixins/Sidebar.pixy
+++ b/mixins/Sidebar.pixy
@ -1,56 +1,57 @@
 component Sidebar(user *arn.User)
-	.user-image-container
+	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
-			Avatar(user)
+			SidebarButton("Home", "/animelist/watching", "home")
+			SidebarButton("Dash", "/dashboard", "tachometer")
 		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("Home", "/", "home")
 		
-		SidebarButton("Shop", "/shop", "shopping-cart")
+		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.Role == "admin" || user.Role == "editor"
-			SidebarButton("Statistics", "/statistics", "pie-chart")
+		if user != nil
+			if user.Role == "admin"
+				SidebarButton("Groups", "/groups", "users")
+			
+			SidebarButton("Shop", "/shop", "shopping-cart")

-		SidebarButton("Settings", "/settings", "cog")
+			if user.Role == "admin" || user.Role == "editor"
+				SidebarButton("Statistics", "/statistics", "pie-chart")

-	.spacer
+			SidebarButton("Settings", "/settings", "cog")

-	.sidebar-link(aria-label="Search")
-		.sidebar-button
-			Icon("search")
-			FuzzySearch
+		.spacer

-	if user != nil
-		if user.Role == "admin"
-			SidebarButton("Admin", "/admin", "wrench")
-		
-		if user.Role == "editor"
-			SidebarButton("Editor", "/editor", "pencil")
+		.sidebar-link(aria-label="Search")
+			.sidebar-button
+				Icon("search")
+				FuzzySearch

-	SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle")
+		if user != nil
+			if user.Role == "admin"
+				SidebarButton("Admin", "/admin", "wrench")
+			
+			if user.Role == "editor"
+				SidebarButton("Editor", "/editor", "pencil")

-	if user != nil
-		SidebarButtonNoAJAX("Logout", "/logout", "sign-out")
-	else
-		SidebarButton("Login", "/login", "sign-in")
+		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")
--- a/pages/admin/admin.go
+++ b/pages/admin/admin.go
@ -1,16 +1,10 @@
 package admin

 import (
-	"time"
-
 	"github.com/aerogo/aero"
-	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
 	"github.com/animenotifier/notify.moe/utils"
-	"github.com/shirou/gopsutil/cpu"
-	"github.com/shirou/gopsutil/disk"
 	"github.com/shirou/gopsutil/host"
-	"github.com/shirou/gopsutil/mem"
 )

 // Get admin page.
@ -21,40 +15,40 @@ func Get(ctx *aero.Context) string {
 		return ctx.Redirect("/")
 	}

-	// CPU
-	cpuUsage := 0.0
-	cpuUsages, err := cpu.Percent(1*time.Second, false)
+	// // CPU
+	// cpuUsage := 0.0
+	// cpuUsages, err := cpu.Percent(1*time.Second, false)

-	if err == nil {
-		cpuUsage = cpuUsages[0]
-	}
+	// if err == nil {
+	// 	cpuUsage = cpuUsages[0]
+	// }

-	// Memory
-	memUsage := 0.0
-	memInfo, _ := mem.VirtualMemory()
+	// // Memory
+	// memUsage := 0.0
+	// memInfo, _ := mem.VirtualMemory()

-	if err == nil {
-		memUsage = memInfo.UsedPercent
-	}
+	// if err == nil {
+	// 	memUsage = memInfo.UsedPercent
+	// }

-	// Disk
-	diskUsage := 0.0
-	diskInfo, err := disk.Usage("/")
+	// // Disk
+	// diskUsage := 0.0
+	// diskInfo, err := disk.Usage("/")

-	if err == nil {
-		diskUsage = diskInfo.UsedPercent
-	}
+	// if err == nil {
+	// 	diskUsage = diskInfo.UsedPercent
+	// }

 	// Host
 	platform, family, platformVersion, _ := host.PlatformInformation()
-	kernelVersion, err := host.KernelVersion()
+	kernelVersion, _ := host.KernelVersion()

-	return ctx.HTML(components.Admin(user, cpuUsage, memUsage, diskUsage, platform, family, platformVersion, kernelVersion))
+	return ctx.HTML(components.Admin(user, platform, family, platformVersion, kernelVersion))
 }

 func average(floatSlice []float64) float64 {
 	if len(floatSlice) == 0 {
-		return arn.DefaultAverageRating
+		return 0
 	}

 	var sum float64
--- a/pages/admin/admin.pixy
+++ b/pages/admin/admin.pixy
@ -8,32 +8,32 @@ component AdminTabs
 			Icon("pencil")
 			span.tab-text Editor

-component Admin(user *arn.User, cpuUsage, memUsage, diskUsage float64, platform, family, platformVersion, kernelVersion string)
+component Admin(user *arn.User, platform, family, platformVersion, kernelVersion string)
 	h1.page-title Admin Panel

 	AdminTabs

 	.widgets
-		.widget.mountable
-			h3.widget-title Usage
+		//- .widget.mountable
+		//- 	h3.widget-title Usage

-			table
-				tbody
-					tr
-						td CPU usage:
-						td
-							span= int(cpuUsage + 0.5)
-							span %
-					tr
-						td Memory usage:
-						td
-							span= int(memUsage + 0.5)
-							span %
-					tr
-						td Disk usage:
-						td
-							span= int(diskUsage + 0.5)
-							span %
+		//- 	table
+		//- 		tbody
+		//- 			tr
+		//- 				td CPU usage:
+		//- 				td
+		//- 					span= int(cpuUsage + 0.5)
+		//- 					span %
+		//- 			tr
+		//- 				td Memory usage:
+		//- 				td
+		//- 					span= int(memUsage + 0.5)
+		//- 					span %
+		//- 			tr
+		//- 				td Disk usage:
+		//- 				td
+		//- 					span= int(diskUsage + 0.5)
+		//- 					span %
 		
 		.widget.mountable
 			h3.widget-title OS
--- a/pages/anime/anime.scarlet
+++ b/pages/anime/anime.scarlet
@ -51,7 +51,7 @@
 	line-height content-line-height
 	
 	.japanese
-		color rgba(60, 60, 60, 0.5) !important
+		color rgba(255, 255, 255, 0.5) !important

 .anime-actions
 	horizontal
--- a/pages/soundtracks/soundtracks.scarlet
+++ b/pages/soundtracks/soundtracks.scarlet
@ -17,8 +17,9 @@
 	box-shadow shadow-light

 .sound-track-footer
-	text-align right
+	text-align center
 	margin-bottom 1rem
+	margin-top 0.4rem
 	font-size 0.9em

 	span
--- a/pages/users/users.go
+++ b/pages/users/users.go
@ -14,7 +14,11 @@ func Active(ctx *aero.Context) string {
 		return user.IsActive() && user.HasAvatar()
 	})

-	arn.SortUsersLastSeen(users)
+	sort.Slice(users, func(i, j int) bool {
+		return len(users[i].AnimeList().Watching().Items) > len(users[j].AnimeList().Watching().Items)
+	})
+
+	// arn.SortUsersLastSeen(users)

 	return ctx.HTML(components.Users(users))
 }
@ -57,16 +61,3 @@ func Staff(ctx *aero.Context) string {

 	return ctx.HTML(components.Users(users))
 }
-
-// AnimeWatching ...
-func AnimeWatching(ctx *aero.Context) string {
-	users := arn.FilterUsers(func(user *arn.User) bool {
-		return user.IsActive() && user.HasAvatar()
-	})
-
-	sort.Slice(users, func(i, j int) bool {
-		return len(users[i].AnimeList().Watching().Items) > len(users[j].AnimeList().Watching().Items)
-	})
-
-	return ctx.HTML(components.Users(users))
-}
--- a/pages/users/users.pixy
+++ b/pages/users/users.pixy
@ -11,6 +11,5 @@ component Users(users []*arn.User)
 component UsersTabs
 	.tabs
 		Tab("Active", "users", "/users")
-		Tab("Watching", "tv", "/users/anime/watching")
 		Tab("Osu", "gamepad", "/users/osu")
 		Tab("Staff", "user-secret", "/users/staff")
--- a/styles/base.scarlet
+++ b/styles/base.scarlet
@ -18,6 +18,7 @@ a

 	:hover
 		color link-hover-color
+		text-shadow link-hover-text-shadow
 		text-decoration none
 	
 	:active
--- a/styles/include/config.scarlet
+++ b/styles/include/config.scarlet
@ -1,10 +1,10 @@
 // Colors
 text-color = rgb(60, 60, 60)
+bg-color = rgb(246, 246, 246)
 main-color = rgb(248, 165, 130)
 link-color = rgb(215, 38, 15)
 link-hover-color = rgb(242, 60, 30)
 link-active-color = link-hover-color
-bg-color = rgb(246, 246, 246)
 pro-color = hsla(0, 100%, 73%, 0.87)

 // UI
@ -23,7 +23,8 @@ ui-element-border-radius = 3px
 input-focus-border-color = rgb(248, 165, 130)

 // Button
-button-hover-color = link-hover-color
+button-hover-color = white
+button-hover-background = link-hover-color
 forum-tag-hover-color = #225db5
 // forum-tag-hover-color = rgb(46, 85, 160)

--- a/styles/include/dark.scarlet
+++ b/styles/include/dark.scarlet
@ -0,0 +1,14 @@
+// Dark theme
+text-color = hsl(0, 0%, 90%)
+bg-color = hsl(0, 0%, 24%)
+link-color = hsl(81, 100%, 56%)
+link-hover-color = hsl(81, 100%, 66%)
+ui-background = hsl(0, 0%, 18%)
+
+link-hover-text-shadow = 0 0 8px hsla(81, 100%, 56%, 0.5)
+
+main-color = link-color
+link-active-color = link-hover-color
+button-hover-color = bg-color
+button-hover-background = link-hover-color
+loading-anim-color = link-color
--- a/styles/include/mixins.scarlet
+++ b/styles/include/mixins.scarlet
@ -60,6 +60,11 @@ mixin bg-dark-up
 	:hover
 		background-color rgba(0, 0, 0, 0.015)

+mixin bg-light-up
+	background-color transparent
+	:hover
+		background-color rgba(255, 255, 255, 0.015)
+
 mixin light-up
 	filter brightness(0.4) saturate(1)
 	:hover
--- a/styles/input.scarlet
+++ b/styles/input.scarlet
@ -35,8 +35,8 @@ button, .button
 	:hover,
 	&.active
 		cursor pointer
-		color white
-		background-color button-hover-color
+		color button-hover-color
+		background button-hover-background

 	:active
 		transform translateY(3px)
--- a/styles/navigation.scarlet
+++ b/styles/navigation.scarlet
@ -44,6 +44,7 @@
 #search
 	background transparent
 	border none
+	box-shadow none
 	font-size 1em
 	padding 0
 	width 0
--- a/styles/sidebar.scarlet
+++ b/styles/sidebar.scarlet
@ -41,13 +41,17 @@ sidebar-spacing-y = 0.7rem

 .sidebar-link
 	color text-color
+	
 	&.active
 		.sidebar-button
-			background forum-tag-hover-color
-			color white
+			// background forum-tag-hover-color
+			// 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
--- a/styles/table.scarlet
+++ b/styles/table.scarlet
@ -21,4 +21,4 @@ th

 tbody
 	tr
-		bg-dark-up
+		bg-light-up
--- a/styles/widgets.scarlet
+++ b/styles/widgets.scarlet
@ -1,23 +1,29 @@
+// .widgets
+// 	display grid
+// 	grid-template-columns 1fr
+
+// > 810px
+// 	.widgets
+// 		grid-template-columns repeat(2, 1fr)
+// 		grid-gap content-padding
+
+// > 1240px
+// 	.widgets
+// 		grid-template-columns repeat(3, 1fr)
+
+// > 1640px
+// 	.widgets
+// 		grid-template-columns repeat(4, 1fr)
+
 .widgets
-	display grid
-	grid-template-columns 1fr
-
-> 810px
-	.widgets
-		grid-template-columns repeat(2, 1fr)
-		grid-gap content-padding
-
-> 1240px
-	.widgets
-		grid-template-columns repeat(3, 1fr)
-
-> 1640px
-	.widgets
-		grid-template-columns repeat(4, 1fr)
+	horizontal-wrap
+	justify-content center

 .widget
 	vertical
-	margin-bottom 1rem
+	width 100%
+	max-width 300px
+	margin calc(content-padding / 2)
 	overflow hidden

 .widget-section