Various design improvements

This commit is contained in:
Eduard Urbach 2018-04-19 15:04:25 +02:00
parent 0a83c00c78
commit fc493fc567
20 changed files with 153 additions and 61 deletions

View File

@ -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")

View File

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

View File

@ -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

View File

@ -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")

View File

@ -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
View 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
View File

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

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

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

View File

@ -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")

View File

@ -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

View File

@ -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

View File

@ -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%

View File

@ -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

View File

@ -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
View 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()
}