H1K0-dev/tanabata
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(web): improve sasa menu design

Browse Source
This commit is contained in:
Masahiko AMANO 2023-01-29 15:20:50 +03:00
parent 9159cd0aca
commit ed855ba9f9
4 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/public/css/general.css
View File

@ -29,6 +29,7 @@ header {
h1 { h1 {
margin: 0; margin: 0;
margin-top: 36px;
padding: 0; padding: 0;
color: white; color: white;
font-family: Epilogue, sans-serif; font-family: Epilogue, sans-serif;
@ -39,10 +40,10 @@ h1 {
} }
main { main {
margin-top: 50px; margin-top: 36px;
background-color: #fff8; background-color: #fff8;
box-shadow: 0 0 0.5vw black; box-shadow: 0 0 0.5vw black;
border-radius: 1.5vw; border-radius: 16px;
width: 80vw; width: 80vw;
max-width: 700px; max-width: 700px;
transition: 0.3s; transition: 0.3s;

56
web/public/css/tfm.css
View File

@ -1,7 +1,17 @@
html,
body {
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
main { main {
position: relative; position: relative;
height: 70vh; width: 100%;
max-width: 100%; height: 100%;
max-width: 100vw;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
.contents-wrapper { .contents-wrapper {
@ -17,7 +27,7 @@ main {
overflow-x: hidden; overflow-x: hidden;
} }
.item { .sasa {
position: relative; position: relative;
margin: 16px; margin: 16px;
padding: 0; padding: 0;
@ -28,9 +38,10 @@ main {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
overflow: hidden; overflow: hidden;
cursor: pointer;
} }
.item .overlay { .sasa .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -39,11 +50,11 @@ main {
background-color: #0000; background-color: #0000;
} }
.item:hover .overlay { .sasa:hover .overlay {
background-color: #0002; background-color: #0002;
} }
.item.selected .overlay { .sasa.selected .overlay {
background-color: #0004; background-color: #0004;
} }
@ -76,17 +87,36 @@ main {
overflow: hidden; overflow: hidden;
} }
form#sasa-menu { #sasa-form {
margin: 0;
padding: 2vw 2vw; padding: 2vw 2vw;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
} }
#tanzaku-list { #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-y: scroll;
overflow-x: hidden; 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;
}

29
web/public/js/tfm.js
View File

@ -13,7 +13,7 @@ function sasa_load(id) {
if (id < 0) { if (id < 0) {
sasahyou = resp.data; sasahyou = resp.data;
sasahyou.forEach((sasa) => { sasahyou.forEach((sasa) => {
$(".contents-wrapper").append(`<div class="item" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`); $(".contents-wrapper").append(`<div class="sasa" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
}); });
} }
} }
@ -31,7 +31,7 @@ function tanzaku_load(id) {
if (id < 0) { if (id < 0) {
sappyou = resp.data; sappyou = resp.data;
sappyou.forEach((tanzaku) => { sappyou.forEach((tanzaku) => {
$("#tanzaku-list").append(`<div class="form-check"><input class="form-check-input" type="checkbox" id="ct${tanzaku.id}"><label class="form-check-label" for="ct${tanzaku.id}">${tanzaku.name}</label></div>`); $("#tanzaku-list").append(`<div class="tanzaku" id="t${tanzaku.id}">${tanzaku.name}</div>`);
}); });
} }
} }
@ -53,7 +53,7 @@ $(window).on("load", function () {
sasa_load(-1); sasa_load(-1);
tanzaku_load(-1); tanzaku_load(-1);
kazari_load(); kazari_load();
}) });
$(document).keyup(function (e) { $(document).keyup(function (e) {
if (e.key === "Escape") { 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"); let wasSelected = $(this).hasClass("selected");
if (!e.ctrlKey) { if (!e.ctrlKey) {
$(".selected").removeClass("selected"); $(".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 id = parseInt($(this).attr("id").slice(1));
let sasa; let sasa;
sasahyou.every(current_sasa => { sasahyou.every(current_sasa => {
@ -86,16 +86,29 @@ $(document).on("dblclick", ".item", function (e) {
}); });
$(".menu-wrapper").css("display", "flex"); $(".menu-wrapper").css("display", "flex");
$("#sasa-name").val(decodeURI(sasa.path)); $("#sasa-name").val(decodeURI(sasa.path));
$("#btn-full").attr("href", "/files/" + sasa.path);
let resp = tdb_query("$TFM", 24, '' + id); let resp = tdb_query("$TFM", 24, '' + id);
if (!resp.status) { if (!resp.status) {
alert("Something went wrong!"); alert("Something went wrong!");
return; return;
} }
resp.data.forEach(tanzaku => { resp.data.forEach(tanzaku => {
$(`#ct${tanzaku.id}`).prop("checked", true); $(`#t${tanzaku.id}`).addClass("selected");
}); });
}); });
$(document).on("click", ".menu-wrapper", function (e) { $(document).on("click", "#btn-close", function (e) {
$(".menu-wrapper").css("display", "none"); 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");
}
}); });

22
web/public/tfm.html
View File

@ -33,17 +33,27 @@
<div class="contents-wrapper"> <div class="contents-wrapper">
</div> </div>
</main> </main>
<div class="menu-wrapper"> <div class="menu-wrapper" id="sasa-menu">
<div class="menu"> <div class="menu">
<h2>Sasa menu</h2> <h2>Sasa menu</h2>
<form id="sasa-menu"> <form id="sasa-form">
<div class="form-group"> <div class="form-group row">
<label for="sasa-name">File name</label> <label class="col-sm-2 col-form-label" for="sasa-name">File name</label>
<input type="text" name="name" class="form-control" id="sasa-name"> <div class="col-sm-10">
<input type="text" name="sasa-name" class="form-control" id="sasa-name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="tanzaku-filter">Tanzaku filter</label>
<div class="col-sm-9">
<input type="text" name="tanzaku-filter" class="form-control" id="tanzaku-filter">
</div>
</div> </div>
<div class="form-group" id="tanzaku-list"></div> <div class="form-group" id="tanzaku-list"></div>
<div class="form-group"> <div class="form-group button-flex">
<button class="btn btn-primary" id="btn-update">Confirm</button> <button class="btn btn-primary" id="btn-update">Confirm</button>
<a href="" target="_blank" class="btn btn-outline-info" id="btn-full">View full</a>
<button class="btn btn-outline-danger" id="btn-close">Close</button>
</div> </div>
</form> </form>
</div> </div>