Skip to content

dtd / civitas.ui

Go to a project
Commit d63c4d85 by Samuel Taniel Mulyadi
Options

Merge branch 'staging' into 'master' 

fix login pages

See merge request !1
2 parents 35b12bcc 64ea07e0
Inline Side-by-side
Showing with 49 additions and 375 deletions
@core/scss/template/pages/page-auth.scss
......@@ -75,7 +75,7 @@
min-block-size: 100vh; /* Ensures the element covers the full viewport height */
padding-block-start: 10px;
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
}
.main-component-margin {
......@@ -206,12 +206,11 @@ body {
.logo-image-component-login {
position: static;
display: flex;
display: block;
overflow: hidden;
flex-flow: row;
align-items: center;
justify-content: center;
grid-gap: 0;
gap: 0;
padding-block: 0%;
padding-inline: 0;
}
......@@ -385,6 +384,7 @@ body {
position: static;
display: flex;
box-sizing: border-box;
flex-direction: column;
flex-flow: column;
align-items: center;
justify-content: center;
......@@ -398,6 +398,7 @@ body {
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
text-align: center;
@media (min-width: 768px) {
inline-size: 80%;
......@@ -443,9 +444,9 @@ body {
.image-10-3 {
margin-block: 80px;
margin-inline: 0;
max-inline-size: 50px;
max-inline-size: 80px;
padding-block: 80px;
padding-inline: 30px;
padding-inline: 100px;
}
.logo-login-component-3 {
......@@ -482,3 +483,44 @@ body {
inline-size: 100%;
}
}
// login main
.card-main-login-component4 {
position: static;
display: grid;
overflow: hidden;
flex-flow: row;
align-items: center;
justify-content: center;
border-radius: 1.7rem;
backdrop-filter: blur(5px);
background-color: #fff0;
background-color: white;
box-shadow: 0 12px 16px #0003;
color: #fefce8;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 0%;
outline-offset: 0;
padding-block: 0;
padding-inline: 0%;
transform: translate(0);
}
.logo-login-component4 {
position: static;
display: none;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #ffdc01;
block-size: 100%;
color: #fefce8;
inline-size: 100%;
@media (min-width: 768px) {
display: flex;
}
}
pages/login-v1.vue
......@@ -117,7 +117,6 @@ const onSubmit = () => {
<div class="logo-login-component-3">
<VImg
:src="authThemeImg"
max-height="100"
class="image-10-3 lazyload"
/>
</div>
......
pages/login.vue
......@@ -20,16 +20,6 @@ definePageMeta({
})
watchEffect(async () => {
if (!keycloakStore.accessToken)
return// Hindari fetch jika token masih kosong
console.log('Fetching data dengan token baru...')
const { data: newData, error: newError } = await useAuthFetch('https://api.ui.ac.id/my/ac/st')
data.value = newData.value || null
error.value = newError.value || null
})
</script>
<template>
......@@ -38,8 +28,8 @@ watchEffect(async () => {
class="body-2"
>
<section class="global-main-login-component">
<div class="card-main-login-component">
<div class="logo-login-component">
<div class="card-main-login-component4">
<div class="logo-login-component4">
<VImg
:src="authThemeImg"
max-width="650"
......@@ -73,361 +63,4 @@ watchEffect(async () => {
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
.form-login-component {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.layout-blank {
.auth-wrapper {
min-block-size: 100dvh;
}
.auth-card,
.auth-card-v2,
.auth-illustration {
z-index: 1 !important;
}
}
@media (min-width: 960px) {
.skin--bordered {
.auth-card-v2 {
border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
}
}
.ubah-pass {
color: #403dff;
margin-block-start: 5px;
}
.bantuan {
color: #00830d;
margin-block-start: 5px;
}
.bantuan:hover {
color: #7fa200;
}
.ubah-pass:hover {
color: #3d84ff;
}
.auth-logo {
position: absolute;
z-index: 2;
inset-block-start: 2rem;
inset-inline-start: 2.3rem;
}
.auth-title {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.273px;
line-height: normal;
text-transform: capitalize;
}
.div-block-2,
.body-4 {
display: flex;
align-items: center;
justify-content: center;
/* Ensures it spans the full width */
background-position: center;
/* Centers the image */
background-repeat: repeat;
background-size: cover;
/* Ensures the element covers the full viewport height */
inline-size: 100%;
min-block-size: 100vh;
/* Prevents tiling */
padding-block-start: 10px;
// margin: 5% 5%;
}
.main-component-margin {
padding: 100px;
margin-block: 0%;
margin-inline: 10%;
}
body {
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
min-block-size: 100%;
}
.main-component-login {
display: grid;
overflow: visible;
flex-flow: row;
align-items: center;
justify-content: center;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-block: 5%;
margin-inline: 34% 20%;
padding-block-end: 0;
padding-inline: 10% 5%;
@media (min-width: 768px) {
margin-inline: 58% 15%;
}
}
.form-component-login {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
// outline: 0.5px solid #747474;
flex-flow: row;
align-items: center;
justify-content: center;
border-radius: 1.7rem;
background-color: rgb(var(--v-theme-surface));
box-shadow: 0 12px 16px #0003;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 20% 0%;
min-inline-size: 345px;
outline-offset: 0;
padding-block: 5%;
padding-inline: 0%;
transform: translate(0);
@media (min-width: 768px) {
margin-inline: -10% 8%;
}
}
.logo-component-login {
position: static;
display: none;
align-items: center;
// outline: 0.5px solid #747474;
// flex-flow: row;
// grid-template-rows: auto;
// grid-template-columns: 1fr 1fr;
// grid-auto-columns: 1fr;
justify-content: center;
border-radius: 1.7rem;
// grid-column-gap: 0px;
// grid-row-gap: 16px;
// outline-offset: 0px;
// color: #fefce8;
background-color: #3d3d3d;
box-shadow: 0 12px 16px #0003;
margin-inline: -99px 94px;
min-inline-size: 350px;
padding-block: 10%;
// overflow: hidden;
transform: translate(0);
@media (min-width: 768px) {
display: block;
}
}
.combine-contact4_content {
position: static;
display: flex;
box-sizing: border-box;
flex-flow: column;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-size: 14px;
grid-gap: 0.7rem;
margin-block: 1%;
margin-inline: 20px;
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
}
.heading-8 {
display: flex;
align-items: flex-start;
justify-content: center;
color: #ffdc01;
font-family: "Open Sans", sans-serif;
font-size: 200%;
font-weight: 700;
margin-block-end: 0;
}
.heading-7 {
font-family: "Open Sans", sans-serif;
font-size: 80%;
font-weight: 700;
line-height: 100%;
margin-block: -5px 10px;
}
//img kiri
.image-10 {
margin-block: 150px;
margin-inline: 0;
// height: 500px;
max-inline-size: 100px;
padding-block: 100px;
padding-inline: 30px;
}
.logo-image-component-login {
position: static;
display: flex;
display: block;
overflow: hidden;
flex-flow: row;
align-items: center;
// color: #fefce8;
// background-color: #3d3d3d;
justify-content: center;
grid-gap: 0;
padding-block: 0%;
padding-inline: 0;
}
// login page 3
.heading-8 {
display: flex;
align-items: flex-start;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-size: 200%;
font-weight: 700;
margin-block-end: 0;
}
.body-2 {
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
/* Ensures it spans the full width */
background-position: center;
/* Centers the image */
background-repeat: repeat;
background-size: cover;
/* Ensures the element covers the full viewport height */
inline-size: 100%;
min-block-size: 100vh;
/* Prevents tiling */
padding-block-start: 10px;
}
.global-main-login-component {
display: block;
overflow: visible;
flex-flow: column;
align-items: center;
justify-content: center;
inline-size: 100%;
max-inline-size: 350px;
min-inline-size: 300px;
padding-block-end: 0;
@media (min-width: 768px) {
max-inline-size: 700px;
min-inline-size: 500px;
}
}
// kanan putih
.card-main-login-component {
position: static;
display: grid;
overflow: hidden;
// outline: .5px solid #747474;
// outline: .5px solid #747474;
flex-flow: row;
align-items: center;
justify-content: center;
border-radius: 1.7rem;
backdrop-filter: blur(5px);
background-color: #fff0;
background-color: white;
box-shadow: 0 12px 16px #0003;
color: #fefce8;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 0%;
outline-offset: 0;
padding-block: 0;
padding-inline: 0%;
transform: translate(0);
}
.logo-login-component {
position: static;
display: none;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #ffdc01;
block-size: 100%;
color: #fefce8;
inline-size: 100%;
@media (min-width: 768px) {
display: flex;
}
}
.form-login-component {
position: static;
display: flex;
box-sizing: border-box;
flex-flow: column;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-size: 14px;
grid-gap: 0.7rem;
margin-block: 1%;
margin-inline: 20px;
max-inline-size: 350px;
min-inline-size: 300px;
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
@media (min-width: 768px) {
inline-size: 80%;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!