diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb index f5f919320..077752253 100644 --- a/app/helpers/icon_helper.rb +++ b/app/helpers/icon_helper.rb @@ -18,6 +18,10 @@ module IconHelper settings: %(), log_in: %(), + # Utility + times: %(), + reset: %(), + # Pagination chevron_left: %(), chevron_right: %(), diff --git a/app/helpers/pagination_helper.rb b/app/helpers/pagination_helper.rb index 2e65d042f..d293d422a 100644 --- a/app/helpers/pagination_helper.rb +++ b/app/helpers/pagination_helper.rb @@ -2,22 +2,13 @@ module PaginationHelper def sequential_paginator(records) - tag.div(class: "paginator") do + tag.nav(class: "pagination sequential", aria: { label: "Pagination" }) do return "" if records.try(:none?) html = "".html_safe - # Previous - html << link_to(records.is_first_page? ? "#" : nav_params_for("a#{records[0].id}"), class: "prev", id: "paginator-prev", rel: "prev", data: { shortcut: "a left", disabled: records.is_first_page? }) do - concat svg_icon(:chevron_left) - concat tag.span("Prev") - end - - # Next - html << link_to(records.is_last_page? ? "#" : nav_params_for("b#{records[-1].id}"), class: "next", id: "paginator-next", rel: "next", data: { shortcut: "d right", disabled: records.is_last_page? }) do - concat tag.span("Next") - concat svg_icon(:chevron_right) - end + html << paginator_prev(nav_params_for("a#{records[0].id}"), disabled: records.is_first_page?) + html << paginator_next(nav_params_for("b#{records[-1].id}"), disabled: records.is_last_page?) html end @@ -28,15 +19,11 @@ module PaginationHelper return sequential_paginator(records) end - tag.div(class: "paginator", data: { total: [records.total_pages, records.max_numbered_pages].min, current: records.current_page }) do + tag.nav(class: "pagination numbered", aria: { label: "Pagination" }, data: { total: [records.total_pages, records.max_numbered_pages].min, current: records.current_page }) do html = "".html_safe # Previous - has_prev = records.current_page < 2 - html << link_to(has_prev ? "#" : nav_params_for(records.current_page - 1), class: "prev", id: "paginator-prev", rel: "prev", data: { shortcut: "a left", disabled: has_prev }) do - concat svg_icon(:chevron_left) - concat tag.span("Prev") - end + html << paginator_prev(nav_params_for(records.current_page - 1), disabled: records.current_page < 2) # Break html << tag.div(class: "break") @@ -47,11 +34,7 @@ module PaginationHelper end # Next - has_next = records.current_page >= records.total_pages - html << link_to(has_next ? "#" : nav_params_for(records.current_page + 1), class: "next", id: "paginator-next", rel: "next", data: { shortcut: "d right", disabled: has_next }) do - concat tag.span("Next") - concat svg_icon(:chevron_right) - end + html << paginator_next(nav_params_for(records.current_page + 1), disabled: records.current_page >= records.total_pages) html end @@ -59,6 +42,42 @@ module PaginationHelper private + def paginator_prev(link, disabled: false) + html = "".html_safe + + if disabled + html << tag.span(class: "prev", id: "paginator-prev", data: { shortcut: "a left" }) do + concat svg_icon(:chevron_left) + concat tag.span("Prev") + end + else + html << link_to(link, class: "prev", id: "paginator-prev", rel: "prev", data: { shortcut: "a left" }) do + concat svg_icon(:chevron_left) + concat tag.span("Prev") + end + end + + html + end + + def paginator_next(link, disabled: false) + html = "".html_safe + + if disabled + html << tag.span(class: "next", id: "paginator-next", data: { shortcut: "a left" }) do + concat tag.span("Next") + concat svg_icon(:chevron_right) + end + else + html << link_to(link, class: "next", id: "paginator-prev", rel: "next", data: { shortcut: "a left" }) do + concat tag.span("Next") + concat svg_icon(:chevron_right) + end + end + + html + end + def paginator_pages(records) small_window = 2 large_window = 4 @@ -90,7 +109,7 @@ module PaginationHelper if page == 0 html << link_to(svg_icon(:ellipsis), nav_params_for(0), class: "spacer") elsif page == records.current_page - html << tag.span(page, class: "page current") + html << tag.span(page, class: "page current", aria: { current: "page" }) else html << link_to(page, nav_params_for(page), class: "page #{klass}") end diff --git a/app/javascript/src/javascripts/paginator.js b/app/javascript/src/javascripts/paginator.js index 434750a2c..1147d4203 100644 --- a/app/javascript/src/javascripts/paginator.js +++ b/app/javascript/src/javascripts/paginator.js @@ -12,7 +12,7 @@ Paginator.init_fasttravel = function (button) { }; $(() => { - for (const one of $(".paginator a.spacer").get()) + for (const one of $("nav.pagination a.spacer").get()) Paginator.init_fasttravel($(one)); }); diff --git a/app/javascript/src/javascripts/post_search.js b/app/javascript/src/javascripts/post_search.js index a3e3a20cc..b5b3e6a17 100644 --- a/app/javascript/src/javascripts/post_search.js +++ b/app/javascript/src/javascripts/post_search.js @@ -3,18 +3,6 @@ import Page from "./utility/page"; const PostSearch = {}; -PostSearch.init = function () { - $(".post-search").each((index, element) => { - PostSearch.initialize_input($(element)); - }); - - $(".wiki-excerpt").each((index, element) => { - PostSearch.initialize_wiki_preview($(element)); - }); - - PostSearch.initialize_controls(); -}; - PostSearch.initialize_input = function ($form) { const $textarea = $form.find("textarea[name='tags']").first(); if (!$textarea.length) return; @@ -42,17 +30,31 @@ PostSearch.initialize_input = function ($form) { PostSearch.initialize_wiki_preview = function ($preview) { let visible = LStorage.Posts.WikiExcerpt; - if (visible) $preview.addClass("open"); + if (visible == 2) return; // hidden + if (visible == 1) $preview.addClass("open"); + $preview.removeClass("hidden"); + window.setTimeout(() => { // Disable the rollout on first load $preview.removeClass("loading"); }, 250); + // Toggle the excerpt box open / closed $($preview.find("h3.wiki-excerpt-toggle")).on("click", (event) => { event.preventDefault(); visible = !visible; $preview.toggleClass("open", visible); - LStorage.Posts.WikiExcerpt = visible; + LStorage.Posts.WikiExcerpt = Number(visible); + + return false; + }); + + // Hide the excerpt box entirely + $preview.find("button.wiki-excerpt-dismiss").on("click", (event) => { + event.preventDefault(); + + $preview.addClass("hidden"); + LStorage.Posts.WikiExcerpt = 2; return false; }); @@ -68,10 +70,19 @@ PostSearch.initialize_controls = function () { }; $(() => { + + $(".post-search").each((index, element) => { + PostSearch.initialize_input($(element)); + }); + if (!Page.matches("posts", "index") && !Page.matches("favorites")) return; - PostSearch.init(); + $(".wiki-excerpt").each((index, element) => { + PostSearch.initialize_wiki_preview($(element)); + }); + + PostSearch.initialize_controls(); }); export default PostSearch; diff --git a/app/javascript/src/javascripts/themes.js b/app/javascript/src/javascripts/themes.js index 8ee283cfc..a329e109e 100644 --- a/app/javascript/src/javascripts/themes.js +++ b/app/javascript/src/javascripts/themes.js @@ -34,9 +34,26 @@ Theme.initialize_selector = function () { } }; +Theme.initialize_buttons = function () { + if (!LStorage.isAvailable()) return; + + $("#mascot-value").text(LStorage.Site.Mascot); + $("#mascot-reset").on("click", () => { + LStorage.Site.Mascot = 0; + $("#mascot-value").text(LStorage.Site.Mascot); + }); + + $("#wiki-excerpt-value").text(LStorage.Posts.WikiExcerpt); + $("#wiki-excerpt-reset").on("click", () => { + LStorage.Posts.WikiExcerpt = 1; + $("#wiki-excerpt-value").text(LStorage.Posts.WikiExcerpt); + }); +}; + $(() => { - if (Page.matches("static", "theme")) - Theme.initialize_selector(); + if (!Page.matches("static", "theme")) return; + Theme.initialize_selector(); + Theme.initialize_buttons(); }); export default Theme; diff --git a/app/javascript/src/javascripts/utility/storage.js b/app/javascript/src/javascripts/utility/storage.js index 84c476ef0..e32c2a283 100644 --- a/app/javascript/src/javascripts/utility/storage.js +++ b/app/javascript/src/javascripts/utility/storage.js @@ -86,8 +86,8 @@ LStorage.Posts = { /** @returns {number} ID of the user's selected set */ Set: ["set", 0], - /** @returns {boolean} True if the wiki excerpt should be visible */ - WikiExcerpt: ["e6.posts.wiki", true], + /** @returns {number} 0: collapsed / 1: visible / 2: permanently hidden */ + WikiExcerpt: ["e6.posts.wiki", 1], /** @returns {boolean} True if the search should be displayed in fullscreen */ Fullscreen: ["e6.posts.fusk", false], diff --git a/app/javascript/src/styles/common/_standard_elements.scss b/app/javascript/src/styles/common/_standard_elements.scss index 843738416..7de3c1be4 100644 --- a/app/javascript/src/styles/common/_standard_elements.scss +++ b/app/javascript/src/styles/common/_standard_elements.scss @@ -7,6 +7,9 @@ $button-background-hover: themed("color-section-lighten-10"); $button-text-color: themed("color-text"); + $button-stealth-color: themed("color-link"); + $button-stealth-color-hover: themed("color-link-hover"); + display: flex; gap: st-value(100) / 4; border-radius: radius(025); @@ -50,10 +53,14 @@ padding: (st-value(100) / 2) 0; svg { background: $button-background; } - span { color: themed("color-link"); } + span { color: $button-stealth-color; } &:hover { svg { background: $button-background-hover; } - span { color: themed("color-link-hover"); } + span { color: $button-stealth-color-hover; } } } + + &.icon { + padding: (st-value(100) / 2) 0; + } } diff --git a/app/javascript/src/styles/common/paginator.scss b/app/javascript/src/styles/common/paginator.scss index 6ffd9a446..f00e19abe 100644 --- a/app/javascript/src/styles/common/paginator.scss +++ b/app/javascript/src/styles/common/paginator.scss @@ -1,4 +1,4 @@ -.paginator { +nav.pagination { display: flex; flex-wrap: wrap; @@ -8,6 +8,7 @@ width: max-content; margin: 0 auto; + max-width: calc(100vw - 1rem); & > a, & > span { display: flex; @@ -27,9 +28,8 @@ } } - & > a[data-disabled="true"] { - color: var(--color-text); - pointer-events: none; + span.prev, span.next { + cursor: default; } // Ordering @@ -99,3 +99,10 @@ a.page.lg { display: flex; } } } + + +// Sequential paginator +.paginator.sequential { + gap: 5rem; + a span { display: block; } +} diff --git a/app/javascript/src/styles/specific/post_index.scss b/app/javascript/src/styles/specific/post_index.scss index 67b6bfcfa..751a66ef5 100644 --- a/app/javascript/src/styles/specific/post_index.scss +++ b/app/javascript/src/styles/specific/post_index.scss @@ -196,22 +196,26 @@ body.c-posts.a-index[data-st-fullscreen="true"] { background: themed("color-section"); border-radius: 0.25rem; + &.hidden { display: none; } + // header h3 { + display: flex; + align-items: center; + + font-size: 1rem; + padding: 0.5rem; + cursor: pointer; - padding: 0.5rem 1rem 0.5rem 1.5rem; - - &::after { - @include font-awesome-icon; - content: unicode("f0da"); + & > svg { transition: transform 0.25s; - position: absolute; - top: 0; - left: 0; - padding: 0.5rem; + height: 1.5rem; + width: 1.5rem; } + + .wiki-excerpt-dismiss { margin-left: auto; } } // body @@ -221,6 +225,7 @@ body.c-posts.a-index[data-st-fullscreen="true"] { background-clip: text; color: transparent; + min-height: 0rem; max-height: 0rem; max-width: 50rem; overflow: hidden; @@ -268,9 +273,10 @@ body.c-posts.a-index[data-st-fullscreen="true"] { } &.open{ - .wiki-excerpt-toggle::after { transform: rotate(90deg); } + .wiki-excerpt-toggle svg { transform: rotate(90deg); } .styled-dtext { max-height: 10rem; + min-height: 2rem; } .wiki-excerpt-readmore { visibility: visible; } } diff --git a/app/javascript/src/styles/specific/themes.scss b/app/javascript/src/styles/specific/themes.scss index 019850de9..9e5a5d742 100644 --- a/app/javascript/src/styles/specific/themes.scss +++ b/app/javascript/src/styles/specific/themes.scss @@ -1,12 +1,12 @@ .theme-form { display: grid; grid-template-columns: 1fr; - gap: 0.5em 1em; + gap: 0.5rem 1rem; @include window-larger-than(30rem) { grid-template-columns: min-content auto; max-width: 30rem; - gap: 1em; + gap: 1rem; h3, br, p.theme-info { grid-column: 1 / -1; } label { text-align: right; } @@ -17,3 +17,13 @@ h3 { margin-top: 0.5em; } .hint { max-width: unset; } } + +.theme-variable-form { + display: grid; + grid-template-columns: auto min-content min-content; + gap: 0.5rem 1rem; + max-width: 30rem; + + h3 { grid-column: 1 / -1;} + label, span { align-content: center} +} \ No newline at end of file diff --git a/app/views/post_versions/_secondary_links.html.erb b/app/views/post_versions/_secondary_links.html.erb index faa568a3d..2dbf696b5 100644 --- a/app/views/post_versions/_secondary_links.html.erb +++ b/app/views/post_versions/_secondary_links.html.erb @@ -4,10 +4,12 @@ <%= subnav_link_to "Changes", post_versions_path %> <%= subnav_link_to "Help", help_page_path(id: "posts") %> <% if params[:action] == "index" && CurrentUser.is_privileged? %> - | <%= subnav_link_to "Undo selected", "" %> +
  • + <%= subnav_link_to "Undo selected", "" %> <%= subnav_link_to "Select All", "" %> <% if CurrentUser.is_moderator? %> - | <%= subnav_link_to "Apply Tag Script To Selected", "" %> +
  • + <%= subnav_link_to "Apply Tag Script To Selected", "" %> <% end %> <% end %> <% end %> diff --git a/app/views/posts/partials/index/_posts.html.erb b/app/views/posts/partials/index/_posts.html.erb index 64be54b83..0bdc55dc0 100644 --- a/app/views/posts/partials/index/_posts.html.erb +++ b/app/views/posts/partials/index/_posts.html.erb @@ -1,7 +1,13 @@
    <% if @wiki_text.present? %> -
    -

    <%= @wiki_page.pretty_title %>

    + diff --git a/app/views/static/theme.html.erb b/app/views/static/theme.html.erb index eeb601027..8344f356d 100644 --- a/app/views/static/theme.html.erb +++ b/app/views/static/theme.html.erb @@ -75,6 +75,26 @@
    + +
    +

    Variables

    + + + + + + + + + +
    + <% content_for(:page_title) do %> Themes <% end %>