Various design improvements

layout/sidebar/audioplayer.pixy

@@ -7,17 +7,17 @@ component AudioPlayer
 		a#audio-player-track-title(href="")
 
 		#audio-player-controls
-			button#audio-player-prev.audio-player-side-button.action(data-action="playPreviousTrack", data-trigger="click")
+			button#audio-player-prev.audio-player-side-button.action(data-action="playPreviousTrack", data-trigger="click", aria-label="Previous track")
 				RawIcon("step-backward")
 
 			.audio-player-play-pause-container
-				button#audio-player-play.action(data-action="resumeAudio", data-trigger="click")
+				button#audio-player-play.action(data-action="resumeAudio", data-trigger="click", aria-label="Play")
 					RawIcon("play")
 				
-				button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click")
+				button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click", aria-label="Pause")
 					RawIcon("pause")
 
-			button#audio-player-next.audio-player-side-button.action(data-action="playNextTrack", data-trigger="click")
+			button#audio-player-next.audio-player-side-button.action(data-action="playNextTrack", data-trigger="click", aria-label="Next track")
 				RawIcon("step-forward")
 		
 		input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50")

mixins/AMV.pixy

@@ -1,11 +1,18 @@
 component AMV(amv *arn.AMV, user *arn.User)
 	.amv.mountable
-		.video-container
+		AMVVideo(amv)
-			video.video.lazy(controls="controls", controlsList="nodownload")
-				source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
-		
 		AMVFooter(amv, user)
 
+component AMVMini(amv *arn.AMV, user *arn.User)
+	.amv.mountable
+		AMVVideo(amv)
+		AMVMiniFooter(amv, user)
+
+component AMVVideo(amv *arn.AMV)
+	.video-container
+		video.video.lazy(controls="controls", controlsList="nodownload")
+			source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
+
 component AMVFooter(amv *arn.AMV, user *arn.User)
 	.amv-footer
 		if amv.Title.ByUser(user) == ""
@@ -13,6 +20,13 @@ component AMVFooter(amv *arn.AMV, user *arn.User)
 		else
 			a(href=amv.Link())= amv.Title.ByUser(user)
 		span  posted 
-		span.utc-date(data-date=amv.Created)
+		span.utc-date.no-tip(data-date=amv.Created)
 		span  by 
 		a(href=amv.Creator().Link())= amv.Creator().Nick + " "
+
+component AMVMiniFooter(amv *arn.AMV, user *arn.User)
+	.amv-footer
+		if amv.Title.ByUser(user) == ""
+			a(href=amv.Link() + "/edit") untitled
+		else
+			a(href=amv.Link())= amv.Title.ByUser(user)

mixins/Quote.pixy

@@ -3,14 +3,38 @@ component Quote(quote *arn.Quote)
 		QuoteContent(quote)
 		QuoteFooter(quote)
 
+component QuotePreview(quote *arn.Quote)
+	.quote.mountable
+		QuoteContentPreview(quote)
+		QuoteFooter(quote)
+
 component QuoteContent(quote *arn.Quote)
 	.quote-content
 		a.quotation(href=quote.Link())
-			blockquote!= markdown.Render(quote.Text.English)
+			QuoteText(quote)
 		
-		if quote.CharacterID != "" && quote.Character() != nil
+		QuoteCharacter(quote)
-			footer.quote-character
+
-				CharacterSmall(quote.Character())
+component QuoteContentPreview(quote *arn.Quote)
+	.quote-content
+		a.quotation(href=quote.Link())
+			QuoteTextPreview(quote)
+		
+		QuoteCharacter(quote)
+
+component QuoteText(quote *arn.Quote)
+	blockquote!= utils.RenderQuoteText(quote.Text.English)
+
+component QuoteCharacter(quote *arn.Quote)
+	if quote.CharacterID != "" && quote.Character() != nil
+		footer.quote-character
+			CharacterSmall(quote.Character())
+
+component QuoteTextPreview(quote *arn.Quote)
+	if len(quote.Text.English) > 170
+		blockquote!= utils.RenderQuoteText(quote.Text.English[:167] + "...")
+	else
+		blockquote!= utils.RenderQuoteText(quote.Text.English)
 
 component QuoteFooter(quote *arn.Quote)
 	.quote-footer

mixins/SoundTrack.pixy

@@ -3,6 +3,11 @@ component SoundTrack(track *arn.SoundTrack)
 		SoundTrackContent(track)
 		SoundTrackFooter(track)
 
