Skip to content

Commit

Permalink
fix: ui and logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Dec 8, 2024
1 parent a6da4ef commit 058e838
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 94 deletions.
166 changes: 85 additions & 81 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,17 +213,19 @@ <h2 class="font-esthetic m-0" style="font-size: 2.5rem;">Riski Siapa</h2>
</svg>

<!-- Firman Allah Subhanahu Wa Ta'ala -->
<section class="bg-light container text-center pb-4">
<h2 class="font-esthetic py-2 m-0" style="font-size: 2rem;">Allah Subhanahu Wa Ta'ala berfirman</h2>
<section class="bg-light pb-4">
<div class="container text-center">
<h2 class="font-esthetic py-2 m-0" style="font-size: 2rem;">Allah Subhanahu Wa Ta'ala berfirman</h2>

<div class="bg-theme-dark mt-4 p-3 shadow rounded-4" data-aos="fade-up" data-aos-duration="2000">
<p class="p-1 mb-3" style="font-size: 0.95rem;">Dan segala sesuatu Kami ciptakan berpasang-pasangan agar kamu mengingat (kebesaran Allah).</p>
<p class="m-0 p-0 fw-bold">QS. Az-Zariyat: Ayat 49</p>
</div>
<div class="bg-theme-dark mt-4 p-3 shadow rounded-4" data-aos="fade-up" data-aos-duration="2000">
<p class="p-1 mb-3" style="font-size: 0.95rem;">Dan segala sesuatu Kami ciptakan berpasang-pasangan agar kamu mengingat (kebesaran Allah).</p>
<p class="m-0 p-0 fw-bold">QS. Az-Zariyat: Ayat 49</p>
</div>

<div class="bg-theme-dark mt-4 p-3 shadow rounded-4" data-aos="fade-up" data-aos-duration="2000">
<p class="p-1 mb-3" style="font-size: 0.95rem;">dan sesungguhnya Dialah yang menciptakan pasangan laki-laki dan perempuan,</p>
<p class="m-0 p-0 fw-bold">QS. An-Najm: Ayat 45</p>
<div class="bg-theme-dark mt-4 p-3 shadow rounded-4" data-aos="fade-up" data-aos-duration="2000">
<p class="p-1 mb-3" style="font-size: 0.95rem;">dan sesungguhnya Dialah yang menciptakan pasangan laki-laki dan perempuan,</p>
<p class="m-0 p-0 fw-bold">QS. An-Najm: Ayat 45</p>
</div>
</div>
</section>

Expand Down Expand Up @@ -377,98 +379,100 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri
</svg>

<!-- Love Gift -->
<section class="bg-light container pb-4 text-center">

<h2 class="font-esthetic pt-2 mb-4" style="font-size: 2.5rem;">Love Gift</h2>
<p class="mb-3" style="font-size: 0.95rem;">Dengan hormat, bagi Anda yang ingin memberikan tanda kasih kepada kami, dapat melalui:</p>

<div class="bg-theme-dark rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-up" data-aos-duration="2500">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Bank_Central_Asia.svg/1598px-Bank_Central_Asia.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bca">
<section class="bg-light pb-4">
<div class="container text-center">
<h2 class="font-esthetic pt-2 mb-4" style="font-size: 2.5rem;">Love Gift</h2>
<p class="mb-3" style="font-size: 0.95rem;">Dengan hormat, bagi Anda yang ingin memberikan tanda kasih kepada kami, dapat melalui:</p>

<div class="bg-theme-dark rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-up" data-aos-duration="2500">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Bank_Central_Asia.svg/1598px-Bank_Central_Asia.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bca">

<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
</div>

<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Wahyu Siapa</p>
</div>

<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Wahyu Siapa</p>
</div>
<div class="bg-theme-dark rounded-4 shadow p-4 mx-4 mt-2 text-start" data-aos="fade-up" data-aos-duration="2500">
<img src="https://upload.wikimedia.org/wikipedia/id/thumb/5/55/BNI_logo.svg/1024px-BNI_logo.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bni">

<div class="bg-theme-dark rounded-4 shadow p-4 mx-4 mt-2 text-start" data-aos="fade-up" data-aos-duration="2500">
<img src="https://upload.wikimedia.org/wikipedia/id/thumb/5/55/BNI_logo.svg/1024px-BNI_logo.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bni">
<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
</div>

<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Riski Siapa</p>
</div>

<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Riski Siapa</p>
</div>
</section>

<!-- Comment -->
<section class="bg-light container my-0 pb-0 pt-3" id="comment">
<section class="bg-light my-0 pb-0 pt-3" id="comment">
<div class="container">
<div class="border rounded-4 shadow p-3 mb-2">
<h2 class="font-esthetic text-center mt-2 mb-4" style="font-size: 2.5rem;">Ucapan &amp; Doa</h2>

