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

DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-04-02 11:59:56 +08:00
parent bed56792e6
commit 4369b079cb
31 changed files with 3044 additions and 1216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/voter/index.vue
+179 -25
View File
@@ -1,16 +1,17 @@
<template>
<div>
<div v-if="!loading">
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
<div class="container">
<div class="navbar-header">
<div class="navbar-header logo-section">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" :href="data.baseURL"><img src='/images/mykopkb.png' border='0'
width="150" height="auto" alt="MyKoPKB Logo"></a>
<a class="navbar-brand" :href="data.baseURL">
<img src='/images/mykopkb.png' border='0' width="150" height="auto" alt="MyKoPKB Logo">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
@@ -20,9 +21,11 @@
<a href="#"><b>LAMAN UTAMA</b></a>
</router-link>
<router-link :to="{ name: 'Mat' }" tag="li" exact>
<a href="#"><b>MAT KE-28</b></a>
</router-link>
<li>
<a :href="matLinkUrl" target="_blank" rel="noopener noreferrer">
<b>MAT KE-28</b> <i class="fa fa-external-link"></i>
</a>
</li>
<router-link :to="{ name: 'Attendance' }" tag="li" exact>
<a href="#"><b>DAFTAR MAT</b></a>
@@ -38,7 +41,8 @@
<a href="#"><b>PAUTAN MESYUARAT</b></a>
</router-link>
<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }" tag="li" exact>
<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }"
tag="li" exact>
<a href="#"><b>PENYATA AHLI</b></a>
</router-link>
@@ -59,7 +63,9 @@
</div>
</nav>
<router-view></router-view>
<div class="voter-main">
<router-view></router-view>
</div>
</div>
<div v-else class="container">
<div class="jumbotron">
@@ -72,7 +78,8 @@
<script>
export default {
data: () => ({
loading: true
loading: true,
matLinkUrl: 'https://linktr.ee/kopkb'
}),
created: function () {
@@ -117,46 +124,193 @@ export default {
<style scoped>
body {
padding: 70px 5px;
.floating-header {
position: fixed !important;
top: 16px !important;
left: 16px !important;
right: 16px !important;
width: calc(100% - 32px) !important;
margin: 0;
border-radius: 16px !important;
z-index: 2000 !important;
transition: all 0.3s ease !important;
}
.logo-header {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.96) 0%,
rgb(8, 0, 126) 48%,
rgb(255, 0, 0) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
box-shadow:
0 8px 32px rgba(33, 150, 243, 0.35),
0 4px 16px rgba(2, 19, 36, 0.28) !important;
backdrop-filter: blur(12px) !important;
position: fixed;
overflow: visible;
}
.logo-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
z-index: 0;
}
.logo-header>* {
position: relative;
z-index: 1;
}
.logo-section {
display: flex;
align-items: center;
margin-right: 24px;
margin-left: 24px;
flex-shrink: 0;
}
/* Change navbar background color */
#nav.navbar {
background-color: #021324;
/* Dark blue/gray background */
border: none;
min-height: 78px;
}
#nav .container {
width: 100%;
padding-left: 12px;
padding-right: 12px;
overflow: visible;
}
#nav .navbar-brand {
display: flex;
align-items: center;
gap: 12px;
height: auto;
padding: 14px 0;
color: #1f2937;
font-weight: 700;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.logo-title {
display: inline-block;
color: #1f2937 !important;
font-size: 1.8rem;
font-weight: 700;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
/* Change navbar link text color */
#nav .nav>li>a,
#nav .navbar-brand,
#nav .navbar-toggle {
color: #f39c12;
/* Light gray text */
color: #f8fbff;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Hover effect */
#nav .nav>li>a:hover,
#nav .nav>li.active>a,
#nav .nav>li.active>a:hover,
#nav .nav>li.active>a:focus,
#nav .navbar-brand:hover {
color: #f39c12;
/* Gold/yellow on hover */
color: #fff;
background: rgba(204, 0, 0, 0.833);
}
#nav .nav>li>a {
border-radius: 10px;
margin-top: 18px;
margin-bottom: 18px;
padding-top: 12px;
padding-bottom: 12px;
}
#nav .navbar-right {
margin-right: 8px;
}
#nav .navbar-nav>li,
#nav .dropdown {
position: relative;
}
#nav .dropdown-menu {
margin-top: 6px;
border: 0;
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
z-index: 2101;
}
/* Dropdown text color */
#nav .dropdown-menu>li>a {
color: #2c3e50;
/* Dark text in dropdown */
}
/* Dropdown hover */
#nav .dropdown-menu>li>a:hover {
background-color: #f39c12;
color: white;
}
#nav .navbar-toggle {
margin-top: 20px;
margin-right: 18px;
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
}
#nav .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-brand img {
background: transparent !important;
box-shadow: none;
}
.voter-main {
padding-top: 112px;
}
@media (max-width: 767px) {
.floating-header {
top: 10px !important;
left: 10px !important;
right: 10px !important;
width: calc(100% - 20px) !important;
border-radius: 14px !important;
}
.logo-section {
margin-left: 16px;
margin-right: 8px;
}
.logo-title {
font-size: 1.4rem;
}
#nav .navbar-brand img {
width: 120px;
}
#nav .navbar-collapse {
border-top: 0;
box-shadow: none;
padding-bottom: 12px;
overflow: visible;
}
#nav .nav>li>a {
margin: 4px 10px;
}
.voter-main {
padding-top: 102px;
}
}
</style>