From 239ef24b5b661a30e5a040d334d74c4c6361d2b5 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 5 Nov 2017 06:56:09 +0100 Subject: [PATCH] Redesign --- layout/sidebar/sidebar.scarlet | 5 ++--- pages/animelist/animelist.scarlet | 2 +- pages/shop/history.pixy | 27 +++++++++++++++------------ styles/forum.scarlet | 12 ++++++------ styles/include/config.scarlet | 12 +++++++++--- styles/include/dark.scarlet | 10 +++++++--- styles/input.scarlet | 4 ++-- styles/table.scarlet | 5 ++++- styles/widgets.scarlet | 1 - 9 files changed, 46 insertions(+), 32 deletions(-) diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index 95e0f34c..0edd7907 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -8,7 +8,7 @@ sidebar-spacing-y = 0.7rem z-index 10 min-width 200px height 100% - background ui-background + background sidebar-opaque-background transform translateX(-100%) overflow-x hidden overflow-y auto @@ -32,8 +32,7 @@ sidebar-spacing-y = 0.7rem pointer-events auto box-shadow none border-right ui-border - // background rgba(0, 0, 0, 0.03) - background rgba(0, 0, 0, 0.2) + background sidebar-background .sidebar-visible transform translateX(0) !important diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 050fa74e..2934ffcb 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -30,7 +30,7 @@ clip-long-text a - color text-color + color anime-list-item-name-color :hover color link-hover-color diff --git a/pages/shop/history.pixy b/pages/shop/history.pixy index f11e42e2..0992e59f 100644 --- a/pages/shop/history.pixy +++ b/pages/shop/history.pixy @@ -3,18 +3,21 @@ component PurchaseHistory(purchases []*arn.Purchase, user *arn.User) h1.page-title Purchase History - table - thead - tr.mountable - th Icon - th Item - th.history-quantity Quantity - th.history-price Price - th.history-date Date - tbody - each purchase in purchases - tr.shop-item.mountable(data-item-id=purchase.ItemID) - PurchaseInfo(purchase) + if len(purchases) == 0 + p.text-center.mountable You haven't bought anything yet. + else + table + thead + tr.mountable + th Icon + th Item + th.history-quantity Quantity + th.history-price Price + th.history-date Date + tbody + each purchase in purchases + tr.shop-item.mountable(data-item-id=purchase.ItemID) + PurchaseInfo(purchase) component PurchaseInfo(purchase *arn.Purchase) td.item-icon diff --git a/styles/forum.scarlet b/styles/forum.scarlet index 7dbf2d9c..1ad0affd 100644 --- a/styles/forum.scarlet +++ b/styles/forum.scarlet @@ -98,14 +98,14 @@ post-content-padding-y = 0.75rem &:before content "+" -// .post-permalink -// color post-permalink-color !important +.post-permalink + color post-permalink-color -// .post-like -// color post-like-color !important +.post-like + color post-like-color -// .post-unlike -// color post-unlike-color !important +.post-unlike + color post-unlike-color .post-save // diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 186aac38..8a74749f 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -37,6 +37,9 @@ tab-active-color = white tab-active-background = hsl(216, 68%, 42%) // tab-active-background = rgb(46, 85, 160) +sidebar-background = rgba(0, 0, 0, 0.03) +sidebar-opaque-background = ui-background + // Forum forum-width = 830px post-highlight-color = rgba(248, 165, 130, 0.7) @@ -54,9 +57,12 @@ nav-link-hover-slide-color = main-color // nav-link-hover-color = rgb(80, 80, 80) // Forum -post-like-color = green -post-unlike-color = rgb(255, 32, 12) -post-permalink-color = blue +post-like-color = green !important +post-unlike-color = rgb(255, 32, 12) !important +post-permalink-color = blue !important + +table-row-hover-background = hsla(0, 0%, 0%, 0.01) +anime-list-item-name-color = link-color // Tables table-width-normal = 900px diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet index e590a7cd..b47a9495 100644 --- a/styles/include/dark.scarlet +++ b/styles/include/dark.scarlet @@ -11,6 +11,9 @@ link-color = hsl(hue, saturation, 66%) link-hover-color = hsl(hue, saturation, 76%) link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 66%, 0.5) ui-background = hsla(0, 0%, 8%, 0.3) +sidebar-background = rgba(0, 0, 0, 0.2) +sidebar-opaque-background = ui-background +table-row-hover-background = hsla(0, 0%, 100%, 0.01) // White/black theme-white = bg-color @@ -26,8 +29,9 @@ tab-active-color = hsl(0, 0%, 95%) tab-active-background = hsla(0, 0%, 2%, 0.5) loading-anim-color = link-color anime-alternative-title-color = hsla(0, 0%, 100%, 0.5) +anime-list-item-name-color = text-color // Forum -post-like-color = green -post-unlike-color = rgb(255, 32, 12) -post-permalink-color = blue \ No newline at end of file +post-like-color = link-color +post-unlike-color = link-color +post-permalink-color = link-color \ No newline at end of file diff --git a/styles/input.scarlet b/styles/input.scarlet index c3bcff50..601f6a0b 100644 --- a/styles/input.scarlet +++ b/styles/input.scarlet @@ -1,8 +1,8 @@ mixin input-focus :focus - border 1px solid input-focus-border-color + border 1px solid input-focus-border-color !important // TODO: Replace with alpha(main-color, 20%) function - box-shadow 0 0 6px rgba(248, 165, 130, 0.2) + box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important input, textarea, button, .button, select ui-element diff --git a/styles/table.scarlet b/styles/table.scarlet index 66593695..51a79bc5 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -21,4 +21,7 @@ th tbody tr - bg-light-up \ No newline at end of file + background-color transparent + + :hover + background-color table-row-hover-background \ No newline at end of file diff --git a/styles/widgets.scarlet b/styles/widgets.scarlet index 0b5bcaba..95de3cee 100644 --- a/styles/widgets.scarlet +++ b/styles/widgets.scarlet @@ -22,7 +22,6 @@ .widget vertical width 100% - max-width 300px margin calc(content-padding / 2) overflow hidden