From 262aa65ffc3a5e576749e931f108466f1676ca86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kate=C5=99ina=20=C4=8C?= <katterrina98@gmail.com>
Date: Wed, 16 Sep 2020 17:55:30 +0200
Subject: [PATCH] =?UTF-8?q?prvn=C3=AD=20pokus=20o=20stylov=C3=A1n=C3=AD=20?=
 =?UTF-8?q?treenode=20editoru?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../seminar/soustredeni/submenu.html          | 11 ---
 vue_frontend/src/components/AddNewNode.vue    |  6 ++
 vue_frontend/src/components/CastNode.vue      |  2 +-
 vue_frontend/src/components/CisloNode.vue     |  8 +-
 vue_frontend/src/components/RocnikNode.vue    |  6 +-
 .../src/components/TemaVCisleNode.vue         |  2 +-
 vue_frontend/src/components/TextNode.vue      |  4 +-
 vue_frontend/src/components/TreeNode.vue      | 82 +++++++++++--------
 .../src/components/UlohaVzorakNode.vue        |  8 +-
 .../src/components/UlohaZadaniNode.vue        |  2 +-
 10 files changed, 74 insertions(+), 57 deletions(-)
 delete mode 100644 seminar/templates/seminar/soustredeni/submenu.html

diff --git a/seminar/templates/seminar/soustredeni/submenu.html b/seminar/templates/seminar/soustredeni/submenu.html
deleted file mode 100644
index a507a2fb..00000000
--- a/seminar/templates/seminar/soustredeni/submenu.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% with "/soustredeni" as cesta %}
-
-<div id='submenu'>
-<ul>
-  <li class="{% if selected == "uvod" %}selected{% endif %}"><a href="{{cesta}}/">Úvod</a>
-  <li class="{% if selected == "pripravujeme" %}selected{% endif %}"><a href="{{cesta}}/pripravujeme/">Připravujeme</a>
-  <li class="{% if selected == "probehlo" %}selected{% endif %}"><a href="{{cesta}}/probehlo/">Proběhlo</a>
-</ul>
-</div>
-
-{% endwith %}
diff --git a/vue_frontend/src/components/AddNewNode.vue b/vue_frontend/src/components/AddNewNode.vue
index 3e635907..2d837fb3 100644
--- a/vue_frontend/src/components/AddNewNode.vue
+++ b/vue_frontend/src/components/AddNewNode.vue
@@ -42,3 +42,9 @@ export default {
 	}
 }
 </script>
+
+<style>
+.addnewnode {
+	display: inline;
+}
+</style>
\ No newline at end of file
diff --git a/vue_frontend/src/components/CastNode.vue b/vue_frontend/src/components/CastNode.vue
index d799cef4..2f09ec2b 100644
--- a/vue_frontend/src/components/CastNode.vue
+++ b/vue_frontend/src/components/CastNode.vue
@@ -7,7 +7,7 @@
 			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
 		</div>
 		<div v-else>
-		<h4>{{ currentText }} <button v-on:click="editorShow=!editorShow">Upravit</button> </h4>
+		<h4>{{ currentText }} </h4> <button v-on:click="editorShow=!editorShow">Upravit</button>
 		</div>
 	</div>
 </template>
diff --git a/vue_frontend/src/components/CisloNode.vue b/vue_frontend/src/components/CisloNode.vue
index 519b100c..f83e30c6 100644
--- a/vue_frontend/src/components/CisloNode.vue
+++ b/vue_frontend/src/components/CisloNode.vue
@@ -1,8 +1,10 @@
 <template>
+<summary>
 	<div class="cislonode">
 		<!--pre>CisloNode {{item}} {{typeof(item)}}</pre-->
-		<h2>Číslo {{ item.node.cislo.poradi }}</h2>
+		<h1>{{ item.node.cislo.poradi }}. číslo</h1>
 	</div>
+</summary>
 </template>
 
 <script>
@@ -27,7 +29,5 @@ li {
 	/*display: inline-block;*/
 	margin: 0 10px;
 }
-a {
-	color: #42b983;
-}
+
 </style>
diff --git a/vue_frontend/src/components/RocnikNode.vue b/vue_frontend/src/components/RocnikNode.vue
index 4b8ea05c..b62d6f6f 100644
--- a/vue_frontend/src/components/RocnikNode.vue
+++ b/vue_frontend/src/components/RocnikNode.vue
@@ -1,8 +1,10 @@
 <template>
+
 	<div class="rocniknode">
 		<!--pre>RocnikNode {{item}} {{typeof(item)}}</pre-->
 		<h1>Ročník {{ item.node.rocnik.rocnik }} ({{ item.node.rocnik.prvni_rok }}/{{item.node.rocnik.prvni_rok+1 }})</h1>
 	</div>
+
 </template>
 
 <script>
@@ -27,7 +29,5 @@ li {
 	/*display: inline-block;*/
 	margin: 0 10px;
 }
-a {
-	color: #42b983;
-}
+
 </style>
diff --git a/vue_frontend/src/components/TemaVCisleNode.vue b/vue_frontend/src/components/TemaVCisleNode.vue
index 0fe00bd0..19d507c4 100644
--- a/vue_frontend/src/components/TemaVCisleNode.vue
+++ b/vue_frontend/src/components/TemaVCisleNode.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="temavcislenode">
 		<!--pre>TemaVCisleNode {{item}} {{typeof(item)}}</pre-->
-		<h4>Téma {{ item.node.tema.kod }}: {{ item.node.tema.nazev }}</h4>
+		<h2>Téma {{ item.node.tema.kod }}: {{ item.node.tema.nazev }}</h2>
 	</div>
 </template>
 
