updated menu on mobile

This commit is contained in:
Warunee Tamkoo 2024-05-31 11:15:21 +07:00
parent 2e28b3980e
commit a9053ada32
4 changed files with 36 additions and 20 deletions

View file

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ระบบทรัพยากรบุคคล</title> <title>ระบบบริหารทรัพยากรบุคคล</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View file

@ -216,7 +216,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
สวสด, {{ fullname }} สวสด, {{ fullname }}
</div> </div>
<div style="color: #ffffff" class="text-18px text-weight-medium col-12"> <div style="color: #ffffff" class="text-18px text-weight-medium col-12">
ระบบทรพยากรบคคล ระบบบรหารทรพยากรบคคลของกรงเทพมหานคร
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-9"> <div class="col-xs-12 col-sm-12 col-md-9">

View file

@ -21,7 +21,7 @@ import { useQuasar } from "quasar";
const store = useRegistryInFormationStore(); const store = useRegistryInFormationStore();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { messageError,dialogConfirm } = mixin; const { messageError, dialogConfirm } = mixin;
const profileImg = ref<string>(""); const profileImg = ref<string>("");
const router = useRouter(); const router = useRouter();
const tab = ref<string>("information"); const tab = ref<string>("information");
@ -100,7 +100,7 @@ function onClickDownloadKp7(type: string) {
* logout keycloak * logout keycloak
* confirm อนออกจากระบบ * confirm อนออกจากระบบ
*/ */
const doLogout = () => { const doLogout = () => {
dialogConfirm( dialogConfirm(
$q, $q,
() => { () => {
@ -332,6 +332,12 @@ onMounted(async () => {
<q-avatar text-color="info" icon="mdi-chevron-right" /> <q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item clickable v-ripple disabled>
<q-item-section>เปลยนรหสผาน</q-item-section>
<q-item-section avatar>
<q-avatar text-color="info" icon="mdi-chevron-right" />
</q-item-section>
</q-item>
</q-list> </q-list>
</q-card> </q-card>
</div> </div>

View file

@ -7,7 +7,6 @@ import { useQuasar } from "quasar";
import keycloak from "@/plugins/keycloak"; import keycloak from "@/plugins/keycloak";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -154,8 +153,8 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
minute: "2-digit", minute: "2-digit",
}; };
function onInfo(){ function onInfo() {
router.push(`/registry`) router.push(`/registry`);
} }
</script> </script>
<!-- โครงเว --> <!-- โครงเว -->
@ -178,9 +177,9 @@ function onInfo(){
style="color: #ffffff; letter-spacing: 1px; line-height: 10px" style="color: #ffffff; letter-spacing: 1px; line-height: 10px"
class="text-body2 text-weight-bolder col-12" class="text-body2 text-weight-bolder col-12"
> >
ระบบ<span class="text-primary">ทรพยากรบคคล</span> ระบบ<span class="text-primary">บรหารทรพยากรบคคล</span>
</div> </div>
<div class="text-caption text-white">กรงเทพมหานคร</div> <div class="text-caption text-white">ของกรงเทพมหานคร</div>
</div> </div>
</div> </div>
<div v-else class="row items-center"> <div v-else class="row items-center">
@ -364,11 +363,17 @@ function onInfo(){
</template> </template>
<q-list> <q-list>
<q-item clickable v-close-popup @click="onInfo"> <q-item clickable v-close-popup @click="onInfo">
<q-item-section avatar style="min-width: 30px" > <q-item-section avatar style="min-width: 30px">
<q-icon color="info" size="18px" name="mdi-clipboard-account-outline" /> <q-icon
color="blue-9"
size="18px"
name="mdi-clipboard-account-outline"
/>
</q-item-section> </q-item-section>
<q-item-section <q-item-section
><q-item-label>อมลทะเบยนประว</q-item-label></q-item-section ><q-item-label
>อมลทะเบยนประว</q-item-label
></q-item-section
> >
</q-item> </q-item>
@ -402,9 +407,8 @@ function onInfo(){
style="height: 30px; max-width: 30px" style="height: 30px; max-width: 30px"
/> />
</q-avatar> </q-avatar>
<q-menu> <!-- <q-menu>
<q-list dense style="min-width: 200px"> <q-list dense style="min-width: 200px">
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section> <q-item-section>
<div class="row items-center"> <div class="row items-center">
@ -412,7 +416,7 @@ function onInfo(){
<q-item clickable v-close-popup @click="onInfo"> <q-item clickable v-close-popup @click="onInfo">
<q-item-section avatar style="min-width: 30px"> <q-item-section avatar style="min-width: 30px">
<q-icon <q-icon
color="info" color="blue-9"
size="18px" size="18px"
name="mdi-clipboard-account-outline" name="mdi-clipboard-account-outline"
/> />
@ -455,7 +459,7 @@ function onInfo(){
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-menu> </q-menu> -->
</q-btn> </q-btn>
</div> </div>
</q-toolbar> </q-toolbar>
@ -490,7 +494,13 @@ function onInfo(){
icon="mdi-calendar-blank-outline" icon="mdi-calendar-blank-outline"
@click="router.push(`/leave`)" @click="router.push(`/leave`)"
/> />
<q-btn flat round color="white" icon="mdi-account-outline" /> <q-btn
flat
round
color="white"
icon="mdi-account-outline"
@click="router.push(`/registry`)"
/>
</div> </div>
</q-toolbar> </q-toolbar>
</q-footer> </q-footer>