feat(web): new menu handling supports two view menus at once

web/public/css/tfm.css

@@ -46,7 +46,7 @@ main {
 }
 
 .menu {
-	display: none;
+	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 	background-color: #eee;
@@ -60,7 +60,7 @@ main {
 	overflow: hidden;
 }
 
-#menu-file-view {
+#menu-file-view .menu {
 	margin: 0;
 	width: 100%;
 	max-width: 120vmin;

web/public/js/tfm-files.js

@@ -9,76 +9,15 @@ $(window).on("load", function () {
 	});
 	sasahyou_load();
 	sasahyou.forEach((sasa) => {
-		$(".contents-wrapper").append(`<div class="item sasa" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}"><img class="thumb" data-src="${"/thumbs/" + sasa.path}"><div class="overlay"></div></div>`);
+		$(".contents-wrapper").append(`<div class="item sasa" sid="${sasa.id}" title="${sasa.path.split('/').slice(-1)}"><img class="thumb" data-src="${"/thumbs/" + sasa.path}"><div class="overlay"></div></div>`);
+		$("#menu-tag-view .list").append(`<div class="list-item sasa" sid="${sasa.id}" title="${sasa.path.split('/').slice(-1)}"><img class="thumb" data-src="${"/thumbs/" + sasa.path}"><div class="overlay"></div></div>`);
 	});
 	sappyou_load();
 	sappyou.forEach((tanzaku) => {
-		$(".list").append(`<div class="list-item tanzaku" id="t${tanzaku.id}">${tanzaku.name}</div>`);
+		$("#menu-file-view .list").append(`<div class="list-item tanzaku" tid="${tanzaku.id}">${tanzaku.name}</div>`);
 	});
 });
 
