Redesign
This commit is contained in:
parent
8af94d4800
commit
33d7ce593c
@ -44,14 +44,13 @@ sidebar-spacing-y = 0.7rem
|
||||
|
||||
&.active
|
||||
.sidebar-button
|
||||
// background tab-hover-background
|
||||
// color white
|
||||
color link-color
|
||||
color tab-active-color
|
||||
background tab-active-background
|
||||
text-shadow link-hover-text-shadow
|
||||
background tab-active-background
|
||||
|
||||
.sidebar-button
|
||||
horizontal
|
||||
default-transition
|
||||
align-items center
|
||||
padding sidebar-spacing-y 1rem
|
||||
// background ui-background
|
||||
|
||||
@ -1,133 +1,192 @@
|
||||
component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
|
||||
//- AnimeTabs(anime)
|
||||
.anime
|
||||
.anime-header(data-id=anime.ID)
|
||||
if anime.Image.Large != ""
|
||||
.anime-image-container
|
||||
img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user))
|
||||
.anime-main-column
|
||||
AnimeMainColumn(anime, user)
|
||||
.anime-side-column
|
||||
AnimeSideColumn(anime, friends, listItems, user)
|
||||
|
||||
//- if anime.StartDate != ""
|
||||
//- .anime-start-date
|
||||
//- span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
|
||||
//- if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
|
||||
//- span -
|
||||
//- span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
|
||||
|
||||
.space
|
||||
component AnimeMainColumn(anime *arn.Anime, user *arn.User)
|
||||
.anime-header(data-id=anime.ID)
|
||||
if anime.Image.Large != ""
|
||||
.anime-image-container.mountable
|
||||
img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user))
|
||||
|
||||
.anime-info
|
||||
h1.anime-title(title=anime.Type)= anime.Title.ByUser(user)
|
||||
|
||||
h2.anime-alternative-title
|
||||
Japanese(anime.Title.Japanese)
|
||||
|
||||
//- h3.anime-section-name.anime-summary-header Summary
|
||||
p.anime-summary= anime.Summary
|
||||
//- if anime.StartDate != ""
|
||||
//- .anime-start-date
|
||||
//- span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
|
||||
//- if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
|
||||
//- span -
|
||||
//- span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
|
||||
|
||||
if user != nil
|
||||
.buttons.anime-actions
|
||||
if user.Role == "editor" || user.Role == "admin"
|
||||
a.button.ajax(href=anime.Link() + "/edit")
|
||||
Icon("pencil-square-o")
|
||||
span Edit anime
|
||||
.space
|
||||
|
||||
if user.AnimeList().Contains(anime.ID)
|
||||
a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID)
|
||||
Icon("pencil")
|
||||
span Edit in collection
|
||||
else
|
||||
button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID)
|
||||
Icon("plus")
|
||||
span Add to collection
|
||||
.anime-info
|
||||
h1.anime-title.mountable(title=anime.Type)= anime.Title.ByUser(user)
|
||||
|
||||
//- h3.anime-section-name Ratings
|
||||
//- .anime-rating-categories
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Overall))
|
||||
//- if anime.Status == "upcoming"
|
||||
//- .anime-rating-category-name Hype
|
||||
//- else
|
||||
//- .anime-rating-category-name Overall
|
||||
//- Rating(anime.Rating.Overall, user)
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Story))
|
||||
//- .anime-rating-category-name Story
|
||||
//- Rating(anime.Rating.Story, user)
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Visuals))
|
||||
//- .anime-rating-category-name Visuals
|
||||
//- Rating(anime.Rating.Visuals, user)
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Soundtrack))
|
||||
//- .anime-rating-category-name Soundtrack
|
||||
//- Rating(anime.Rating.Soundtrack, user)
|
||||
h2.anime-alternative-title.mountable
|
||||
Japanese(anime.Title.Japanese)
|
||||
|
||||
//- if len(friends) > 0
|
||||
//- h3.anime-section-name Friends
|
||||
|
||||
//- .anime-friends
|
||||
//- .user-avatars
|
||||
//- each friend in friends
|
||||
//- if friend.Nick != ""
|
||||
//- if friend.IsActive()
|
||||
//- .mountable
|
||||
//- FriendEntry(friend, listItems)
|
||||
//- else
|
||||
//- .mountable
|
||||
//- .inactive-user
|
||||
//- FriendEntry(friend, listItems)
|
||||
//- h3.anime-section-name.anime-summary-header Summary
|
||||
p.anime-summary.mountable= anime.Summary
|
||||
|
||||
//- if anime.Relations() != nil && len(anime.Relations().Items) > 0
|
||||
//- h3.anime-section-name Relations
|
||||
//- .anime-relations
|
||||
//- each relation in anime.Relations().Items
|
||||
//- a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
|
||||
//- img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
|
||||
//- .anime-relation-type= relation.HumanReadableType()
|
||||
//- .anime-relation-year
|
||||
//- if relation.Anime().StartDate != ""
|
||||
//- span= relation.Anime().StartDate[:4]
|
||||
//- AnimeTabs(anime)
|
||||
|
||||
if user != nil
|
||||
.buttons.anime-actions
|
||||
if user.Role == "editor" || user.Role == "admin"
|
||||
a.button.ajax(href=anime.Link() + "/edit")
|
||||
Icon("pencil-square-o")
|
||||
span Edit anime
|
||||
|
||||
//- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
|
||||
//- h3.anime-section-name Video
|
||||
//- .anime-trailer.video-container
|
||||
//- iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
|
||||
if user.AnimeList().Contains(anime.ID)
|
||||
a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID)
|
||||
Icon("pencil")
|
||||
span Edit in collection
|
||||
else
|
||||
button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID)
|
||||
Icon("plus")
|
||||
span Add to collection
|
||||
|
||||
//- h3.anime-section-name Popularity
|
||||
//- .anime-rating-categories
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Watching
|
||||
//- .anime-rating= anime.Popularity.Watching
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Completed
|
||||
//- .anime-rating= anime.Popularity.Completed
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Planned
|
||||
//- .anime-rating= anime.Popularity.Planned
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Hold
|
||||
//- .anime-rating= anime.Popularity.Hold
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Dropped
|
||||
//- .anime-rating= anime.Popularity.Dropped
|
||||
//- h3.anime-section-name Ratings
|
||||
//- .anime-rating-categories
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Overall))
|
||||
//- if anime.Status == "upcoming"
|
||||
//- .anime-rating-category-name Hype
|
||||
//- else
|
||||
//- .anime-rating-category-name Overall
|
||||
//- Rating(anime.Rating.Overall, user)
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Story))
|
||||
//- .anime-rating-category-name Story
|
||||
//- Rating(anime.Rating.Story, user)
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Visuals))
|
||||
//- .anime-rating-category-name Visuals
|
||||
//- Rating(anime.Rating.Visuals, user)
|
||||
//- .anime-rating-category(title=toString(anime.Rating.Soundtrack))
|
||||
//- .anime-rating-category-name Soundtrack
|
||||
//- Rating(anime.Rating.Soundtrack, user)
|
||||
|
||||
if anime.Relations() != nil && len(anime.Relations().Items) > 0
|
||||
section.anime-section.mountable
|
||||
h3.anime-section-name Relations
|
||||
.anime-relations
|
||||
each relation in anime.Relations().Items
|
||||
a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
|
||||
img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
|
||||
.anime-relation-type= relation.HumanReadableType()
|
||||
.anime-relation-year
|
||||
if relation.Anime().StartDate != ""
|
||||
span= relation.Anime().StartDate[:4]
|
||||
|
||||
AnimeCharacters(anime)
|
||||
|
||||
//- h3.anime-section-name Popularity
|
||||
//- .anime-rating-categories
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Watching
|
||||
//- .anime-rating= anime.Popularity.Watching
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Completed
|
||||
//- .anime-rating= anime.Popularity.Completed
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Planned
|
||||
//- .anime-rating= anime.Popularity.Planned
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Hold
|
||||
//- .anime-rating= anime.Popularity.Hold
|
||||
//- .anime-rating-category
|
||||
//- .anime-rating-category-name Dropped
|
||||
//- .anime-rating= anime.Popularity.Dropped
|
||||
|
||||
//- //- h3.anime-section-name Reviews
|
||||
//- //- p Coming soon.
|
||||
|
||||
//- h3.anime-section-name Links
|
||||
//- .light-button-group
|
||||
//- //- if anime.Links != nil
|
||||
//- //- each link in anime.Links
|
||||
//- //- a.light-button(href=link.URL, target="_blank")
|
||||
//- //- Icon("external-link")
|
||||
//- //- span= link.Title
|
||||
//- a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
|
||||
//- Icon("external-link")
|
||||
//- span Kitsu
|
||||
|
||||
//- //- h3.anime-section-name Reviews
|
||||
//- //- p Coming soon.
|
||||
//- each mapping in anime.Mappings
|
||||
//- a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
|
||||
//- Icon("external-link")
|
||||
//- span= mapping.Name()
|
||||
|
||||
//- h3.anime-section-name Links
|
||||
//- .light-button-group
|
||||
//- //- if anime.Links != nil
|
||||
//- //- each link in anime.Links
|
||||
//- //- a.light-button(href=link.URL, target="_blank")
|
||||
//- //- Icon("external-link")
|
||||
//- //- span= link.Title
|
||||
//- a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
|
||||
//- Icon("external-link")
|
||||
//- span Kitsu
|
||||
//- .footer
|
||||
//- span Powered by Kitsu.
|
||||
|
||||
component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
|
||||
AnimeTrailer(anime)
|
||||
AnimeInformation(anime)
|
||||
AnimeFriends(friends, listItems)
|
||||
|
||||
component AnimeTrailer(anime *arn.Anime)
|
||||
if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
|
||||
h3.anime-section-name Trailer
|
||||
.anime-trailer.video-container
|
||||
iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
|
||||
|
||||
component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem)
|
||||
if len(friends) > 0
|
||||
section.anime-section.mountable
|
||||
h3.anime-section-name Friends
|
||||
|
||||
//- each mapping in anime.Mappings
|
||||
//- a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
|
||||
//- Icon("external-link")
|
||||
//- span= mapping.Name()
|
||||
.anime-friends
|
||||
.user-avatars
|
||||
each friend in friends
|
||||
if friend.Nick != ""
|
||||
if friend.IsActive()
|
||||
FriendEntry(friend, listItems)
|
||||
else
|
||||
.inactive-user
|
||||
FriendEntry(friend, listItems)
|
||||
|
||||
//- .footer
|
||||
//- span Powered by Kitsu.
|
||||
component AnimeInformation(anime *arn.Anime)
|
||||
section.anime-section.mountable
|
||||
h3.anime-section-name Information
|
||||
table.anime-info-table
|
||||
tr
|
||||
td Type:
|
||||
td= anime.TypeHumanReadable()
|
||||
|
||||
if anime.EpisodeCount != 0
|
||||
tr
|
||||
td Episodes:
|
||||
td= anime.EpisodeCount
|
||||
|
||||
if anime.EpisodeLength != 0
|
||||
tr
|
||||
td Episode length:
|
||||
td= strconv.Itoa(anime.EpisodeLength) + " min."
|
||||
|
||||
tr
|
||||
td Status:
|
||||
td= anime.StatusHumanReadable()
|
||||
|
||||
if anime.StartDate == anime.EndDate && anime.StartDate != "" && anime.EndDate != ""
|
||||
if anime.StartDate != ""
|
||||
tr
|
||||
td Airing date:
|
||||
td= anime.StartDate
|
||||
else
|
||||
if anime.StartDate != ""
|
||||
tr
|
||||
td Start date:
|
||||
td= anime.StartDate
|
||||
|
||||
if anime.EndDate != ""
|
||||
tr
|
||||
td End date:
|
||||
td= anime.EndDate
|
||||
|
||||
if anime.FirstChannel != ""
|
||||
tr
|
||||
td Channel:
|
||||
td= anime.FirstChannel
|
||||
|
||||
component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem)
|
||||
CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating")
|
||||
|
||||
@ -1,6 +1,23 @@
|
||||
.anime
|
||||
max-width 1100px
|
||||
margin 0 auto
|
||||
vertical
|
||||
|
||||
.anime-main-column
|
||||
vertical
|
||||
flex 1
|
||||
|
||||
.anime-side-column
|
||||
vertical
|
||||
margin-left 0
|
||||
margin-top 1rem
|
||||
flex-basis 300px
|
||||
|
||||
> 1500px
|
||||
.anime
|
||||
horizontal
|
||||
|
||||
.anime-side-column
|
||||
margin-left content-padding
|
||||
margin-top 0
|
||||
|
||||
.anime-header
|
||||
vertical
|
||||
@ -16,6 +33,20 @@
|
||||
.anime-title
|
||||
text-align left
|
||||
|
||||
.anime-alternative-title
|
||||
text-align left
|
||||
|
||||
.anime-info-table
|
||||
margin 0
|
||||
width 100%
|
||||
max-width 600px
|
||||
|
||||
.anime-section
|
||||
margin-top 1rem
|
||||
|
||||
:first-child
|
||||
margin-top 0 !important
|
||||
|
||||
.anime-section-name
|
||||
font-weight bold
|
||||
|
||||
@ -32,7 +63,7 @@
|
||||
|
||||
.anime-cover-image
|
||||
// width 142px
|
||||
width 225px
|
||||
width 250px
|
||||
height auto
|
||||
border-radius 3px
|
||||
|
||||
@ -57,31 +88,29 @@
|
||||
font-size 0.9em
|
||||
margin-top 0
|
||||
margin-bottom 0.5rem
|
||||
text-align left
|
||||
text-align center
|
||||
font-weight normal
|
||||
line-height content-line-height
|
||||
|
||||
.japanese
|
||||
color rgba(255, 255, 255, 0.5) !important
|
||||
color anime-alternative-title-color !important
|
||||
|
||||
.anime-actions
|
||||
display none !important
|
||||
// horizontal
|
||||
// justify-content center
|
||||
|
||||
// .anime-actions
|
||||
// horizontal
|
||||
// justify-content center
|
||||
// // Action button margin
|
||||
// margin calc(content-padding - 0.5rem) -0.5rem
|
||||
|
||||
// // Action button margin
|
||||
// margin calc(content-padding - 0.5rem) -0.5rem
|
||||
// // Setting z-index requires setting a background as well
|
||||
// z-index 10
|
||||
|
||||
// // Setting z-index requires setting a background as well
|
||||
// z-index 10
|
||||
|
||||
// > 1450px
|
||||
// .anime-actions
|
||||
// position absolute
|
||||
// top 0
|
||||
// right content-padding
|
||||
> 1450px
|
||||
.anime-actions
|
||||
position absolute
|
||||
bottom 0
|
||||
right content-padding
|
||||
|
||||
.anime-rating-categories
|
||||
horizontal
|
||||
|
||||
@ -27,4 +27,5 @@
|
||||
|
||||
.character-image
|
||||
width 112px
|
||||
height 175px
|
||||
height 112px
|
||||
border-radius 10%
|
||||
@ -1,9 +1,11 @@
|
||||
component AnimeCharacters(anime *arn.Anime)
|
||||
AnimeTabs(anime)
|
||||
//- AnimeTabs(anime)
|
||||
|
||||
h3.anime-section-name Characters
|
||||
.characters
|
||||
each character in anime.Characters().Items
|
||||
if character.Character() != nil
|
||||
.mountable
|
||||
Character(character.Character())
|
||||
if len(anime.Characters().Items) > 0
|
||||
.anime-section
|
||||
h3.anime-section-name Characters
|
||||
.characters
|
||||
each character in anime.Characters().Items
|
||||
if character.Role == "main" && character.Character() != nil
|
||||
.mountable
|
||||
Character(character.Character())
|
||||
@ -6,6 +6,7 @@ link-color = rgb(215, 38, 15)
|
||||
link-hover-color = rgb(242, 60, 30)
|
||||
link-active-color = link-hover-color
|
||||
pro-color = hsla(0, 100%, 73%, 0.87)
|
||||
anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
|
||||
|
||||
theme-white = bg-color
|
||||
theme-black = text-color
|
||||
@ -29,8 +30,9 @@ input-focus-border-color = rgb(248, 165, 130)
|
||||
// Button
|
||||
button-hover-color = white
|
||||
button-hover-background = link-hover-color
|
||||
tab-hover-background = #225db5
|
||||
// tab-hover-background = rgb(46, 85, 160)
|
||||
tab-active-color = white
|
||||
tab-active-background = hsl(216, 68%, 42%)
|
||||
// tab-active-background = rgb(46, 85, 160)
|
||||
|
||||
// Forum
|
||||
forum-width = 830px
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
// Dark theme
|
||||
|
||||
// Main color
|
||||
hue = 45
|
||||
saturation = 100%
|
||||
|
||||
// Derived colors
|
||||
text-color = hsl(0, 0%, 90%)
|
||||
bg-color = hsl(0, 0%, 24%)
|
||||
link-color = hsl(81, 100%, 56%)
|
||||
link-hover-color = hsl(81, 100%, 66%)
|
||||
link-color = hsl(hue, saturation, 56%)
|
||||
link-hover-color = hsl(hue, saturation, 66%)
|
||||
ui-background = hsla(0, 0%, 8%, 0.5)
|
||||
|
||||
theme-white = bg-color
|
||||
theme-black = text-color
|
||||
|
||||
link-hover-text-shadow = 0 0 8px hsla(81, 100%, 56%, 0.5)
|
||||
link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 56%, 0.5)
|
||||
|
||||
main-color = link-color
|
||||
link-active-color = link-hover-color
|
||||
button-hover-color = link-hover-color
|
||||
button-hover-background = hsla(0, 0%, 12%, 0.5)
|
||||
tab-hover-background = link-hover-color
|
||||
loading-anim-color = link-color
|
||||
tab-active-color = bg-color
|
||||
tab-active-background = white
|
||||
loading-anim-color = link-color
|
||||
anime-alternative-title-color = hsla(0, 0%, 100%, 0.5)
|
||||
@ -22,4 +22,4 @@
|
||||
|
||||
.info-message
|
||||
color white
|
||||
background tab-hover-background
|
||||
background tab-active-background
|
||||
@ -14,7 +14,7 @@
|
||||
transform none
|
||||
|
||||
&.active
|
||||
background tab-hover-background
|
||||
background tab-active-background
|
||||
color theme-white
|
||||
|
||||
:first-child
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
iframe
|
||||
min-height 200px
|
||||
// iframe
|
||||
// min-height 200px
|
||||
|
||||
.video-container
|
||||
position relative
|
||||
width 100%
|
||||
height 0
|
||||
padding-bottom 56.25%
|
||||
border-radius ui-element-border-radius
|
||||
overflow hidden
|
||||
|
||||
.video
|
||||
position absolute
|
||||
width 100%
|
||||
height 100vh
|
||||
height 100%
|
||||
left 0
|
||||
top 0
|
||||
Loading…
Reference in New Issue
Block a user