form sent mode

client/components/CookbookForm.js

@@ -9,6 +9,8 @@ export default {
 		const logs = ref([""]);
 		const who = ref("");
 
+		const sent = ref(false);
+
 		const disabled = computed(() => {
 			return [title, description, nature, logs, who].some((input) => input.value == "");
 		});
@@ -25,12 +27,37 @@ export default {
 					who: who.value,
 				}),
 			});
+			sent.value = true;
+			title.value = "";
+			description.value = "";
+			nature.value = "";
+			logs.value = [""];
+			who.value = "";
 		};
 
-		return { title, description, nature, logs, who, disabled, submit };
+		return { title, description, nature, logs, who, disabled, submit, sent };
 	},
 	template: `
         <section class='recipe'>
+
+
+        <div v-if="sent">
+
+        <div class="entry"> 
+              Thanks for sharing!
+              Your entry is being added to the cookbook. 
+            </div>
+
+            <div class="entry"> 
+              <button @click="sent = false">Send another</button>
+            </div>
+
+            
+
+
+
+        </div>
+        <div v-else>
             <div class="entry"> 
               <label for="title">Title</label>
               <input type="text" v-model='title'/>
@@ -60,6 +87,7 @@ export default {
             <div class="entry"> 
               <button @click="submit" class="submit" :disabled="disabled">Submit</button>
             </div>
+          </div>
         </section>
         
         <!-- <dl>

client/components/CookbookRecipes.js

@@ -24,7 +24,7 @@ export default {
 
 	template: ` 
 		<div class="cookbook">
-        <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
+			<section class="recipe" v-for="(recipe, index) in recipes"  :style="style(index)" @click="browse()" :key="recipe">
 				<h3>{{recipe.title}}</h3>
 				<p>{{recipe.description}}</p>
 				<div>{{recipe.nature}}</div>

client/style.css

@@ -106,4 +106,5 @@ label {
 	left: 0;
 	background-color: #e6b0aa;
 	cursor: pointer;
+	user-select: none;
 }

cookbook.py

@@ -75,6 +75,7 @@ def get_recipes():
 
 # post the recipe in the wiki
 def update_wiki(recipe):
+
     import mwclient
 
     site = mwclient.Site('pzwiki.wdka.nl', path='/mw-mediadesign/')
@@ -106,6 +107,7 @@ def update_wiki(recipe):
 
     # delete multiline indentation
     text += '\n'.join([line.strip() for line in content.splitlines()])
+    
     page.edit(text, f'Added a new recipe! {recipe["title"]}')
 
 

static/css/style.css

@@ -0,0 +1,110 @@
+body {
+	font-size: 1.5rem;
+	margin: 0;
+	background: rgb(255, 244, 235);
+}
+
+.contents {
+	margin: 32px;
+}
+
+h1 {
+	color: #ecab72;
+	margin: 32px;
+	text-align: center;
+}
+
+a {
+	color: currentColor;
+}
+
+a.stretched-link::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
+}
+
+/* FILTERS */
+
+.tag {
+	background: none;
+	font-size: 20px;
+	display: inline-block;
+	border: 1px solid currentColor;
+	padding: 0 0.5em;
+	border-radius: 1em;
+	margin: 4px;
+	text-transform: capitalize;
+	user-select: none;
+	cursor: pointer;
+
+	transform: translateY(0);
+	transition: transform 0.4s ease-in;
+}
+
+.tag.active {
+	background-color: white;
+}
+
+.tag.active.all {
+	background: none;
+}
+
+.filters .tag:focus,
+.filters .tag:hover {
+	transform: translateY(-4px);
+	transition: transform 0.2s ease-out;
+}
+
+ul {
+	padding: 0;
+}
+
+/* TABLE */
+
+table {
+	border-collapse: collapse;
+}
+
+tr {
+	display: none;
+	position: relative;
+}
+
+tr:nth-child(even) {
+	background-color: rgb(251, 237, 225);
+}
+
+tr.active {
+	display: table-row;
+}
+
+tr:hover {
+	background-color: rgb(250, 232, 217);
+}
+
+tr .tag {
+	cursor: default;
+}
+
+tr.header {
+	display: table-row;
+	text-align: left;
+}
+
+.categories {
+	width: 20%;
+}
+
+.overview {
+	font-style: italic;
+	width: 40%;
+}
+
+.date {
+	width: 14ch;
+}