web/notify.moe
Code Issues Pull Requests Activity

Redesign

Browse Source
This commit is contained in:
Eduard Urbach 2017-11-03 18:10:31 +01:00
parent a459f2aa9a
commit 8af94d4800
10 changed files with 172 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
mixins/Sidebar.pixy → layout/sidebar/sidebar.pixy
View File

@ -8,7 +8,7 @@ component Sidebar(user *arn.User)
if user != nil
SidebarButton("Home", "/animelist/watching", "home")
SidebarButton("Dash", "/dashboard", "tachometer")
//- SidebarButton("Dash", "/dashboard", "tachometer")
else
SidebarButton("Home", "/", "home")
@ -22,13 +22,13 @@ component Sidebar(user *arn.User)
//- SidebarButton("Search", "/search", "search")
if user != nil
if user.Role == "admin"
SidebarButton("Groups", "/groups", "users")
//- if user.Role == "admin"
//- SidebarButton("Groups", "/groups", "users")
SidebarButton("Shop", "/shop", "shopping-cart")
if user.Role == "admin" || user.Role == "editor"
SidebarButton("Statistics", "/statistics", "pie-chart")
//- if user.Role == "admin" || user.Role == "editor"
//- SidebarButton("Statistics", "/statistics", "pie-chart")
SidebarButton("Settings", "/settings", "cog")

0
styles/sidebar.scarlet → layout/sidebar/sidebar.scarlet
View File

19
pages/anime/anime.pixy
View File

@ -1,24 +1,23 @@
component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
//- AnimeTabs(anime)
.anime
.anime-header(data-id=anime.ID)
if anime.Image.Small != ""
if anime.Image.Large != ""
.anime-image-container
img.anime-cover-image(src=anime.Image.Small, alt=anime.Title.ByUser(user))
img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user))
if anime.StartDate != ""
.anime-start-date
span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
span -
span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
//- if anime.StartDate != ""
//- .anime-start-date
//- span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
//- if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
//- span -
//- span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
.space
.anime-info
h1.anime-title(title=anime.Type)= anime.Title.ByUser(user)
if anime.Title.Japanese != anime.Title.Canonical
h2.anime-alternative-title
Japanese(anime.Title.Japanese)

51
pages/anime/anime.scarlet
View File

@ -1,9 +1,20 @@
.anime
max-width 1100px
margin 0 auto
.anime-header
vertical
.anime-title
text-align center
margin-bottom 0.5rem
> 800px
.anime-header
horizontal
< 800px
.anime-header
vertical
.anime-title
text-align left
.anime-section-name
font-weight bold
@ -21,7 +32,7 @@
.anime-cover-image
// width 142px
width 180px
width 225px
height auto
border-radius 3px
@ -31,6 +42,9 @@
saturate-up
shadow-up
.anime-summary
// ...
.anime-info
vertical
flex 1
@ -39,10 +53,6 @@
width content-padding
height content-padding
.anime-title
text-align left
margin-bottom 0.5rem
.anime-alternative-title
font-size 0.9em
margin-top 0
@ -55,20 +65,23 @@
color rgba(255, 255, 255, 0.5) !important
.anime-actions
horizontal
justify-content center
display none !important
// Action button margin
margin calc(content-padding - 0.5rem) -0.5rem
// .anime-actions
// horizontal
// justify-content center
// Setting z-index requires setting a background as well
z-index 10
// // Action button margin
// margin calc(content-padding - 0.5rem) -0.5rem
> 1450px
.anime-actions
position absolute
top 0
right content-padding
// // Setting z-index requires setting a background as well
// z-index 10
// > 1450px
// .anime-actions
// position absolute
// top 0
// right content-padding
.anime-rating-categories
horizontal

3
pages/settings/settings.scarlet
View File

@ -1,3 +1,6 @@
.settings
horizontal-wrap-center
.widget-section > button,
.widget-section > .button
margin-bottom 1rem

4
scripts/Actions/Diff.ts
View File

@ -10,5 +10,7 @@ export function load(arn: AnimeNotifier, element: HTMLElement) {
export function diff(arn: AnimeNotifier, element: HTMLElement) {
let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
arn.diff(url).then(() => arn.scrollTo(element))
arn.diff(url)
.then(() => arn.scrollTo(element))
.catch(console.error)
}

4
scripts/AnimeNotifier.ts
View File

@ -509,7 +509,7 @@ export class AnimeNotifier {
modifyDelayed(className: string, func: (element: HTMLElement) => void) {
const maxDelay = 1000
const delay = 20
const delay = 18
let time = 0
let start = Date.now()
@ -596,7 +596,7 @@ export class AnimeNotifier {
this.loading(true)
// Delay by transition-speed
return delay(300).then(() => request)
return delay(200).then(() => request)
.then(html => this.app.setContent(html, true))
.then(() => this.app.emit("DOMContentLoaded"))
.then(() => this.loading(false))

2
styles/headers.scarlet
View File

@ -2,7 +2,7 @@ h1, h2
font-size 2em
font-weight bold
text-align center
line-height 1.2em
line-height 1.3em
h3
font-size 1.5em

10
styles/include/config.scarlet
View File

@ -7,6 +7,10 @@ link-hover-color = rgb(242, 60, 30)
link-active-color = link-hover-color
pro-color = hsla(0, 100%, 73%, 0.87)
theme-white = bg-color
theme-black = text-color
link-hover-text-shadow = none
// UI
ui-border-color = rgba(0, 0, 0, 0.1)
ui-border = 1px solid ui-border-color
@ -68,6 +72,6 @@ typography-margin = 0.4rem
// nav-height = 3.11rem
// Timings
fade-speed = 250ms
transition-speed = 200ms
mountable-transition-speed = 250ms
fade-speed = 200ms
transition-speed = 150ms
mountable-transition-speed = 200ms

4
styles/include/dark.scarlet
View File

@ -3,8 +3,7 @@ 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 = hsla(0, 0%, 18%, 0.5)
tab-hover-background = link-hover-color
ui-background = hsla(0, 0%, 8%, 0.5)
theme-white = bg-color
theme-black = text-color
@ -15,4 +14,5 @@ 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-hover-background = link-hover-color
loading-anim-color = link-color