From ed855ba9f9fd1b8d4c7bf59950a8ec4716b58f7a Mon Sep 17 00:00:00 2001 From: Masahiko AMANO Date: Sun, 29 Jan 2023 15:20:50 +0300 Subject: [PATCH] perf(web): improve sasa menu design --- web/public/css/general.css | 5 ++-- web/public/css/tfm.css | 56 +++++++++++++++++++++++++++++--------- web/public/js/tfm.js | 29 ++++++++++++++------ web/public/tfm.html | 22 +++++++++++---- 4 files changed, 83 insertions(+), 29 deletions(-) diff --git a/web/public/css/general.css b/web/public/css/general.css index c167241..5084389 100644 --- a/web/public/css/general.css +++ b/web/public/css/general.css @@ -29,6 +29,7 @@ header { h1 { margin: 0; + margin-top: 36px; padding: 0; color: white; font-family: Epilogue, sans-serif; @@ -39,10 +40,10 @@ h1 { } main { - margin-top: 50px; + margin-top: 36px; background-color: #fff8; box-shadow: 0 0 0.5vw black; - border-radius: 1.5vw; + border-radius: 16px; width: 80vw; max-width: 700px; transition: 0.3s; diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css index 5dfd06e..3bd3f5e 100644 --- a/web/public/css/tfm.css +++ b/web/public/css/tfm.css @@ -1,7 +1,17 @@ +html, +body { + padding-bottom: 0; + padding-left: 0; + padding-right: 0; +} + main { position: relative; - height: 70vh; - max-width: 100%; + width: 100%; + height: 100%; + max-width: 100vw; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .contents-wrapper { @@ -17,7 +27,7 @@ main { overflow-x: hidden; } -.item { +.sasa { position: relative; margin: 16px; padding: 0; @@ -28,9 +38,10 @@ main { background-size: cover; background-position: center; overflow: hidden; + cursor: pointer; } -.item .overlay { +.sasa .overlay { position: absolute; top: 0; right: 0; @@ -39,11 +50,11 @@ main { background-color: #0000; } -.item:hover .overlay { +.sasa:hover .overlay { background-color: #0002; } -.item.selected .overlay { +.sasa.selected .overlay { background-color: #0004; } @@ -76,17 +87,36 @@ main { overflow: hidden; } -form#sasa-menu { - margin: 0; +#sasa-form { padding: 2vw 2vw; - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; } #tanzaku-list { - height: 40vh; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + padding: 8px 0; + height: 39vh; + box-shadow: inset -5px 5px 5px #1111, inset -5px -5px 5px #1111; overflow-y: scroll; overflow-x: hidden; } + +.tanzaku { + margin: 5px; + padding: 7px; + border: 1px solid #555; + border-radius: 7px; + cursor: default; +} + +.tanzaku:hover, +.tanzaku.selected:hover { + background-color: #0004; +} + +.tanzaku.selected { + background-color: #0002; +} diff --git a/web/public/js/tfm.js b/web/public/js/tfm.js index 0e098e4..9a01bd9 100644 --- a/web/public/js/tfm.js +++ b/web/public/js/tfm.js @@ -13,7 +13,7 @@ function sasa_load(id) { if (id < 0) { sasahyou = resp.data; sasahyou.forEach((sasa) => { - $(".contents-wrapper").append(`
`); + $(".contents-wrapper").append(`
`); }); } } @@ -31,7 +31,7 @@ function tanzaku_load(id) { if (id < 0) { sappyou = resp.data; sappyou.forEach((tanzaku) => { - $("#tanzaku-list").append(`
`); + $("#tanzaku-list").append(`
${tanzaku.name}
`); }); } } @@ -53,7 +53,7 @@ $(window).on("load", function () { sasa_load(-1); tanzaku_load(-1); kazari_load(); -}) +}); $(document).keyup(function (e) { if (e.key === "Escape") { @@ -61,7 +61,7 @@ $(document).keyup(function (e) { } }); -$(document).on("click", ".item", function (e) { +$(document).on("click", ".sasa", function (e) { let wasSelected = $(this).hasClass("selected"); if (!e.ctrlKey) { $(".selected").removeClass("selected"); @@ -74,7 +74,7 @@ $(document).on("click", ".item", function (e) { } }); -$(document).on("dblclick", ".item", function (e) { +$(document).on("dblclick", ".sasa", function (e) { let id = parseInt($(this).attr("id").slice(1)); let sasa; sasahyou.every(current_sasa => { @@ -86,16 +86,29 @@ $(document).on("dblclick", ".item", function (e) { }); $(".menu-wrapper").css("display", "flex"); $("#sasa-name").val(decodeURI(sasa.path)); + $("#btn-full").attr("href", "/files/" + sasa.path); let resp = tdb_query("$TFM", 24, '' + id); if (!resp.status) { alert("Something went wrong!"); return; } resp.data.forEach(tanzaku => { - $(`#ct${tanzaku.id}`).prop("checked", true); + $(`#t${tanzaku.id}`).addClass("selected"); }); }); -$(document).on("click", ".menu-wrapper", function (e) { - $(".menu-wrapper").css("display", "none"); +$(document).on("click", "#btn-close", function (e) { + e.preventDefault(); + $("#sasa-menu").css("display", "none"); + sappyou.forEach(tanzaku => { + $(`#t${tanzaku.id}`).removeClass("selected"); + }); +}); + +$(document).on("click", ".tanzaku", function (e) { + if ($(this).hasClass("selected")) { + $(this).removeClass("selected"); + } else { + $(this).addClass("selected"); + } }); diff --git a/web/public/tfm.html b/web/public/tfm.html index d0747f6..ae8821d 100644 --- a/web/public/tfm.html +++ b/web/public/tfm.html @@ -33,17 +33,27 @@
-
+