From 5524edd705e2eadd13eda64f4faaf7864e190c1c Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 22 Jul 2017 16:31:25 +0200 Subject: [PATCH] Design improvements --- images/elements/noise-light.png | Bin 0 -> 1320 bytes images/elements/noise-strong.png | Bin 0 -> 4297 bytes mixins/Navigation.pixy | 2 +- pages/animelist/animelist.scarlet | 2 +- pages/home/home.go | 4 ++-- pages/home/home.pixy | 3 +++ styles/base.scarlet | 3 ++- styles/include/mixins.scarlet | 6 ++++++ styles/sidebar.scarlet | 4 ++-- styles/table.scarlet | 2 +- styles/tabs.scarlet | 20 +++++++++++++++----- 11 files changed, 33 insertions(+), 13 deletions(-) create mode 100644 images/elements/noise-light.png create mode 100644 images/elements/noise-strong.png create mode 100644 pages/home/home.pixy diff --git a/images/elements/noise-light.png b/images/elements/noise-light.png new file mode 100644 index 0000000000000000000000000000000000000000..b99b55fc651e3e1d4389d69fdadd6963c347c183 GIT binary patch literal 1320 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 literal 0 HcmV?d00001 diff --git a/mixins/Navigation.pixy b/mixins/Navigation.pixy index c4548ab6..9140747d 100644 --- a/mixins/Navigation.pixy +++ b/mixins/Navigation.pixy @@ -69,7 +69,7 @@ component NavigationButton(name string, target string, icon string) 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") + a.sidebar-link.ajax(href=target, aria-label=name, data-bubble="true") .sidebar-button Icon(icon) span.sidebar-text= name diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 82ed74f2..475afdc5 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -2,7 +2,7 @@ vertical width 100% max-width table-width-normal - // margin 0 auto + margin 0 auto margin-bottom 1rem .anime-list diff --git a/pages/home/home.go b/pages/home/home.go index 8de999c3..411c8d98 100644 --- a/pages/home/home.go +++ b/pages/home/home.go @@ -9,7 +9,7 @@ import ( "github.com/animenotifier/notify.moe/utils" ) -// Get the dashboard or the frontpage when logged out. +// Get the anime list or the frontpage when logged out. func Get(ctx *aero.Context) string { user := utils.GetUser(ctx) @@ -27,5 +27,5 @@ func Get(ctx *aero.Context) string { animeList.PrefetchAnime() animeList.Sort() - return ctx.HTML(components.AnimeLists(animeList.SplitByStatus(), animeList.User(), user)) + return ctx.HTML(components.Home(animeList.Watching(), animeList.User(), user, "watching")) } diff --git a/pages/home/home.pixy b/pages/home/home.pixy new file mode 100644 index 00000000..499c5b50 --- /dev/null +++ b/pages/home/home.pixy @@ -0,0 +1,3 @@ +component Home(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string) + StatusTabs("/animelist/") + AnimeListFilteredByStatus(animeList, viewUser, user, status) \ No newline at end of file diff --git a/styles/base.scarlet b/styles/base.scarlet index a2f45946..42ff40dd 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -1,7 +1,7 @@ html height 100% font-family "Ubuntu", "Trebuchet MS", sans-serif - font-size 105% + font-size 95% body tab-size 4 @@ -9,6 +9,7 @@ body height 100% color text-color background-color bg-color + noise-strong a color link-color diff --git a/styles/include/mixins.scarlet b/styles/include/mixins.scarlet index 6bafeb75..0f8294ad 100644 --- a/styles/include/mixins.scarlet +++ b/styles/include/mixins.scarlet @@ -17,6 +17,12 @@ mixin vertical-wrap display flex flex-flow column wrap +mixin noise-light + background-image url("/images/elements/noise-light.png") + +mixin noise-strong + background-image url("/images/elements/noise-strong.png") + mixin ui-element border 1px solid ui-border-color background ui-background diff --git a/styles/sidebar.scarlet b/styles/sidebar.scarlet index e15631ba..7b1ffa08 100644 --- a/styles/sidebar.scarlet +++ b/styles/sidebar.scarlet @@ -23,7 +23,7 @@ sidebar-spacing-y = 0.7rem justify-content center margin 0.8rem 0 -> 700px +> 800px #sidebar opacity 1 transform none @@ -31,6 +31,7 @@ sidebar-spacing-y = 0.7rem pointer-events all box-shadow none border-right ui-border + background rgba(0, 0, 0, 0.03) .sidebar-visible transform translateX(0) !important @@ -48,7 +49,6 @@ sidebar-spacing-y = 0.7rem horizontal align-items center padding sidebar-spacing-y 1rem - font-size 0.92rem // background ui-background .icon diff --git a/styles/table.scarlet b/styles/table.scarlet index 5379e938..713df6bc 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -1,7 +1,7 @@ table width 100% max-width table-width-normal - // margin 0 auto + margin 0 auto tr border-bottom-width 1px diff --git a/styles/tabs.scarlet b/styles/tabs.scarlet index e736750d..c7682fff 100644 --- a/styles/tabs.scarlet +++ b/styles/tabs.scarlet @@ -1,13 +1,21 @@ .tab color text-color !important padding 0.5rem 1rem + background-color rgb(238, 238, 238) border-right ui-border - background-color rgb(224, 224, 224) !important + border-bottom ui-border + white-space nowrap :hover, &.active background-color bg-color !important transform none + + &.active + border-bottom-color transparent + + :first-child + border-left ui-border // color text-color !important // :hover @@ -26,10 +34,12 @@ .tabs horizontal - margin-left calc(content-padding * -1) - margin-top calc(content-padding * -1) - margin-right calc(content-padding * -2) - border-bottom ui-border + justify-content center + // margin-left calc(content-padding * -1) + // margin-top calc(content-padding * -1) + // margin-right calc(content-padding * -2) + margin-bottom content-padding + // background-color rgba(0, 0, 0, 0.02) // justify-content flex-start !important // margin-bottom 1rem // margin-top -0.6rem \ No newline at end of file