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,46 +27,72 @@ 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 class="entry"> 
-            <label for="title">Title</label>
-            <input type="text" v-model='title'/>
-          </div>
+        <section class='recipe'>
 
-          <div class="entry"> 
-            <label for="description">Description</label>
-            <textarea v-model="description"></textarea>
-          </div>
 
-          <div class="entry"> 
-            <label for="nature">Nature of the input</label>
-            <input type="text" v-model="nature" />
-          </div>
+        <div v-if="sent">
 
-          <div class="entry"> 
-            <label for="log">Process Log</label>
-            <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
-            <button class="add" @click="logs.push('')">+</button>
-          </div>
+        <div class="entry"> 
+              Thanks for sharing!
+              Your entry is being added to the cookbook. 
+            </div>
 
-          <div class="entry"> 
-            <label for="who">Who</label>
-            <input type="text" v-model="who" />
-          </div>
+            <div class="entry"> 
+              <button @click="sent = false">Send another</button>
+            </div>
+
+            
 
-          <div class="entry"> 
-            <button @click="submit" class="submit" :disabled="disabled">Submit</button>
+
+
+        </div>
+        <div v-else>
+            <div class="entry"> 
+              <label for="title">Title</label>
+              <input type="text" v-model='title'/>
+            </div>
+            
+            <div class="entry"> 
+              <label for="description">Description</label>
+              <textarea v-model="description"></textarea>
+            </div>
+            
+            <div class="entry"> 
+              <label for="nature">Nature of the input</label>
+              <input type="text" v-model="nature" />
+            </div>
+            
+            <div class="entry"> 
+              <label for="log">Process Log</label>
+              <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
+              <button class="add" @click="logs.push('')">+</button>
+            </div>
+            
+            <div class="entry"> 
+              <label for="who">Who</label>
+              <input type="text" v-model="who" />
+            </div>
+            
+            <div class="entry"> 
+              <button @click="submit" class="submit" :disabled="disabled">Submit</button>
+            </div>
           </div>
         </section>
-
-    <!-- <dl>
-      <dt>Title</dt>
-      <dd>{{title}}</dd>     
+        
+        <!-- <dl>
+          <dt>Title</dt>
+          <dd>{{title}}</dd>     
 
       <dt>Description</dt>
       <dd>{{description}}</dd>

client/components/CookbookRecipes.js

@@ -23,16 +23,16 @@ export default {
 	},
 
 	template: ` 
-    <div class="cookbook">
-        <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
-			<h3>{{recipe.title}}</h3>
-			<p>{{recipe.description}}</p>
-			<div>{{recipe.nature}}</div>
-			<ol>
-				<li v-for="log in recipe.logs">{{log}}</li>
-			</ol>
-			<p>{{recipe.who}}</p>
-		</section>
-    </div>
-    `,
+		<div class="cookbook">
+			<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>
+				<ol>
+					<li v-for="log in recipe.logs">{{log}}</li>
+				</ol>
+				<p>{{recipe.who}}</p>
+			</section>
+		</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;
+}