diff --git a/layout/sidebar/audioplayer.pixy b/layout/sidebar/audioplayer.pixy index 65d5667e..50e6d84f 100644 --- a/layout/sidebar/audioplayer.pixy +++ b/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") \ No newline at end of file diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy index 1882b3fa..9986fa4e 100644 --- a/mixins/AMV.pixy +++ b/mixins/AMV.pixy @@ -1,11 +1,18 @@ component AMV(amv *arn.AMV, user *arn.User) .amv.mountable - .video-container - video.video.lazy(controls="controls", controlsList="nodownload") - source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm") - + AMVVideo(amv) 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 + " " \ No newline at end of file + 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) \ No newline at end of file diff --git a/mixins/Quote.pixy b/mixins/Quote.pixy index b3c572d8..b0eb4eea 100644 --- a/mixins/Quote.pixy +++ b/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 - footer.quote-character - CharacterSmall(quote.Character()) + QuoteCharacter(quote) + +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 diff --git a/mixins/SoundTrack.pixy b/mixins/SoundTrack.pixy index 4e5c61d9..abfff24b 100644 --- a/mixins/SoundTrack.pixy +++ b/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") \ No newline at end of file diff --git a/pages/amv/amv.scarlet b/pages/amv/amv.scarlet index afd70754..f45fbb65 100644 --- a/pages/amv/amv.scarlet +++ b/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 diff --git a/pages/anime/amvs.pixy b/pages/anime/amvs.pixy new file mode 100644 index 00000000..6fb34a70 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/pages/anime/amvs.scarlet b/pages/anime/amvs.scarlet new file mode 100644 index 00000000..48f541c7 --- /dev/null +++ b/pages/anime/amvs.scarlet @@ -0,0 +1,2 @@ +.anime-amvs + horizontal-wrap \ No newline at end of file diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index dbb2c25f..dcf9607b 100644 --- a/pages/anime/anime.pixy +++ b/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) diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index efbe0783..bdf86308 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -72,10 +72,10 @@ .anime-soundtracks vertical - margin-top 1rem - .soundtrack - flex-basis auto + .soundtrack-content + 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 diff --git a/pages/anime/character.scarlet b/pages/anime/character.scarlet index 48bb8f8f..05d06f71 100644 --- a/pages/anime/character.scarlet +++ b/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 \ No newline at end of file diff --git a/pages/anime/episode.scarlet b/pages/anime/episodes.scarlet similarity index 82% rename from pages/anime/episode.scarlet rename to pages/anime/episodes.scarlet index f22f4bcf..8db0f59e 100644 --- a/pages/anime/episode.scarlet +++ b/pages/anime/episodes.scarlet @@ -1,21 +1,16 @@ +const episode-margin = 0.5rem + .episodes - vertical - -> 700px - .episodes - horizontal-wrap - justify-content flex-start - - .episode - flex-basis 190px + horizontal-wrap + justify-content space-evenly .episode vertical ui-element button-hover - flex 0 - margin 0.5rem + margin episode-margin 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 diff --git a/pages/anime/genres.scarlet b/pages/anime/genres.scarlet index 9559894b..23ea5cf9 100644 --- a/pages/anime/genres.scarlet +++ b/pages/anime/genres.scarlet @@ -1,10 +1,12 @@ .anime-genres horizontal-wrap justify-content center + margin-bottom typography-margin .anime-genre genre-tag > 800px .anime-genres - justify-content flex-start \ No newline at end of file + justify-content flex-start + margin-bottom 0 \ No newline at end of file diff --git a/pages/anime/tracks.pixy b/pages/anime/tracks.pixy index 1939acb0..5508217c 100644 --- a/pages/anime/tracks.pixy +++ b/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) \ No newline at end of file + SoundTrackMini(track) \ No newline at end of file diff --git a/pages/editlog/editlog.pixy b/pages/editlog/editlog.pixy index b2a7cb96..52c54fb0 100644 --- a/pages/editlog/editlog.pixy +++ b/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") diff --git a/pages/quotes/quotes.pixy b/pages/quotes/quotes.pixy index cc3d80c8..f1ee18ac 100644 --- a/pages/quotes/quotes.pixy +++ b/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 diff --git a/pages/quotes/quotes.scarlet b/pages/quotes/quotes.scarlet index f479e833..f74c0d2c 100644 --- a/pages/quotes/quotes.scarlet +++ b/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 diff --git a/pages/soundtracks/soundtracks.scarlet b/pages/soundtracks/soundtracks.scarlet index def40b72..1989476d 100644 --- a/pages/soundtracks/soundtracks.scarlet +++ b/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% diff --git a/styles/mixins/media-footer.scarlet b/styles/mixins/media-footer.scarlet index d7b154e7..2fc42e03 100644 --- a/styles/mixins/media-footer.scarlet +++ b/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 diff --git a/styles/tip.scarlet b/styles/tip.scarlet index ad593843..981b785f 100644 --- a/styles/tip.scarlet +++ b/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%) diff --git a/utils/RenderQuoteText.go b/utils/RenderQuoteText.go new file mode 100644 index 00000000..c32acad6 --- /dev/null +++ b/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("

") + + lines := strings.Split(text, "\n") + + for index, line := range lines { + buffer.WriteString("") + buffer.WriteString(html.EscapeString(line)) + buffer.WriteString("") + + if index != len(lines)-1 { + buffer.WriteString("
") + } + } + + buffer.WriteString("

") + return buffer.String() +}