defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix recent page list style

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-27 08:49:51 +07:00
parent a4fb6dcdd7
commit 8384a35832
3 changed files with 56 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/assets/css/style.css
View File

@ -1098,10 +1098,6 @@ select {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.mt-12 {
margin-top: 3rem;
}
.line-clamp-1 { .line-clamp-1 {
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
@ -1185,6 +1181,10 @@ select {
height: 2.7rem; height: 2.7rem;
} }
.h-\[66px\] {
height: 66px;
}
.h-\[calc\(100\%-64px\)\] { .h-\[calc\(100\%-64px\)\] {
height: calc(100% - 64px); height: calc(100% - 64px);
} }
@ -1202,10 +1202,6 @@ select {
height: 80vh; height: 80vh;
} }
.h-\[66px\] {
height: 66px;
}
.max-h-0 { .max-h-0 {
max-height: 0px; max-height: 0px;
} }
@ -1334,10 +1330,6 @@ select {
flex: 1 1 0%; flex: 1 1 0%;
} }
.flex-auto {
flex: 1 1 auto;
}
.flex-none { .flex-none {
flex: none; flex: none;
} }
@ -1528,18 +1520,18 @@ select {
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
} }
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) { .space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
} }
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) { .divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0; --tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@ -1819,14 +1811,14 @@ select {
--tw-bg-opacity: 0.8; --tw-bg-opacity: 0.8;
} }
.fill-gray-400 {
fill: #9ca3af;
}
.fill-gray-500 { .fill-gray-500 {
fill: #6b7280; fill: #6b7280;
} }
.fill-gray-600 {
fill: #4b5563;
}
.fill-primary-500 { .fill-primary-500 {
fill: #035b71; fill: #035b71;
} }
@ -1843,10 +1835,6 @@ select {
fill: #fff; fill: #fff;
} }
.fill-gray-600 {
fill: #4b5563;
}
.stroke-white { .stroke-white {
stroke: #fff; stroke: #fff;
} }
@ -2050,6 +2038,10 @@ select {
text-align: center; text-align: center;
} }
.text-start {
text-align: start;
}
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
@ -2204,6 +2196,11 @@ select {
color: rgb(55 65 81 / var(--tw-text-opacity)); color: rgb(55 65 81 / var(--tw-text-opacity));
} }
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900 { .text-gray-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity)); color: rgb(17 24 39 / var(--tw-text-opacity));
@ -2304,15 +2301,6 @@ select {
color: rgb(153 153 0 / var(--tw-text-opacity)); color: rgb(153 153 0 / var(--tw-text-opacity));
} }
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-opacity-100 {
--tw-text-opacity: 1;
}
.text-opacity-40 { .text-opacity-40 {
--tw-text-opacity: 0.4; --tw-text-opacity: 0.4;
} }
@ -2339,14 +2327,14 @@ select {
opacity: 0.3; opacity: 0.3;
} }
.opacity-50 {
opacity: 0.5;
}
.opacity-40 { .opacity-40 {
opacity: 0.4; opacity: 0.4;
} }
.opacity-50 {
opacity: 0.5;
}
.shadow { .shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@ -2753,58 +2741,36 @@ select {
display: block; display: block;
} }
.group:hover .group-hover\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-primary-500 { .group:hover .group-hover\:bg-primary-500 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity)); background-color: rgb(3 91 113 / var(--tw-bg-opacity));
} }
.group:hover .group-hover\:bg-opacity-5 {
--tw-bg-opacity: 0.05;
}
.group:hover .group-hover\:bg-opacity-80 { .group:hover .group-hover\:bg-opacity-80 {
--tw-bg-opacity: 0.8; --tw-bg-opacity: 0.8;
} }
.group:hover .group-hover\:fill-gray-500 { .group:hover .group-hover\:fill-primary-500 {
fill: #6b7280; fill: #035b71;
} }
.group:hover .group-hover\:fill-white { .group:hover .group-hover\:fill-white {
fill: #fff; fill: #fff;
} }
.group:hover .group-hover\:fill-primary-500 {
fill: #035b71;
}
.group:hover .group-hover\:text-gray-500 { .group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity)); color: rgb(107 114 128 / var(--tw-text-opacity));
} }
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-primary-500 { .group:hover .group-hover\:text-primary-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(3 91 113 / var(--tw-text-opacity)); color: rgb(3 91 113 / var(--tw-text-opacity));
} }
.group:hover .group-hover\:opacity-100 { .group:hover .group-hover\:text-white {
opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -3238,16 +3204,16 @@ select {
padding: 5rem; padding: 5rem;
} }
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.md\:px-0 { .md\:px-0 {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.md\:py-0 { .md\:py-0 {
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;

4
src/components/CommandPalettes.vue
View File

@ -23,7 +23,7 @@
</div> </div>
<ComboboxOptions v-if="query === '' || filteredMenus.length > 0" static <ComboboxOptions v-if="query === '' || filteredMenus.length > 0" static
class="overflow-y-auto divide-y divide-gray-500 max-h-80 scroll-py-2 divide-opacity-10"> class="overflow-y-auto divide-y divide-gray-500 scroll-py-2 divide-opacity-10">
<li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0"> <li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
<h2 v-if="query === '' && recent.length > 0" <h2 v-if="query === '' && recent.length > 0"
class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900"> class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
@ -62,7 +62,7 @@
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" /> :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
<div class="flex flex-col flex-1 ml-3 space-y-1"> <div class="flex flex-col flex-1 ml-3 space-y-1">
<span class="text-sm font-medium text-gray-800 truncate line-clamp-1"> <span class="text-sm font-medium text-gray-800 line-clamp-1">
{{ menu.name }} {{ menu.name }}
</span> </span>
<span class="text-xs text-gray-500 line-clamp-1"> <span class="text-xs text-gray-500 line-clamp-1">

34
src/components/Pages/Welcome.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80"> <div class="flex flex-col items-center justify-center px-4 text-center whitespace-pre-wrap h-screen-80">
<div class="w-full md:w-[440px] px-4 py-4 md:px-0 md:py-0 flex flex-col items-center"> <div class="w-full md:w-[440px] py-4 md:py-0 flex flex-col items-center">
<img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4"> <img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
<button @click="command.showCommandPalettes" type="button" <button @click="command.showCommandPalettes" type="button"
class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0"> class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Search</span> <span class="sr-only">Search</span>
<MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" /> <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
<span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span> <span class="px-3 text-sm font-medium text-gray-500 text-md">Cari menu</span>
</button> </button>
<div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12"> <div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
@ -20,35 +20,35 @@
<div <div
class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80"> class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon" <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon" <component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon"
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon" <component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon"
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]" <component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]"
alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]" <component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]"
alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]" <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]"
alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon" <component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon"
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon" <component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon"
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else :is="navigationIcon[8]" alt="icon" <component v-else :is="navigationIcon[8]" alt="icon"
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<div class="flex flex-col items-start flex-1 ml-3 space-y-1"> <div class="flex flex-col items-start flex-1 w-full pl-3 space-y-1">
<span <span
class="text-sm font-medium text-gray-800 truncate group-hover:text-white line-clamp-1"> class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
{{ menu.name }} {{ menu.name }}
</span> </span>
<span class="text-xs text-gray-500 group-hover:text-white line-clamp-1"> <span
class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
{{ menu.path.replace('/home/', '') }} {{ menu.path.replace('/home/', '') }}
</span> </span>
</div> </div>
<span <span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
class="flex-none hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
Buka Buka
</span> </span>
</div> </div>