+component SoundTrackMini(track *arn.SoundTrack)
+	.soundtrack.mountable(id=track.ID)
+		SoundTrackContent(track)
+		SoundTrackMiniFooter(track)
+
 component SoundTrackContent(track *arn.SoundTrack)
 	.soundtrack-content
 		if track.MainAnime() != nil
@@ -37,5 +42,12 @@ component SoundTrackFooter(track *arn.SoundTrack)
 		span  by 
 		a(href=track.Creator().Link())= track.Creator().Nick + " "
 
+component SoundTrackMiniFooter(track *arn.SoundTrack)
+	.soundtrack-footer
+		if track.Title.ByUser(nil) == ""
+			a(href=track.Link() + "/edit") untitled
+		else
+			a(href=track.Link())= track.Title.ByUser(nil)
+
 component ExternalMedia(media *arn.ExternalMedia)
 	iframe.lazy(data-src=media.EmbedLink(), allowfullscreen="allowfullscreen")

pages/amv/amv.scarlet

@@ -2,10 +2,10 @@ const amv-large-width = 854px
 
 .amvs
 	vertical
-	margin-top 1rem
 
 .amv
 	width 100%
+	margin calc(content-padding / 2) 0
 
 	.video-container
 		box-shadow shadow-medium

pages/anime/amvs.pixy

@@ -0,0 +1,16 @@
+component AnimeAMVs(anime *arn.Anime, amvs []*arn.AMV, amvAppearances []*arn.AMV, user *arn.User)
+	if len(amvs) > 0
+		section.anime-section.mountable
+			h3.anime-section-name AMVs
+
+			.anime-amvs
+				each amv in amvs
+					AMVMini(amv, user)
+	
+	if len(amvAppearances) > 0
+		section.anime-section.mountable
+			h3.anime-section-name Appears in AMVs
+
+			.anime-amvs
+				each amv in amvAppearances
+					AMVMini(amv, user)

pages/anime/amvs.scarlet

@@ -0,0 +1,2 @@
+.anime-amvs
+	horizontal-wrap

pages/anime/anime.pixy

@@ -31,23 +31,6 @@ component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks
 	AnimeAMVs(anime, amvs, amvAppearances, user)
 	AnimeEpisodes(anime, episodes, user, false)
 
-component AnimeAMVs(anime *arn.Anime, amvs []*arn.AMV, amvAppearances []*arn.AMV, user *arn.User)
-	if len(amvs) > 0
-		section.anime-section.mountable
-			h3.anime-section-name AMVs
-
-			.amvs
-				each amv in amvs
-					AMV(amv, user)
-	
-	if len(amvAppearances) > 0
-		section.anime-section.mountable
-			h3.anime-section-name Appears in AMVs
-
-			.amvs
-				each amv in amvAppearances
-					AMV(amv, user)
-
 component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
 	AnimeTrailer(anime)
 	AnimeInformation(anime)

pages/anime/anime.scarlet

@@ -72,10 +72,10 @@
 
 .anime-soundtracks
 	vertical
-	margin-top 1rem
 
-	.soundtrack
+	.soundtrack-content
-		flex-basis auto
+		border-bottom-left-radius ui-element-border-radius !important
+		border-top-left-radius ui-element-border-radius !important
 
 	.soundtrack-anime-image
 		display none
@@ -84,10 +84,10 @@
 	.anime-soundtracks
 		horizontal-wrap
 		justify-content flex-start
-		margin-top 0
 
 		.soundtrack
 			max-width 200px
+			padding 0.5rem
 
 		.soundtrack-content
 			min-height 112px

pages/anime/character.scarlet

@@ -19,12 +19,6 @@
 	width 112px
 	height 112px
 
-// .character-name
-// 	font-size 0.75rem
-// 	color text-color
-// 	opacity 0.5
-// 	transition opacity transition-speed ease
-
 .character-image-small
 	width 56px
 	height 56px

pages/anime/episodes.scarlet

@@ -1,21 +1,16 @@
+const episode-margin = 0.5rem
+
 .episodes
-	vertical
+	horizontal-wrap
-
+	justify-content space-evenly
-> 700px
-	.episodes
-		horizontal-wrap
-		justify-content flex-start
-
-	.episode
-		flex-basis 190px
 
 .episode
 	vertical
 	ui-element
 	button-hover
