From 47718bc01298b979a71151014af831ff4654fcef Mon Sep 17 00:00:00 2001
From: Krisna Dewa <59174531+krisdewa@users.noreply.github.com>
Date: Thu, 10 Nov 2022 11:51:05 +0700
Subject: [PATCH] Update Footer, Navbar, Skeleton

---
 src/components/Footer.vue                   | 34 +++++++++++--
 src/components/Navbar.vue                   | 22 ++++++++-
 src/pages/DetailSurah/DetailSurah.vue       | 12 +----
 src/pages/Skeleton/DetailSurahSkeleton.vue  | 20 ++++----
 src/pages/Skeleton/DetailTafsirSkeleton.vue |  4 +-
 src/pages/Surah.vue                         | 54 +++++++++++++++++----
 6 files changed, 108 insertions(+), 38 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7a775c4..c1163ed 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,7 +1,10 @@
 <template>
-    <footer class="footer bg-dark text-white p-3 mt-auto">
+    <footer class="footer bg-dark text-white p-3">
         <div class="container">
             <div class="row pt-5">
+                <div class="col-md-2 text-center">
+                    <img src="../../public/img/icons/favicon-32x32.png" class="justify-content-center logo" alt="">
+                </div>
                 <div class="col-md-6">
                     <h5>Al-Qur'an Online</h5>
                     <p class="text-muted">
@@ -12,13 +15,22 @@
                         <strong>Misyari Rasyid Al-'Afasi</strong>.
                     </p>
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-2">
+                    <h5>Social Media</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="https://www.instagram.com/krisdewa_/?hl=id" class="text-decoration-none text-white"
+                                target="_blank">Instagram</a>
+                        </li>
+                        <li><a href="https://www.linkedin.com/in/krisna-dewa-pratama-9aa907153/"
+                                class="text-decoration-none text-white" target="_blank">Linkedin</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
                     <h5>Contribute Here</h5>
                     <ul class="list-unstyled">
                         <li><a href="https://github.com/krisdewa/Al-Quran-Online"
                                 class="text-decoration-none text-white" target="_blank">Github </a></li>
-                        <li><a href="https://www.instagram.com/krisdewa_/?hl=id" class="text-decoration-none text-white"
-                                target="_blank">Instagram</a></li>
                     </ul>
                 </div>
             </div>
