edit homepage
This commit is contained in:
nurafrinaalimi16
@@ -1,35 +1,79 @@
|
||||
<template>
|
||||
|
||||
<div class="row col-md-10 col-md-offset-1">
|
||||
<div class="text-center mb-4">
|
||||
<img src="/images/banner-mat28.jpg" alt="Banner" class="img-fluid"
|
||||
style="width: 100%; max-height: 400px; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;"></div> <!-- You can adjust the px value as needed -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<h4>Maklumat Anggota</h4>
|
||||
<div class="p-2 mb-3 text-center"
|
||||
style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
|
||||
Maklumat Anggota
|
||||
</div>
|
||||
<hr />
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item"><b>Nama : </b>{{ data.user.name }}</li>
|
||||
<li class="list-group-item"><b>No. Kad Pengenalan : </b>{{ data.user.no_kp }}</li>
|
||||
<li class="list-group-item"><b>No. Anggota : </b>{{ data.user.no_anggota }}
|
||||
<li class="list-group-item"><b>Unit : </b>{{ data.user.unit }}</li>
|
||||
<li class="list-group-item"><b>Saham :</b> RM {{ data.user.saham | formatNumberWithCommas() }}</li>
|
||||
<li class="list-group-item"><b>Yuran :</b> RM {{ data.user.yuran | formatNumberWithCommas() }}</li>
|
||||
<ul class="list-group" style="font-weight: bold;">
|
||||
<li class="list-group-item">
|
||||
<span class="info-label">NAMA</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.name }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="info-label">NO KAD PENGENALAN</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.no_kp }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="info-label">NO ANGGOTA</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.no_anggota }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="info-label">UNIT</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.unit }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="info-label">SAHAM</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">RM {{ data.user.saham | formatNumberWithCommas() }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="info-label">YURAN</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas() }}</span>
|
||||
</li>
|
||||
<li class="list-group-item" v-if="data.election.status == 1">
|
||||
<center>Undian belum bermula</center>
|
||||
</li>
|
||||
<li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
|
||||
<center>
|
||||
<router-link v-if="data.user.saham >= 500 && data.user.kehadiran != 0" :to="{ name: 'Vote' }" class="btn btn-primary">
|
||||
Undi Sekarang
|
||||
</router-link>
|
||||
<router-link v-if="data.user.saham >= 500" :to="{ name: 'Attendance' }" class="btn btn-info">
|
||||
Daftar Kehadiran Sekarang
|
||||
</router-link>
|
||||
<div v-else class="alert alert-danger" role="alert">
|
||||
Saham minima tidak mencukupi untuk pengundian
|
||||
</div>
|
||||
</center>
|
||||
<span class="info-label">STATUS UNDIAN</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">Belum bermula</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
|
||||
<center>
|
||||
<router-link v-if="data.user.saham >= 500 && data.user.kehadiran != 0" :to="{ name: 'Vote' }"
|
||||
class="btn btn-warning">
|
||||
Undi Sekarang
|
||||
</router-link>
|
||||
<router-link v-if="data.user.saham >= 500" :to="{ name: 'Attendance' }" class="btn btn-success">
|
||||
Daftar Kehadiran
|
||||
</router-link>
|
||||
<div v-else class="alert alert-danger" role="alert">
|
||||
Saham minima tidak mencukupi untuk pengundian
|
||||
</div>
|
||||
</center>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="hasVoted()">
|
||||
<hr />
|
||||
<h4>Maklumat Undian Anda</h4>
|
||||
<div class="p-2 mb-3 text-center"
|
||||
style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
|
||||
Maklumat Undian Anda
|
||||
</div>
|
||||
<hr />
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" v-for="result in data.result">
|
||||
@@ -40,7 +84,10 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<h4>Maklumat Calon</h4>
|
||||
<div class="p-2 mb-3 text-center"
|
||||
style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
|
||||
Maklumat Calon
|
||||
</div>
|
||||
<hr />
|
||||
<small>Tekan gambar untuk maklumat calon</small>
|
||||
<div class="panel panel-primary" v-for="position in data.positions">
|
||||
@@ -182,7 +229,7 @@ export default {
|
||||
},
|
||||
|
||||
viewNomineeDetails: function (nominee) {
|
||||
this.nomineeViewed = {...nominee};
|
||||
this.nomineeViewed = { ...nominee };
|
||||
this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
|
||||
$('#view-nominee-modal').modal();
|
||||
},
|
||||
@@ -202,28 +249,37 @@ export default {
|
||||
|
||||
<style>
|
||||
#view-nominee-modal .modal-dialog {
|
||||
max-width: 850px; /* Set a maximum width */
|
||||
width: 100%; /* Ensure full width on smaller screens */
|
||||
max-width: 850px;
|
||||
/* Set a maximum width */
|
||||
width: 100%;
|
||||
/* Ensure full width on smaller screens */
|
||||
}
|
||||
|
||||
#view-nominee-modal .nominee-viewed-photo {
|
||||
width: 100%; /* Ensure the photo fills the container */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
width: 100%;
|
||||
/* Ensure the photo fills the container */
|
||||
height: auto;
|
||||
/* Maintain aspect ratio */
|
||||
}
|
||||
|
||||
#view-nominee-modal .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Allow content to wrap on smaller screens */
|
||||
flex-wrap: wrap;
|
||||
/* Allow content to wrap on smaller screens */
|
||||
}
|
||||
|
||||
#view-nominee-modal .photo-section {
|
||||
flex: 0 0 40%; /* Set a flexible width for the photo section */
|
||||
max-width: 300px; /* Set a maximum width */
|
||||
margin-right: 20px; /* Add space between photo and details */
|
||||
flex: 0 0 40%;
|
||||
/* Set a flexible width for the photo section */
|
||||
max-width: 300px;
|
||||
/* Set a maximum width */
|
||||
margin-right: 20px;
|
||||
/* Add space between photo and details */
|
||||
}
|
||||
|
||||
#view-nominee-modal .detail-section {
|
||||
flex: 1; /* Take remaining space */
|
||||
flex: 1;
|
||||
/* Take remaining space */
|
||||
}
|
||||
|
||||
#view-nominee-modal span {
|
||||
@@ -242,14 +298,19 @@ export default {
|
||||
}
|
||||
|
||||
#view-nominee-modal .photo-section {
|
||||
flex: 0 0 100%; /* Set photo section to full width */
|
||||
max-width: none; /* Remove max-width */
|
||||
margin-right: 0; /* Remove right margin */
|
||||
margin-bottom: 20px; /* Add space between photo and details */
|
||||
flex: 0 0 100%;
|
||||
/* Set photo section to full width */
|
||||
max-width: none;
|
||||
/* Remove max-width */
|
||||
margin-right: 0;
|
||||
/* Remove right margin */
|
||||
margin-bottom: 20px;
|
||||
/* Add space between photo and details */
|
||||
}
|
||||
|
||||
#view-nominee-modal .detail-section {
|
||||
flex: 0 0 100%; /* Set detail section to full width */
|
||||
flex: 0 0 100%;
|
||||
/* Set detail section to full width */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -258,13 +319,44 @@ export default {
|
||||
}
|
||||
|
||||
@keyframes pulseBackground {
|
||||
0% { background-color: #FFFFBF; } /* Start color */
|
||||
50% { background-color: #ffffff; } /* Middle color (white) */
|
||||
100% { background-color: #FFFFBF; } /* End color (same as start) */
|
||||
0% {
|
||||
background-color: #FFFFBF;
|
||||
}
|
||||
|
||||
/* Start color */
|
||||
50% {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Middle color (white) */
|
||||
100% {
|
||||
background-color: #FFFFBF;
|
||||
}
|
||||
|
||||
/* End color (same as start) */
|
||||
}
|
||||
|
||||
#table-nominee tbody tr:hover {
|
||||
animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Animation duration, timing function, and repetition */
|
||||
animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
|
||||
/* Animation duration, timing function, and repetition */
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.info-separator {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 1.0rem;
|
||||
/* or try 0.85rem if you want even smaller */
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user