From 66bc394f3a1c5ab3b4139678d77f461076410209 Mon Sep 17 00:00:00 2001 From: Cinder Date: Mon, 20 Jan 2025 07:14:26 -0800 Subject: [PATCH] [Home] Redesign the home page (#839) --- app/javascript/src/javascripts/mascots.js | 41 +++-- app/javascript/src/styles/base.scss | 1 + app/javascript/src/styles/specific/home.scss | 128 +++++++++++++ app/views/static/home.html.erb | 182 +++++-------------- 4 files changed, 197 insertions(+), 155 deletions(-) create mode 100644 app/javascript/src/styles/specific/home.scss diff --git a/app/javascript/src/javascripts/mascots.js b/app/javascript/src/javascripts/mascots.js index b732e8afa..b99dfd5ba 100644 --- a/app/javascript/src/javascripts/mascots.js +++ b/app/javascript/src/javascripts/mascots.js @@ -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 = $("").text("Mascot by ").append($("").text(mascot.artist_name).attr("href", mascot.artist_url)); - $("#mascot_artist").empty().append(artistLink); -} + $("#mascot-artist") + .text("Mascot by ") + .append($("").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; diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss index 0b92714a2..07847ae48 100644 --- a/app/javascript/src/styles/base.scss +++ b/app/javascript/src/styles/base.scss @@ -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"; diff --git a/app/javascript/src/styles/specific/home.scss b/app/javascript/src/styles/specific/home.scss new file mode 100644 index 000000000..af9b24cad --- /dev/null +++ b/app/javascript/src/styles/specific/home.scss @@ -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; + } + } + } +} diff --git a/app/views/static/home.html.erb b/app/views/static/home.html.erb index ad2b5cd0a..492239927 100644 --- a/app/views/static/home.html.erb +++ b/app/views/static/home.html.erb @@ -1,150 +1,56 @@ - - -
-
- <%= javascript_tag nonce: true do -%> - var mascots = <%= Mascot.active_for_browser.to_json.html_safe %>; - <% end -%> - -
<% content_for(:html_header) do -%>