web/notify.moe
Code Issues Pull Requests Activity

Various design improvements

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layout/sidebar/audioplayer.pixy
View File

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

26
mixins/AMV.pixy
View File

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

32
mixins/Quote.pixy
View File

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

12
mixins/SoundTrack.pixy
View File

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

2
pages/amv/amv.scarlet
View File

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

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

17
pages/anime/anime.pixy
View File

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

8
pages/anime/anime.scarlet
View File

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

6
pages/anime/character.scarlet
View File

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

24
pages/anime/episode.scarlet → pages/anime/episodes.scarlet
View File

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

4
pages/anime/genres.scarlet
View File

@ -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
justify-content flex-start
margin-bottom 0

2
pages/anime/tracks.pixy
View File

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

2
pages/editlog/editlog.pixy
View File

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

2
pages/quotes/quotes.pixy
View File

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

11
pages/quotes/quotes.scarlet
View File

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

9
pages/soundtracks/soundtracks.scarlet
View File

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

1
styles/mixins/media-footer.scarlet
View File

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

2
styles/tip.scarlet
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-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()
}