From 72997172fdf95c21a4f22cd22157f80200ed1286 Mon Sep 17 00:00:00 2001
From: skrabanek <KubMakCZ@gmail.com>
Date: Wed, 23 Mar 2022 09:41:10 +0100
Subject: [PATCH] update design

---
 vue-json/src/assets/jsondata.json    |  6 ++--
 vue-json/src/components/jsonview.vue | 52 +++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/vue-json/src/assets/jsondata.json b/vue-json/src/assets/jsondata.json
index 8e39572..7b7aba5 100644
--- a/vue-json/src/assets/jsondata.json
+++ b/vue-json/src/assets/jsondata.json
@@ -60,13 +60,13 @@
         "img": "image_10.jpg"
     },
     {
-        "title":"Nadpis2",
-        "content": "Obsah2",
+        "title":"Nadpis23",
+        "content": "lorem Ipsum dante lante",
         "date":"23. 3. 2022",
         "img": "image_11.jpg"
     },
     {
-        "title":"Nadpis2",
+        "title":"Nadpis24",
         "content": "Obsah2",
         "date":"24. 3. 2022",
         "img": "image_12.jpg"
diff --git a/vue-json/src/components/jsonview.vue b/vue-json/src/components/jsonview.vue
index f4d273f..a2b2447 100644
--- a/vue-json/src/components/jsonview.vue
+++ b/vue-json/src/components/jsonview.vue
@@ -1,23 +1,23 @@
  <template>
 <div>
-  <!-- jsonhead -> hlavička pro navigaci a změnu datumu      -->
-  <div id="jsonhead">
-    <h1>JSON</h1>
-    <p>Použi navigační tlačítka pro změnu datumu</p>
-    <button class="navigace" @click="increment()">+</button>
-    <button class="navigace" @click="resetdate()">RESET</button>    
-    <button class="navigace" @click="decrement()">-</button>
-  </div>
+  
 <!-- jsonmain -> div pro zobrazeni hlavní části-->
 <div id="jsonmain">  
   <div v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
-    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i> <br>
-    <img :src="getImgUrl(data1.img)" v-bind:alt="data1.img">  
-</div>
+    <div class="jsonTitle">{{data1.title}}</div> <br>
+    <img class="jsonImg" :src="getImgUrl(data1.img)" v-bind:alt="data1.img"> 
+    <div class="jsonContent">{{data1.content}}</div> 
+    <div class="jsonDate">{{data1.date}}</div>
+  </div>
 </div>
-
+  <!-- jsonhead -> hlavička pro navigaci a změnu datumu-->
+<div id="jsonhead">
+    <button class="navigace" @click="decrement()">-</button>
+    <button class="navigace" @click="resetdate()">RESET</button>    
+    <button class="navigace" @click="increment()">+</button>
+  </div>
   <!-- DEBUG SEKCE -->
-  <button @click="showdebug()"> DEBUG</button>
+  <button @click="showdebug()" style="display:none"> DEBUG</button>
 <div id="jsondebug" style="display:none"> 
 
     <!-- Test Proměných -->
@@ -114,7 +114,33 @@ export default {
 </script>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Inspiration&family=Palette+Mosaic&family=Roboto:ital,wght@1,100&family=Titillium+Web:wght@900&display=swap');
+
 h4{
     color: blue;
 }
+
+.jsonTitle{
+font-size: 72px;
+font-family: 'Palette Mosaic', cursive;
+}
+.jsonImg{
+max-height: 50vh;
+}
+.jsonContent{
+font-size: 64px;
+font-family: 'Inspiration', cursive;
+}
+.jsonDate{
+font-size: 32px;
+font-family: 'Roboto', sans-serif;
+}
+.navigace{
+  font-size: 40px;
+  margin: 10px;
+  padding: 20px;
+  font-family: 'Titillium Web', sans-serif;
+}
+
+
 </style>
\ No newline at end of file