From 33d7ce593cd700a15985762972a9c8da09f181fa Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 4 Nov 2017 08:45:39 +0100 Subject: [PATCH] Redesign --- layout/sidebar/sidebar.scarlet | 7 +- pages/anime/anime.pixy | 289 ++++++++++++++++++++------------- pages/anime/anime.scarlet | 65 ++++++-- pages/anime/character.scarlet | 3 +- pages/anime/characters.pixy | 16 +- styles/include/config.scarlet | 6 +- styles/include/dark.scarlet | 18 +- styles/status-message.scarlet | 2 +- styles/tabs.scarlet | 2 +- styles/video.scarlet | 14 +- 10 files changed, 265 insertions(+), 157 deletions(-) diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index cbd0dcf1..1a6eba09 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -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 diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 78a323fa..e07cb0a8 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -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") diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index b3f69819..0e6e152c 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -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 diff --git a/pages/anime/character.scarlet b/pages/anime/character.scarlet index 340e2108..39cddcba 100644 --- a/pages/anime/character.scarlet +++ b/pages/anime/character.scarlet @@ -27,4 +27,5 @@ .character-image width 112px - height 175px \ No newline at end of file + height 112px + border-radius 10% \ No newline at end of file diff --git a/pages/anime/characters.pixy b/pages/anime/characters.pixy index b1e04ba9..48a8d9f6 100644 --- a/pages/anime/characters.pixy +++ b/pages/anime/characters.pixy @@ -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()) \ No newline at end of file + 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()) \ No newline at end of file diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 0fdfacb0..5f8d3be0 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -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 diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet index f328ed9d..bfa78661 100644 --- a/styles/include/dark.scarlet +++ b/styles/include/dark.scarlet @@ -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 \ No newline at end of file +tab-active-color = bg-color +tab-active-background = white +loading-anim-color = link-color +anime-alternative-title-color = hsla(0, 0%, 100%, 0.5) \ No newline at end of file diff --git a/styles/status-message.scarlet b/styles/status-message.scarlet index 8a99505f..69b84660 100644 --- a/styles/status-message.scarlet +++ b/styles/status-message.scarlet @@ -22,4 +22,4 @@ .info-message color white - background tab-hover-background \ No newline at end of file + background tab-active-background \ No newline at end of file diff --git a/styles/tabs.scarlet b/styles/tabs.scarlet index 37793fc4..b64c0ea3 100644 --- a/styles/tabs.scarlet +++ b/styles/tabs.scarlet @@ -14,7 +14,7 @@ transform none &.active - background tab-hover-background + background tab-active-background color theme-white :first-child diff --git a/styles/video.scarlet b/styles/video.scarlet index 3e84a471..51447e40 100644 --- a/styles/video.scarlet +++ b/styles/video.scarlet @@ -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 \ No newline at end of file + height 100% + left 0 + top 0 \ No newline at end of file