V1.1

New version of the interface written in Svelte.

See: Svelte_menu

dist/build/bundle.css

@@ -0,0 +1,4 @@
+.filterBar.svelte-17lzm0a{background:var(--medium-color);margin-bottom:1rem;padding:10px 5px}
+.recipeItem.svelte-qibu9a{display:flex;padding:0.1rem;border-bottom:1px #ccc dotted}.recipeItem.svelte-qibu9a:nth-of-type(odd){background-color:rgba(0, 0, 0, 0.04)}.listItemSix.svelte-qibu9a{flex:6}.listItemThree.svelte-qibu9a{flex:3}.chicken.svelte-qibu9a{background:#8e5241;color:#fff}.beef.svelte-qibu9a{background:#d72414;color:#fff}.pork.svelte-qibu9a{background:#ef96d9;color:#fff}.fish.svelte-qibu9a{background:#005ba0;color:#fff}.egg.svelte-qibu9a{background:#fbc003;color:#000}.vegetable.svelte-qibu9a{background:#00903e;color:#fff}
+
+/*# sourceMappingURL=bundle.css.map */

dist/build/bundle.css.map

@@ -0,0 +1,14 @@
+{
+  "version": 3,
+  "file": "bundle.css",
+  "sources": [
+    "../../FilterBar.svelte",
+    "../../RecipeItem.svelte"
+  ],
+  "sourcesContent": [
+    "<script>\n    import { state } from '../store/store';\n\n    function updateMeat(event) {\n        const newVal = event.target.value;\n        state.updateMeatFilter(newVal);\n    }\n\n    function updateMeal(event) {\n        const newVal = event.target.value;\n        state.updateMealFilter(newVal);\n    }\n\n\n</script>\n\n<style>\n    .filterBar {\n        background: var(--medium-color);\n        margin-bottom: 1rem;\n        padding: 10px 5px;\n    }\n</style>\n\n<div class=\"container\">\n    <div class=\"filterBar grid-4\">\n        <select on:change={updateMeat}>\n            <option value=\"0\">All</option>\n            <option value=\"1\">Chicken</option>\n            <option value=\"2\">Beef</option>\n            <option value=\"3\">Pork</option>\n            <option value=\"4\">Fish</option>\n            <option value=\"5\">Egg</option>\n            <option value=\"6\">Vegetable</option>\n        </select>\n\n        <select on:change={updateMeal}>\n            <option value=\"0\">All</option>\n            <option value=\"1\">Mains</option>\n            <option value=\"2\">Soups</option>\n            <option value=\"128\">Notes</option>\n        </select>\n    </div>\n\n</div>\n",
+    "<script>\n    import { state } from '../store/store';\n\n    export let recipeItem = {};\n\n    let meatClass;\n    let meatText;\n    let url;\n    const meats = ['x', 'Chicken', 'Beef', 'Pork', 'Fish', 'Egg', 'Vegetable'];\n\n    $:{\n        meatText = meats[recipeItem.meat];\n        meatClass = (recipeItem.meat === '') ? '' : meats[recipeItem.meat].toLowerCase();\n        url = `/view/${recipeItem.short}`;\n    }\n\n    function editRecipe(hash) {\n        state.editRecipe(hash);\n    }\n\n</script>\n\n<style>\n    .recipeItem {\n        display: flex;\n        padding: 0.1rem;\n        border-bottom: 1px #ccc dotted;\n    }\n\n    .recipeItem:nth-of-type(odd) {\n        background-color: rgba(0, 0, 0, 0.04);\n    }\n\n    .listItemSix {\n\n        flex: 6;\n    }\n\n    .listItemThree {\n\n        flex: 3;\n    }\n\n    .chicken {\n        background: #8e5241;\n        color: #fff;\n    }\n\n    .beef {\n        background: #d72414;\n        color: #fff;\n    }\n\n    .pork {\n        background: #ef96d9;\n        color: #fff;\n    }\n\n    .fish {\n        background: #005ba0;\n        color: #fff;\n    }\n\n    .egg {\n        background: #fbc003;\n        color: #000;\n    }\n\n    .vegetable {\n        background: #00903e;\n        color: #fff;\n    }\n</style>\n\n<div class=\"recipeItem\">\n    <div class=\"listItemSix\"><a href={url}>{recipeItem.name}</a></div>\n    <div class=\"listItemThree\">\n        {#if recipeItem.mealtype ===2}\n            <span class=\"badge badge-light\">Soup</span>\n        {:else if recipeItem.mealtype===128}\n            <span class=\"badge badge-dark\">Note</span>\n\n        {/if}\n        <span class=\"badge {meatClass}\">{meatText}</span>\n    </div>\n    <div class=\"listItemThree all-center\">\n        <button class=\"btn btn-primary btn-sm\" type=\"button\" on:click={editRecipe(recipeItem.hash)}>Edit</button>\n    </div>\n</div>\n"
+  ],
+  "names": [],
+  "mappings": "AAiBI,UAAU,eAAC,CAAC,AACR,UAAU,CAAE,IAAI,cAAc,CAAC,CAC/B,aAAa,CAAE,IAAI,CACnB,OAAO,CAAE,IAAI,CAAC,GAAG,AACrB,CAAC;ACED,WAAW,cAAC,CAAC,AACT,OAAO,CAAE,IAAI,CACb,OAAO,CAAE,MAAM,CACf,aAAa,CAAE,GAAG,CAAC,IAAI,CAAC,MAAM,AAClC,CAAC,AAED,yBAAW,aAAa,GAAG,CAAC,AAAC,CAAC,AAC1B,gBAAgB,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,AACzC,CAAC,AAED,YAAY,cAAC,CAAC,AAEV,IAAI,CAAE,CAAC,AACX,CAAC,AAED,cAAc,cAAC,CAAC,AAEZ,IAAI,CAAE,CAAC,AACX,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,KAAK,cAAC,CAAC,AACH,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,KAAK,cAAC,CAAC,AACH,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,KAAK,cAAC,CAAC,AACH,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,IAAI,cAAC,CAAC,AACF,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,UAAU,cAAC,CAAC,AACR,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,IAAI,AACf,CAAC"
+}

dist/global.css

@@ -0,0 +1,503 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+/* Global Styles */
+:root {
+	--primary-color: #64B5F6;
+	--dark-color: #333333;
+	--light-color: #f4f4f4;
+	--danger-color: #dc3545;
+	--success-color: #28a745;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: 'Roboto', sans-serif;
+	font-size: 1rem;
+	line-height: 1.6;
+	background-color: #fff;
+	color: #333;
+}
+
+a {
+	color: var(--primary-color);
+	text-decoration: none;
+}
+
+a:hover {
+	color: #666;
+}
+
+ul {
+	list-style: none;
+}
+
+img {
+	width: 100%;
+}
+
+.dataRow {
+	cursor: pointer;
+}
+
+/* Utilities */
+.container {
+	max-width: 1100px;
+	margin: auto;
+	overflow: hidden;
+	padding: 0 2rem;
+}
+
+/* Text Styles*/
+.x-large {
+	font-size: 4rem;
+	line-height: 1.2;
+	margin-bottom: 1rem;
+}
+
+.large {
+	font-size: 3rem;
+	line-height: 1.2;
+	margin-bottom: 1rem;
+}
+
+.lead {
+	font-size: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-primary {
+	color: var(--primary-color);
+}
+
+.text-dark {
+	color: var(--dark-color);
+}
+
+.text-success {
+	color: var(--success-color);
+}
+
+.text-danger {
+	color: var(--danger-color);
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-right {
+	text-align: right;
+}
+
+.text-left {
+	text-align: left;
+}
+
+/* Center All */
+.all-center {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	margin: auto;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+}
+
+/* Cards */
+.card {
+	padding: 1rem;
+	border: #ccc 1px dotted;
+	margin: 0.7rem 0;
+}
+
+/* List */
+.list {
+	margin: 0.5rem 0;
+}
+
+.list li {
+	padding-bottom: 0.3rem;
+}
+
+/* Padding */
+.p {
+	padding: 0.5rem;
+}
+.p-1 {
+	padding: 1rem;
+}
+.p-2 {
+	padding: 2rem;
+}
+.p-3 {
+	padding: 3rem;
+}
+.py {
+	padding: 0.5rem 0;
+}
+.py-1 {
+	padding: 1rem 0;
+}
+.py-2 {
+	padding: 2rem 0;
+}
+.py-3 {
+	padding: 3rem 0;
+}
+
+/* Margin */
+.m {
+	margin: 0.5rem;
+}
+.m-1 {
+	margin: 1rem;
+}
+.m-2 {
+	margin: 2rem;
+}
+.m-3 {
+	margin: 3rem;
+}
+.my {
+	margin: 0.5rem 0;
+}
+.my-1 {
+	margin: 1rem 0;
+}
+.my-2 {
+	margin: 2rem 0;
+}
+.my-3 {
+	margin: 3rem 0;
+}
+
+/* Grid */
+.grid-2 {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 1rem;
+}
+
+.grid-3 {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 1rem;
+}
+
+.grid-4 {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	grid-gap: 1rem;
+}
+
+.btn {
+	display: inline-block;
+	background: var(--light-color);
+	color: #333;
+	padding: 0.4rem 1.3rem;
+	font-size: 1rem;
+	border: none;
+	cursor: pointer;
+	margin-right: 0.5rem;
+	transition: opacity 0.2s ease-in;
+	outline: none;
+}
+
+.btn-link {
+	background: none;
+	padding: 0;
+	margin: 0;
+}
+
+.btn-block {
+	display: block;
+	width: 100%;
+}
+
+.btn-sm {
+	font-size: 0.8rem;
+	padding: 0.3rem 1rem;
+	margin-right: 0.2rem;
+}
+
+.badge {
+	display: inline-block;
+	font-size: 0.6rem;
+	padding: 0.1rem 0.4rem;
+	text-align: center;
+	margin: 0.3rem;
+	background: var(--light-color);
+	color: #333;
+	border-radius: 3px;
+}
+
+.alert {
+	padding: 0.7rem;
+	margin: 1rem 0;
+	opacity: 0.9;
+	background: var(--light-color);
+	color: #333;
+}
+
+.btn-primary,
+.bg-primary,
+.badge-primary,
+.alert-primary {
+	background: var(--primary-color);
+	color: #fff;
+}
+
+
+.btn-light,
+.bg-light,
+.badge-light,
+.alert-light {
+	background: var(--light-color);
+	color: #333;
+}
+
+.btn-dark,
+.bg-dark,
+.badge-dark,
+.alert-dark {
+	background: var(--dark-color);
+	color: #fff;
+}
+
+.btn-danger,
+.bg-danger,
+.badge-danger,
+.alert-danger {
+	background: var(--danger-color);
+	color: #fff;
+}
+
+.btn-success,
+.bg-success,
+.badge-success,
+.alert-success {
+	background: var(--success-color);
+	color: #fff;
+}
+
+.btn-white,
+.bg-white,
+.badge-white,
+.alert-white {
+	background: #fff;
+	color: #333;
+	border: #ccc solid 1px;
+}
+
+.btn:disabled {
+	cursor: not-allowed;
+	pointer-events: none;
+	opacity: 0.60;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+
+.btn:enabled:hover {
+	opacity: 0.8;
+}
+
+.bg-light,
+.badge-light {
+	border: #ccc solid 1px;
+}
+
+.round-img {
+	border-radius: 50%;
+}
+
+/* Forms */
+input {
+	margin: 1.2rem 0;
+}
+
+.form-text {
+	display: block;
+	margin-top: 0.3rem;
+	color: #888;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='password'],
+input[type='date'],
+select,
+textarea {
+	display: block;
+	width: 100%;
+	padding: 0.4rem;
+	/*font-size: 1.2rem;*/
+	border: 1px solid #ccc;
+}
+
+input[type='submit'],
+button {
+	font: inherit;
+}
+
+table th,
+table td {
+	padding: 1rem;
+	text-align: left;
+}
+
+table th {
+	background: var(--light-color);
+}
+
+/* Navbar */
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.7rem 2rem;
+	z-index: 1;
+	width: 100%;
+	opacity: 0.9;
+	margin-bottom: 1rem;
+}
+
+.navbar ul {
+	display: flex;
+}
+
+.navbar a {
+	color: #fff;
+	padding: 0.45rem;
+	margin: 0 0.25rem;
+}
+
+.navbar a:hover {
+	color: var(--light-color);
+}
+
+.navbar .welcome span {
+	margin-right: 0.6rem;
+}
+
+/* Mobile Styles */
+@media (max-width: 700px) {
+	.hide-sm {
+		display: none;
+	}
+
+	.grid-2,
+	.grid-3,
+	.grid-4 {
+		grid-template-columns: 1fr;
+	}
+
+	/* Text Styles */
+	.x-large {
+		font-size: 3rem;
+	}
+
+	.large {
+		font-size: 2rem;
+	}
+
+	.lead {
+		font-size: 1rem;
+	}
+
+	/* Navbar */
+	.navbar {
+		display: block;
+		text-align: center;
+	}
+
+	.navbar ul {
+		text-align: center;
+		justify-content: center;
+	}
+}
+
+
+:root {
+	--primary-color: #64B5F6;
+	--dark-color: #333333;
+	--light-color: #f4f4f4;
+	--danger-color: #dc3545;
+	--success-color: #28a745;
+	--medium-color: #999999;
+}
+
+.table-responsive {
+
+	display: block;
+	overflow-x: auto;
+	width: 100%;
+}
+
+.cardV2 {
+	border-radius: 4px;
+	background-color: #fff;
+	box-shadow: 0 0 4px 0 rgba(0,0,0,.14), 0 3px 4px 0 rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
+	/*display: flex;
+    flex-direction: column;*/
+	min-width: 0;
+	/*position: relative;
+    word-wrap: break-word;*/
+}
+
+table {
+	max-width: 100%;
+	width: 100%;
+	border: 0;
+	margin-bottom: 1rem;
+	border-collapse: collapse;
+}
+
+tr {
+	border-top: 1px solid #ccc;
+}
+
+tbody tr:nth-of-type(odd){
+	background-color: rgba(0,0,0,0.04);
+}
+
+tbody td {
+	border-top: 1px solid #e1e1e1;
+}
+
+
+
+
+
+.modalWindow {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(0,0,0,0.2);
+	z-index: 99999;
+	opacity:0;
+	pointer-events: none;
+	text-align:center;
+}
+.modalWindow:target {
+	opacity:1;
+	pointer-events: auto;
+}
+.modalWindow > div {
+	width: 500px;
+	position: relative;
+	margin: 10% auto;
+	background: #fff;
+}

dist/index.html

@@ -1 +1,18 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>Menus</title><link href=/css/app.bca25642.css rel=preload as=style><link href=/js/app.7b3681ae.js rel=preload as=script><link href=/js/chunk-vendors.979cbe79.js rel=preload as=script><link href=/css/app.bca25642.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue_menu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.979cbe79.js></script><script src=/js/app.7b3681ae.js></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Menuizer</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+<!-- svelte -->
+<body>
+</body>
+</html>