<div class="border rounded-4 shadow p-3 mb-2">
<h2 class="font-esthetic text-center mt-2 mb-4" style="font-size: 2.5rem;">Ucapan &amp; Doa</h2>
<div class="mb-3">
<label for="form-name" class="form-label"><i class="fa-solid fa-person me-1"></i>Nama</label>
<input type="text" class="form-control shadow-sm rounded-4" id="form-name" offline-disabled placeholder="Isikan Nama Anda">
</div>

<div class="mb-3">
<label for="form-name" class="form-label"><i class="fa-solid fa-person me-1"></i>Nama</label>
<input type="text" class="form-control shadow-sm rounded-4" id="form-name" offline-disabled placeholder="Isikan Nama Anda">
</div>
<div class="mb-3">
<label for="form-presence" class="form-label"><i class="fa-solid fa-person-circle-question me-1"></i>Presensi</label>
<select class="form-select shadow-sm rounded-4" id="form-presence" offline-disabled>
<option value="0" selected>Konfirmasi Presensi</option>
<option value="1">Datang</option>
<option value="2">Berhalangan</option>
</select>
</div>

<div class="mb-3">
<label for="form-presence" class="form-label"><i class="fa-solid fa-person-circle-question me-1"></i>Presensi</label>
<select class="form-select shadow-sm rounded-4" id="form-presence" offline-disabled>
<option value="0" selected>Konfirmasi Presensi</option>
<option value="1">Datang</option>
<option value="2">Berhalangan</option>
</select>
</div>
<div class="mb-3">
<div id="information" class="alert alert-info alert-dismissible fade show rounded-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="util.close()"></button>

<div class="mb-3">
<div id="information" class="alert alert-info alert-dismissible fade show rounded-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="util.close()"></button>
<p style="font-size: 1.5rem;">Bestieee!!!</p>
<p class="m-0">Cobain like seperti Instagram, dengan tap tap bagian komentarnya</p>
<hr class="my-2">
<p class="m-0">Sama bisa format text seperti Whatsapp lohh... cobainn jugaaa, makaciwww bestieee</p>
</div>

<p style="font-size: 1.5rem;">Bestieee!!!</p>
<p class="m-0">Cobain like seperti Instagram, dengan tap tap bagian komentarnya</p>
<hr class="my-2">
<p class="m-0">Sama bisa format text seperti Whatsapp lohh... cobainn jugaaa, makaciwww bestieee</p>
<label for="form-comment" class="form-label"><i class="fa-solid fa-comment me-1"></i>Ucapan &amp; Doa</label>
<textarea class="form-control shadow-sm rounded-4" id="form-comment" rows="4" placeholder="Tulis Ucapan dan Doa" offline-disabled></textarea>
</div>

<label for="form-comment" class="form-label"><i class="fa-solid fa-comment me-1"></i>Ucapan &amp; Doa</label>
<textarea class="form-control shadow-sm rounded-4" id="form-comment" rows="4" placeholder="Tulis Ucapan dan Doa" offline-disabled></textarea>
<div class="d-grid">
<button class="btn btn-primary btn-sm rounded-4 shadow m-1" onclick="comment.send(this)" offline-disabled>
<i class="fa-solid fa-paper-plane me-1"></i>Send
</button>
</div>
</div>

<div class="d-grid">
<button class="btn btn-primary btn-sm rounded-4 shadow m-1" onclick="comment.send(this)" offline-disabled>
<i class="fa-solid fa-paper-plane me-1"></i>Send
</button>
</div>
<!-- Comments -->
<div class="py-3" id="comments" data-loading="false"></div>

<!-- Pagination -->
<nav class="d-flex d-none justify-content-center mt-1 mb-0" id="pagination">
<ul class="pagination mb-0">
<li class="page-item disabled" id="previous">
<button class="page-link rounded-start-4" onclick="pagination.previous(this)" offline-disabled>
<i class="fa-solid fa-circle-left me-1"></i>Prev
</button>
</li>
<li class="page-item disabled">
<span class="page-link text-light" id="page">1</span>
</li>
<li class="page-item" id="next">
<button class="page-link rounded-end-4" onclick="pagination.next(this)" offline-disabled>
Next<i class="fa-solid fa-circle-right ms-1"></i>
</button>
</li>
</ul>
</nav>
</div>

<!-- Comments -->
<div class="py-3" id="comments" data-loading="false"></div>

<!-- Pagination -->
<nav class="d-flex d-none justify-content-center mt-1 mb-0" id="pagination">
<ul class="pagination mb-0">
<li class="page-item disabled" id="previous">
<button class="page-link rounded-start-4" onclick="pagination.previous(this)" offline-disabled>
<i class="fa-solid fa-circle-left me-1"></i>Prev
</button>
</li>
<li class="page-item disabled">
<span class="page-link text-light" id="page">1</span>
</li>
<li class="page-item" id="next">
<button class="page-link rounded-end-4" onclick="pagination.next(this)" offline-disabled>
Next<i class="fa-solid fa-circle-right ms-1"></i>
</button>
</li>
</ul>
</nav>
</section>

