Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/krisdewa/Al-Quran-Online
Browse files Browse the repository at this point in the history
  • Loading branch information
@krisdewa
krisdewa committed Nov 10, 2022
2 parents d26aad6 + 8f96986 commit d3cd86d
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 38 deletions.
34 changes: 30 additions & 4 deletions src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
22 changes: 20 additions & 2 deletions src/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
12 changes: 1 addition & 11 deletions src/pages/DetailSurah/DetailSurah.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
20 changes: 11 additions & 9 deletions src/pages/Skeleton/DetailSurahSkeleton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Skeleton/DetailTafsirSkeleton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
54 changes: 44 additions & 10 deletions src/pages/Surah.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

1 comment on commit d3cd86d

@vercel
Copy link

@vercel vercel bot commented on d3cd86d Nov 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

quran-online – ./

quran-online-git-main-krisdewa.vercel.app
quran.krisproject.my.id
quran-online-krisdewa.vercel.app
quran-online-rho.vercel.app

Please sign in to comment.