mam/mamweb
13
1
Fork 0
Code Issues Pull requests 12 Projects Wiki Activity Actions

první pokus o stylování treenode editoru

Browse source
This commit is contained in:
Kateřina Č 2020-09-16 17:55:30 +02:00
parent 472787a637
commit 262aa65ffc
10 changed files with 76 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
seminar/templates/seminar/soustredeni/submenu.html
View file

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

6
vue_frontend/src/components/AddNewNode.vue
View file

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

2
vue_frontend/src/components/CastNode.vue
View file

@ -7,7 +7,7 @@
<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button> <button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
</div> </div>
<div v-else> <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>
</div> </div>
</template> </template>

8
vue_frontend/src/components/CisloNode.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<summary>
<div class="cislonode"> <div class="cislonode">
<!--pre>CisloNode {{item}} {{typeof(item)}}</pre--> <!--pre>CisloNode {{item}} {{typeof(item)}}</pre-->
<h2>Číslo {{ item.node.cislo.poradi }}</h2> <h1>{{ item.node.cislo.poradi }}. číslo</h1>
</div> </div>
</summary>
</template> </template>
<script> <script>
@ -27,7 +29,5 @@ li {
/*display: inline-block;*/ /*display: inline-block;*/
margin: 0 10px; margin: 0 10px;
} }
a {
color: #42b983;
}
</style> </style>

6
vue_frontend/src/components/RocnikNode.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="rocniknode"> <div class="rocniknode">
<!--pre>RocnikNode {{item}} {{typeof(item)}}</pre--> <!--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> <h1>Ročník {{ item.node.rocnik.rocnik }} ({{ item.node.rocnik.prvni_rok }}/{{item.node.rocnik.prvni_rok+1 }})</h1>
</div> </div>
</template> </template>
<script> <script>
@ -27,7 +29,5 @@ li {
/*display: inline-block;*/ /*display: inline-block;*/
margin: 0 10px; margin: 0 10px;
} }
a {
color: #42b983;
}
</style> </style>

2
vue_frontend/src/components/TemaVCisleNode.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="temavcislenode"> <div class="temavcislenode">
<!--pre>TemaVCisleNode {{item}} {{typeof(item)}}</pre--> <!--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> </div>
</template> </template>

4
vue_frontend/src/components/TextNode.vue
View file

@ -10,8 +10,8 @@
<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button> <button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
</div> </div>
<div v-else v-bind:class="changedObject"> <div v-else v-bind:class="changedObject">
<button v-on:click="editorShow=!editorShow">Upravit</button>
<p v-html="currentText"></p> <p v-html="currentText"></p>
<button v-on:click="editorShow=!editorShow">Upravit</button>
</div> </div>
</div> </div>
</template> </template>
@ -120,6 +120,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.changed { .changed {
background-color: yellow; background-color: #db88f5;
} }
</style> </style>

86
vue_frontend/src/components/TreeNode.vue
View file

@ -1,36 +1,42 @@
<template> <template>
<div class="treenode"> <details>
<button v-on:click="debugShow = !debugShow">Ladící data</button> <!-- 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"> <div v-if="debugShow">
<pre>{{ item.node.polymorphic_ctype.model }}</pre> <pre>{{ item.node.polymorphic_ctype.model }}</pre>
<pre>{{ item }}</pre> <pre>{{ item }}</pre>
</div> </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.children.length === 0">
<div v-if="item.appendable_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" /> <addnewnode :types="item.appendable_siblings" :refnode="item.node" where="syn" />
</div> </div>
</div> </div>
<div class="children"> <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"> <div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0" class="mam-org-only">
<b>Vložit před</b> <b>Vložit před: </b>
<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> <addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" />
</div> </div>
<ul> <div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
<li v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
<TreeNode :item="chld"> <TreeNode :item="chld">
</TreeNode> </TreeNode>
<div v-if="chld.appendable_siblings.length > 0"> <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-if="index < (item.children.length - 1)">Vložit mezi: </b>
<b v-else>Vložit za</b> <b v-else>Vložit za: </b>
<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> <addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" />
</div> </div>
</li> </div>
</ul>
</div>
</div> </div>
</details>
</template> </template>
<script> <script>
@ -67,29 +73,39 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <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;
li { margin: 5px;
/*display: inline-block;*/ border: #6a0043 2px solid;
margin: 0 10px;
}
a {
color: #42b983;
} }
.treenode { .mam-org-only {
border: 1px solid; margin: 4px;
border-color: "black";
margin: 5px;
} }
.children {
border: 1px solid; .nodebug {
border-color: #ff0000; display: none;
margin: 5px;
} }
/* jsou potřeba obě verze, jedna funguje pro chrome a druhá pro firefox */
details > summary:first-of-type {
list-style-type: none;
}
details summary::-webkit-details-marker {
display:none;
}
details summary {
cursor: pointer;
}
</style> </style>

8
vue_frontend/src/components/UlohaVzorakNode.vue
View file

@ -2,7 +2,7 @@
<div class="ulohavzoraknode"> <div class="ulohavzoraknode">
<!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre--> <!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre-->
<h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5> <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"> <div v-if="showSelect">
<form class="searchForm" v-on:submit.prevent="submitSearch"> <form class="searchForm" v-on:submit.prevent="submitSearch">
<input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch"> <input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch">
@ -66,3 +66,9 @@ export default {
} }
} }
</script> </script>
<style scoped>
.upravit {
margin-top:-40px;
}
</style>

2
vue_frontend/src/components/UlohaZadaniNode.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="ulohazadaninode"> <div class="ulohazadaninode">
<!--pre>UlohaZadaniNode {{item.node.uloha}} {{typeof(item)}}</pre--> <!--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> </div>
</template> </template>