perf(web): improve sasa menu design
This commit is contained in:
parent
9159cd0aca
commit
ed855ba9f9
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ function sasa_load(id) {
|
||||
if (id < 0) {
|
||||
sasahyou = resp.data;
|
||||
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) {
|
||||
sappyou = resp.data;
|
||||
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);
|
||||
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");
|
||||
}
|
||||
});
|
||||
|
||||
@ -33,17 +33,27 @@
|
||||
<div class="contents-wrapper">
|
||||
</div>
|
||||
</main>
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-wrapper" id="sasa-menu">
|
||||
<div class="menu">
|
||||
<h2>Sasa menu</h2>
|
||||
<form id="sasa-menu">
|
||||
<div class="form-group">
|
||||
<label for="sasa-name">File name</label>
|
||||
<input type="text" name="name" class="form-control" id="sasa-name">
|
||||
<form id="sasa-form">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label" for="sasa-name">File name</label>
|
||||
<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 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>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user