-$(document).on("dblclick", ".item", function (e) {
-	e.preventDefault();
-	let id = parseInt($(this).attr("id").slice(1));
-	current_sasa_index = 0;
-	sasahyou.every(sasa => {
-		if (sasa.id === id) {
-			current_sasa = sasa;
-			return false;
-		}
-		current_sasa_index++;
-		return true;
-	});
-	menu_view_file_open();
-});
-
-$(document).on("input", "#text-filter", function (e) {
-	let filter = $(this).val().toLowerCase();
-	let unfiltered;
-	if ($("#selection-filter")[0].checked) {
-		unfiltered = $(".list-item.selected");
-	} else {
-		unfiltered = $(".list-item");
-	}
-	if (filter === "") {
-		unfiltered.css("display", "block");
-		return;
-	}
-	unfiltered.each((index, element) => {
-		let current = $(element);
-		if (current.text().toLowerCase().includes(filter)) {
-			current.css("display", "block");
-		} else {
-			current.css("display", "none");
-		}
-	});
-});
-
-$(document).on("submit", "#menu-file-view form", function (e) {
-	e.preventDefault();
-	let resp = tdb_query("$TFM", 24, '' + current_sasa.id);
-	if (!resp.status) {
-		alert("Something went wrong!");
-		return;
-	}
-	resp.data.forEach(tanzaku => {
-		let current = $(`#t${tanzaku.id}`)
-		if (current.hasClass("selected")) {
-			current.removeClass("selected");
-		} else {
-			if (!tdb_query("$TFM", 9, '' + current_sasa.id + ' ' + tanzaku.id).status) {
-				console.log("ERROR: failed to remove kazari: " + current_sasa.id + '-' + tanzaku.id);
-			}
-		}
-	});
-	$(".tanzaku.selected").each(function (index, element) {
-		if (!tdb_query("$TFM", 10, '' + current_sasa.id + ' ' + $(element).attr("id").slice(1))) {
-			console.log("ERROR: failed to add kazari: " + current_sasa.id + '-' + $(element).attr("id").slice(1));
-		}
-	});
-	menu_view_close();
-});
-
 $(document).on("submit", "#menu-add form", function (e) {
 	e.preventDefault();
 	let resp = tdb_query("$TFM", 18, $("#new-name").val());

web/public/js/tfm-management.js

@@ -20,6 +20,7 @@ if (localStorage["shoppyou_mts"] != null) {
 }
 var current_sasa = null, current_tanzaku = null;
 var current_sasa_index = -1;
+var menu_count = 0;
 
 function sasahyou_load() {
 	let db_info = tdb_query("$TFM", 0, "");
@@ -79,12 +80,15 @@ function shoppyou_load() {
 }
 
 function menu_view_file_open() {
-	$(".selected").removeClass("selected");
+	if (menu_count > 1) {
-	$(".menu-wrapper").css("display", "flex");
+		return;
+	}
+	menu_count++;
+	$("#menu-file-view .selected").removeClass("selected");
 	$("#menu-file-view").css("display", "flex");
 	$("#preview").attr("src", "/preview/" + current_sasa.path);
-	$("#name").val(decodeURI(current_sasa.path));
+	$("#file-name").val(decodeURI(current_sasa.path));
-	$(".list-item").css("display", "");
+	$("#menu-file-view .list-item").css("display", "");
 	$("#btn-full").attr("href", "/files/" + current_sasa.path);
 	let resp = tdb_query("$TFM", 24, '' + current_sasa.id);
 	if (!resp.status) {
@@ -92,53 +96,63 @@ function menu_view_file_open() {
 		return;
 	}
 	resp.data.forEach(tanzaku => {
-		$(`#t${tanzaku.id}`).addClass("selected");
+		$(`.list-item[tid="${tanzaku.id}"]`).addClass("selected");
 	});
-	if ($("#selection-filter")[0].checked) {
+	if ($("#file-selection-filter")[0].checked) {
-		$(".list-item:not(.selected)").css("display", "none");
+		$("#menu-file-view .list-item:not(.selected)").css("display", "none");
 	} else {
-		$(".list-item:not(.selected)").css("display", "block");
+		$("#menu-file-view .list-item:not(.selected)").css("display", "block");
 	}
 }
 
 function menu_view_tag_open() {
+	if (menu_count > 1) {
+		return;
+	}
+	menu_count++;
 	$(function () {
-		$(".thumb").Lazy({
+		$("#menu-tag-view .thumb").Lazy({
 			scrollDirection: "vertical",
 			effect: "fadeIn",
 			visibleOnly: true,
 			appendScroll: $(".list")[0],
 		});
 	});
-	$(".selected").removeClass("selected");
+	$("#menu-tag-view .selected").removeClass("selected");
-	$(".menu-wrapper").css("display", "flex");
+	$("#menu-tag-view").css("display", "flex");
-	$("#menu-view").css("display", "flex");
+	$("#menu-tag-view .list-item").css("display", "");
-	$("#name").val(decodeURI(current_tanzaku.name));
+	$("#tag-name").val(decodeURI(current_tanzaku.name));
 	let resp = tdb_query("$TFM", 40, '' + current_tanzaku.id);
 	if (!resp.status) {
 		alert("Something went wrong!");
 		return;
 	}
 	resp.data.forEach(sasa => {
-		$(`#s${sasa.id}`).addClass("selected");
+		$(`.list-item[sid="${sasa.id}"]`).addClass("selected");
 	});
-	if ($("#selection-filter")[0].checked) {
+	if ($("#tag-selection-filter")[0].checked) {
-		$(".list-item:not(.selected)").css("display", "none");
+		$("#menu-tag-view .list-item:not(.selected)").css("display", "none");
 	} else {
-		$(".list-item:not(.selected)").css("display", "block");
+		$("#menu-tag-view .list-item:not(.selected)").css("display", "block");
 	}
 }
 
-function menu_view_close() {
+function menu_view_file_close() {
-	$(".menu-wrapper").css("display", "none");
+	menu_count--;
-	$("#menu-view").css("display", "none");
 	$("#menu-file-view").css("display", "none");
-	$(".list-item").removeClass("selected").css("display", "");
+	$("#menu-file-view .list-item").removeClass("selected").css("display", "");
-	$("#name").val("");
+	$("#file-name").val("");
-	$(".menu #text-filter").val("");
+	$("#text-filter").val("");
 	current_sasa_index = -1;
 }
 
+function menu_view_tag_close() {
+	menu_count--;
+	$("#menu-tag-view").css("display", "none");
+	$("#menu-tag-view .list-item").removeClass("selected").css("display", "");
+	$("#tag-name").val("");
+}
+
 function menu_add_open() {
 	$(".menu-wrapper").css("display", "flex");
 	$("#menu-add").css("display", "flex");
@@ -153,21 +167,23 @@ function menu_add_close() {
 
 function file_next() {
 	if (current_sasa_index === sasahyou.length - 1) {
-		menu_view_close();
+		menu_view_file_close();
 		return;
 	}
 	current_sasa_index++;
 	current_sasa = sasahyou[current_sasa_index];
+	menu_count--;
 	menu_view_file_open();
 }
 
 function file_prev() {
 	if (current_sasa_index === 0) {
-		menu_view_close();
+		menu_view_file_close();
 		return;
 	}
 	current_sasa_index--;
 	current_sasa = sasahyou[current_sasa_index];
+	menu_count--;
 	menu_view_file_open();
 }
 
@@ -210,6 +226,34 @@ $(document).on("click", ".item", function (e) {
 	}
 });
 
+$(document).on("dblclick", ".sasa", function (e) {
+	e.preventDefault();
+	let id = parseInt($(this).attr("sid"));
+	current_sasa_index = 0;
+	sasahyou.every(sasa => {
+		if (sasa.id === id) {
+			current_sasa = sasa;
+			return false;
+		}
+		current_sasa_index++;
+		return true;
+	});
+	menu_view_file_open();
+});
+
+$(document).on("dblclick", ".tanzaku", function (e) {
+	e.preventDefault();
+	let id = parseInt($(this).attr("tid"));
+	sappyou.every(tanzaku => {
+		if (tanzaku.id === id) {
+			current_tanzaku = tanzaku;
+			return false;
+		}
+		return true;
+	});
+	menu_view_tag_open();
+});
+
 $(document).on("click", "#btn-new", function (e) {
 	e.preventDefault();
 	menu_add_open();
@@ -223,24 +267,125 @@ $(document).on("click", ".list-item", function (e) {
 	}
 });
 
-$(document).on("click", "#selection-filter", function (e) {
+$(document).on("click", "#file-selection-filter", function (e) {
+	let notselected = $("#menu-file-view .list-item:not(.selected)");
 	if (this.checked) {
-		$(".list-item:not(.selected)").css("display", "none");
+		notselected.css("display", "none");
 	} else {
-		$(".list-item:not(.selected)").css("display", "block");
+		notselected.css("display", "block");
 	}
 });
 
-$(document).on("click", "#btn-close", function (e) {
+$(document).on("click", "#tag-selection-filter", function (e) {
-	e.preventDefault();
+	let notselected = $("#menu-tag-view .list-item:not(.selected)");
-	menu_view_close();
+	if (this.checked) {
+		notselected.css("display", "none");
+	} else {
+		notselected.css("display", "block");
+	}
 });
 
-$(document).on("click", "#btn-reset", function (e) {
+$(document).on("input", "#text-filter", function (e) {
+	let filter = $(this).val().toLowerCase();
+	let unfiltered;
+	if ($("#selection-filter")[0].checked) {
+		unfiltered = $(".list-item.selected");
+	} else {
+		unfiltered = $(".list-item");
+	}
+	if (filter === "") {
+		unfiltered.css("display", "block");
+		return;
+	}
+	unfiltered.each((index, element) => {
+		let current = $(element);
+		if (current.text().toLowerCase().includes(filter)) {
+			current.css("display", "block");
+		} else {
+			current.css("display", "none");
+		}
+	});
+});
+
+$(document).on("reset", "#menu-file-view form", function (e) {
+	e.preventDefault();
+	menu_view_file_close();
+});
+
+$(document).on("reset", "#menu-tag-view form", function (e) {
+	e.preventDefault();
+	menu_view_tag_close();
+});
+
+$(document).on("reset", "#menu-add form", function (e) {
 	e.preventDefault();
 	menu_add_close();
 });
 
+$(document).on("submit", "#menu-file-view form", function (e) {
+	e.preventDefault();
+	let resp = tdb_query("$TFM", 24, '' + current_sasa.id);
+	if (!resp.status) {
+		alert("Something went wrong!");
+		return;
+	}
+	resp.data.forEach(tanzaku => {
+		let current = $(`.list-item[tid="${tanzaku.id}"]`);
+		if (current.hasClass("selected")) {
+			current.removeClass("selected");
+		} else {
+			if (!tdb_query("$TFM", 9, '' + current_sasa.id + ' ' + tanzaku.id).status) {
+				console.log("ERROR: failed to remove kazari: " + current_sasa.id + '-' + tanzaku.id);
+			}
+		}
+	});
+	$(".tanzaku.selected").each(function (index, element) {
+		if (!tdb_query("$TFM", 10, '' + current_sasa.id + ' ' + $(element).attr("tid"))) {
+			console.log("ERROR: failed to add kazari: " + current_sasa.id + '-' + $(element).attr("tid"));
+		}
+	});
+	menu_view_file_close();
+});
+
+$(document).on("submit", "#menu-tag-view form", function (e) {
+	e.preventDefault();
+	let resp = tdb_query("$TFM", 40, '' + current_tanzaku.id);
+	if (!resp.status) {
+		alert("Something went wrong!");
+		return;
+	}
+	resp.data.forEach(sasa => {
+		let current = $(`.list-item[sid="${sasa.id}"]`);
+		if (current.hasClass("selected")) {
+			current.removeClass("selected");
+		} else {
+			if (!tdb_query("$TFM", 9, '' + sasa.id + ' ' + current_tanzaku.id).status) {
+				console.log("ERROR: failed to remove kazari: " + sasa.id + '-' + current_tanzaku.id);
+			}
+		}
+	});
+	$(".sasa.selected").each(function (index, element) {
+		if (!tdb_query("$TFM", 10, '' + $(element).attr("sid") + ' ' + current_tanzaku.id)) {
+			console.log("ERROR: failed to add kazari: " + $(element).attr("sid") + '-' + current_tanzaku.id);
+		}
+	});
+	menu_view_tag_close();
+});
+
+$(document).on("click", "#btn-remove", function (e) {
+	e.preventDefault();
+	if (!confirm("This tag will be removed permanently. Are you sure?")) {
+		return;
+	}
+	let resp = tdb_query("$TFM", 33, '' + current_tanzaku.id);
+	if (!resp.status) {
+		alert("Something went wrong!");
+		return;
+	}
+	menu_add_close();
+	location.reload(true);
+});
+
 $(document).on("click", "#file-next", function (e) {
 	e.preventDefault();
 	file_next();

web/public/js/tfm-tags.js

@@ -1,15 +1,16 @@
 $(window).on("load", function () {
 	sappyou_load();
 	sappyou.forEach((tanzaku) => {
-		$(".contents-wrapper").append(`<div class="item tanzaku" id="t${tanzaku.id}">${tanzaku.name}</div>`);
+		$(".contents-wrapper").append(`<div class="item tanzaku" tid="${tanzaku.id}">${tanzaku.name}</div>`);
+		$("#menu-file-view .list").append(`<div class="list-item tanzaku" tid="${tanzaku.id}">${tanzaku.name}</div>`);
 	});
 	sasahyou_load();
 	sasahyou.forEach((sasa) => {
-		$(".list").append(`<div class="list-item sasa" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}"><img class="thumb" data-src="${"/thumbs/" + sasa.path}"><div class="overlay"></div></div>`);
+		$("#menu-tag-view .list").append(`<div class="list-item sasa" sid="${sasa.id}" title="${sasa.path.split('/').slice(-1)}"><img class="thumb" data-src="${"/thumbs/" + sasa.path}"><div class="overlay"></div></div>`);
 	});
 });
 
-$(document).on("input", "#text-filter", function (e) {
+$(document).on("input", "#text-filter-all", function (e) {
 	let filter = $(this).val().toLowerCase();
 	let unfiltered = $(".item");
 	if (filter === "") {
@@ -26,58 +27,6 @@ $(document).on("input", "#text-filter", function (e) {
 	});
 });
 
-$(document).on("dblclick", ".item", function (e) {
-	e.preventDefault();
-	let id = parseInt($(this).attr("id").slice(1));
-	sappyou.every(tanzaku => {
-		if (tanzaku.id === id) {
-			current_tanzaku = tanzaku;
-			return false;
-		}
-		return true;
-	});
-	menu_view_tag_open();
-});
-
-$(document).on("submit", "#menu-view form", function (e) {
-	e.preventDefault();
-	let resp = tdb_query("$TFM", 40, '' + current_tanzaku.id);
-	if (!resp.status) {
-		alert("Something went wrong!");
-		return;
-	}
-	resp.data.forEach(sasa => {
-		let current = $(`#s${sasa.id}`)
-		if (current.hasClass("selected")) {
-			current.removeClass("selected");
-		} else {
-			if (!tdb_query("$TFM", 9, '' + sasa.id + ' ' + current_tanzaku.id).status) {
-				console.log("ERROR: failed to remove kazari: " + sasa.id + '-' + current_tanzaku.id);
-			}
-		}
-	});
-	$(".sasa.selected").each(function (index, element) {
-		if (!tdb_query("$TFM", 10, '' + $(element).attr("id").slice(1) + ' ' + current_tanzaku.id)) {
-			console.log("ERROR: failed to add kazari: " + $(element).attr("id").slice(1) + '-' + current_tanzaku.id);
-		}
-	});
-	menu_add_close();
-});
-
-$(document).on("click", "#btn-remove", function (e) {
-	e.preventDefault();
-	if (!confirm("This tag will be removed permanently. Are you sure?")) {
-		return;
-	}
-	let resp = tdb_query("$TFM", 33, '' + current_tanzaku.id);
-	if (!resp.status) {
-		alert("Something went wrong!");
-		return;
-	}
-	menu_add_close();
-	location.reload(true);
-});
-
 $(document).on("submit", "#menu-add form", function (e) {
 	e.preventDefault();
 	let resp = tdb_query("$TFM", 34, $("#new-name").val() + '\n' + $("#new-description").val());

web/public/tfm/files.html

@@ -36,8 +36,8 @@
 		<button class="btn btn-outline-secondary sasa" id="btn-new"><b>NEW</b></button>
 	</div>
 </main>
-<div class="menu-wrapper">
+<div class="menu-wrapper" id="menu-file-view">
-	<div class="menu" id="menu-file-view">
+	<div class="menu">
 		<div class="preview">
 			<img id="preview">
 			<div class="file-nav-btn" id="file-prev"></div>
@@ -45,9 +45,9 @@
 		</div>
 		<form>
 			<div class="form-group row">
-				<label class="col-form-label" for="name">File name</label>
+				<label class="col-form-label" for="file-name">File name</label>
 				<div class="col-form-input">
-					<input type="text" name="name" class="form-control" id="name">
+					<input type="text" name="name" class="form-control" id="file-name">
 				</div>
 			</div>
 			<div class="form-group row">
@@ -57,18 +57,43 @@
 				</div>
 			</div>
 			<div class="form-group form-check">
-				<input type="checkbox" name="selection-filter" class="form-check-input" id="selection-filter" checked>
+				<input type="checkbox" name="selection-filter" class="form-check-input" id="file-selection-filter" checked>
-				<label class="form-check-label" for="selection-filter">Show only selected</label>
+				<label class="form-check-label" for="file-selection-filter">Show only selected</label>
 			</div>
 			<div class="form-group list"></div>
 			<div class="form-group button-flex">
-				<button type="submit" class="btn btn-primary" id="btn-confirm">Confirm</button>
+				<button type="submit" class="btn btn-primary">Confirm</button>
 				<a target="_blank" class="btn btn-outline-info" id="btn-full">View full</a>
-				<button class="btn btn-outline-danger" id="btn-close">Close</button>
+				<button type="reset" class="btn btn-outline-danger">Close</button>
 			</div>
 		</form>
 	</div>
-	<div class="menu" id="menu-add">
+</div>
+<div class="menu-wrapper" id="menu-tag-view">
+	<div class="menu">
+		<h2>Tag menu</h2>
+		<form>
+			<div class="form-group row">
+				<label class="col-form-label" for="tag-name">Tag name</label>
+				<div class="col-form-input">
+					<input type="text" name="name" class="form-control" id="tag-name">
+				</div>
+			</div>
+			<div class="form-group form-check">
+				<input type="checkbox" name="selection-filter" class="form-check-input" id="tag-selection-filter">
+				<label class="form-check-label" for="tag-selection-filter">Show only selected</label>
+			</div>
+			<div class="form-group list"></div>
+			<div class="form-group button-flex">
+				<button type="submit" class="btn btn-primary">Confirm</button>
+				<button class="btn btn-danger" id="btn-remove">Remove</button>
+				<button type="reset" class="btn btn-outline-danger">Close</button>
+			</div>
+		</form>
+	</div>
+</div>
+<div class="menu-wrapper" id="menu-add">
+	<div class="menu">
 		<h2>Add new file</h2>
 		<form>
 			<div class="form-group row">
@@ -78,8 +103,8 @@
 				</div>
 			</div>
 			<div class="form-group button-flex">
-				<button type="submit" class="btn btn-primary" id="btn-add">Add</button>
+				<button type="submit" class="btn btn-primary">Add</button>
-				<button class="btn btn-outline-danger" id="btn-reset">Reset</button>
+				<button type="reset" class="btn btn-outline-danger">Reset</button>
 			</div>
 		</form>
 	</div>

web/public/tfm/tags.html

@@ -34,9 +34,9 @@
 <main>
 	<form id="filter">
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label" for="text-filter">Tag filter</label>
+			<label class="col-form-label" for="text-filter-all">Tag filter</label>
-			<div class="col-sm-10">
+			<div class="col-form-input">
-				<input type="text" name="text-filter" class="form-control" id="text-filter">
+				<input type="text" name="text-filter" class="form-control" id="text-filter-all">
 			</div>
 		</div>
 	</form>
@@ -44,34 +44,69 @@
 		<button class="btn btn-outline-secondary tanzaku" id="btn-new"><b>NEW</b></button>
 	</div>
 </main>
-<div class="menu-wrapper">
+<div class="menu-wrapper" id="menu-tag-view">
-	<div class="menu" id="menu-view">
+	<div class="menu">
 		<h2>Tag menu</h2>
 		<form>
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label" for="name">Tag name</label>
+				<label class="col-form-label" for="tag-name">Tag name</label>
-				<div class="col-sm-10">
+				<div class="col-form-input">
-					<input type="text" name="name" class="form-control" id="name">
+					<input type="text" name="name" class="form-control" id="tag-name">
 				</div>
 			</div>
 			<div class="form-group form-check">
-				<input type="checkbox" name="selection-filter" class="form-check-input" id="selection-filter" checked>
+				<input type="checkbox" name="selection-filter" class="form-check-input" id="tag-selection-filter">
-				<label class="form-check-label" for="selection-filter">Show only selected</label>
+				<label class="form-check-label" for="tag-selection-filter">Show only selected</label>
 			</div>
 			<div class="form-group list"></div>
 			<div class="form-group button-flex">
-				<button type="submit" class="btn btn-primary" id="btn-confirm">Confirm</button>
+				<button type="submit" class="btn btn-primary">Confirm</button>
 				<button class="btn btn-danger" id="btn-remove">Remove</button>
-				<button class="btn btn-outline-danger" id="btn-close">Close</button>
+				<button type="reset" class="btn btn-outline-danger">Close</button>
 			</div>
 		</form>
 	</div>
-	<div class="menu" id="menu-add">
+</div>
+<div class="menu-wrapper" id="menu-file-view">
+	<div class="menu">
+		<div class="preview">
+			<img id="preview">
+			<div class="file-nav-btn" id="file-prev"></div>
+			<div class="file-nav-btn" id="file-next"></div>
+		</div>
+		<form>
+			<div class="form-group row">
+				<label class="col-form-label" for="file-name">File name</label>
+				<div class="col-form-input">
+					<input type="text" name="name" class="form-control" id="file-name">
+				</div>
+			</div>
+			<div class="form-group row">
+				<label class="col-form-label" for="text-filter">Tag filter</label>
+				<div class="col-form-input">
+					<input type="text" name="text-filter" class="form-control" id="text-filter">
+				</div>
+			</div>
+			<div class="form-group form-check">
+				<input type="checkbox" name="selection-filter" class="form-check-input" id="file-selection-filter" checked>
+				<label class="form-check-label" for="file-selection-filter">Show only selected</label>
+			</div>
+			<div class="form-group list" id="file-list"></div>
+			<div class="form-group button-flex">
+				<button type="submit" class="btn btn-primary">Confirm</button>
+				<a target="_blank" class="btn btn-outline-info" id="btn-full">View full</a>
+				<button type="reset" class="btn btn-outline-danger">Close</button>
+			</div>
+		</form>
+	</div>
+</div>
+<div class="menu-wrapper" id="menu-add">
+	<div class="menu">
 		<h2>New tag</h2>
 		<form>
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label" for="new-name">Tag name</label>
+				<label class="col-form-label" for="new-name">Tag name</label>
-				<div class="col-sm-10">
+				<div class="col-form-input">
 					<input type="text" name="new-name" class="form-control" id="new-name">
 				</div>
 			</div>
@@ -80,8 +115,8 @@
 				<textarea class="form-control" name="new-description" id="new-description" rows="10"></textarea>
 			</div>
 			<div class="form-group button-flex">
-				<button type="submit" class="btn btn-primary" id="btn-add">Add</button>
+				<button type="submit" class="btn btn-primary">Add</button>
-				<button class="btn btn-outline-danger" id="btn-reset">Reset</button>
+				<button type="reset" class="btn btn-outline-danger">Reset</button>
 			</div>
 		</form>
 	</div>