KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: centralize theme color, interactive dashboard, increase winner result, refer TODO

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-05-10 11:51:19 +08:00
parent 654a0c9fea
commit fd1baf34c8
47 changed files with 2680 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/RouletteEliminationWheel.vue
+72 -9
View File
@@ -72,15 +72,15 @@
<div class="modal fade app-modal roulette-winner-modal" id="roulette-winner-modal" tabindex="-1" role="dialog"
aria-labelledby="roulette-winner-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg roulette-winner-modal__dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="roulette-winner-title">
<h3 class="modal-title roulette-winner-modal__title" id="roulette-winner-title">
Tahniah
</h4>
</h3>
</div>
<div class="modal-body text-center" v-if="modalWinnerDisplay">
<p class="roulette-winner-modal-round text-muted">
@@ -1273,21 +1273,84 @@ export default {
font-size: 13px;
}
.roulette-winner-modal .modal-title {
/* Hall / projection: wide dialog, very large type */
.roulette-winner-modal__dialog {
width: 96%;
max-width: min(96vw, 1320px);
margin: 12px auto;
}
@media (min-width: 768px) {
.roulette-winner-modal__dialog {
width: 94%;
max-width: min(94vw, 1400px);
}
}
@media (min-width: 1200px) {
.roulette-winner-modal__dialog {
max-width: 1440px;
}
}
.roulette-winner-modal .modal-content {
border-radius: 16px;
overflow: hidden;
border-width: 2px;
}
.roulette-winner-modal .modal-header {
padding: clamp(20px, 3vw, 36px) clamp(18px, 3vw, 40px);
position: relative;
}
.roulette-winner-modal .modal-header .close {
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 300;
line-height: 1;
padding: 8px 12px;
margin-top: -4px;
opacity: 0.55;
}
.roulette-winner-modal .modal-body {
padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.roulette-winner-modal .modal-footer {
padding: clamp(16px, 2.5vw, 28px) clamp(18px, 3vw, 40px);
}
.roulette-winner-modal .modal-footer .btn {
font-size: clamp(1.15rem, 2.2vw, 1.65rem);
font-weight: 700;
padding: clamp(10px, 1.5vw, 16px) clamp(18px, 2.5vw, 28px);
}
.roulette-winner-modal__title {
font-weight: 800;
font-size: clamp(2.25rem, 5.5vw, 5rem);
line-height: 1.15;
margin: 0;
padding-right: 2.5rem;
}
.roulette-winner-modal-round {
font-size: 14px;
margin-bottom: 8px;
font-size: clamp(1.5rem, 3.5vw, 3.25rem);
margin-bottom: clamp(16px, 2.5vw, 28px);
font-weight: 700;
/* Stronger than .text-muted for projection / rear seats */
color: #4b5563 !important;
}
.roulette-winner-modal-name {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.3;
font-size: clamp(3rem, 12vw, 8.5rem);
font-weight: 800;
line-height: 1.12;
margin: 0;
word-break: break-word;
letter-spacing: -0.03em;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
.roulette-winner-absent-hint {