diff --git a/vue_frontend/src/components/TextNode.vue b/vue_frontend/src/components/TextNode.vue
index 3bcb4f02..de31fece 100644
--- a/vue_frontend/src/components/TextNode.vue
+++ b/vue_frontend/src/components/TextNode.vue
@@ -10,8 +10,8 @@
 			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
 		</div>
 		<div v-else v-bind:class="changedObject">
-			<button v-on:click="editorShow=!editorShow">Upravit</button>
 			<p v-html="currentText"></p>
+			<button v-on:click="editorShow=!editorShow">Upravit</button>
 		</div>
 	</div>
 </template>
@@ -120,6 +120,6 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .changed {
-	background-color: yellow;
+	background-color: #db88f5;
 }
 </style>
diff --git a/vue_frontend/src/components/TreeNode.vue b/vue_frontend/src/components/TreeNode.vue
index 1b361614..d651c0fb 100644
--- a/vue_frontend/src/components/TreeNode.vue
+++ b/vue_frontend/src/components/TreeNode.vue
@@ -1,36 +1,42 @@
 <template>
-	<div class="treenode">
-	<button v-on:click="debugShow = !debugShow">Ladící data</button>
+<details>
+	<!-- následující řádek nefunguje, protože summary musí být první tag v details -->
+	<!-- <div class="treenode-org"> bude tu nějaký if na class="treenode" -->
+
+<summary>
+	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'></component>
+</summary>
+
+	<button v-on:click="debugShow = !debugShow" class="nodebug">Ladící data</button> <!--bude tu nějaký if na class="nodebug", v debug módu bude tlačítko vidět, jinak ne -->
 	<div v-if="debugShow">
 		<pre>{{ item.node.polymorphic_ctype.model }}</pre>
 		<pre>{{ item }}</pre>
 	</div>
-	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'></component>
+
 	<div v-if="item.children.length === 0">
 	<div v-if="item.appendable_children.length > 0">
-		<b>Vložit jako syna</b>
+		<b>Vložit jako syna: </b>
 		<addnewnode :types="item.appendable_siblings" :refnode="item.node" where="syn" /> 
 	</div>
 	</div>
-	<div class="children">
-		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0">
-			<b>Vložit před</b>
+	<div class="children-org"> <!--bude tu nějaký if na class="children" -->
+		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0" class="mam-org-only">
+			<b>Vložit před: </b>
 			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> 
 		</div>
 
-		<ul>
-			<li v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
+			<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
 				<TreeNode :item="chld">
 				</TreeNode>
-				<div v-if="chld.appendable_siblings.length > 0">
-					<b v-if="index < (item.children.length - 1)">Vložit mezi</b>
-					<b v-else>Vložit za</b>
+				<div v-if="chld.appendable_siblings.length > 0" class="mam-org-only"  id="org-only-treenode" >
+					<b v-if="index < (item.children.length - 1)">Vložit mezi: </b>
+					<b v-else>Vložit za: </b>
 					<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> 
 				</div>
-			</li>
-		</ul>
-	</div>
+			</div>
 	</div>
+
+</details>
 </template>
 
 <script>
@@ -67,29 +73,39 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h3 {
-	margin: 40px 0 0;
+
+/*
+.treenode-org {
+  padding: 5px;
+  margin: 5px;
+  border: #6a0043 2px dashed;
 }
-ul {
-/*	list-style-type: none;*/
-	padding: 0;
+*/
+
+.children-org {
+  padding: 5px;
+  margin: 5px;
+  border: #6a0043 2px solid;
 }
-li {
-	/*display: inline-block;*/
-	margin: 0 10px;
+
+.mam-org-only {
+	margin: 4px;
 }
-a {
-	color: #42b983;
+
+.nodebug {
+	display: none;
 }
 
-.treenode {
-	border: 1px solid;
-	border-color: "black";
-	margin: 5px;
+/* jsou potřeba obě verze, jedna funguje pro chrome a druhá pro firefox */
+details > summary:first-of-type {
+    list-style-type: none;
 }
-.children {
-	border: 1px solid;
-	border-color: #ff0000;
-	margin: 5px;
+details summary::-webkit-details-marker {
+  display:none;
 }
+
+details summary {
+	cursor: pointer;
+}
+
 </style>
diff --git a/vue_frontend/src/components/UlohaVzorakNode.vue b/vue_frontend/src/components/UlohaVzorakNode.vue
index 382adce2..d0059210 100644
--- a/vue_frontend/src/components/UlohaVzorakNode.vue
+++ b/vue_frontend/src/components/UlohaVzorakNode.vue
@@ -2,7 +2,7 @@
 	<div class="ulohavzoraknode">
 		<!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre-->
 		<h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5>
-		<button v-on:click="showSelect=!showSelect">Upravit</button>
+		<button v-on:click="showSelect=!showSelect" class="upravit">Upravit</button>
 		<div v-if="showSelect">
 			<form class="searchForm" v-on:submit.prevent="submitSearch">
 				<input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch">
@@ -66,3 +66,9 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+.upravit {
+	margin-top:-40px;
+}
+</style>
\ No newline at end of file
diff --git a/vue_frontend/src/components/UlohaZadaniNode.vue b/vue_frontend/src/components/UlohaZadaniNode.vue
index 7c5f6346..454ff61b 100644
--- a/vue_frontend/src/components/UlohaZadaniNode.vue
+++ b/vue_frontend/src/components/UlohaZadaniNode.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="ulohazadaninode">
 		<!--pre>UlohaZadaniNode {{item.node.uloha}} {{typeof(item)}}</pre-->
-		<h5>Zadání {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5>
+		<h6>Zadání {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h6>
 	</div>
 </template>