diff --git a/config.json b/config.json index 20e7eb05..e1084e56 100644 --- a/config.json +++ b/config.json @@ -13,22 +13,18 @@ "mixins/feature-card", "mixins/horizontal-line", "mixins/comments", + "mixins/input", "reset", "base", "typography", "mountable", "layout", - "search", "headers", - "input", "grid", - "post", "thread", - "tabs", "tags", "user", "video", - "loading", "fade", "embedded" ], @@ -43,4 +39,4 @@ "http": 4000, "https": 4001 } -} \ No newline at end of file +} diff --git a/elements/AMV/AMV.pixy b/elements/AMV/AMV.pixy new file mode 100644 index 00000000..3841f02d --- /dev/null +++ b/elements/AMV/AMV.pixy @@ -0,0 +1,15 @@ +component AMV(amv *arn.AMV, user *arn.User) + .amv.mountable + AMVVideo(amv) + AMVFooter(amv, user) + +component AMVFooter(amv *arn.AMV, user *arn.User) + footer.amv-footer + if amv.Title.ByUser(user) == "" + a(href=amv.Link() + "/edit") untitled + else + a(href=amv.Link())= amv.Title.ByUser(user) + span posted + span.utc-date.no-tip(data-date=amv.Created) + span by + a(href=amv.Creator().Link())= amv.Creator().Nick + " " \ No newline at end of file diff --git a/elements/AMV/AMVMini.pixy b/elements/AMV/AMVMini.pixy new file mode 100644 index 00000000..6d57e78c --- /dev/null +++ b/elements/AMV/AMVMini.pixy @@ -0,0 +1,11 @@ +component AMVMini(amv *arn.AMV, user *arn.User) + .amv.mountable + AMVVideo(amv) + AMVMiniFooter(amv, user) + +component AMVMiniFooter(amv *arn.AMV, user *arn.User) + footer.amv-footer + if amv.Title.ByUser(user) == "" + a(href=amv.Link() + "/edit") untitled + else + a(href=amv.Link())= amv.Title.ByUser(user) \ No newline at end of file diff --git a/elements/AMV/AMVVideo.pixy b/elements/AMV/AMVVideo.pixy new file mode 100644 index 00000000..a7342f6e --- /dev/null +++ b/elements/AMV/AMVVideo.pixy @@ -0,0 +1,9 @@ +component AMVVideo(amv *arn.AMV) + .video-container(id=amv.ID, data-api="/api/amv/" + amv.ID) + video.video.lazy.action(data-action="toggleFullscreen", data-trigger="dblclick", data-id=amv.ID) + source(data-src=amv.VideoLink(), data-type="video/webm") + + //- button.media-play-button + //- RawIcon("play") + + VideoControls(amv.ID, amv.Info.Duration) \ No newline at end of file diff --git a/mixins/cards/Anime/AnimeCard.pixy b/elements/AnimeCard/AnimeCard.pixy similarity index 100% rename from mixins/cards/Anime/AnimeCard.pixy rename to elements/AnimeCard/AnimeCard.pixy diff --git a/mixins/cards/Anime/anime-card.scarlet b/elements/AnimeCard/AnimeCard.scarlet similarity index 100% rename from mixins/cards/Anime/anime-card.scarlet rename to elements/AnimeCard/AnimeCard.scarlet diff --git a/mixins/AnimeGrid.pixy b/elements/AnimeGrid/AnimeGrid.pixy similarity index 100% rename from mixins/AnimeGrid.pixy rename to elements/AnimeGrid/AnimeGrid.pixy diff --git a/styles/anime-grid.scarlet b/elements/AnimeGrid/AnimeGrid.scarlet similarity index 100% rename from styles/anime-grid.scarlet rename to elements/AnimeGrid/AnimeGrid.scarlet diff --git a/elements/AnimeList/AnimeList.pixy b/elements/AnimeList/AnimeList.pixy new file mode 100644 index 00000000..f81e97c2 --- /dev/null +++ b/elements/AnimeList/AnimeList.pixy @@ -0,0 +1,7 @@ +component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser *arn.User, user *arn.User) + #load-more-target.anime-list + AnimeListScrollable(animeListItems, viewUser, user) + + if nextIndex != -1 + .buttons + LoadMore(nextIndex) \ No newline at end of file diff --git a/mixins/AnimeList.pixy b/elements/AnimeList/AnimeListScrollable.pixy similarity index 91% rename from mixins/AnimeList.pixy rename to elements/AnimeList/AnimeListScrollable.pixy index 17735fd6..eac9d3ca 100644 --- a/mixins/AnimeList.pixy +++ b/elements/AnimeList/AnimeListScrollable.pixy @@ -1,11 +1,3 @@ -component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser *arn.User, user *arn.User) - #load-more-target.anime-list - AnimeListScrollable(animeListItems, viewUser, user) - - if nextIndex != -1 - .buttons - LoadMore(nextIndex) - component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User) each item in animeListItems .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") diff --git a/mixins/AnimeListItems.pixy b/elements/AnimeListItems.pixy similarity index 100% rename from mixins/AnimeListItems.pixy rename to elements/AnimeListItems.pixy diff --git a/elements/Avatar/Avatar.pixy b/elements/Avatar/Avatar.pixy new file mode 100644 index 00000000..bf095a40 --- /dev/null +++ b/elements/Avatar/Avatar.pixy @@ -0,0 +1,2 @@ +component Avatar(user *arn.User) + CustomAvatar(user, user.Link(), user.Nick) \ No newline at end of file diff --git a/elements/Avatar/AvatarNoLink.pixy b/elements/Avatar/AvatarNoLink.pixy new file mode 100644 index 00000000..aa3c6300 --- /dev/null +++ b/elements/Avatar/AvatarNoLink.pixy @@ -0,0 +1,5 @@ +component AvatarNoLink(user *arn.User) + if user.HasAvatar() + img.user-image.lazy(data-src=user.AvatarLink("small"), data-webp="true", alt=user.Nick) + else + SVGAvatar(user) \ No newline at end of file diff --git a/elements/Avatar/AvatarNoTip.pixy b/elements/Avatar/AvatarNoTip.pixy new file mode 100644 index 00000000..c80ba83b --- /dev/null +++ b/elements/Avatar/AvatarNoTip.pixy @@ -0,0 +1,3 @@ +component AvatarNoTip(user *arn.User) + a.user(href=user.Link(), title=user.Nick) + AvatarNoLink(user) \ No newline at end of file diff --git a/elements/Avatar/CustomAvatar.pixy b/elements/Avatar/CustomAvatar.pixy new file mode 100644 index 00000000..ff2ed81a --- /dev/null +++ b/elements/Avatar/CustomAvatar.pixy @@ -0,0 +1,7 @@ +component CustomAvatar(user *arn.User, link string, title string) + a.user.tip(href=link, aria-label=title) + AvatarNoLink(user) + + if user.IsPro() + .user-pro-icon + RawIcon("star") \ No newline at end of file diff --git a/elements/Avatar/ProfileImage.pixy b/elements/Avatar/ProfileImage.pixy new file mode 100644 index 00000000..4d5bfd1a --- /dev/null +++ b/elements/Avatar/ProfileImage.pixy @@ -0,0 +1,5 @@ +component ProfileImage(user *arn.User) + if user.HasAvatar() + img.profile-image.lazy(data-src=user.AvatarLink("large"), data-webp="true", alt="Profile image", importance="high") + else + SVGProfileImage(user) \ No newline at end of file diff --git a/elements/Avatar/SVGAvatar.pixy b/elements/Avatar/SVGAvatar.pixy new file mode 100644 index 00000000..78e4afd2 --- /dev/null +++ b/elements/Avatar/SVGAvatar.pixy @@ -0,0 +1,9 @@ +component SVGAvatar(user *arn.User) + svg.user-image(viewBox="0 0 50 50") + circle.head(cx="25", cy="19", r="10") + circle.body(cx="25", cy="50", r="20") + + if len(user.Nick) <= 6 + text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick + else + text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick[:6] \ No newline at end of file diff --git a/elements/Avatar/SVGProfileImage.pixy b/elements/Avatar/SVGProfileImage.pixy new file mode 100644 index 00000000..725e7f28 --- /dev/null +++ b/elements/Avatar/SVGProfileImage.pixy @@ -0,0 +1,4 @@ +component SVGProfileImage(user *arn.User) + svg.profile-image(viewBox="0 0 50 50", alt="Profile image") + circle.head(cx="25", cy="19", r="10") + circle.body(cx="25", cy="50", r="20") \ No newline at end of file diff --git a/mixins/Comments.pixy b/elements/Comments/Comments.pixy similarity index 100% rename from mixins/Comments.pixy rename to elements/Comments/Comments.pixy diff --git a/mixins/EditForm.pixy b/elements/EditForm.pixy similarity index 100% rename from mixins/EditForm.pixy rename to elements/EditForm.pixy diff --git a/mixins/Email.pixy b/elements/Email.pixy similarity index 100% rename from mixins/Email.pixy rename to elements/Email.pixy diff --git a/elements/ExternalMedia.pixy b/elements/ExternalMedia.pixy new file mode 100644 index 00000000..3e62fb78 --- /dev/null +++ b/elements/ExternalMedia.pixy @@ -0,0 +1,2 @@ +component ExternalMedia(media *arn.ExternalMedia) + iframe.lazy(data-src=media.EmbedLink(), title=media.Service + " media", allowfullscreen) \ No newline at end of file diff --git a/elements/Icon/Icon.pixy b/elements/Icon/Icon.pixy new file mode 100644 index 00000000..2ddac7b8 --- /dev/null +++ b/elements/Icon/Icon.pixy @@ -0,0 +1,2 @@ +component Icon(name string) + svg-icon.padded-icon(name=name, class="icon-" + name) \ No newline at end of file diff --git a/scripts/Elements/svg-icon/svg-icon.scarlet b/elements/Icon/Icon.scarlet similarity index 100% rename from scripts/Elements/svg-icon/svg-icon.scarlet rename to elements/Icon/Icon.scarlet diff --git a/elements/Icon/RawIcon.pixy b/elements/Icon/RawIcon.pixy new file mode 100644 index 00000000..ae488185 --- /dev/null +++ b/elements/Icon/RawIcon.pixy @@ -0,0 +1,2 @@ +component RawIcon(name string) + svg-icon(name=name, class="icon-" + name) \ No newline at end of file diff --git a/mixins/ImportButton.pixy b/elements/ImportButton.pixy similarity index 100% rename from mixins/ImportButton.pixy rename to elements/ImportButton.pixy diff --git a/elements/Input/InputBool.pixy b/elements/Input/InputBool.pixy new file mode 100644 index 00000000..97d8a668 --- /dev/null +++ b/elements/Input/InputBool.pixy @@ -0,0 +1,11 @@ +component InputBool(id string, value bool, label string, title string) + .widget-section + label= label + ":" + if value + button.action(id=id, data-action="disable", data-trigger="click", data-field=id, title=title) + Icon("toggle-on") + span ON + else + button.action(id=id, data-action="enable", data-trigger="click", data-field=id, title=title) + Icon("toggle-off") + span OFF \ No newline at end of file diff --git a/elements/Input/InputColor.pixy b/elements/Input/InputColor.pixy new file mode 100644 index 00000000..c715f138 --- /dev/null +++ b/elements/Input/InputColor.pixy @@ -0,0 +1,9 @@ +component InputColor(id string, variable string, label string) + .widget-section + label(for=id)= label + + .color-picker-container + .widget-ui-element.color-picker.color-box.action(data-color="var(--" + variable + ")", data-variable=variable, data-action="pickColor", data-trigger="click") + + button.tip(aria-label="Reset", disabled) + RawIcon("power-off") \ No newline at end of file diff --git a/elements/Input/InputFileUpload.pixy b/elements/Input/InputFileUpload.pixy new file mode 100644 index 00000000..01699e6a --- /dev/null +++ b/elements/Input/InputFileUpload.pixy @@ -0,0 +1,6 @@ +component InputFileUpload(id string, label string, uploadType string, endpoint string) + .widget-section + label= label + ":" + button.action(id=id, data-action="selectFile", data-trigger="click", data-endpoint=endpoint, data-type=uploadType) + Icon("upload") + span Select file \ No newline at end of file diff --git a/elements/Input/InputNumber.pixy b/elements/Input/InputNumber.pixy new file mode 100644 index 00000000..9cb5c72f --- /dev/null +++ b/elements/Input/InputNumber.pixy @@ -0,0 +1,14 @@ +component InputNumber(id string, value float64, label string, placeholder string, min string, max string, step string) + .widget-section + label(for=id)= label + ":" + input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change") + +component InputNumberWithButtons(id string, value float64, label string, placeholder string, min string, max string, step string) + .widget-section + label(for=id)= label + ":" + .number-input-container + input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change") + button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="1", aria-label="Increase by 1") + RawIcon("plus") + button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="-1", aria-label="Decrease by 1") + RawIcon("minus") \ No newline at end of file diff --git a/elements/Input/InputSelection.pixy b/elements/Input/InputSelection.pixy new file mode 100644 index 00000000..5d737b17 --- /dev/null +++ b/elements/Input/InputSelection.pixy @@ -0,0 +1,6 @@ +component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option) + .widget-section + label(for=id)= label + ":" + select.widget-ui-element.action(id=id, data-field=id, value=value, title=placeholder, data-action="save", data-trigger="change") + each option in options + option(value=option.Value)= option.Label diff --git a/elements/Input/InputTags.pixy b/elements/Input/InputTags.pixy new file mode 100644 index 00000000..a3c92bcd --- /dev/null +++ b/elements/Input/InputTags.pixy @@ -0,0 +1,13 @@ +component InputTags(id string, value []string, label string, tooltip string) + .widget-section + label(for=id)= label + ":" + .tags(id=id) + for index, tag := range value + .tag.tag-edit.action(contenteditable="true", data-action="save", data-trigger="focusout", data-field=id + "[" + strconv.Itoa(index) + "]")= tag + button.tag-remove.action(data-action="arrayRemove", data-trigger="click", data-field=id, data-index=index) + RawIcon("trash") + + button.tag-add.action(data-action="arrayAppend", data-trigger="click", data-field=id, title="Add more") + RawIcon("plus") + + p!= tooltip \ No newline at end of file diff --git a/elements/Input/InputText.pixy b/elements/Input/InputText.pixy new file mode 100644 index 00000000..33ab0a45 --- /dev/null +++ b/elements/Input/InputText.pixy @@ -0,0 +1,4 @@ +component InputText(id string, value string, label string, placeholder string, maxLength int) + .widget-section + label(for=id)= label + ":" + input.widget-ui-element.action(id=id, data-field=id, type="text", value=value, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change", maxlength=maxLength) \ No newline at end of file diff --git a/elements/Input/InputTextArea.pixy b/elements/Input/InputTextArea.pixy new file mode 100644 index 00000000..2e21448b --- /dev/null +++ b/elements/Input/InputTextArea.pixy @@ -0,0 +1,4 @@ +component InputTextArea(id string, value string, label string, placeholder string, maxLength int) + .widget-section + label(for=id)= label + ":" + textarea.widget-ui-element.action(id=id, data-field=id, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change", maxlength=maxLength)= value diff --git a/styles/input.scarlet b/elements/Input/input.scarlet similarity index 75% rename from styles/input.scarlet rename to elements/Input/input.scarlet index 52fd5255..ce558a39 100644 --- a/styles/input.scarlet +++ b/elements/Input/input.scarlet @@ -1,19 +1,3 @@ -mixin input-focus - :focus - border 1px solid input-focus-border-color !important - // TODO: Replace with alpha(main-color, 20%) function - box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important - -mixin button-hover - :hover, - &.active - cursor pointer - color button-hover-color - background button-hover-background - - :active - transform translateY(3px) - input, textarea, button, .button, select ui-element font-family inherit @@ -100,4 +84,4 @@ textarea justify-content center margin-left 0.2rem width input-height - height input-height \ No newline at end of file + height input-height diff --git a/styles/widgets.scarlet b/elements/Input/widgets.scarlet similarity index 100% rename from styles/widgets.scarlet rename to elements/Input/widgets.scarlet diff --git a/mixins/Japanese.pixy b/elements/Japanese.pixy similarity index 100% rename from mixins/Japanese.pixy rename to elements/Japanese.pixy diff --git a/mixins/Like.pixy b/elements/Like.pixy similarity index 100% rename from mixins/Like.pixy rename to elements/Like.pixy diff --git a/mixins/LoadMore.pixy b/elements/LoadMore.pixy similarity index 100% rename from mixins/LoadMore.pixy rename to elements/LoadMore.pixy diff --git a/mixins/LoadingAnimation.pixy b/elements/LoadingAnimation/LoadingAnimation.pixy similarity index 100% rename from mixins/LoadingAnimation.pixy rename to elements/LoadingAnimation/LoadingAnimation.pixy diff --git a/styles/loading.scarlet b/elements/LoadingAnimation/LoadingAnimation.scarlet similarity index 100% rename from styles/loading.scarlet rename to elements/LoadingAnimation/LoadingAnimation.scarlet diff --git a/mixins/NewPostArea.pixy b/elements/NewPostArea.pixy similarity index 100% rename from mixins/NewPostArea.pixy rename to elements/NewPostArea.pixy diff --git a/mixins/Postable.pixy b/elements/Postable/Postable.pixy similarity index 100% rename from mixins/Postable.pixy rename to elements/Postable/Postable.pixy diff --git a/styles/post.scarlet b/elements/Postable/Postable.scarlet similarity index 100% rename from styles/post.scarlet rename to elements/Postable/Postable.scarlet diff --git a/mixins/PostableList.pixy b/elements/PostableList.pixy similarity index 100% rename from mixins/PostableList.pixy rename to elements/PostableList.pixy diff --git a/elements/Quote/Quote.pixy b/elements/Quote/Quote.pixy new file mode 100644 index 00000000..e71b3630 --- /dev/null +++ b/elements/Quote/Quote.pixy @@ -0,0 +1,14 @@ +component Quote(quote *arn.Quote, user *arn.User) + .quote.mountable + QuoteContent(quote, user) + QuoteFooter(quote) + +component QuoteContent(quote *arn.Quote, user *arn.User) + .quote-content + a.quotation(href=quote.Link()) + QuoteText(quote) + + QuoteCharacter(quote, user) + +component QuoteText(quote *arn.Quote) + blockquote!= utils.RenderQuoteText(quote.Text.English) diff --git a/elements/Quote/Quote.scarlet b/elements/Quote/Quote.scarlet new file mode 100644 index 00000000..ac76ff17 --- /dev/null +++ b/elements/Quote/Quote.scarlet @@ -0,0 +1,56 @@ +const quote-margin = 1rem + +.quote + vertical + flex 1 + flex-basis 500px + margin quote-margin 0 + +> 500px + .quote + margin quote-margin + +.quote-content + vertical + ui-element + border-left 5px solid quote-side-border-color !important + box-shadow shadow-light + +.quote-line + // ... + +.quote-character + horizontal + align-self flex-end + margin 0 1em 1em 0 + + .character + margin 0 + +.quote-footer + media-footer + +blockquote + flex-grow 1 + padding 1em + + p + line-height 2em + quotes "\201C""\201D" + color text-color + + :before + color quote-color + content open-quote + font-size 4em + line-height 0.1em + margin-right 0.25em + vertical-align -0.4em + + :after + color quote-color + content close-quote + font-size 4em + line-height 0.1em + margin-left 0.25em + vertical-align -0.4em diff --git a/elements/Quote/QuoteCharacter.pixy b/elements/Quote/QuoteCharacter.pixy new file mode 100644 index 00000000..bfcc6391 --- /dev/null +++ b/elements/Quote/QuoteCharacter.pixy @@ -0,0 +1,4 @@ +component QuoteCharacter(quote *arn.Quote, user *arn.User) + if quote.CharacterID != "" && quote.Character() != nil + footer.quote-character + CharacterSmall(quote.Character(), user) \ No newline at end of file diff --git a/elements/Quote/QuoteFooter.pixy b/elements/Quote/QuoteFooter.pixy new file mode 100644 index 00000000..9d1fd29b --- /dev/null +++ b/elements/Quote/QuoteFooter.pixy @@ -0,0 +1,6 @@ +component QuoteFooter(quote *arn.Quote) + footer.quote-footer + span posted + span.utc-date.no-tip(data-date=quote.Created) + span by + a(href=quote.Creator().Link())= quote.Creator().Nick \ No newline at end of file diff --git a/elements/Quote/QuotePreview.pixy b/elements/Quote/QuotePreview.pixy new file mode 100644 index 00000000..12f5348c --- /dev/null +++ b/elements/Quote/QuotePreview.pixy @@ -0,0 +1,14 @@ +component QuotePreview(quote *arn.Quote, user *arn.User) + .quote.mountable + QuoteContentPreview(quote, user) + QuoteFooter(quote) + +component QuoteContentPreview(quote *arn.Quote, user *arn.User) + .quote-content + a.quotation(href=quote.Link()) + QuoteTextPreview(quote) + + QuoteCharacter(quote, user) + +component QuoteTextPreview(quote *arn.Quote) + blockquote!= utils.RenderQuoteText(utils.CutLongDescription(quote.Text.English)) \ No newline at end of file diff --git a/mixins/Rating.pixy b/elements/Rating.pixy similarity index 100% rename from mixins/Rating.pixy rename to elements/Rating.pixy diff --git a/mixins/FuzzySearch.pixy b/elements/Search/Search.pixy similarity index 86% rename from mixins/FuzzySearch.pixy rename to elements/Search/Search.pixy index 58b41250..b370f485 100644 --- a/mixins/FuzzySearch.pixy +++ b/elements/Search/Search.pixy @@ -1,2 +1,2 @@ -component FuzzySearch(value string) +component Search(value string) input#search.action(data-action="search", data-trigger="input", type="search", autocomplete="off", autocorrect="off", autocapitalize="none", spellcheck="false", placeholder="Search...", title="Shortcut: F", maxlength="100", value=value) \ No newline at end of file diff --git a/styles/search.scarlet b/elements/Search/Search.scarlet similarity index 100% rename from styles/search.scarlet rename to elements/Search/Search.scarlet diff --git a/mixins/SocialMedia.pixy b/elements/SocialMedia.pixy similarity index 100% rename from mixins/SocialMedia.pixy rename to elements/SocialMedia.pixy diff --git a/mixins/SoundTrack.pixy b/elements/SoundTrack/SoundTrack.pixy similarity index 75% rename from mixins/SoundTrack.pixy rename to elements/SoundTrack/SoundTrack.pixy index bd3732dd..5c2a58e8 100644 --- a/mixins/SoundTrack.pixy +++ b/elements/SoundTrack/SoundTrack.pixy @@ -3,11 +3,6 @@ component SoundTrack(track *arn.SoundTrack, user *arn.User) SoundTrackContent(track, user) SoundTrackFooter(track, user) -component SoundTrackMini(track *arn.SoundTrack, user *arn.User) - .soundtrack.mountable(id=track.ID) - SoundTrackContent(track, user) - SoundTrackMiniFooter(track, user) - component SoundTrackContent(track *arn.SoundTrack, user *arn.User) .soundtrack-content if track.MainAnime() != nil @@ -42,13 +37,3 @@ component SoundTrackFooter(track *arn.SoundTrack, user *arn.User) span.utc-date.no-tip(data-date=track.Created) span by a(href=track.Creator().Link())= track.Creator().Nick + " " - -component SoundTrackMiniFooter(track *arn.SoundTrack, user *arn.User) - footer.soundtrack-footer - if track.Title.ByUser(user) == "" - a(href=track.Link() + "/edit") untitled - else - a(href=track.Link())= track.Title.ByUser(user) - -component ExternalMedia(media *arn.ExternalMedia) - iframe.lazy(data-src=media.EmbedLink(), title=media.Service + " media", allowfullscreen) \ No newline at end of file diff --git a/elements/SoundTrack/SoundTrackMini.pixy b/elements/SoundTrack/SoundTrackMini.pixy new file mode 100644 index 00000000..19e119e9 --- /dev/null +++ b/elements/SoundTrack/SoundTrackMini.pixy @@ -0,0 +1,11 @@ +component SoundTrackMini(track *arn.SoundTrack, user *arn.User) + .soundtrack.mountable(id=track.ID) + SoundTrackContent(track, user) + SoundTrackMiniFooter(track, user) + +component SoundTrackMiniFooter(track *arn.SoundTrack, user *arn.User) + footer.soundtrack-footer + if track.Title.ByUser(user) == "" + a(href=track.Link() + "/edit") untitled + else + a(href=track.Link())= track.Title.ByUser(user) \ No newline at end of file diff --git a/mixins/StatusMessage.pixy b/elements/StatusMessage/StatusMessage.pixy similarity index 100% rename from mixins/StatusMessage.pixy rename to elements/StatusMessage/StatusMessage.pixy diff --git a/styles/status-message.scarlet b/elements/StatusMessage/StatusMessage.scarlet similarity index 93% rename from styles/status-message.scarlet rename to elements/StatusMessage/StatusMessage.scarlet index 7036b50b..6f813e2c 100644 --- a/styles/status-message.scarlet +++ b/elements/StatusMessage/StatusMessage.scarlet @@ -30,4 +30,4 @@ .info-message color white - background tab-active-background \ No newline at end of file + background tab-active-background diff --git a/mixins/StatusTabs.pixy b/elements/StatusTabs.pixy similarity index 100% rename from mixins/StatusTabs.pixy rename to elements/StatusTabs.pixy diff --git a/elements/Tab/Tab.pixy b/elements/Tab/Tab.pixy new file mode 100644 index 00000000..9b1faac4 --- /dev/null +++ b/elements/Tab/Tab.pixy @@ -0,0 +1,4 @@ +component Tab(label string, icon string, url string) + a.tab.action(href=url, data-action="diff", data-trigger="click", aria-label=label, dropzone="move") + Icon(icon) + span.tab-text= label \ No newline at end of file diff --git a/styles/tabs.scarlet b/elements/Tab/Tab.scarlet similarity index 100% rename from styles/tabs.scarlet rename to elements/Tab/Tab.scarlet diff --git a/mixins/Tab.pixy b/elements/Tab/TabWithCount.pixy similarity index 54% rename from mixins/Tab.pixy rename to elements/Tab/TabWithCount.pixy index 4555492e..d9bdee34 100644 --- a/mixins/Tab.pixy +++ b/elements/Tab/TabWithCount.pixy @@ -1,8 +1,3 @@ -component Tab(label string, icon string, url string) - a.tab.action(href=url, data-action="diff", data-trigger="click", aria-label=label, dropzone="move") - Icon(icon) - span.tab-text= label - component TabWithCount(label string, count int, icon string, url string) a.tab.action(href=url, data-action="diff", data-trigger="click", aria-label=label, dropzone="move") Icon(icon) diff --git a/mixins/ThreadLink.pixy b/elements/ThreadLink.pixy similarity index 100% rename from mixins/ThreadLink.pixy rename to elements/ThreadLink.pixy diff --git a/mixins/cards/User/UserCard.pixy b/elements/UserCard/UserCard.pixy similarity index 100% rename from mixins/cards/User/UserCard.pixy rename to elements/UserCard/UserCard.pixy diff --git a/mixins/cards/User/user-card.scarlet b/elements/UserCard/UserCard.scarlet similarity index 100% rename from mixins/cards/User/user-card.scarlet rename to elements/UserCard/UserCard.scarlet diff --git a/mixins/VideoControls.pixy b/elements/VideoControls.pixy similarity index 100% rename from mixins/VideoControls.pixy rename to elements/VideoControls.pixy diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy deleted file mode 100644 index c4b700c2..00000000 --- a/mixins/AMV.pixy +++ /dev/null @@ -1,37 +0,0 @@ -component AMV(amv *arn.AMV, user *arn.User) - .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(id=amv.ID, data-api="/api/amv/" + amv.ID) - video.video.lazy.action(data-action="toggleFullscreen", data-trigger="dblclick", data-id=amv.ID) - source(data-src=amv.VideoLink(), data-type="video/webm") - - //- button.media-play-button - //- RawIcon("play") - - VideoControls(amv.ID, amv.Info.Duration) - -component AMVFooter(amv *arn.AMV, user *arn.User) - footer.amv-footer - if amv.Title.ByUser(user) == "" - a(href=amv.Link() + "/edit") untitled - else - a(href=amv.Link())= amv.Title.ByUser(user) - span posted - span.utc-date.no-tip(data-date=amv.Created) - span by - a(href=amv.Creator().Link())= amv.Creator().Nick + " " - -component AMVMiniFooter(amv *arn.AMV, user *arn.User) - footer.amv-footer - if amv.Title.ByUser(user) == "" - a(href=amv.Link() + "/edit") untitled - else - a(href=amv.Link())= amv.Title.ByUser(user) \ No newline at end of file diff --git a/mixins/Avatar.pixy b/mixins/Avatar.pixy deleted file mode 100644 index 684b0951..00000000 --- a/mixins/Avatar.pixy +++ /dev/null @@ -1,41 +0,0 @@ -component Avatar(user *arn.User) - CustomAvatar(user, user.Link(), user.Nick) - -component CustomAvatar(user *arn.User, link string, title string) - a.user.tip(href=link, aria-label=title) - AvatarNoLink(user) - - if user.IsPro() - .user-pro-icon - RawIcon("star") - -component AvatarNoLink(user *arn.User) - if user.HasAvatar() - img.user-image.lazy(data-src=user.AvatarLink("small"), data-webp="true", alt=user.Nick) - else - SVGAvatar(user) - -component AvatarNoTip(user *arn.User) - a.user(href=user.Link(), title=user.Nick) - AvatarNoLink(user) - -component ProfileImage(user *arn.User) - if user.HasAvatar() - img.profile-image.lazy(data-src=user.AvatarLink("large"), data-webp="true", alt="Profile image", importance="high") - else - SVGProfileImage(user) - -component SVGAvatar(user *arn.User) - svg.user-image(viewBox="0 0 50 50") - circle.head(cx="25", cy="19", r="10") - circle.body(cx="25", cy="50", r="20") - - if len(user.Nick) <= 6 - text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick - else - text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick[:6] - -component SVGProfileImage(user *arn.User) - svg.profile-image(viewBox="0 0 50 50", alt="Profile image") - circle.head(cx="25", cy="19", r="10") - circle.body(cx="25", cy="50", r="20") \ No newline at end of file diff --git a/mixins/Icon.pixy b/mixins/Icon.pixy deleted file mode 100644 index 4d3292e4..00000000 --- a/mixins/Icon.pixy +++ /dev/null @@ -1,5 +0,0 @@ -component Icon(name string) - svg-icon.padded-icon(name=name, class="icon-" + name) - -component RawIcon(name string) - svg-icon(name=name, class="icon-" + name) \ No newline at end of file diff --git a/mixins/Input.pixy b/mixins/Input.pixy deleted file mode 100644 index 85d2c7f4..00000000 --- a/mixins/Input.pixy +++ /dev/null @@ -1,75 +0,0 @@ -component InputText(id string, value string, label string, placeholder string, maxLength int) - .widget-section - label(for=id)= label + ":" - input.widget-ui-element.action(id=id, data-field=id, type="text", value=value, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change", maxlength=maxLength) - -component InputBool(id string, value bool, label string, title string) - .widget-section - label= label + ":" - if value - button.action(id=id, data-action="disable", data-trigger="click", data-field=id, title=title) - Icon("toggle-on") - span ON - else - button.action(id=id, data-action="enable", data-trigger="click", data-field=id, title=title) - Icon("toggle-off") - span OFF - //- input.widget-ui-element.action(id=id, data-field=id, type="checkbox", value=value, checked=value, data-action="save", data-trigger="change") - -component InputTextArea(id string, value string, label string, placeholder string, maxLength int) - .widget-section - label(for=id)= label + ":" - textarea.widget-ui-element.action(id=id, data-field=id, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change", maxlength=maxLength)= value - -component InputNumber(id string, value float64, label string, placeholder string, min string, max string, step string) - .widget-section - label(for=id)= label + ":" - input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change") - -component InputNumberWithButtons(id string, value float64, label string, placeholder string, min string, max string, step string) - .widget-section - label(for=id)= label + ":" - .number-input-container - input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change") - button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="1", aria-label="Increase by 1") - RawIcon("plus") - button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="-1", aria-label="Decrease by 1") - RawIcon("minus") - -component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option) - .widget-section - label(for=id)= label + ":" - select.widget-ui-element.action(id=id, data-field=id, value=value, title=placeholder, data-action="save", data-trigger="change") - each option in options - option(value=option.Value)= option.Label - -component InputFileUpload(id string, label string, uploadType string, endpoint string) - .widget-section - label= label + ":" - button.action(id=id, data-action="selectFile", data-trigger="click", data-endpoint=endpoint, data-type=uploadType) - Icon("upload") - span Select file - -component InputTags(id string, value []string, label string, tooltip string) - .widget-section - label(for=id)= label + ":" - .tags(id=id) - for index, tag := range value - .tag.tag-edit.action(contenteditable="true", data-action="save", data-trigger="focusout", data-field=id + "[" + strconv.Itoa(index) + "]")= tag - button.tag-remove.action(data-action="arrayRemove", data-trigger="click", data-field=id, data-index=index) - RawIcon("trash") - - button.tag-add.action(data-action="arrayAppend", data-trigger="click", data-field=id, title="Add more") - RawIcon("plus") - - p!= tooltip - -component InputColor(id string, variable string, label string) - .widget-section - label(for=id)= label - - .color-picker-container - .widget-ui-element.color-picker.color-box.action(data-color="var(--" + variable + ")", data-variable=variable, data-action="pickColor", data-trigger="click") - - button.tip(aria-label="Reset", disabled) - RawIcon("power-off") diff --git a/mixins/Quote.pixy b/mixins/Quote.pixy deleted file mode 100644 index f3cb3b11..00000000 --- a/mixins/Quote.pixy +++ /dev/null @@ -1,41 +0,0 @@ -component Quote(quote *arn.Quote, user *arn.User) - .quote.mountable - QuoteContent(quote, user) - QuoteFooter(quote) - -component QuotePreview(quote *arn.Quote, user *arn.User) - .quote.mountable - QuoteContentPreview(quote, user) - QuoteFooter(quote) - -component QuoteContent(quote *arn.Quote, user *arn.User) - .quote-content - a.quotation(href=quote.Link()) - QuoteText(quote) - - QuoteCharacter(quote, user) - -component QuoteContentPreview(quote *arn.Quote, user *arn.User) - .quote-content - a.quotation(href=quote.Link()) - QuoteTextPreview(quote) - - QuoteCharacter(quote, user) - -component QuoteText(quote *arn.Quote) - blockquote!= utils.RenderQuoteText(quote.Text.English) - -component QuoteCharacter(quote *arn.Quote, user *arn.User) - if quote.CharacterID != "" && quote.Character() != nil - footer.quote-character - CharacterSmall(quote.Character(), user) - -component QuoteTextPreview(quote *arn.Quote) - blockquote!= utils.RenderQuoteText(utils.CutLongDescription(quote.Text.English)) - -component QuoteFooter(quote *arn.Quote) - footer.quote-footer - span posted - span.utc-date.no-tip(data-date=quote.Created) - span by - a(href=quote.Creator().Link())= quote.Creator().Nick diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index f6aa17a1..d8fdeeb9 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -94,17 +94,17 @@ :focus transform scale(1.5) -.anime-list-item-actions - display none +// .anime-list-item-actions +// display none -> 740px - .anime-list-item-actions - display flex - flex-basis 30px - flex-shrink 1 +// > 740px +// .anime-list-item-actions +// display flex +// flex-basis 30px +// flex-shrink 1 - :empty - display none +// :empty +// display none .anime-list-item-airing-date display none @@ -123,4 +123,4 @@ < 1100px .anime-list-item-rating-container - display none \ No newline at end of file + display none diff --git a/pages/character/character.scarlet b/pages/character/character.scarlet index f8b57610..1f81f192 100644 --- a/pages/character/character.scarlet +++ b/pages/character/character.scarlet @@ -43,23 +43,6 @@ list-style-type none margin 0 -.character-anime - horizontal-wrap - -.character-anime-item - horizontal - width 100% - max-width 440px - -.character-anime-item-overview - anime-mini-item - -.character-anime-item-image - anime-mini-item-image - -.character-anime-item-details - margin-left 1rem - .character-spoiler margin typography-margin 0 diff --git a/pages/groups/groups.scarlet b/pages/groups/groups.scarlet index 47c430a9..2e9d29e2 100644 --- a/pages/groups/groups.scarlet +++ b/pages/groups/groups.scarlet @@ -1,10 +1,6 @@ const group-padding-y = 0.75rem const group-padding-x = 0.75rem -.groups-beta-message - text-align center - margin-bottom 1rem - .groups display grid grid-gap content-padding-half @@ -47,4 +43,4 @@ const group-padding-x = 0.75rem right 1rem text-align right font-size 0.8rem - opacity 0.5 \ No newline at end of file + opacity 0.5 diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index 6e367664..71513f98 100644 --- a/pages/profile/profile.scarlet +++ b/pages/profile/profile.scarlet @@ -121,13 +121,6 @@ const profile-image-size = 280px display grid grid-template-columns 27% 46% 27% - .profile-pro-status - position absolute - right 0 - bottom 0 - padding content-padding - margin-top 0 - .profile-introduction h1, h2, h3, h4, h5, h6 text-align left @@ -241,4 +234,4 @@ const box-margin = 2px .no-data width 100% - text-align center \ No newline at end of file + text-align center diff --git a/pages/quotes/quotes.scarlet b/pages/quotes/quotes.scarlet index 37eb4116..ebe8cc97 100644 --- a/pages/quotes/quotes.scarlet +++ b/pages/quotes/quotes.scarlet @@ -1,60 +1,3 @@ -const quote-margin = 1rem - .quotes horizontal-wrap justify-content space-around - -.quote - vertical - flex 1 - flex-basis 500px - margin quote-margin 0 - -> 500px - .quote - margin quote-margin - -.quote-content - vertical - ui-element - border-left 5px solid quote-side-border-color !important - box-shadow shadow-light - -.quote-line - // ... - -.quote-character - horizontal - align-self flex-end - margin 0 1em 1em 0 - - .character - margin 0 - -.quote-footer - media-footer - -blockquote - flex-grow 1 - padding 1em - - p - line-height 2em - quotes "\201C""\201D" - color text-color - - :before - color quote-color - content open-quote - font-size 4em - line-height 0.1em - margin-right 0.25em - vertical-align -0.4em - - :after - color quote-color - content close-quote - font-size 4em - line-height 0.1em - margin-left 0.25em - vertical-align -0.4em \ No newline at end of file diff --git a/styles/mixins/input.scarlet b/styles/mixins/input.scarlet new file mode 100644 index 00000000..d76fe937 --- /dev/null +++ b/styles/mixins/input.scarlet @@ -0,0 +1,15 @@ +mixin input-focus + :focus + border 1px solid input-focus-border-color !important + // TODO: Replace with alpha(main-color, 20%) function + box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important + +mixin button-hover + :hover, + &.active + cursor pointer + color button-hover-color + background button-hover-background + + :active + transform translateY(3px)