-	flex 0
+	margin episode-margin
-	margin 0.5rem
 	padding 0.5rem
+	flex-basis calc(50% - episode-margin * 2)
 	overflow hidden
 	color text-color
 	box-shadow shadow-light
@@ -28,6 +23,13 @@
 		&.mounted
 			opacity 0.25 !important
 
+> 700px
+	.episodes
+		justify-content flex-start
+
+	.episode
+		flex-basis 190px
+
 .episode-number
 	display flex
 	justify-content center

pages/anime/genres.scarlet

@@ -1,6 +1,7 @@
 .anime-genres
 	horizontal-wrap
 	justify-content center
+	margin-bottom typography-margin
 
 .anime-genre
 	genre-tag
@@ -8,3 +9,4 @@
 > 800px
 	.anime-genres
 		justify-content flex-start
+		margin-bottom 0

pages/anime/tracks.pixy

@@ -10,4 +10,4 @@ component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User
 
 			.soundtracks.anime-soundtracks
 				each track in tracks
-					SoundTrack(track)
+					SoundTrackMini(track)

pages/editlog/editlog.pixy

@@ -26,7 +26,7 @@ component EditLog(entries []*arn.EditLogEntry, user *arn.User)
 component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
 	each entry in entries
 		.edit-log-entry.mountable
-			.edit-log-icon(title=entry.Action)
+			.edit-log-icon.tip(aria-label=entry.ActionHumanReadable())
 				if entry.Action == "create"
 					.edit-log-create
 						RawIcon("plus")

pages/quotes/quotes.pixy

@@ -23,7 +23,7 @@ component Quotes(quotes []*arn.Quote, nextIndex int, user *arn.User)
 
 component QuotesScrollable(quotes []*arn.Quote, user *arn.User)
 	each quote in quotes
-		Quote(quote)
+		QuotePreview(quote)
 
 component QuotesTabs
 	.tabs

pages/quotes/quotes.scarlet

@@ -1,3 +1,5 @@
+const quote-margin = 1rem
+
 .quotes
 	horizontal-wrap
 	justify-content space-around
@@ -6,7 +8,11 @@
 	vertical
 	flex 1
 	flex-basis 500px
-	padding 1rem
+	margin quote-margin 0
+
+> 500px
+	.quote
+		margin quote-margin
 
 .quote-content
 	vertical
@@ -14,6 +20,9 @@
 	border-left 5px solid quote-side-border-color !important
 	box-shadow shadow-light
 
+.quote-line
+	// ...
+
 .quote-character
 	horizontal
 	align-self flex-end

pages/soundtracks/soundtracks.scarlet

@@ -1,3 +1,5 @@
+const soundtrack-margin = 1rem
+
 .soundtracks
 	horizontal-wrap
 	justify-content space-around
@@ -6,13 +8,18 @@
 	vertical
 	flex 1
 	flex-basis 500px
-	padding 1rem
+	margin soundtrack-margin 0
+
+> 500px
+	.soundtrack
+		margin soundtrack-margin
 
 .soundtrack-content
 	horizontal
 	border-radius ui-element-border-radius
 	box-shadow shadow-light
 	min-height 200px
+	overflow hidden
 
 	iframe
 		width 100%

styles/mixins/media-footer.scarlet

@@ -1,6 +1,5 @@
 mixin media-footer
 	text-align center
-	margin-bottom 1rem
 	margin-top 0.4rem
 	font-size 0.9em
 

styles/tip.scarlet

@@ -1,4 +1,4 @@
-const tip-opacity = 0.94
+const tip-opacity = 0.97
 const tip-transform-hidden = rotate(0.02deg) translateX(-50%) translateY(-80%)
 const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
 

utils/RenderQuoteText.go

@@ -0,0 +1,28 @@
+package utils
+
+import (
+	"bytes"
+	"html"
+	"strings"
+)
+
+// RenderQuoteText renders the given quote text.
+func RenderQuoteText(text string) string {
+	buffer := bytes.Buffer{}
+	buffer.WriteString("<p>")
+
+	lines := strings.Split(text, "\n")
+
+	for index, line := range lines {
+		buffer.WriteString("<span class='quote-line'>")
+		buffer.WriteString(html.EscapeString(line))
+		buffer.WriteString("</span>")
+
+		if index != len(lines)-1 {
+			buffer.WriteString("<br>")
+		}
+	}
+
+	buffer.WriteString("</p>")
+	return buffer.String()
+}