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/voter/index.vue
+14 -208
View File
@@ -1,36 +1,19 @@
<template>
<div>
<div v-if="!loading">
<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
<div class="container">
<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">
<FloatingNavbar :logo-href="data.baseURL" main-nav-class="voter-nav-main">
<template #right>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav voter-nav-main">
<ul class="dropdown-menu">
<li @click="logout()"><a>Log Keluar</a></li>
</ul>
<ul class="nav navbar-right navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li @click="logout()"><a>Log Keluar</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</li>
</template>
</FloatingNavbar>
<div class="voter-main">
<div class="voter-breadcrumb-wrap">
@@ -55,7 +38,10 @@
</template>
<script>
import FloatingNavbar from '../../common/FloatingNavbar.vue';
export default {
components: { FloatingNavbar },
data: () => ({
loading: true
}),
@@ -132,154 +118,6 @@ export default {
<style scoped>
.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;
}
#nav.navbar {
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);
}
#nav .nav>li>a,
#nav .navbar-toggle {
color: #f8fbff;
font-weight: 700;
letter-spacing: 0.02em;
}
#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: #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;
}
#nav .dropdown-menu>li>a {
color: #2c3e50;
}
#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;
}
@@ -336,38 +174,6 @@ export default {
}
@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;
}