Redesign
This commit is contained in:
parent
b12c4130ba
commit
28da13e8f0
@ -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
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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])
|
||||
.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
|
||||
@ -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
|
||||
|
||||
@ -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")
|
||||
@ -114,6 +96,24 @@ component Settings(user *arn.User)
|
||||
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
|
||||
Icon("picture-o")
|
||||
@ -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")
|
||||
@ -159,22 +174,6 @@ component Settings(user *arn.User)
|
||||
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
|
||||
//- Icon("cogs")
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user