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/javascript/src/javascripts/post_search.js b/app/javascript/src/javascripts/post_search.js index a3e3a20cc..8e52ff3ef 100644 --- a/app/javascript/src/javascripts/post_search.js +++ b/app/javascript/src/javascripts/post_search.js @@ -42,17 +42,38 @@ PostSearch.initialize_input = function ($form) { PostSearch.initialize_wiki_preview = function ($preview) { let visible = LStorage.Posts.WikiExcerpt; - if (visible) $preview.addClass("open"); + switch (visible) { + case 1: { + $preview.addClass("open"); + break; + } + case 2: { + $preview.addClass("hidden"); + break; + } + } + 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; }); 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 5d910a66a..62847cc6a 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/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/posts/partials/index/_posts.html.erb b/app/views/posts/partials/index/_posts.html.erb index 64be54b83..490752d6f 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 %>

+

+ <%= svg_icon(:chevron_right) %> + <%= @wiki_page.pretty_title %> + +

<%= format_text(@wiki_text, allow_color: true, max_thumbs: 0) %> Read More
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 %>