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 %>
+
+
+ <%= 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 %>