From 2b51baf236f0d51e1a9ec185dc1fbab6f2675226 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 3 Nov 2017 09:34:21 +0100 Subject: [PATCH] Started working on dark theme --- config.json | 1 + layout/layout.pixy | 12 ++-- main.go | 1 - mixins/Sidebar.pixy | 85 ++++++++++++++------------- pages/admin/admin.go | 48 +++++++-------- pages/admin/admin.pixy | 40 ++++++------- pages/anime/anime.scarlet | 2 +- pages/soundtracks/soundtracks.scarlet | 3 +- pages/users/users.go | 19 ++---- pages/users/users.pixy | 1 - styles/base.scarlet | 1 + styles/include/config.scarlet | 5 +- styles/include/dark.scarlet | 14 +++++ styles/include/mixins.scarlet | 5 ++ styles/input.scarlet | 4 +- styles/navigation.scarlet | 1 + styles/sidebar.scarlet | 8 ++- styles/table.scarlet | 2 +- styles/widgets.scarlet | 38 +++++++----- 19 files changed, 155 insertions(+), 135 deletions(-) create mode 100644 styles/include/dark.scarlet diff --git a/config.json b/config.json index c3bbc092..8e3794a9 100644 --- a/config.json +++ b/config.json @@ -6,6 +6,7 @@ ], "styles": [ "include/config", + "include/dark", "include/mixins", "reset", "base", diff --git a/layout/layout.pixy b/layout/layout.pixy index b8241502..d63fa6d9 100644 --- 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") \ No newline at end of file + script(src="/scripts") + +component Content(content string) + #content-container + main#content.fade!= content \ No newline at end of file diff --git a/main.go b/main.go index 3bcc3bef..32eb06f3 100644 --- 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) diff --git a/mixins/Sidebar.pixy b/mixins/Sidebar.pixy index ba011078..f3a45da5 100644 --- 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") diff --git a/pages/admin/admin.go b/pages/admin/admin.go index cf674966..122bbd44 100644 --- 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 diff --git a/pages/admin/admin.pixy b/pages/admin/admin.pixy index aa6cd7f1..f12146f5 100644 --- 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 diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 3de2745c..85dc661b 100644 --- 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 diff --git a/pages/soundtracks/soundtracks.scarlet b/pages/soundtracks/soundtracks.scarlet index f4a06f33..e9cab0eb 100644 --- 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 diff --git a/pages/users/users.go b/pages/users/users.go index 7004e18e..cdc3d706 100644 --- 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)) -} diff --git a/pages/users/users.pixy b/pages/users/users.pixy index af6f65d8..4a12d8f5 100644 --- 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") \ No newline at end of file diff --git a/styles/base.scarlet b/styles/base.scarlet index 0840795d..8326f56d 100644 --- 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 diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 6750fb15..d24b7563 100644 --- 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) diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet new file mode 100644 index 00000000..bae6f9cc --- /dev/null +++ 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 \ No newline at end of file diff --git a/styles/include/mixins.scarlet b/styles/include/mixins.scarlet index 19d133db..8bde641d 100644 --- 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 diff --git a/styles/input.scarlet b/styles/input.scarlet index f4e2beed..c3bcff50 100644 --- 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) diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index b8084275..4bf731d1 100644 --- 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 diff --git a/styles/sidebar.scarlet b/styles/sidebar.scarlet index 3671d382..5887abf2 100644 --- 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 diff --git a/styles/table.scarlet b/styles/table.scarlet index 713df6bc..66593695 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -21,4 +21,4 @@ th tbody tr - bg-dark-up \ No newline at end of file + bg-light-up \ No newline at end of file diff --git a/styles/widgets.scarlet b/styles/widgets.scarlet index d3fe8f3f..0b5bcaba 100644 --- 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