subscription kartice - look and feel #119

KristijanCetina · Apr 6, 2021 · 13da8a5 · 13da8a5
1 parent 021aff0
commit 13da8a5
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 56 deletions.
diff --git a/paying_customer/src/components/subscriptionCard.vue b/paying_customer/src/components/subscriptionCard.vue
@@ -1,38 +1,41 @@
 <template>
-  <div style="padding-left: 35px">
-    <b-card
-      style="width: 200px; height: 345px"
-      body-class="text-center"
-      :title="suma"
-      :img-src="slika"
-      :img-alt="naziv"
-      img-top
-    >
-      <!-- ako budemo htjeli dodavati za nekakv bolji izgled kartice -->
-      <!-- <b-card-img src="https://placekitten.com/480/210" alt="Image" img-top></b-card-img> -->
-      <b-card-text v-text="tekst"> </b-card-text>
-
-      <b-button
-        v-if="userIsAdmin === false"
-        v-on:click="submit(price)"
-        style="background-color: #384f7b; border-color: #384f7b; bottom: 20px"
-        block
-        pill
-        bottom
-        >Choose plan</b-button
+  <div class="mb-3">
+    <div class="d-inline-block" style="padding-left: 35px">
+      <b-card
+        style="width: 200px"
+        body-class="text-center"
+        :title="suma"
+        :img-src="slika"
+        :img-alt="naziv"
+        img-top
       >
-      <!-- otkrij kako otvoriti samo jedan modal i editirati podatke -->
-
-        <b-button 
-        v-if="userIsAdmin === true" 
-        v-on:click="editSub(price)"
-        style="background-color: #384f7b; border-color: #384f7b; bottom: 20px"
-        block
-        pill
-        bottom
-         >Edit</b-button
+        <!-- ako budemo htjeli dodavati za nekakv bolji izgled kartice -->
+        <!-- <b-card-img src="https://placekitten.com/480/210" alt="Image" img-top></b-card-img> -->
+        <b-card-text v-text="naziv"> </b-card-text>
+        <b-card-text v-text="tekst"> </b-card-text>
+
+        <b-button
+          v-if="userIsAdmin === false"
+          v-on:click="submit(price)"
+          style="background-color: #384f7b; border-color: #384f7b; bottom: 20px"
+          block
+          pill
+          bottom
+          >Choose plan</b-button
+        >
+        <!-- otkrij kako otvoriti samo jedan modal i editirati podatke -->
+
+        <b-button
+          v-if="userIsAdmin === true"
+          v-on:click="editSub(price)"
+          style="background-color: #384f7b; border-color: #384f7b; bottom: 20px"
+          block
+          pill
+          bottom
+          >Edit</b-button
         >
-    </b-card>
+      </b-card>
+    </div>
   </div>
 </template>
 

diff --git a/paying_customer/src/views/admin/Subscription_admin.vue b/paying_customer/src/views/admin/Subscription_admin.vue
@@ -4,9 +4,11 @@
       <adminNavi />
       <div class="col-md-3"></div>
       <div class="col-md-9">
-        <h3>Ovdje možete stvoriti nove pretplate</h3>
+        <div class="my-6">
+          <h2>Ovdje možete stvoriti nove pretplate</h2>
+        </div>
         <template>
-          <b-button @click="$bvModal.show('modal')" 
+          <b-button @click="$bvModal.show('modal')"
             >Stvori novu pretplatu</b-button
           >
 
@@ -79,34 +81,32 @@
             <template #modal-footer="{ cancel }">
               <!-- Emulate built in modal footer ok and cancel button actions -->
               <b-row>
-              <b-button class="mr-1"  variant="success" @click.prevent="postNewSub">
-                SAVE
-              </b-button>
-              <b-button  variant="danger" @click="cancel()">
-                Cancel
-              </b-button>
+                <b-button class="mr-1" variant="success" @click="postNewSub">
+                  SAVE
+                </b-button>
+                <b-button variant="danger" @click="cancel()"> Cancel </b-button>
               </b-row>
             </template>
           </b-modal>
         </template>
-        <div class="container">
-        <h1 class="centerTitle" style="color: #384f7b">
-          Pregled tipova pretplata:
-        </h1>
-        <br />
-        <div class="row">
-          <subscriptionCard
-            v-for="subList in subList"
-            :key="subList.id_plan"
-            :suma="subList.suma"
-            :tekst="subList.tekst"
-            :slika="subList.slika"
-            :naziv="subList.naziv"
-            :price="subList.price"
-          ></subscriptionCard>
+        <div class="container mt-5">
+          <h1 class="centerTitle" style="color: #384f7b">
+            Pregled tipova pretplata:
+          </h1>
+          <br />
+          <div class="row h-100">
+            <subscriptionCard
+              v-for="subList in subList"
+              :key="subList.id_plan"
+              :suma="subList.suma"
+              :tekst="subList.tekst"
+              :slika="subList.slika"
+              :naziv="subList.naziv"
+              :price="subList.price"
+            ></subscriptionCard>
+          </div>
         </div>
       </div>
-      </div>
     </div>
   </div>
 </template>