From 9d41f4dc6e0fb91e61e5120cf79882c81823444d Mon Sep 17 00:00:00 2001 From: Scott Date: Thu, 25 Jan 2018 12:26:22 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Finished=20the=20design=20of=20the?= =?UTF-8?q?=20quote=20page=20and=20added=20the=20like=20action.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mixins/TabLikeQuote.pixy | 16 +++++++++++ pages/quote/quote.pixy | 57 ++++++++++++++++++++++++++++++++++----- pages/quote/quote.scarlet | 44 +++++++++++++++++++----------- 3 files changed, 96 insertions(+), 21 deletions(-) create mode 100644 mixins/TabLikeQuote.pixy diff --git a/mixins/TabLikeQuote.pixy b/mixins/TabLikeQuote.pixy new file mode 100644 index 00000000..0abd565b --- /dev/null +++ b/mixins/TabLikeQuote.pixy @@ -0,0 +1,16 @@ +// This should be made abstract for every Likeable so we avoid repeating ourselves but I'm unsure on +// how to do it +component TabLikeQuote(label string, icon string, quote *arn.Quote, user *arn.User) + if user == nil + .tab.action(aria-label=label, title="Login to like this quote") + Icon(icon) + span.tab-text= label + else + if quote.LikedBy(user.ID) + .tab.action(data-api="/api" + quote.Link(), data-action="unlike", data-trigger="click", aria-label=label, title="Click to unlike this quote") + Icon(icon) + span.tab-text= label + else + .tab.action(data-api="/api" + quote.Link(), data-action="like", data-trigger="click", aria-label=label, title="Click to like this quote") + Icon(icon + "-o") + span.tab-text= label diff --git a/pages/quote/quote.pixy b/pages/quote/quote.pixy index 28923e78..486e1198 100644 --- a/pages/quote/quote.pixy +++ b/pages/quote/quote.pixy @@ -1,14 +1,59 @@ component QuotePage(quote *arn.Quote, character *arn.Character, user *arn.User) QuoteTabs(quote, user) - .quote-page - .quote-header - h1.quote-name.mountable= quote.Description - h3.mountable Characters - .quote-character.mountable - Character(character) + .quote-full-page + + .quote-main-column + QuoteMainColumn(quote, user) + .quote-side-column + QuoteSideColumn(quote, user) + +component QuoteMainColumn(quote *arn.Quote, user *arn.User) + .widget-form + QuoteContent(quote) + + .footer.mountable + if quote.EditedBy != "" + span Edited + span.utc-date(data-date=quote.Edited) + span by + a.ajax(href=quote.EditedByUser().Link())= quote.EditedByUser().Nick + else + span Posted + span.utc-date(data-date=quote.Created) + span by + a.ajax(href=quote.Creator().Link())= quote.Creator().Nick + span . + +component QuoteSideColumn(quote *arn.Quote, user *arn.User) + QuoteInformation(quote, user) + +component QuoteInformation(quote *arn.Quote, user *arn.User) + section.quote-section.mountable + h3.quote-section-name Information + table.quote-info-table + if quote.Anime() != nil + tr.mountable(data-mountable-type="info") + td.quote-info-key Anime: + td.quote-info-value + QuoteAnime(quote.Anime(), user) + + if quote.Episode != 0 + tr.mountable(data-mountable-type="info") + td.quote-info-key Episode: + td.quote-info-value= quote.Episode + + if quote.Time != 0 + tr.mountable(data-mountable-type="info") + td.anime-info-key Time: + td.anime-info-value= strconv.Itoa(quote.Time) + " min" component QuoteTabs(quote *arn.Quote, user *arn.User) .tabs + TabLikeQuote(strconv.Itoa(len(quote.Likes)), "heart", quote, user) Tab("Quote", "building", quote.Link()) Tab("Edit", "pencil", quote.Link() + "/edit") + +component QuoteAnime(anime *arn.Anime, user *arn.User) + a.quote-anime-list-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) + img.quote-anime-list-item-image.lazy(data-src=anime.Image("small"), data-webp="true", alt=anime.Title.ByUser(user)) \ No newline at end of file diff --git a/pages/quote/quote.scarlet b/pages/quote/quote.scarlet index 421788f7..a131d964 100644 --- a/pages/quote/quote.scarlet +++ b/pages/quote/quote.scarlet @@ -1,36 +1,50 @@ -.quote-page +quote-full-page vertical -.quote-header +.quote-main-column vertical + flex 1 -.quote-sidebar +.quote-side-column sidebar > 1250px - .quote-page + .quote-full-page horizontal - .quote-sidebar + .quote-side-column sidebar-medium > 1400px - .quote-sidebar + .quote-side-column sidebar-big -.quote-name, -.quote-description - text-align left +.quote-media + iframe + width 100% -.quote-location - width 100% - height 300px +.quote-info-table + margin 0 +// width 100% +// max-width 600px -.quote-character +.quote-info-value + text-align right + +.quote-section + margin-top 1rem + + :first-child + margin-top 0 !important + +.quote-section-name + font-weight bold + +.quote-anime-list horizontal-wrap -.quote-character-item +.quote-anime-list-item anime-mini-item -.quote-character-item-image +.quote-anime-list-item-image anime-mini-item-image \ No newline at end of file