forked from e621ng/e621ng
[Home] Redesign the home page (#839)
This commit is contained in:
Cinder
GitHub
parent
9a56558b3c
commit
66bc394f3a
@ -1,33 +1,36 @@
|
||||
import LStorage from "./utility/storage";
|
||||
import Page from "./utility/page";
|
||||
|
||||
const Mascots = {
|
||||
current: 0,
|
||||
};
|
||||
|
||||
function showMascot (mascot) {
|
||||
$("body").css("background-image", "url(" + mascot.background_url + ")");
|
||||
$("body").css("background-color", mascot.background_color);
|
||||
$(".mascotbox").css("background-image", "url(" + mascot.background_url + ")");
|
||||
$(".mascotbox").css("background-color", mascot.background_color);
|
||||
Mascots.showMascot = function (mascot) {
|
||||
$("body").css({
|
||||
"--bg-image": `url("${mascot.background_url}")`,
|
||||
"--bg-color": mascot.background_color,
|
||||
});
|
||||
|
||||
const artistLink = $("<span>").text("Mascot by ").append($("<a>").text(mascot.artist_name).attr("href", mascot.artist_url));
|
||||
$("#mascot_artist").empty().append(artistLink);
|
||||
}
|
||||
$("#mascot-artist")
|
||||
.text("Mascot by ")
|
||||
.append($("<a>").text(mascot.artist_name).attr("href", mascot.artist_url));
|
||||
};
|
||||
|
||||
Mascots.changeMascot = function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
function changeMascot () {
|
||||
const mascots = window.mascots;
|
||||
|
||||
const availableMascotIds = Object.keys(mascots);
|
||||
const currentMascotIndex = availableMascotIds.indexOf(Mascots.current + "");
|
||||
|
||||
Mascots.current = availableMascotIds[(currentMascotIndex + 1) % availableMascotIds.length];
|
||||
showMascot(mascots[Mascots.current]);
|
||||
Mascots.showMascot(mascots[Mascots.current]);
|
||||
|
||||
LStorage.Site.Mascot = Mascots.current;
|
||||
}
|
||||
};
|
||||
|
||||
function initMascots () {
|
||||
$("#change-mascot").on("click", changeMascot);
|
||||
Mascots.initMascots = function () {
|
||||
const mascots = window.mascots;
|
||||
Mascots.current = LStorage.Site.Mascot;
|
||||
if (!mascots[Mascots.current]) {
|
||||
@ -35,10 +38,14 @@ function initMascots () {
|
||||
const mascotIndex = Math.floor(Math.random() * availableMascotIds.length);
|
||||
Mascots.current = availableMascotIds[mascotIndex];
|
||||
}
|
||||
showMascot(mascots[Mascots.current]);
|
||||
}
|
||||
Mascots.showMascot(mascots[Mascots.current]);
|
||||
|
||||
$("#mascot-swap").on("click", Mascots.changeMascot);
|
||||
};
|
||||
|
||||
$(function () {
|
||||
if ($("#c-static > #a-home").length)
|
||||
initMascots();
|
||||
if (!Page.matches("static", "home")) return;
|
||||
Mascots.initMascots();
|
||||
});
|
||||
|
||||
export default Mascots;
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
@import "specific/favorites.scss";
|
||||
@import "specific/forum.scss";
|
||||
@import "specific/guest_warning.scss";
|
||||
@import "specific/home.scss";
|
||||
@import "specific/iqdb_queries.scss";
|
||||
@import "specific/keyboard_shortcuts.scss";
|
||||
@import "specific/lockdown.scss";
|
||||
|
||||
128
app/javascript/src/styles/specific/home.scss
Normal file
128
app/javascript/src/styles/specific/home.scss
Normal file
@ -0,0 +1,128 @@
|
||||
body.c-static.a-home {
|
||||
background: #012e57 no-repeat center 0;
|
||||
background-color: var(--bg-color);
|
||||
background-image: var(--bg-image);
|
||||
|
||||
#page {
|
||||
background: none;
|
||||
margin: 50vh auto 0;
|
||||
max-width: 480px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// Common
|
||||
.home-section {
|
||||
// Frosted glass effect
|
||||
background-color: rgba(15, 15, 15, 0.35);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
padding: 1rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Search
|
||||
.home-search {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
|
||||
&:focus {
|
||||
background: #ffc;
|
||||
& + button[type="submit"] {
|
||||
background: #ffc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background: white;
|
||||
border-radius: 0 3px 3px 0;
|
||||
padding: 0 0.5em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: #25477b;
|
||||
padding: 0.5rem;
|
||||
border-radius: 3px;
|
||||
&:hover { background: #2b538e; }
|
||||
|
||||
i { color: var(--color-link-active); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer
|
||||
.home-footer-top {
|
||||
background-color: rgba(15, 15, 15, 0.35);
|
||||
backdrop-filter: blur(8px);
|
||||
margin: 3rem 0 0;
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
|
||||
@include window-larger-than(480px) {
|
||||
margin: 3rem 0.5rem 0;
|
||||
}
|
||||
|
||||
a#mascot-swap {
|
||||
background: #25477b;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
&:hover { background: #2b538e; }
|
||||
}
|
||||
}
|
||||
|
||||
.home-footer-bottom {
|
||||
background: #1f3c67;
|
||||
text-align: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
|
||||
@include window-larger-than(480px) {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.home-footer-links .separator {
|
||||
display: inline-flex;
|
||||
width: 4px;
|
||||
position: relative;
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--color-text);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,150 +1,56 @@
|
||||
<style type="text/css">
|
||||
body,div,h1,h2,h3,h4,h5,h6,p,ul,li,dd,dt {
|
||||
font-family:verdana,sans-serif;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
<div id="c-static"><div id="a-home">
|
||||
<%= javascript_tag nonce: true do -%>
|
||||
var mascots = <%= Mascot.active_for_browser.to_json.html_safe %>;
|
||||
<% end -%>
|
||||
|
||||
body {
|
||||
background-color: #012e56;
|
||||
background-attachment:fixed;
|
||||
background-position:50% 0%;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
<section class="home-section">
|
||||
<%= form_tag(posts_path, method: "get", class: "home-search") do %>
|
||||
<%= text_field_tag("tags", "", autofocus: "autofocus", placeholder: "Search posts by tag", data: { shortcut: "q", autocomplete: "tag-query" }) %>
|
||||
<%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit") %>
|
||||
<% end %>
|
||||
|
||||
#page {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
#links > a {
|
||||
padding: 0.25rem 0.25rem;
|
||||
}
|
||||
#links {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
div#a-home {
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
top:28em;
|
||||
left:0;
|
||||
right:0;
|
||||
}
|
||||
|
||||
.mascotbox {
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
background-repeat:no-repeat;
|
||||
background-attachment:fixed;
|
||||
background-position:50% 0;
|
||||
margin: 10px auto;
|
||||
padding: 2px 0;
|
||||
width: 480px;
|
||||
max-width: 98vw;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #000;
|
||||
text-shadow: 0 0 2px black, 0 0 6px black;
|
||||
}
|
||||
|
||||
.mascotbox:before {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 200vw;
|
||||
height: 200vh;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
|
||||
background-image: inherit;
|
||||
background-color: inherit;
|
||||
background-repeat: inherit;
|
||||
background-attachment: inherit;
|
||||
background-position: inherit;
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
#searchbox {
|
||||
padding-bottom:5px;
|
||||
}
|
||||
|
||||
.news-excerpt {
|
||||
padding: 5px 1em 0 1em;
|
||||
}
|
||||
|
||||
#searchbox3, #news-excerpt-box .previous-news-link {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 600px) {
|
||||
div#a-home {
|
||||
top: 25vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="c-static">
|
||||
<div id="a-home">
|
||||
<%= javascript_tag nonce: true do -%>
|
||||
var mascots = <%= Mascot.active_for_browser.to_json.html_safe %>;
|
||||
<% end -%>
|
||||
|
||||
<div id="searchbox" class='mascotbox'>
|
||||
<div id="static-index">
|
||||
<h1 style="font-size: 4em;"><%= link_to(Danbooru.config.app_name, "/") %></h1>
|
||||
<div id="links">
|
||||
<% if !CurrentUser.is_anonymous? %>
|
||||
<%= link_to "Account", home_users_path, title: "User home" %>
|
||||
<% else %>
|
||||
<%= link_to "Login/Signup", new_session_path, title: "Login or sign up" %>
|
||||
<% end %>
|
||||
<%= link_to "Posts", posts_path, title: "A paginated list of every post" %>
|
||||
<%= link_to "Comments", comments_path, title: "A paginated list of every comment" %>
|
||||
<%= link_to "Tags", tags_path, title: "A paginated list of every tag" %>
|
||||
<%= link_to "Wiki", wiki_pages_path(title: 'help:home'), title: "Wiki" %>
|
||||
<%= link_to "Forum", forum_topics_path, title: "Forum" %>
|
||||
<%= link_to "»", site_map_path, title: "A site map" %>
|
||||
</div>
|
||||
<div>
|
||||
<%= form_tag(posts_path, method: "get") do %>
|
||||
<div>
|
||||
<%= text_field_tag "tags", "", size: 30, autofocus: "autofocus", 'data-autocomplete': 'tag-query' %><br>
|
||||
<input type="submit" value="Search">
|
||||
<input type="button" value="Change Mascot" id="change-mascot">
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div id='mascot_artist'></div>
|
||||
<div class="home-buttons">
|
||||
<a href="/posts">
|
||||
<i class="fas fa-splotch"></i>
|
||||
Latest
|
||||
</a>
|
||||
<a href="/popular">
|
||||
<i class="fas fa-fire-alt"></i>
|
||||
Popular
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id='searchbox2' class='mascotbox'>
|
||||
<% if news_update = NewsUpdate.recent %>
|
||||
<section class="home-section">
|
||||
<div class="news-excerpt dtext-container"><%= format_text(news_update.message.lines.first, inline: true) %></div>
|
||||
<div class="previous-news-link"><%= link_to "Click here for previous news", news_updates_path %></div>
|
||||
</section>
|
||||
<% end %>
|
||||
|
||||
<section class="home-footer-top">
|
||||
<div id="mascot-artist">Mascot by</div>
|
||||
<a href="#" id="mascot-swap">Swap Mascot</a>
|
||||
</section>
|
||||
<section class="home-footer-bottom">
|
||||
<div class="home-footer-counter">
|
||||
<% Post.fast_count.to_s.each_char do |x| %>
|
||||
<%= image_tag("counter/#{x}.png") %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if news_update = NewsUpdate.recent %>
|
||||
<div id="news-excerpt-box" class="mascotbox">
|
||||
<div class="news-excerpt dtext-container"><%= format_text(news_update.message.lines.first, inline: true) %></div>
|
||||
<div class="previous-news-link"><%= link_to "Click here for previous news", news_updates_path %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div id='searchbox3' class='mascotbox'>
|
||||
<p>
|
||||
Serving <%= number_with_delimiter Post.fast_count %> posts<br/>
|
||||
<%= link_to "Takedown Policy and Process", takedown_static_path, title: "Takedown Information" %>
|
||||
| <%= link_to "Contact Us", contact_path, title: "Contact Us" %>
|
||||
| <%= link_to "Advertising", help_page_path(id: "advertising"), title: "Advertising with Us" %>
|
||||
| <%= link_to "Terms of Service", terms_of_service_path, title: "Terms of Service" %>
|
||||
| <%= link_to "Privacy", privacy_policy_path, title: "Privacy Policy" %>
|
||||
</p>
|
||||
<div class="home-footer-links">
|
||||
<%= link_to "Takedowns", takedown_static_path %>
|
||||
<span class="separator"></span>
|
||||
<%= link_to "Contact Us", contact_path %>
|
||||
<span class="separator"></span>
|
||||
<%= link_to "Advertising", help_page_path(id: "advertising") %>
|
||||
<br />
|
||||
<%= link_to "Terms of Service", terms_of_service_path %>
|
||||
<span class="separator"></span>
|
||||
<%= link_to "Privacy", privacy_policy_path %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div></div>
|
||||
|
||||
<% content_for(:html_header) do -%>
|
||||
<meta name="enable-auto-complete" content="<%= CurrentUser.user.enable_auto_complete %>">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user