hotovo

public/index.html

@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
     <script src="https://kit.fontawesome.com/51bfbf9540.js" crossorigin="anonymous"></script>
 
   </head>

public/style.css

@@ -0,0 +1,3 @@
+img{
+    width: 50%;
+}

src/App.vue

@@ -4,10 +4,16 @@
     <div class="row">
       <div class="col">
         <h2>Knihy</h2>
-        <div v-for="(kniha, i) in knihy" :key="i">
-         <img style="width:50%" :src= kniha.obrazek alt="">
-         {{ kniha.nazev }}
-          <button
+        <div v-for="(kniha, i) in knihy" :key="i" class="card mb-3" style="max-width: 550px; ">
+  <div class="row g-0">
+    <div class="col-md-4">
+      <img style="width:80%"  :src= kniha.obrazek alt="">
+    </div>
+    <div class="col-md-8">
+      <div class="card-body">
+        <h5 class="card-title">{{ kniha.nazev }}</h5>
+        
+        <p class="card-text"><button
             v-on:click="typKniha(kniha, typ)"
             class="btn"
             v-bind:class="{
@@ -18,21 +24,34 @@
           >
             <i class="fas" v-bind:class="typ.ikona"></i>
             {{ typ.nazev }}
-          </button>
-          <p>
+          </button></p>
+          <p class="card-text">
             {{ kniha.format_volba }}
           </p>
-          <p><button v-on:click="kosik.push(kniha)">Do košíku</button></p>
-        </div>
+          <p class="card-text">cena: {{ kniha.cena }},-</p>
+          <p class="card-text"><button type="button" class="btn btn-primary" v-on:click="kosik.push(kniha)">Koupit</button></p>
+      </div>
+    </div>
+  </div>
+</div>
       </div>
       <div class="col">
         <h2>Košík</h2>
-          <div v-for="(kniha, i) in kosik" :key="i">
-            {{kniha.nazev}} <br>
-            {{kniha.format_volba}}
-            <input type="number" min="1" v-model="kniha.pocet">  
-            {{ kniha.pocet * kniha.cena }} Kč
+          <div v-for="(kniha, i) in kosik" :key="i" class="card mb-3" style="max-width: 540px;">
+          <div class="row g-0">
+            <div class="col-md-4">
+              <img style="width:40%" :src= kniha.obrazek alt="">
+            </div>
+            <div class="col-md-8">
+              <div class="card-body">
+                <h5 class="card-title">{{ kniha.nazev }}</h5>
+                <p class="card-text">Formát knihy: {{kniha.format_volba}}</p>
+                <input type="number" min="1" v-model="kniha.pocet">
+                <p class="card-text">{{ kniha.pocet * kniha.cena }} Kč</p>
+              </div>
+            </div>
           </div>
+        </div>
         <p>Celková cena: {{celkovaCena}} Kč</p>
       </div>