Redesign

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

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)
 	}

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
 

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

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])
+					.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

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

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

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)

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-background = hsla(0, 0%, 0%, 0.1)
-tab-active-background = white
+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)

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
+		background-color tab-active-background
-		color theme-white
+		color tab-active-color
+		text-shadow tab-active-text-shadow
 
 	:first-child
 		border-left ui-border

styles/video.scarlet

@@ -1,11 +1,10 @@
-// iframe
+video-padding = 56.25%
-// 	min-height 200px
 
 .video-container
 	position relative
 	width 100%
 	height 0
-	padding-bottom 56.25%
+	padding-bottom video-padding
 	border-radius ui-element-border-radius
 	overflow hidden