Skip to content

M
mySkill-x
Commit 8bdd55f1 by Ooh-Ao
Options

ess

parent dfd17886
Showing with 59 additions and 101 deletions
src/app/components/employee-self-service/employee-self-service.component.html
<app-header></app-header> <app-header></app-header>
<main class="wrapper"> <main class="mx-auto max-w-[1400px] px-4 lg:px-8 py-8 mt-5rem">
<div class="page-grid">
<!-- ── HERO (ซ้าย) ─────────────────────────── --> <!-- ░░ FLEX WRAPPER ░░ -->
<aside class="hero-card bp-glow"> <div class="flex flex-col lg:flex-row gap-10">
<!-- ◀︎ HERO -->
<aside class="hero-card bp-glow shrink-0 self-center lg:self-start">
<img src="assets/img/logos/HRD/1.png" <img src="assets/img/logos/HRD/1.png"
alt="Performance illustration" alt="Performance illustration"
class="hero-img" /> class="hero-img" />
...@@ -19,10 +21,13 @@ ...@@ -19,10 +21,13 @@
</a> </a>
</aside> </aside>
<!-- ── MENU GRID (ขวา) ──────────────────────── --> <!-- ▶︎ MENU (ยังใช้ CSS-Grid ภายใน) -->
<section class="sub-grid"> <section class="flex-grow">
<div *ngFor="let m of modules" class="sub-card"> <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4
<p class="sub-title">{{ m.title }}</p> xl:grid-cols-4 auto-rows-[150px]">
<div *ngFor="let m of modules" class="sub-card aspect-square">
<p class="sub-title">{{ m.title }}</p>
</div>
</div> </div>
</section> </section>
......
src/app/components/employee-self-service/employee-self-service.component.scss
/* ===== base variables ===== */ /* ===== base variables ===== */
$size-card: 150px; // ( ≥1280px จะขยายเป็น 170 ) $size-card : 150px; // ( ≥1280px จะขยายเป็น 170 )
$col-hero: 280px; // ความกว้างคอลัมน์ซ้าย $col-hero : 280px; // ความกว้างคอลัมน์ซ้าย
$gap-main: 2.5rem; $gap-main : 2.5rem;
$radius-main: 28px; $radius-main : 28px;
$radius-sub: 20px; $radius-sub : 20px;
$dur: 0.35s; $dur : .35s;
$easing: cubic-bezier(0.4, 0, 0.2, 1); $easing : cubic-bezier(.4,0,.2,1);
$shadow-base: 0 14px 30px -12px rgba(0, 0, 0, 0.18); $shadow-base : 0 14px 30px -12px rgba(0,0,0,.18);
$shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24); $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
/* ===== wrapper ===== */ /* ===== wrapper ===== */
.hero-wrap { .wrapper { max-width: 1400px; margin: 0 auto; padding: 3rem 1.25rem; margin-top: 5rem; }
display: flex;
justify-content: center; /* ให้อยู่กลางแถว */
align-items: flex-start;
width: 100%;
/* ถ้าเซ็ตคอลัมน์ “ซ้าย-ขวา” ด้วย Grid ภายนอกอยู่แล้ว
hero-wrap อาจไม่ต้อง flex; ใส่แค่ max-width ก็พอ */
}
.wrapper {
max-width: 1400px;
margin: 0 auto;
margin-top: 5rem;
padding: 3rem 1.25rem;
}
/* ===== GRID ชั้นแรก ===== */ /* ===== GRID ชั้นแรก ===== */
.page-grid { .page-grid {
display: grid; display: grid;
gap: $gap-main; // ช่องไฟหลัก gap: $gap-main;
grid-template-columns: $col-hero 1fr; grid-template-columns: $col-hero 1fr;
justify-items: start; // จัดบล็อกชิดซ้าย
/* จอ < 768px ➜ 1 คอลัมน์ */ @media (max-width: 1023px) { /* < lg : 1 คอลัมน์ */
@media (max-width: 767px) { grid-template-columns: 1fr;
grid-template-columns: 1fr; // 👉 สลับเป็นคอลัมน์เดียว
row-gap: 2rem; // ช่องไฟระหว่างแถว
} }
} }
/* ===== HERO CARD (คงเดิม – ตัด flex ออก) ===== */ /* ===== HERO CARD (คงเดิม – ตัด flex ออก) ===== */
.hero-card { .hero-card {
width: 100%; /* ยืดเต็มคอลัมน์ */ width: 100%;
max-width: 280px; /* แต่กว้างไม่เกิน 280px */ max-width: 280px; // ไม่เกินจอ desktop
box-sizing: border-box; box-sizing: border-box;
/* ⬇︎ PADDING ยืดหดตามจอ: 1rem–1.75rem */
padding-inline: clamp(1rem, 4vw, 1.75rem); padding-inline: clamp(1rem, 4vw, 1.75rem);
padding-block: 2rem 3rem; padding-block: 2rem 3rem;
/* —— ส่วนสไตล์เดิม (shadow, glow, hover ฯลฯ) —— */
position: relative; position: relative;
border-radius: $radius-main; border-radius: $radius-main;
padding: 2rem 1.75rem 3rem;
background: #fff; background: #fff;
box-shadow: $shadow-base; box-shadow: $shadow-base;
text-align: center;
display: grid; display: grid;
place-items: center; place-items: center;
gap: 1.3rem; gap: 1.3rem;
text-align: center; transition: transform $dur $easing, box-shadow $dur $easing;
transition: transform $dur $easing,
box-shadow $dur $easing;
&:hover { transform: translateY(-6px); box-shadow: $shadow-deep; } &:hover { transform: translateY(-6px); box-shadow: $shadow-deep; }
/* glow */
&.bp-glow::before { &.bp-glow::before {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -76,87 +57,61 @@ $shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24); ...@@ -76,87 +57,61 @@ $shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24);
} }
&:hover.bp-glow::before { opacity: .27; } &:hover.bp-glow::before { opacity: .27; }
} }
.hero-img { @media (max-width: 639px){
width: 10rem; .hero-img { max-width: 68%; }
}
.hero-label {
font: 600 0.95rem/1.2 "Inter", sans-serif;
color: #3b82f6;
}
.hero-title {
font: 700 1.5rem/1.3 "Inter", sans-serif;
color: #1e3a8a;
}
.hero-btn {
@apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition;
}
.back-link {
position: absolute;
left: 1.75rem;
bottom: 1rem;
font-size: 0.9rem;
color: #64748b;
transition: color 0.25s;
&:hover {
color: #3b82f6;
}
}
/* รูปย่ออัตโนมัติบนจอแคบ */
@media (max-width: 480px){
.hero-img { max-width: 65%; }
.hero-wrap { padding-inline: 0; } /* ตัด margin ซ้าย-ขวา */
} }
.hero-img { width: 10rem; }
.hero-label { font: 600 .95rem/1.2 'Inter',sans-serif; color:#3b82f6; }
.hero-title { font: 700 1.5rem/1.3 'Inter',sans-serif; color:#1e3a8a; }
.hero-btn { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition; }
.back-link { position: absolute; left: 1.75rem; bottom: 1rem; font-size: .9rem; color:#64748b; transition: color .25s;
&:hover { color:#3b82f6; } }
/* ===== GRID ชั้นสอง – เมนูย่อย 2 แถวพอดี ===== */ /* ===== GRID ชั้นสอง – เมนูย่อย 2 แถวพอดี ===== */
.sub-grid { .sub-grid {
display: grid; display: grid;
grid-auto-flow: column; /* เติมแนวนอนก่อน */ grid-auto-flow: column; /* เติมแนวนอนก่อน */
grid-template-rows: repeat(2, $size-card); grid-template-rows: repeat(2,$size-card);
grid-auto-columns: $size-card; grid-auto-columns: $size-card;
gap: 1.5rem; gap: 1.5rem;
place-content: start; place-content: start;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
/* ≥1280px ขยายการ์ด */ /* ≥1280px ขยายการ์ด */
@media (min-width: 1280px) { @media (min-width: 1280px) {
grid-template-rows: repeat(2, 170px); grid-template-rows: repeat(2,170px);
grid-auto-columns: 170px; grid-auto-columns: 170px;
} }
/* มือถือ: 2 คอลัมน์เสมอ */ /* มือถือ: 2 คอลัมน์เสมอ */
@media (max-width: 639px) { @media (max-width: 639px) {
grid-template-rows: repeat(2, 46vw); grid-template-rows: repeat(2,46vw);
grid-auto-columns: 46vw; grid-auto-columns: 46vw;
} }
} }
/* ===== SUB-CARD + เอฟเฟกต์ ===== */ /* ===== SUB-CARD + เอฟเฟกต์ ===== */
.sub-card { .sub-card {
aspect-ratio: 1 / 1;
position: relative; position: relative;
border-radius: $radius-sub; border-radius: $radius-sub;
background: rgba(255, 255, 255, 0.5); /* glass */ background: rgba(255,255,255,.5); /* glass */
backdrop-filter: blur(9px) saturate(170%); backdrop-filter: blur(9px) saturate(170%);
box-shadow: 0 8px 18px -10px rgba(71, 85, 105, 0.25); box-shadow: 0 8px 18px -10px rgba(71,85,105,.25);
display: flex; display: flex; align-items: center; justify-content: center;
align-items: center; text-align: center; padding: 1rem;
justify-content: center; cursor: pointer; user-select: none;
text-align: center; transition: transform .45s $easing, box-shadow .45s $easing, background .45s;
padding: 1rem;
cursor: pointer;
user-select: none;
transition: transform 0.45s $easing, box-shadow 0.45s $easing,
background 0.45s;
/* gradient rim */ /* gradient rim */
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute; inset: 0;
inset: 0;
border-radius: inherit; border-radius: inherit;
padding: 1px; padding: 1px;
background: linear-gradient(160deg, #60a5fa, #818cf8 50%, #a855f7); background: linear-gradient(160deg,#60a5fa,#818cf8 50%,#a855f7);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude; mask-composite: exclude;
opacity: 0.45; opacity: .45; transition: opacity .4s;
transition: opacity 0.4s;
} }
&:hover { &:hover {
...@@ -164,14 +119,12 @@ $shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24); ...@@ -164,14 +119,12 @@ $shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24);
transform: translateY(-7px) rotateX(5deg) rotateY(-3deg); transform: translateY(-7px) rotateX(5deg) rotateY(-3deg);
box-shadow: $shadow-deep; box-shadow: $shadow-deep;
&::before { &::before { opacity: .9; }
opacity: 0.9;
}
} }
} }
.sub-title { .sub-title {
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: .9rem;
line-height: 1.25rem; line-height: 1.25rem;
color: #2563eb; color: #2563eb;
pointer-events: none; pointer-events: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment