From 28da13e8f06d39c7e7630f640fb62daccbfc7c28 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 4 Nov 2017 17:11:47 +0100 Subject: [PATCH] Redesign --- layout/sidebar/sidebar.scarlet | 2 +- pages/anime/anime.go | 4 ++ pages/anime/anime.scarlet | 28 ++++++++++++- pages/anime/characters.pixy | 2 +- pages/anime/tracks.pixy | 5 ++- pages/animelist/animelist.scarlet | 5 +++ pages/settings/settings.pixy | 67 +++++++++++++++---------------- styles/include/config.scarlet | 3 ++ styles/include/dark.scarlet | 6 ++- styles/tabs.scarlet | 10 +++-- styles/video.scarlet | 5 +-- 11 files changed, 90 insertions(+), 47 deletions(-) diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index 1a6eba09..08af9c02 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -46,7 +46,7 @@ sidebar-spacing-y = 0.7rem .sidebar-button color tab-active-color background tab-active-background - text-shadow link-hover-text-shadow + text-shadow tab-active-text-shadow background tab-active-background .sidebar-button diff --git a/pages/anime/anime.go b/pages/anime/anime.go index fd1eee5f..71ea06d4 100644 --- a/pages/anime/anime.go +++ b/pages/anime/anime.go @@ -75,6 +75,10 @@ func Get(ctx *aero.Context) string { return !track.IsDraft && len(track.Media) > 0 && arn.Contains(track.Tags, "anime:"+anime.ID) }) + sort.Slice(tracks, func(i, j int) bool { + return tracks[i].Title < tracks[j].Title + }) + if err != nil { return ctx.Error(http.StatusNotFound, "Error fetching soundtracks", err) } diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 274f9e50..17668ebe 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -11,7 +11,7 @@ margin-top 1rem flex-basis 300px -> 1500px +> 1400px .anime horizontal @@ -44,6 +44,32 @@ .anime-info-value text-align right +.anime-soundtracks + vertical + margin-top 1rem + +.anime-soundtrack + vertical + width 100% + margin-bottom 0.5rem + +> 500px + .anime-soundtracks + horizontal-wrap + justify-content flex-start + margin-top 0 + + .anime-soundtrack + max-width 200px + margin calc(content-padding / 2) + +// .anime-soundtracks +// horizontal-wrap + +// .anime-soundtrack +// flex-basis 400px +// padding-bottom video-padding + .anime-section margin-top 1rem diff --git a/pages/anime/characters.pixy b/pages/anime/characters.pixy index 8700c1f4..2cf9174b 100644 --- a/pages/anime/characters.pixy +++ b/pages/anime/characters.pixy @@ -1,7 +1,7 @@ component AnimeCharacters(anime *arn.Anime) //- AnimeTabs(anime) - if len(anime.Characters().Items) > 0 + if anime.Characters() != nil && len(anime.Characters().Items) > 0 .anime-section h3.anime-section-name Characters .characters diff --git a/pages/anime/tracks.pixy b/pages/anime/tracks.pixy index 01449484..72b93e15 100644 --- a/pages/anime/tracks.pixy +++ b/pages/anime/tracks.pixy @@ -6,4 +6,7 @@ component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack) h3.anime-section-name Tracks .anime-soundtracks each track in tracks - ExternalMedia(track.Media[0]) \ No newline at end of file + .anime-soundtrack.mountable(data-mountable-type="track") + .video-container + iframe.video.lazy(data-src=track.Media[0].EmbedLink(), allowfullscreen="allowfullscreen") + a.sound-track-footer.ajax(href=track.Link())= track.Title \ No newline at end of file diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 7c7bc4ca..050fa74e 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -29,6 +29,11 @@ flex 1 clip-long-text + a + color text-color + :hover + color link-hover-color + .anime-list-item-episodes horizontal justify-content flex-end diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index a42c422c..99cee268 100644 --- a/pages/settings/settings.pixy +++ b/pages/settings/settings.pixy @@ -73,24 +73,6 @@ component Settings(user *arn.User) Icon("circle-o") span Not connected - .widget.mountable - h3.widget-title - Icon("download") - span Import - - ImportLists(user) - - .widget.mountable - h3.widget-title - Icon("upload") - span Export - - .widget-section - label JSON: - a.button(href="/api/animelist/" + user.ID) - Icon("upload") - span Export anime list as JSON - .widget.mountable h3.widget-title Icon("puzzle-piece") @@ -113,6 +95,24 @@ component Settings(user *arn.User) a.button(href="https://www.youtube.com/watch?v=opyt4cw0ep8", target="_blank", rel="noopener") Icon("android") span Get the Android App + + .widget.mountable + h3.widget-title + Icon("download") + span Import + + ImportLists(user) + + .widget.mountable + h3.widget-title + Icon("upload") + span Export + + .widget-section + label JSON: + a.button(href="/api/animelist/" + user.ID) + Icon("upload") + span Export anime list as JSON .widget.mountable(data-api="/api/settings/" + user.ID) h3.widget-title @@ -138,6 +138,21 @@ component Settings(user *arn.User) .profile-image-container.avatar-preview img.profile-image.mountable(src=strings.Replace(user.Settings().Avatar.SourceURL, "http://", "https://", 1), alt="Avatar preview") + .widget.mountable(data-api="/api/settings/" + user.ID) + h3.widget-title + Icon("font") + span Formatting + + .widget-section + label(for="TitleLanguage")= "Title language:" + select.widget-ui-element.action(id="TitleLanguage", data-field="TitleLanguage", value=user.Settings().TitleLanguage, title="Language of anime titles", data-action="save", data-trigger="change") + option(value="canonical") Canonical + option(value="english") English + option(value="romaji") Romaji + option(value="japanese") 日本語 + + InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1") + .widget.mountable(data-api="/api/settings/" + user.ID) h3.widget-title Icon("star") @@ -158,22 +173,6 @@ component Settings(user *arn.User) a.button.ajax(href="/shop") Icon("star") span Go PRO - - .widget.mountable(data-api="/api/settings/" + user.ID) - h3.widget-title - Icon("font") - span Formatting - - .widget-section - label(for="TitleLanguage")= "Title language:" - select.widget-ui-element.action(id="TitleLanguage", data-field="TitleLanguage", value=user.Settings().TitleLanguage, title="Language of anime titles", data-action="save", data-trigger="change") - option(value="canonical") Canonical - option(value="english") English - option(value="romaji") Romaji - option(value="japanese") 日本語 - - InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1") - //- .widget.mountable(data-api="/api/settings/" + user.ID) //- h3.widget-title diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 5f8d3be0..2f678be5 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -11,6 +11,7 @@ anime-alternative-title-color = hsla(0, 0%, 0%, 0.5) theme-white = bg-color theme-black = text-color link-hover-text-shadow = none +tab-active-text-shadow = none // UI ui-border-color = rgba(0, 0, 0, 0.1) @@ -30,6 +31,8 @@ input-focus-border-color = rgb(248, 165, 130) // Button button-hover-color = white button-hover-background = link-hover-color +tab-background = rgba(0, 0, 0, 0.02) +tab-hover-background = bg-color tab-active-color = white tab-active-background = hsl(216, 68%, 42%) // tab-active-background = rgb(46, 85, 160) diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet index e02ea6ff..f45c0679 100644 --- a/styles/include/dark.scarlet +++ b/styles/include/dark.scarlet @@ -20,7 +20,9 @@ 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-active-color = bg-color -tab-active-background = white +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) \ No newline at end of file diff --git a/styles/tabs.scarlet b/styles/tabs.scarlet index b64c0ea3..1e17a82d 100644 --- a/styles/tabs.scarlet +++ b/styles/tabs.scarlet @@ -1,21 +1,23 @@ .tab color text-color padding 0.5rem 1rem - background-color rgba(0, 0, 0, 0.02) + background-color tab-background border ui-border border-left none white-space nowrap :hover color text-color - background-color bg-color + background-color tab-hover-background + text-shadow none :active transform none &.active - background tab-active-background - color theme-white + background-color tab-active-background + color tab-active-color + text-shadow tab-active-text-shadow :first-child border-left ui-border diff --git a/styles/video.scarlet b/styles/video.scarlet index 51447e40..5db2e220 100644 --- a/styles/video.scarlet +++ b/styles/video.scarlet @@ -1,11 +1,10 @@ -// iframe -// min-height 200px +video-padding = 56.25% .video-container position relative width 100% height 0 - padding-bottom 56.25% + padding-bottom video-padding border-radius ui-element-border-radius overflow hidden