první pokus o stylování treenode editoru

seminar/templates/seminar/soustredeni/submenu.html

@@ -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 %}

vue_frontend/src/components/AddNewNode.vue

@@ -42,3 +42,9 @@ export default {
 	}
 }
 </script>
+
+<style>
+.addnewnode {
+	display: inline;
+}
+</style>

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>

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>

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>

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>
 

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>

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>
+
+</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>

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>

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>