diff --git a/mixins/Sidebar.pixy b/layout/sidebar/sidebar.pixy similarity index 87% rename from mixins/Sidebar.pixy rename to layout/sidebar/sidebar.pixy index f3a45da5..df34916a 100644 --- a/mixins/Sidebar.pixy +++ b/layout/sidebar/sidebar.pixy @@ -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") diff --git a/styles/sidebar.scarlet b/layout/sidebar/sidebar.scarlet similarity index 100% rename from styles/sidebar.scarlet rename to layout/sidebar/sidebar.scarlet diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 3946fc4f..78a323fa 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -1,134 +1,133 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User) //- AnimeTabs(anime) - - .anime-header(data-id=anime.ID) - if anime.Image.Small != "" - .anime-image-container - img.anime-cover-image(src=anime.Image.Small, alt=anime.Title.ByUser(user)) + .anime + .anime-header(data-id=anime.ID) + if anime.Image.Large != "" + .anime-image-container + 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] - - .space + //- 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) + .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) - //- h3.anime-section-name.anime-summary-header Summary - p.anime-summary= anime.Summary - - if user != nil - .buttons.anime-actions - if user.Role == "editor" || user.Role == "admin" - a.button.ajax(href=anime.Link() + "/edit") - Icon("pencil-square-o") - span Edit anime - - if user.AnimeList().Contains(anime.ID) - a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID) - Icon("pencil") - span Edit in collection - else - button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID) - Icon("plus") - span Add to collection - - //- h3.anime-section-name Ratings - //- .anime-rating-categories - //- .anime-rating-category(title=toString(anime.Rating.Overall)) - //- if anime.Status == "upcoming" - //- .anime-rating-category-name Hype - //- else - //- .anime-rating-category-name Overall - //- Rating(anime.Rating.Overall, user) - //- .anime-rating-category(title=toString(anime.Rating.Story)) - //- .anime-rating-category-name Story - //- Rating(anime.Rating.Story, user) - //- .anime-rating-category(title=toString(anime.Rating.Visuals)) - //- .anime-rating-category-name Visuals - //- Rating(anime.Rating.Visuals, user) - //- .anime-rating-category(title=toString(anime.Rating.Soundtrack)) - //- .anime-rating-category-name Soundtrack - //- Rating(anime.Rating.Soundtrack, user) - - //- if len(friends) > 0 - //- h3.anime-section-name Friends + //- h3.anime-section-name.anime-summary-header Summary + p.anime-summary= anime.Summary - //- .anime-friends - //- .user-avatars - //- each friend in friends - //- if friend.Nick != "" - //- if friend.IsActive() - //- .mountable - //- FriendEntry(friend, listItems) - //- else - //- .mountable - //- .inactive-user - //- FriendEntry(friend, listItems) + if user != nil + .buttons.anime-actions + if user.Role == "editor" || user.Role == "admin" + a.button.ajax(href=anime.Link() + "/edit") + Icon("pencil-square-o") + span Edit anime - //- if anime.Relations() != nil && len(anime.Relations().Items) > 0 - //- h3.anime-section-name Relations - //- .anime-relations - //- each relation in anime.Relations().Items - //- a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user)) - //- img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user)) - //- .anime-relation-type= relation.HumanReadableType() - //- .anime-relation-year - //- if relation.Anime().StartDate != "" - //- span= relation.Anime().StartDate[:4] + if user.AnimeList().Contains(anime.ID) + a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID) + Icon("pencil") + span Edit in collection + else + button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID) + Icon("plus") + span Add to collection - //- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != "" - //- h3.anime-section-name Video - //- .anime-trailer.video-container - //- iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen") + //- h3.anime-section-name Ratings + //- .anime-rating-categories + //- .anime-rating-category(title=toString(anime.Rating.Overall)) + //- if anime.Status == "upcoming" + //- .anime-rating-category-name Hype + //- else + //- .anime-rating-category-name Overall + //- Rating(anime.Rating.Overall, user) + //- .anime-rating-category(title=toString(anime.Rating.Story)) + //- .anime-rating-category-name Story + //- Rating(anime.Rating.Story, user) + //- .anime-rating-category(title=toString(anime.Rating.Visuals)) + //- .anime-rating-category-name Visuals + //- Rating(anime.Rating.Visuals, user) + //- .anime-rating-category(title=toString(anime.Rating.Soundtrack)) + //- .anime-rating-category-name Soundtrack + //- Rating(anime.Rating.Soundtrack, user) - //- h3.anime-section-name Popularity - //- .anime-rating-categories - //- .anime-rating-category - //- .anime-rating-category-name Watching - //- .anime-rating= anime.Popularity.Watching - //- .anime-rating-category - //- .anime-rating-category-name Completed - //- .anime-rating= anime.Popularity.Completed - //- .anime-rating-category - //- .anime-rating-category-name Planned - //- .anime-rating= anime.Popularity.Planned - //- .anime-rating-category - //- .anime-rating-category-name Hold - //- .anime-rating= anime.Popularity.Hold - //- .anime-rating-category - //- .anime-rating-category-name Dropped - //- .anime-rating= anime.Popularity.Dropped - - //- //- h3.anime-section-name Reviews - //- //- p Coming soon. + //- if len(friends) > 0 + //- h3.anime-section-name Friends + + //- .anime-friends + //- .user-avatars + //- each friend in friends + //- if friend.Nick != "" + //- if friend.IsActive() + //- .mountable + //- FriendEntry(friend, listItems) + //- else + //- .mountable + //- .inactive-user + //- FriendEntry(friend, listItems) - //- h3.anime-section-name Links - //- .light-button-group - //- //- if anime.Links != nil - //- //- each link in anime.Links - //- //- a.light-button(href=link.URL, target="_blank") - //- //- Icon("external-link") - //- //- span= link.Title - //- a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener") - //- Icon("external-link") - //- span Kitsu + //- if anime.Relations() != nil && len(anime.Relations().Items) > 0 + //- h3.anime-section-name Relations + //- .anime-relations + //- each relation in anime.Relations().Items + //- a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user)) + //- img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user)) + //- .anime-relation-type= relation.HumanReadableType() + //- .anime-relation-year + //- if relation.Anime().StartDate != "" + //- span= relation.Anime().StartDate[:4] + + //- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != "" + //- h3.anime-section-name Video + //- .anime-trailer.video-container + //- iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen") + + //- h3.anime-section-name Popularity + //- .anime-rating-categories + //- .anime-rating-category + //- .anime-rating-category-name Watching + //- .anime-rating= anime.Popularity.Watching + //- .anime-rating-category + //- .anime-rating-category-name Completed + //- .anime-rating= anime.Popularity.Completed + //- .anime-rating-category + //- .anime-rating-category-name Planned + //- .anime-rating= anime.Popularity.Planned + //- .anime-rating-category + //- .anime-rating-category-name Hold + //- .anime-rating= anime.Popularity.Hold + //- .anime-rating-category + //- .anime-rating-category-name Dropped + //- .anime-rating= anime.Popularity.Dropped - //- each mapping in anime.Mappings - //- a.light-button(href=mapping.Link(), target="_blank", rel="noopener") - //- Icon("external-link") - //- span= mapping.Name() + //- //- h3.anime-section-name Reviews + //- //- p Coming soon. - //- .footer - //- span Powered by Kitsu. + //- h3.anime-section-name Links + //- .light-button-group + //- //- if anime.Links != nil + //- //- each link in anime.Links + //- //- a.light-button(href=link.URL, target="_blank") + //- //- Icon("external-link") + //- //- span= link.Title + //- a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener") + //- Icon("external-link") + //- span Kitsu + + //- each mapping in anime.Mappings + //- a.light-button(href=mapping.Link(), target="_blank", rel="noopener") + //- Icon("external-link") + //- span= mapping.Name() + + //- .footer + //- span Powered by Kitsu. component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem) CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating") diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 7e2f260f..b3f69819 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -1,9 +1,20 @@ -.anime-header - horizontal +.anime + max-width 1100px + margin 0 auto -< 800px +.anime-header + vertical + +.anime-title + text-align center + margin-bottom 0.5rem + +> 800px .anime-header - vertical + horizontal + + .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 @@ -30,7 +41,10 @@ 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 diff --git a/pages/settings/settings.scarlet b/pages/settings/settings.scarlet index 5edda9ce..5425717f 100644 --- a/pages/settings/settings.scarlet +++ b/pages/settings/settings.scarlet @@ -1,3 +1,6 @@ +.settings + horizontal-wrap-center + .widget-section > button, .widget-section > .button margin-bottom 1rem diff --git a/scripts/Actions/Diff.ts b/scripts/Actions/Diff.ts index 66e35c81..b3213edc 100644 --- a/scripts/Actions/Diff.ts +++ b/scripts/Actions/Diff.ts @@ -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) } \ No newline at end of file diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 46c2bc33..f669dd98 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -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)) diff --git a/styles/headers.scarlet b/styles/headers.scarlet index 5842d2cf..8dd648f6 100644 --- a/styles/headers.scarlet +++ b/styles/headers.scarlet @@ -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 diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index b3a3bf96..0fdfacb0 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -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 diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet index f12ae59e..f328ed9d 100644 --- a/styles/include/dark.scarlet +++ b/styles/include/dark.scarlet @@ -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 \ No newline at end of file