style: latest ui fixed
This commit is contained in:
22nibis
parent
fdc1766d46
commit
7cfebc7e97
@ -20,3 +20,57 @@ div[style*="background-color: black"] .custom-cell {
|
||||
.pure-white {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
|
||||
.middle-section-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
height: 49vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Desktop view (default) */
|
||||
.main-table {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.transaction-summary {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.borderless-custom {
|
||||
border-collapse: separate;
|
||||
border-spacing: 4px;
|
||||
}
|
||||
|
||||
.custom-cell {
|
||||
height: 3.4rem;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
div[style*="background-color: black"] .custom-cell {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.pure-white {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Responsive layout for tablet and mobile */
|
||||
@media (max-width: 800px) {
|
||||
.middle-section-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.transaction-summary,
|
||||
.main-table {
|
||||
width: 80% !important;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,43 +1,11 @@
|
||||
<div class="d-flex gap-4" style="width: 100%; height: 49vh;">
|
||||
<!-- Responsive Container -->
|
||||
<div class="middle-section-container">
|
||||
|
||||
<!-- Main Table: 60% width -->
|
||||
<div style="width: 60%;">
|
||||
<!-- Light grey wrapper -->
|
||||
<div class="p-3 rounded h-100 d-flex flex-column justify-content-between" style="background-color: #f1f1f1df;">
|
||||
<!-- Main Table -->
|
||||
<table class="table borderless-custom w-100 mb-2">
|
||||
<colgroup>
|
||||
<col style="width: 12%">
|
||||
<col style="width: 60%">
|
||||
<col style="width: 10%">
|
||||
<col style="width: 18%">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of rows">
|
||||
<td class="custom-cell"></td>
|
||||
<td class="custom-cell"></td>
|
||||
<td class="custom-cell"></td>
|
||||
<td class="custom-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<button class="btn btn-dark">Repeat</button>
|
||||
<div class="fw-bold" style="margin-right: 3vw;">Amount :</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Summary: 40% width -->
|
||||
<div style="width: 40%;">
|
||||
<!-- Outer black container with column layout -->
|
||||
<!-- Transaction Summary -->
|
||||
<div class="transaction-summary">
|
||||
<div class="p-3 rounded text-white h-100 d-flex flex-column" style="background-color: black;">
|
||||
<!-- Heading -->
|
||||
<h5 class="text-center mb-3">Transaction Summary</h5>
|
||||
|
||||
<!-- Nested Grey Box (fills remaining height) -->
|
||||
<div class="rounded flex-grow-1" style="background-color: #f1f1f1df; padding: 1rem; overflow: hidden;">
|
||||
<table class="table borderless-custom w-100 text-dark mb-0">
|
||||
<colgroup>
|
||||
@ -56,4 +24,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Table -->
|
||||
<div class="main-table">
|
||||
<div class="p-3 rounded h-100 d-flex flex-column justify-content-between" style="background-color: #f1f1f1df;">
|
||||
<table class="table borderless-custom w-100 mb-2">
|
||||
<colgroup>
|
||||
<col style="width: 12%">
|
||||
<col style="width: 60%">
|
||||
<col style="width: 10%">
|
||||
<col style="width: 18%">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of rows">
|
||||
<td class="custom-cell"></td>
|
||||
<td class="custom-cell"></td>
|
||||
<td class="custom-cell"></td>
|
||||
<td class="custom-cell"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<button class="btn btn-dark">Repeat</button>
|
||||
<div class="fw-bold" style="margin-right: 3vw;">Amount :</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
background-color: #6a4607;
|
||||
height: 2.5rem;
|
||||
font-size: 0.85rem;
|
||||
width: 94vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-live-button {
|
||||
@ -24,12 +24,13 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.custom-navbar {
|
||||
background-color: #a15914;
|
||||
height: 2.7rem;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
width: 94vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
@ -67,3 +68,39 @@
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.hamburger {
|
||||
font-size: 1.7rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(13, 13, 13);
|
||||
padding: 0.3rem 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.mobile-menu-container {
|
||||
background-color: #c17a30;
|
||||
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
justify-content: flex-end;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,12 +10,19 @@
|
||||
</div>
|
||||
|
||||
<!-- Main Navbar -->
|
||||
<nav class="navbar navbar-expand-lg custom-navbar px-0">
|
||||
<div class="container-fluid p-0 d-flex justify-content-between align-items-center">
|
||||
<nav class="navbar custom-navbar px-0">
|
||||
<div class="container-fluid p-0 d-flex align-items-center">
|
||||
|
||||
<!-- Dropdown Section (50vw) -->
|
||||
<!-- Hamburger Toggle (Visible only ≤ 800px) -->
|
||||
<button class="hamburger d-lg-none ms-auto me-3" (click)="toggleMenu()">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<!-- Desktop View -->
|
||||
<div class="d-none d-lg-flex justify-content-between align-items-center w-100">
|
||||
|
||||
<!-- Dropdown Section -->
|
||||
<div class="d-flex" style="width: 50vw;">
|
||||
<!-- Venue Dropdown -->
|
||||
<div class="dropdown w-50">
|
||||
<button class="nav-dropdown w-100 text-start ps-3" data-bs-toggle="dropdown">
|
||||
Venue | MYS
|
||||
@ -27,7 +34,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Race No Dropdown -->
|
||||
<div class="dropdown w-50">
|
||||
<button class="nav-dropdown w-100 text-start ps-3" data-bs-toggle="dropdown">
|
||||
Race No. | 1
|
||||
@ -40,7 +46,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Section (50vw) -->
|
||||
<!-- Buttons Section -->
|
||||
<div class="d-flex justify-content-end" style="width: 40vw;">
|
||||
<div class="nav-button flex-grow-1 text-center">Wallet</div>
|
||||
<div class="nav-button flex-grow-1 text-center">Result</div>
|
||||
@ -48,6 +54,50 @@
|
||||
<div class="nav-button flex-grow-1 text-center">View-Log</div>
|
||||
<div class="nav-button flex-grow-1 text-center text">Log Out</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile View (Hamburger Menu Content) -->
|
||||
<div class="d-lg-none w-100 mt-2 d-flex justify-content-end"
|
||||
*ngIf="isMenuOpen">
|
||||
|
||||
<!-- Right-Aligned Hamburger Menu (50% Width) -->
|
||||
<div class="mobile-menu-container p-3" style="width: 50%; background-color: #c17a30;">
|
||||
|
||||
<!-- Venue Dropdown -->
|
||||
<div class="dropdown mb-2 text-end">
|
||||
<button class="nav-dropdown w-100 text-end pe-3" data-bs-toggle="dropdown">
|
||||
Venue | MYS
|
||||
</button>
|
||||
<ul class="dropdown-menu w-100 text-end">
|
||||
<li><a class="dropdown-item text-end" href="#">MYS</a></li>
|
||||
<li><a class="dropdown-item text-end" href="#">BLR</a></li>
|
||||
<li><a class="dropdown-item text-end" href="#">CHN</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Race Dropdown -->
|
||||
<div class="dropdown mb-2 text-end">
|
||||
<button class="nav-dropdown w-100 text-end pe-3" data-bs-toggle="dropdown">
|
||||
Race No. | 1
|
||||
</button>
|
||||
<ul class="dropdown-menu w-100 text-end">
|
||||
<li><a class="dropdown-item text-end" href="#">1</a></li>
|
||||
<li><a class="dropdown-item text-end" href="#">2</a></li>
|
||||
<li><a class="dropdown-item text-end" href="#">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Menu Buttons -->
|
||||
<div class="d-flex flex-column text-end">
|
||||
<div class="nav-button w-100 text-end pe-3 py-2 border-top">Wallet</div>
|
||||
<div class="nav-button w-100 text-end pe-3 py-2 border-top">Result</div>
|
||||
<div class="nav-button w-100 text-end pe-3 py-2 border-top">Messages</div>
|
||||
<div class="nav-button w-100 text-end pe-3 py-2 border-top">View-Log</div>
|
||||
<div class="nav-button w-100 text-end pe-3 py-2 border-top">Log Out</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,22 +1,37 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, HostListener } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common'; // ✅ this is what you need
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar',
|
||||
templateUrl: './navbar.component.html',
|
||||
styleUrls: ['./navbar.component.css'],
|
||||
standalone: true
|
||||
standalone: true,
|
||||
imports: [CommonModule] // ✅ import here
|
||||
})
|
||||
export class NavbarComponent implements OnInit {
|
||||
|
||||
dateTime: string = '';
|
||||
isMenuOpen: boolean = false;
|
||||
screenWidth: number = window.innerWidth;
|
||||
|
||||
ngOnInit() {
|
||||
this.updateDateTime();
|
||||
setInterval(() => this.updateDateTime(), 1000); // refresh every second
|
||||
setInterval(() => this.updateDateTime(), 1000);
|
||||
}
|
||||
|
||||
updateDateTime() {
|
||||
const now = new Date();
|
||||
this.dateTime = now.toLocaleString(); // You can format it differently if needed
|
||||
this.dateTime = now.toLocaleString();
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event: any) {
|
||||
this.screenWidth = event.target.innerWidth;
|
||||
if (this.screenWidth > 800) {
|
||||
this.isMenuOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuOpen = !this.isMenuOpen;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,35 +1,7 @@
|
||||
<!--<div class="container-fluid">
|
||||
<div class="row">
|
||||
Sidebar (fixed width) -->
|
||||
<!-- <div class="col-auto bg-light vh-100 p-0">
|
||||
<app-sidebar></app-sidebar>
|
||||
</div>
|
||||
<div class="d-flex min-vh-100">
|
||||
|
||||
Right Content Area -->
|
||||
<!-- <div class="col p-0 d-flex flex-column">
|
||||
Navbar -->
|
||||
<!-- <app-navbar></app-navbar>
|
||||
|
||||
Main Content -->
|
||||
<!-- <div class="flex-grow-1 p-3">
|
||||
<div style="width: 91vw;"> ⬅️ 60% of the viewport width -->
|
||||
<!-- <app-middle-section></app-middle-section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Touch Pad at Bottom
|
||||
<div class="border-top p-2 bg-white">
|
||||
<app-touch-pad-menu></app-touch-pad-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="d-flex" style="min-height: 100vh;">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div style="width: 250px;" class="bg-light vh-100">
|
||||
<!-- Sidebar (fixed width) -->
|
||||
<div class="sidebar-container">
|
||||
<app-sidebar></app-sidebar>
|
||||
</div>
|
||||
|
||||
@ -41,15 +13,13 @@
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow-1 p-3">
|
||||
<div style="width: 91vw;">
|
||||
<app-middle-section></app-middle-section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Touch Pad Menu at Bottom -->
|
||||
<!-- Touch Pad -->
|
||||
<div class="border-top p-2 bg-white">
|
||||
<app-touch-pad-menu></app-touch-pad-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,11 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user