Redesign
This commit is contained in:
parent
239ef24b5b
commit
b0b819306b
@ -1,3 +1,7 @@
|
||||
component SettingsTabs
|
||||
.tabs
|
||||
Tab("Personal", "user", "/settings/personal")
|
||||
|
||||
component Settings(user *arn.User)
|
||||
h1.page-title Settings
|
||||
|
||||
|
@ -1,5 +1,8 @@
|
||||
.settings
|
||||
horizontal-wrap-center
|
||||
vertical
|
||||
margin 0 auto
|
||||
width 100%
|
||||
max-width 400px
|
||||
|
||||
.widget-section > button,
|
||||
.widget-section > .button
|
||||
|
@ -4,7 +4,7 @@ component PurchaseHistory(purchases []*arn.Purchase, user *arn.User)
|
||||
h1.page-title Purchase History
|
||||
|
||||
if len(purchases) == 0
|
||||
p.text-center.mountable You haven't bought anything yet.
|
||||
p.text-center.mountable You haven't bought any items yet.
|
||||
else
|
||||
table
|
||||
thead
|
||||
|
@ -15,8 +15,8 @@ component ShopTabs(user *arn.User)
|
||||
Tab(strconv.Itoa(user.Balance), "diamond", "/charge")
|
||||
|
||||
component ShopItem(item *arn.Item)
|
||||
.widget.shop-item.mountable(data-item-id=item.ID)
|
||||
h3.widget-title.shop-item-name
|
||||
.shop-item.mountable(data-item-id=item.ID)
|
||||
h3.shop-item-name
|
||||
.item-icon
|
||||
Icon(item.Icon)
|
||||
span= item.Name
|
||||
@ -24,5 +24,5 @@ component ShopItem(item *arn.Item)
|
||||
.shop-item-description!= markdown.Render(item.Description)
|
||||
.buttons.shop-buttons
|
||||
button.shop-button-buy.action(data-item-id=item.ID, data-item-name=item.Name, data-price=item.Price, data-trigger="click", data-action="buyItem")
|
||||
span.shop-item-price= item.Price
|
||||
span.shop-item-price= "Buy for " + toString(item.Price)
|
||||
Icon("diamond")
|
@ -2,7 +2,21 @@ item-color-pro-account = hsl(0, 100%, 71%)
|
||||
item-color-anime-support-ticket = hsl(217, 64%, 50%)
|
||||
|
||||
.shop-items
|
||||
// ...
|
||||
horizontal-wrap
|
||||
justify-content space-around
|
||||
|
||||
.shop-item
|
||||
ui-element
|
||||
flex 1
|
||||
flex-basis 380px
|
||||
margin calc(content-padding / 2)
|
||||
padding 0.5rem 1rem
|
||||
|
||||
.shop-item-name
|
||||
font-size 1.7rem
|
||||
text-align center
|
||||
padding 0.75rem 0
|
||||
// border-bottom 1px solid rgba(0, 0, 0, 0.1)
|
||||
|
||||
.item-icon
|
||||
display inline-block
|
||||
|
@ -7,7 +7,7 @@ var items = []*arn.Item{
|
||||
ID: "pro-account-3",
|
||||
Name: "PRO Account (1 season)",
|
||||
Price: 900,
|
||||
Description: `PRO account for 1 anime season (3 months).
|
||||
Description: `PRO status for 1 anime season (3 months).
|
||||
|
||||
1 month equals 300 gems.
|
||||
|
||||
@ -28,9 +28,9 @@ Includes:
|
||||
ID: "pro-account-6",
|
||||
Name: "PRO Account (2 seasons)",
|
||||
Price: 1600,
|
||||
Description: `PRO account for 2 anime seasons (6 months).
|
||||
Description: `PRO status for 2 anime seasons (6 months).
|
||||
|
||||
11% less monthly costs compared to standard.
|
||||
11% less monthly costs compared to 1 season.
|
||||
|
||||
Includes:
|
||||
|
||||
@ -49,9 +49,9 @@ Includes:
|
||||
ID: "pro-account-12",
|
||||
Name: "PRO Account (4 seasons)",
|
||||
Price: 3000,
|
||||
Description: `PRO account for 4 anime seasons (12 months).
|
||||
Description: `PRO status for 4 anime seasons (12 months).
|
||||
|
||||
16% less monthly costs compared to standard.
|
||||
16% less monthly costs compared to 1 season.
|
||||
|
||||
Includes:
|
||||
|
||||
@ -70,9 +70,9 @@ Includes:
|
||||
ID: "pro-account-24",
|
||||
Name: "PRO Account (8 seasons)",
|
||||
Price: 5900,
|
||||
Description: `PRO account for 8 anime seasons (24 months).
|
||||
Description: `PRO status for 8 anime seasons (24 months).
|
||||
|
||||
18% less monthly costs compared to standard.
|
||||
18% less monthly costs compared to 1 season.
|
||||
|
||||
Includes:
|
||||
|
||||
|
@ -1,37 +1,37 @@
|
||||
// Dark theme
|
||||
// // Dark theme
|
||||
|
||||
// Main color
|
||||
hue = 45
|
||||
saturation = 100%
|
||||
// // Main color
|
||||
// hue = 45
|
||||
// saturation = 100%
|
||||
|
||||
// Main
|
||||
text-color = hsl(0, 0%, 90%)
|
||||
bg-color = hsl(0, 0%, 24%)
|
||||
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)
|
||||
// // Main
|
||||
// text-color = hsl(0, 0%, 90%)
|
||||
// bg-color = hsl(0, 0%, 24%)
|
||||
// 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
|
||||
theme-black = text-color
|
||||
// // White/black
|
||||
// theme-white = bg-color
|
||||
// theme-black = text-color
|
||||
|
||||
main-color = link-color
|
||||
link-active-color = link-hover-color
|
||||
button-hover-color = link-hover-color
|
||||
button-hover-background = hsla(0, 0%, 12%, 0.5)
|
||||
tab-background = hsla(0, 0%, 0%, 0.1)
|
||||
tab-hover-background = hsla(0, 0%, 0%, 0.2)
|
||||
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
|
||||
// main-color = link-color
|
||||
// link-active-color = link-hover-color
|
||||
// button-hover-color = link-hover-color
|
||||
// button-hover-background = hsla(0, 0%, 12%, 0.5)
|
||||
// tab-background = hsla(0, 0%, 0%, 0.1)
|
||||
// tab-hover-background = hsla(0, 0%, 0%, 0.2)
|
||||
// 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 = link-color
|
||||
post-unlike-color = link-color
|
||||
post-permalink-color = link-color
|
||||
// // Forum
|
||||
// post-like-color = link-color
|
||||
// post-unlike-color = link-color
|
||||
// post-permalink-color = link-color
|
Loading…
Reference in New Issue
Block a user