Various design improvements
This commit is contained in:
parent
0a83c00c78
commit
fc493fc567
@ -7,17 +7,17 @@ component AudioPlayer
|
|||||||
a#audio-player-track-title(href="")
|
a#audio-player-track-title(href="")
|
||||||
|
|
||||||
#audio-player-controls
|
#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")
|
RawIcon("step-backward")
|
||||||
|
|
||||||
.audio-player-play-pause-container
|
.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")
|
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")
|
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")
|
RawIcon("step-forward")
|
||||||
|
|
||||||
input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50")
|
input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50")
|
@ -1,11 +1,18 @@
|
|||||||
component AMV(amv *arn.AMV, user *arn.User)
|
component AMV(amv *arn.AMV, user *arn.User)
|
||||||
.amv.mountable
|
.amv.mountable
|
||||||
|
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-container
|
||||||
video.video.lazy(controls="controls", controlsList="nodownload")
|
video.video.lazy(controls="controls", controlsList="nodownload")
|
||||||
source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
|
source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
|
||||||
|
|
||||||
AMVFooter(amv, user)
|
|
||||||
|
|
||||||
component AMVFooter(amv *arn.AMV, user *arn.User)
|
component AMVFooter(amv *arn.AMV, user *arn.User)
|
||||||
.amv-footer
|
.amv-footer
|
||||||
if amv.Title.ByUser(user) == ""
|
if amv.Title.ByUser(user) == ""
|
||||||
@ -13,6 +20,13 @@ component AMVFooter(amv *arn.AMV, user *arn.User)
|
|||||||
else
|
else
|
||||||
a(href=amv.Link())= amv.Title.ByUser(user)
|
a(href=amv.Link())= amv.Title.ByUser(user)
|
||||||
span posted
|
span posted
|
||||||
span.utc-date(data-date=amv.Created)
|
span.utc-date.no-tip(data-date=amv.Created)
|
||||||
span by
|
span by
|
||||||
a(href=amv.Creator().Link())= amv.Creator().Nick + " "
|
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)
|
@ -3,15 +3,39 @@ component Quote(quote *arn.Quote)
|
|||||||
QuoteContent(quote)
|
QuoteContent(quote)
|
||||||
QuoteFooter(quote)
|
QuoteFooter(quote)
|
||||||
|
|
||||||
|
component QuotePreview(quote *arn.Quote)
|
||||||
|
.quote.mountable
|
||||||
|
QuoteContentPreview(quote)
|
||||||
|
QuoteFooter(quote)
|
||||||
|
|
||||||
component QuoteContent(quote *arn.Quote)
|
component QuoteContent(quote *arn.Quote)
|
||||||
.quote-content
|
.quote-content
|
||||||
a.quotation(href=quote.Link())
|
a.quotation(href=quote.Link())
|
||||||
blockquote!= markdown.Render(quote.Text.English)
|
QuoteText(quote)
|
||||||
|
|
||||||
|
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
|
if quote.CharacterID != "" && quote.Character() != nil
|
||||||
footer.quote-character
|
footer.quote-character
|
||||||
CharacterSmall(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)
|
component QuoteFooter(quote *arn.Quote)
|
||||||
.quote-footer
|
.quote-footer
|
||||||
span posted
|
span posted
|
||||||
|
@ -3,6 +3,11 @@ component SoundTrack(track *arn.SoundTrack)
|
|||||||
SoundTrackContent(track)
|
SoundTrackContent(track)
|
||||||
SoundTrackFooter(track)
|
SoundTrackFooter(track)
|
||||||
|
|
||||||
|
component SoundTrackMini(track *arn.SoundTrack)
|
||||||
|
.soundtrack.mountable(id=track.ID)
|
||||||
|
SoundTrackContent(track)
|
||||||
|
SoundTrackMiniFooter(track)
|
||||||
|
|
||||||
component SoundTrackContent(track *arn.SoundTrack)
|
component SoundTrackContent(track *arn.SoundTrack)
|
||||||
.soundtrack-content
|
.soundtrack-content
|
||||||
if track.MainAnime() != nil
|
if track.MainAnime() != nil
|
||||||
@ -37,5 +42,12 @@ component SoundTrackFooter(track *arn.SoundTrack)
|
|||||||
span by
|
span by
|
||||||
a(href=track.Creator().Link())= track.Creator().Nick + " "
|
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)
|
component ExternalMedia(media *arn.ExternalMedia)
|
||||||
iframe.lazy(data-src=media.EmbedLink(), allowfullscreen="allowfullscreen")
|
iframe.lazy(data-src=media.EmbedLink(), allowfullscreen="allowfullscreen")
|
@ -2,10 +2,10 @@ const amv-large-width = 854px
|
|||||||
|
|
||||||
.amvs
|
.amvs
|
||||||
vertical
|
vertical
|
||||||
margin-top 1rem
|
|
||||||
|
|
||||||
.amv
|
.amv
|
||||||
width 100%
|
width 100%
|
||||||
|
margin calc(content-padding / 2) 0
|
||||||
|
|
||||||
.video-container
|
.video-container
|
||||||
box-shadow shadow-medium
|
box-shadow shadow-medium
|
||||||
|
16
pages/anime/amvs.pixy
Normal file
16
pages/anime/amvs.pixy
Normal file
@ -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)
|
2
pages/anime/amvs.scarlet
Normal file
2
pages/anime/amvs.scarlet
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
.anime-amvs
|
||||||
|
horizontal-wrap
|
@ -31,23 +31,6 @@ component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks
|
|||||||
AnimeAMVs(anime, amvs, amvAppearances, user)
|
AnimeAMVs(anime, amvs, amvAppearances, user)
|
||||||
AnimeEpisodes(anime, episodes, user, false)
|
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)
|
component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
|
||||||
AnimeTrailer(anime)
|
AnimeTrailer(anime)
|
||||||
AnimeInformation(anime)
|
AnimeInformation(anime)
|
||||||
|
@ -72,10 +72,10 @@
|
|||||||
|
|
||||||
.anime-soundtracks
|
.anime-soundtracks
|
||||||
vertical
|
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
|
.soundtrack-anime-image
|
||||||
display none
|
display none
|
||||||
@ -84,10 +84,10 @@
|
|||||||
.anime-soundtracks
|
.anime-soundtracks
|
||||||
horizontal-wrap
|
horizontal-wrap
|
||||||
justify-content flex-start
|
justify-content flex-start
|
||||||
margin-top 0
|
|
||||||
|
|
||||||
.soundtrack
|
.soundtrack
|
||||||
max-width 200px
|
max-width 200px
|
||||||
|
padding 0.5rem
|
||||||
|
|
||||||
.soundtrack-content
|
.soundtrack-content
|
||||||
min-height 112px
|
min-height 112px
|
||||||
|
@ -19,12 +19,6 @@
|
|||||||
width 112px
|
width 112px
|
||||||
height 112px
|
height 112px
|
||||||
|
|
||||||
// .character-name
|
|
||||||
// font-size 0.75rem
|
|
||||||
// color text-color
|
|
||||||
// opacity 0.5
|
|
||||||
// transition opacity transition-speed ease
|
|
||||||
|
|
||||||
.character-image-small
|
.character-image-small
|
||||||
width 56px
|
width 56px
|
||||||
height 56px
|
height 56px
|
@ -1,21 +1,16 @@
|
|||||||
.episodes
|
const episode-margin = 0.5rem
|
||||||
vertical
|
|
||||||
|
|
||||||
> 700px
|
|
||||||
.episodes
|
.episodes
|
||||||
horizontal-wrap
|
horizontal-wrap
|
||||||
justify-content flex-start
|
justify-content space-evenly
|
||||||
|
|
||||||
.episode
|
|
||||||
flex-basis 190px
|
|
||||||
|
|
||||||
.episode
|
.episode
|
||||||
vertical
|
vertical
|
||||||
ui-element
|
ui-element
|
||||||
button-hover
|
button-hover
|
||||||
flex 0
|
margin episode-margin
|
||||||
margin 0.5rem
|
|
||||||
padding 0.5rem
|
padding 0.5rem
|
||||||
|
flex-basis calc(50% - episode-margin * 2)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
color text-color
|
color text-color
|
||||||
box-shadow shadow-light
|
box-shadow shadow-light
|
||||||
@ -28,6 +23,13 @@
|
|||||||
&.mounted
|
&.mounted
|
||||||
opacity 0.25 !important
|
opacity 0.25 !important
|
||||||
|
|
||||||
|
> 700px
|
||||||
|
.episodes
|
||||||
|
justify-content flex-start
|
||||||
|
|
||||||
|
.episode
|
||||||
|
flex-basis 190px
|
||||||
|
|
||||||
.episode-number
|
.episode-number
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
@ -1,6 +1,7 @@
|
|||||||
.anime-genres
|
.anime-genres
|
||||||
horizontal-wrap
|
horizontal-wrap
|
||||||
justify-content center
|
justify-content center
|
||||||
|
margin-bottom typography-margin
|
||||||
|
|
||||||
.anime-genre
|
.anime-genre
|
||||||
genre-tag
|
genre-tag
|
||||||
@ -8,3 +9,4 @@
|
|||||||
> 800px
|
> 800px
|
||||||
.anime-genres
|
.anime-genres
|
||||||
justify-content flex-start
|
justify-content flex-start
|
||||||
|
margin-bottom 0
|
@ -10,4 +10,4 @@ component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User
|
|||||||
|
|
||||||
.soundtracks.anime-soundtracks
|
.soundtracks.anime-soundtracks
|
||||||
each track in tracks
|
each track in tracks
|
||||||
SoundTrack(track)
|
SoundTrackMini(track)
|
@ -26,7 +26,7 @@ component EditLog(entries []*arn.EditLogEntry, user *arn.User)
|
|||||||
component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
|
component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
|
||||||
each entry in entries
|
each entry in entries
|
||||||
.edit-log-entry.mountable
|
.edit-log-entry.mountable
|
||||||
.edit-log-icon(title=entry.Action)
|
.edit-log-icon.tip(aria-label=entry.ActionHumanReadable())
|
||||||
if entry.Action == "create"
|
if entry.Action == "create"
|
||||||
.edit-log-create
|
.edit-log-create
|
||||||
RawIcon("plus")
|
RawIcon("plus")
|
||||||
|
@ -23,7 +23,7 @@ component Quotes(quotes []*arn.Quote, nextIndex int, user *arn.User)
|
|||||||
|
|
||||||
component QuotesScrollable(quotes []*arn.Quote, user *arn.User)
|
component QuotesScrollable(quotes []*arn.Quote, user *arn.User)
|
||||||
each quote in quotes
|
each quote in quotes
|
||||||
Quote(quote)
|
QuotePreview(quote)
|
||||||
|
|
||||||
component QuotesTabs
|
component QuotesTabs
|
||||||
.tabs
|
.tabs
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
const quote-margin = 1rem
|
||||||
|
|
||||||
.quotes
|
.quotes
|
||||||
horizontal-wrap
|
horizontal-wrap
|
||||||
justify-content space-around
|
justify-content space-around
|
||||||
@ -6,7 +8,11 @@
|
|||||||
vertical
|
vertical
|
||||||
flex 1
|
flex 1
|
||||||
flex-basis 500px
|
flex-basis 500px
|
||||||
padding 1rem
|
margin quote-margin 0
|
||||||
|
|
||||||
|
> 500px
|
||||||
|
.quote
|
||||||
|
margin quote-margin
|
||||||
|
|
||||||
.quote-content
|
.quote-content
|
||||||
vertical
|
vertical
|
||||||
@ -14,6 +20,9 @@
|
|||||||
border-left 5px solid quote-side-border-color !important
|
border-left 5px solid quote-side-border-color !important
|
||||||
box-shadow shadow-light
|
box-shadow shadow-light
|
||||||
|
|
||||||
|
.quote-line
|
||||||
|
// ...
|
||||||
|
|
||||||
.quote-character
|
.quote-character
|
||||||
horizontal
|
horizontal
|
||||||
align-self flex-end
|
align-self flex-end
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
const soundtrack-margin = 1rem
|
||||||
|
|
||||||
.soundtracks
|
.soundtracks
|
||||||
horizontal-wrap
|
horizontal-wrap
|
||||||
justify-content space-around
|
justify-content space-around
|
||||||
@ -6,13 +8,18 @@
|
|||||||
vertical
|
vertical
|
||||||
flex 1
|
flex 1
|
||||||
flex-basis 500px
|
flex-basis 500px
|
||||||
padding 1rem
|
margin soundtrack-margin 0
|
||||||
|
|
||||||
|
> 500px
|
||||||
|
.soundtrack
|
||||||
|
margin soundtrack-margin
|
||||||
|
|
||||||
.soundtrack-content
|
.soundtrack-content
|
||||||
horizontal
|
horizontal
|
||||||
border-radius ui-element-border-radius
|
border-radius ui-element-border-radius
|
||||||
box-shadow shadow-light
|
box-shadow shadow-light
|
||||||
min-height 200px
|
min-height 200px
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
iframe
|
iframe
|
||||||
width 100%
|
width 100%
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
mixin media-footer
|
mixin media-footer
|
||||||
text-align center
|
text-align center
|
||||||
margin-bottom 1rem
|
|
||||||
margin-top 0.4rem
|
margin-top 0.4rem
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
|
|
||||||
|
@ -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-hidden = rotate(0.02deg) translateX(-50%) translateY(-80%)
|
||||||
const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
|
const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
|
||||||
|
|
||||||
|
28
utils/RenderQuoteText.go
Normal file
28
utils/RenderQuoteText.go
Normal file
@ -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()
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user