<!-- Wave Separator -->
Expand Down
19 changes: 10 additions & 9 deletions js/card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export const card = (() => {
let tracker = null;
let showHide = null;

const maxCommentLength = 150;

const renderLoading = () => {
const comments = document.getElementById('comments');
if (comments.getAttribute('data-loading') === 'true') {
Expand Down Expand Up @@ -140,16 +142,16 @@ export const card = (() => {
const renderBody = (comment, is_parent) => {
const text = theme.isDarkMode('light', 'dark');
const original = convertMarkdownToHTML(util.escapeHtml(comment.comment));
const moreThan200 = original.length > 200;
const moreThanMaxLength = original.length > maxCommentLength;

return `
<div class="d-flex flex-wrap justify-content-between align-items-center">
<p class="text-${text} text-truncate m-0 p-0">${renderTitle(comment, is_parent)}</p>
<small class="text-${text} m-0 p-0" style="font-size: 0.75rem;">${comment.created_at}</small>
</div>
<hr class="text-${text} my-1">
<p class="text-${text} my-1 mx-0 p-0" style="white-space: pre-wrap !important; font-size: 0.95rem;" ${moreThan200 ? `data-comment="${util.base64Encode(original)}"` : ''} id="content-${comment.uuid}">${moreThan200 ? (original.slice(0, 200) + '...') : original}</p>
${moreThan200 ? `<p class="mb-2 mt-0 mx-0 p-0"><a class="text-${text}" role="button" style="font-size: 0.85rem;" data-show="false" onclick="comment.showMore(this, '${comment.uuid}')">Selengkapnya</a></p>` : ''}`;
<p class="text-${text} my-1 mx-0 p-0" style="white-space: pre-wrap !important; font-size: 0.95rem;" ${moreThanMaxLength ? `data-comment="${util.base64Encode(original)}"` : ''} id="content-${comment.uuid}">${moreThanMaxLength ? (original.slice(0, maxCommentLength) + '...') : original}</p>
${moreThanMaxLength ? `<p class="mb-2 mt-0 mx-0 p-0"><a class="text-${text}" role="button" style="font-size: 0.85rem;" data-show="false" onclick="comment.showMore(this, '${comment.uuid}')">Selengkapnya</a></p>` : ''}`;
};

const renderContent = (comment, is_parent) => {
Expand All @@ -164,17 +166,15 @@ export const card = (() => {
</div>`;
};

const renderInnerContent = (comment) => {
return renderContent(comment, false);
};
const renderInnerContent = (comment) => renderContent(comment, false);

const renderReply = (id) => {
const inner = document.createElement('div');
inner.classList.add('my-2');
inner.id = `inner-${id}`;
inner.innerHTML = `
<label for="form-inner-${id}" class="form-label" style="font-size: 0.95rem;"><i class="fa-solid fa-reply me-1"></i>Reply</label>
<textarea class="form-control shadow-sm rounded-4 mb-2" id="form-inner-${id}" placeholder="Type reply comment" rows="4" offline-disabled></textarea>
<textarea class="form-control shadow-sm rounded-4 mb-2" id="form-inner-${id}" placeholder="Type reply comment" rows="3" offline-disabled></textarea>
<div class="d-flex flex-wrap justify-content-end align-items-center mb-0">
<button style="font-size: 0.8rem;" onclick="comment.cancel('${id}')" class="btn btn-sm btn-outline-${theme.isDarkMode('light', 'dark')} rounded-4 py-0 me-1" offline-disabled>Cancel</button>
<button style="font-size: 0.8rem;" onclick="comment.send(this)" data-uuid="${id}" class="btn btn-sm btn-outline-${theme.isDarkMode('light', 'dark')} rounded-4 py-0" offline-disabled>Send</button>
Expand All @@ -194,7 +194,7 @@ export const card = (() => {
<option value="1" ${presence ? 'selected' : ''}>Datang</option>
<option value="2" ${presence ? '' : 'selected'}>Berhalangan</option>
</select>` : ''}
<textarea class="form-control shadow-sm rounded-4 mb-2" id="form-inner-${id}" placeholder="Type update comment" rows="4" offline-disabled></textarea>
<textarea class="form-control shadow-sm rounded-4 mb-2" id="form-inner-${id}" placeholder="Type update comment" rows="3" offline-disabled></textarea>
<div class="d-flex flex-wrap justify-content-end align-items-center mb-0">
<button style="font-size: 0.8rem;" onclick="comment.cancel('${id}')" class="btn btn-sm btn-outline-${theme.isDarkMode('light', 'dark')} rounded-4 py-0 me-1" offline-disabled>Cancel</button>
<button style="font-size: 0.8rem;" onclick="comment.update(this)" data-uuid="${id}" class="btn btn-sm btn-outline-${theme.isDarkMode('light', 'dark')} rounded-4 py-0" offline-disabled>Update</button>
Expand All @@ -220,6 +220,7 @@ export const card = (() => {
renderReadMore,
renderInnerContent,
renderContent: (comment) => renderContent(comment, true),
convertMarkdownToHTML
convertMarkdownToHTML,
maxCommentLength,
};
})();
Loading

0 comments on commit 058e838

Please sign in to comment.