forked from e621ng/e621ng
[Posts] Tweak the wiki excerpt toggle behavior (#875)
This commit is contained in:
Cinder
GitHub
parent
551ee23eb7
commit
9cca923ced
@ -39,14 +39,16 @@ PostSearch.initialize_input = function ($form) {
|
||||
|
||||
PostSearch.initialize_wiki_preview = function ($preview) {
|
||||
let visible = LStorage.Posts.WikiExcerpt;
|
||||
if (visible)
|
||||
$preview.removeClass("hidden");
|
||||
if (visible) $preview.addClass("open");
|
||||
window.setTimeout(() => { // Disable the rollout on first load
|
||||
$preview.removeClass("loading");
|
||||
}, 250);
|
||||
|
||||
$($preview.find("a.wiki-excerpt-toggle")).on("click", (event) => {
|
||||
$($preview.find("h3.wiki-excerpt-toggle")).on("click", (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
visible = !visible;
|
||||
$preview.toggleClass("hidden", !visible);
|
||||
$preview.toggleClass("open", visible);
|
||||
LStorage.Posts.WikiExcerpt = visible;
|
||||
|
||||
return false;
|
||||
|
||||
@ -34,82 +34,6 @@
|
||||
flex-flow: column;
|
||||
gap: 1em;
|
||||
|
||||
.wiki-excerpt {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
padding: 1em 1em 0;
|
||||
gap: 0.5em;
|
||||
|
||||
background: var(--color-section);
|
||||
max-width: 60em;
|
||||
|
||||
.wiki-excerpt-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 1em;
|
||||
outline: none;
|
||||
|
||||
transition: transform 0.25s;
|
||||
|
||||
&::after {
|
||||
@include font-awesome-icon;
|
||||
content: unicode("f0d8");
|
||||
}
|
||||
}
|
||||
|
||||
.styled-dtext {
|
||||
background: linear-gradient(to top, var(--color-section), var(--color-text));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
max-height: 10em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-height 0.25s;
|
||||
|
||||
// Disable links
|
||||
pointer-events: none;
|
||||
cursor: unset;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: underline;
|
||||
&::after { content: none; }
|
||||
}
|
||||
}
|
||||
|
||||
.wiki-excerpt-readmore {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3em;
|
||||
|
||||
// Makes the button appear in the middle of the animation
|
||||
transition: visibility 0s 0.125s;
|
||||
|
||||
span {
|
||||
padding: 0.5em 1em;
|
||||
background: var(--color-section);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden{
|
||||
.wiki-excerpt-toggle { transform: rotate(-90deg); }
|
||||
.styled-dtext {
|
||||
max-height: 0;
|
||||
}
|
||||
.wiki-excerpt-readmore { visibility: hidden; }
|
||||
}
|
||||
}
|
||||
|
||||
.paginator {
|
||||
padding: 1em 0;
|
||||
}
|
||||
@ -147,3 +71,97 @@
|
||||
grid-template-rows: min-content 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FEATURES
|
||||
// Wiki Excerpt
|
||||
.wiki-excerpt {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
|
||||
background: var(--color-section);
|
||||
|
||||
// header
|
||||
h3 {
|
||||
cursor: pointer;
|
||||
padding: 0.5em 1em 0.5em 1.5em;
|
||||
|
||||
&::after {
|
||||
@include font-awesome-icon;
|
||||
content: unicode("f0da");
|
||||
|
||||
transition: transform 0.25s;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
.styled-dtext {
|
||||
background: linear-gradient(to top, var(--color-section), var(--color-text));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
max-height: 0em;
|
||||
max-width: 50rem;
|
||||
overflow: hidden;
|
||||
padding: 0 0.5em;
|
||||
|
||||
transition: max-height 0.25s;
|
||||
|
||||
// Disable links
|
||||
pointer-events: none;
|
||||
cursor: unset;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: underline;
|
||||
&::after { content: none; }
|
||||
}
|
||||
|
||||
p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
// wiki link
|
||||
.wiki-excerpt-readmore {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
height: 3em;
|
||||
max-width: 50rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
// Makes the button appear in the middle of the animation
|
||||
transition: visibility 0s 0.125s;
|
||||
visibility: hidden;
|
||||
|
||||
span {
|
||||
padding: 0.5em 1em;
|
||||
background: var(--color-section);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.open{
|
||||
.wiki-excerpt-toggle::after { transform: rotate(90deg); }
|
||||
.styled-dtext {
|
||||
max-height: 10em;
|
||||
}
|
||||
.wiki-excerpt-readmore { visibility: visible; }
|
||||
}
|
||||
|
||||
&.loading {
|
||||
h3::after, .styled-dtext { transition: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<div id="posts" class="post-index-gallery user-disable-cropped-<%= Danbooru.config.enable_image_cropping? && CurrentUser.user.disable_cropped_thumbnails? %>">
|
||||
<% if @wiki_text.present? %>
|
||||
<section class="wiki-excerpt hidden">
|
||||
<h3><%= @wiki_page.pretty_title %></h3>
|
||||
<a href="" class="wiki-excerpt-toggle" role="button"></a>
|
||||
<section class="wiki-excerpt loading">
|
||||
<h3 role="button" class="wiki-excerpt-toggle"><%= @wiki_page.pretty_title %></h3>
|
||||
<%= format_text(@wiki_text, allow_color: true, max_thumbs: 0) %>
|
||||
<a href="<%= wiki_page_path(@wiki_page) %>" class="wiki-excerpt-readmore"><span>Read More</span></a>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user