@@ -46,4 +58,18 @@ export default {
 .mt-9 {
     margin-top: 9rem;
 }
+
+img.logo {
+    width: 75%;
+}
+
+@media only screen and (max-width: 768px) {
+    img.logo {
+        width: 50%;
+    }
+
+    .footer {
+        text-align: center;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 7c2b7c8..27573bb 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,7 +1,9 @@
 <template>
     <nav class="navbar navbar-expand-md navbar-warning fixed-top bg-warning py-3">
         <div class="container">
-            <router-link :to="{ name: 'home' }" class="navbar-brand" aria-current="page">AL-QUR'AN ONLINE
+            <router-link :to="{ name: 'home' }" class="navbar-brand" aria-current="page"> <img
+                    src="../../public/img/icons/favicon-16x16.png" class="img justify-content-center" alt="" />
+                AL-QUR'AN ONLINE
             </router-link>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                 aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@@ -28,7 +30,8 @@
                         </ul>
                     </li> -->
                 </ul>
-                <a href="https://krisproject.my.id" class="btn btn-success float-end" target="_blank">KRISPROJECT 🔗
+                <a href="https://krisproject.my.id" class="btn btn-success float-end btn-custom"
+                    target="_blank">KRISPROJECT 🔗
                 </a>
             </div>
         </div>
@@ -39,6 +42,21 @@
 .navbar-brand {
     font-weight: bold;
 }
+
+img {
+    width: 35px;
+    height: 35px;
+}
+
+@media only screen and (max-width: 768px) {
+    .navbar {
+        text-align: center;
+    }
+
+    .btn-custom {
+        width: 100%;
+    }
+}
 </style>
 
 <script>
diff --git a/src/pages/DetailSurah/DetailSurah.vue b/src/pages/DetailSurah/DetailSurah.vue
index 3a97e30..2c0f102 100644
--- a/src/pages/DetailSurah/DetailSurah.vue
+++ b/src/pages/DetailSurah/DetailSurah.vue
@@ -59,22 +59,12 @@
             <div class="col-md-12" v-for="(ayat, index) in ayat" :key="index">
                 <div class="card mt-3 shadow-sm">
                     <div class="card-body">
-                        <!-- <div class="row">
-                            <div class="col-md-6 col-12">
-                                <h5 class="card-title nama-latin"> {{ ayat.surah }} : {{ ayat.nomor }} </h5>
-                                <p class="card-text mt-4 fst-italic"> {{ ayat.idn }}</p>
-                            </div>
-                            <div class="col-md-6 col-12 text-end">
-                                <h2> {{ ayat.ar }} </h2>
-                                <p class="tr"><span v-html="ayat.tr"> </span></p>
-                            </div>
-                        </div> -->
                         <div class="row">
                             <div class="col-md-6 col-12">
                                 <h5 class="card-title nama-latin mb-2"> {{ ayat.surah }} : {{ ayat.nomor }} </h5>
                             </div>
                             <div class="col-md-6 col-12">
-                                <h2 class="text-end"> {{ ayat.ar }} </h2>
+                                <h1 class="text-end"> {{ ayat.ar }} </h1>
                                 <p class="text-end"><span v-html="ayat.tr"> </span></p>
                             </div>
                             <div class="col-md-6 col-12">
diff --git a/src/pages/Skeleton/DetailSurahSkeleton.vue b/src/pages/Skeleton/DetailSurahSkeleton.vue
index 9201e13..75c20f0 100644
--- a/src/pages/Skeleton/DetailSurahSkeleton.vue
+++ b/src/pages/Skeleton/DetailSurahSkeleton.vue
@@ -2,16 +2,16 @@
     <main class="container mt-custom">
         <div class="bg-success p-4 rounded shadow text-white">
             <h1 class="float-end">
-                <AnimatedPlaceholder width="70px" height="20px" borderRadius="5px" />
+                <AnimatedPlaceholder width="110px" height="6px" borderRadius="5px" />
             </h1>
             <h1 class="">
-                <AnimatedPlaceholder width="150px" height="20px" borderRadius="5px" />
+                <AnimatedPlaceholder width="250px" height="20px" borderRadius="5px" />
             </h1>
             <div class="row">
 
                 <div class="col-md-6">
                     <span class="lead">
-                        <AnimatedPlaceholder width="160px" height="20px" borderRadius="5px" />
+                        <AnimatedPlaceholder width="180px" height="20px" borderRadius="5px" />
                     </span>
                 </div>
 
@@ -45,21 +45,23 @@
                     <div class="card-body">
                         <div class="row">
                             <div class="col-md-6 col-12">
-                                <h5 class="card-title nama-latin">
+                                <h5 class="card-title nama-latin mb-2">
                                     <AnimatedPlaceholder width="150px" height="20px" borderRadius="5px" />
                                 </h5>
-                                <p class="card-text mt-4 fst-italic">
-                                    <AnimatedPlaceholder width="200px" height="20px" borderRadius="5px" />
-                                </p>
                             </div>
                             <div class="col-md-6 col-12">
-                                <h2 class="text-end">
+                                <h1 class="text-end">
                                     <AnimatedPlaceholder width="70px" height="20px" borderRadius="5px" />
-                                </h2>
+                                </h1>
                                 <p class="text-end">
                                     <AnimatedPlaceholder width="100px" height="20px" borderRadius="5px" />
                                 </p>
                             </div>
+                            <div class="col-md-6 col-12">
+                                <p class="card-text fst-italic text-muted">
+                                    <AnimatedPlaceholder width="200px" height="20px" borderRadius="5px" />
+                                </p>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/pages/Skeleton/DetailTafsirSkeleton.vue b/src/pages/Skeleton/DetailTafsirSkeleton.vue
index baacf08..ff59fa7 100644
--- a/src/pages/Skeleton/DetailTafsirSkeleton.vue
+++ b/src/pages/Skeleton/DetailTafsirSkeleton.vue
@@ -2,10 +2,10 @@
     <main class="container mt-custom">
         <div class="bg-success p-4 rounded shadow text-white">
             <h1 class="float-end">
-                <AnimatedPlaceholder width="70px" height="20px" borderRadius="5px" />
+                <AnimatedPlaceholder width="110px" height="6px" borderRadius="5px" />
             </h1>
             <h1 class="">
-                <AnimatedPlaceholder width="150px" height="20px" borderRadius="5px" />
+                <AnimatedPlaceholder width="250px" height="20px" borderRadius="5px" />
             </h1>
             <div class="row">
                 <div class="col-md-6">
diff --git a/src/pages/Surah.vue b/src/pages/Surah.vue
index d87771c..50b2437 100644
--- a/src/pages/Surah.vue
+++ b/src/pages/Surah.vue
@@ -3,8 +3,8 @@
     <div class="container mb-2">
         <div class="row">
             <div class="col-md-12">
-                <div class="input-group">
-                    <input type="text" v-model="input" class="form-control p-3" placeholder="Ketik nama surat...">
+                <div class="search">
+                    <input type="text" v-model="input" class="search" placeholder="Ketik nama surat...">
                 </div>
             </div>
         </div>
@@ -17,18 +17,27 @@
                     class="text-decoration-none text-dark">
                     <div class="card mt-4">
                         <div class="card-body card-custom">
-                            <h2 class="float-end"> {{ surah.nama }} </h2>
-                            <h5 class="card-title nama-latin"> {{ surah.nomor }}. {{ surah.nama_latin }}
-                                <small>({{ surah.jumlah_ayat }} ayat)</small>
-                            </h5>
+
+                            <router-link :to="{ name: 'surah', params: { id: surah.nomor } }"
+                                class="text-decoration-none text-success">
+                                <h2 class="float-end"> {{ surah.nama }} </h2>
+                            </router-link>
+
+                            <router-link :to="{ name: 'surah', params: { id: surah.nomor } }"
+                                class="text-decoration-none text-success">
+                                <h5 class="card-title nama-latin"> {{ surah.nomor }}. {{ surah.nama_latin }}
+                                    <small>({{ surah.jumlah_ayat }} ayat)</small>
+                                </h5>
+                            </router-link>
+                            
                             <p class="card-text text-capitalize">{{ surah.tempat_turun + ' • ' + surah.arti }}</p>
-                            <!-- <router-link :to="{ name: 'surah', params: { id: surah.nomor } }" class="btn btn-warning">
-                                Baca Surah
-                            </router-link> -->
                         </div>
                     </div>
                 </router-link>
             </div>
+            <div v-if="input && !filteredQuran.length" class="mt-5 mb-5">
+                <h3 class="text-center mt-5 mb-5">Surat tidak ditemukan</h3>
+            </div>
         </div>
     </div>
 </template>
@@ -109,19 +118,44 @@ export default {
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 3px;
+    transition: all 0.15s ease-in-out;
 }
 
 .card-body:hover {
     background-color: rgb(246, 246, 246);
-    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.5);
     border-top-left-radius: 3px;
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 3px;
+    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.5);
+    transition: all 0.15s ease-in-out;
 }
 
 
 h5.nama-latin {
     font-weight: 700;
 }
+
+.search {
+    width: 100%;
+    height: 60px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    font-size: 16px;
+    outline: none;
+    transition: all 0.15s ease-in-out;
+}
+
+.search:focus {
+    box-shadow: 0 0px 10px 0 rgba(151, 151, 151, 0.5);
+    transition: all 0.15s ease-in-out;
+}
+
+input {
+    padding: 15px;
+}
+
+input::placeholder {
+    color: #aaa;
+}
 </style>
\ No newline at end of file