bec/bec_atlas
0
0
Fork 0
mirror of https://github.com/bec-project/bec_atlas.git synced 2025-07-13 22:51:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: style changes

Browse Source
This commit is contained in:
wakonig_k
2025-02-06 15:03:36 +01:00
parent 2a9c6cfd2d
commit 28b2034c5a
4 changed files with 66 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/bec_atlas/src/app/dashboard/dashboard.component.html
View File

@ -2,20 +2,18 @@
<mat-sidenav mode="side" opened>
<div>
<img
src="assets/BEC-Atlas-full-conv-LC.png"
src="assets/BEC-Atlas-full-transparent.png"
alt="BEC"
width="40"
height="40"
width="80"
height="80"
style="margin: 10px"
/>
</div>
<mat-divider></mat-divider>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>account_circle</mat-icon>
<span class="menu-text">Username</span>
</mat-panel-title>
<mat-icon>account_circle</mat-icon>
<span class="menu-text">Username</span>
</mat-expansion-panel-header>
<button mat-button>Profile</button>
@ -33,10 +31,8 @@
</button>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>science</mat-icon>
<span class="menu-text">Experiment Control</span>
</mat-panel-title>
<mat-icon>science</mat-icon>
<span class="menu-text">Experiment Control</span>
</mat-expansion-panel-header>
<button
mat-button

54
frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
View File

@ -7,12 +7,11 @@
mat-sidenav {
width: 250px;
background: var(--mat-sys-primary);
color: var(--mat-sys-on-primary);
background: var(--mat-sys-surface-container);
border-radius: 0px;
padding: 16px;
padding-left: 6px;
text-align: center;
@include mat.elevation(20);
@include mat.elevation(3);
}
.sidenav.collapsed {
@ -22,11 +21,11 @@ mat-sidenav {
.menu-items {
display: flex;
flex-direction: column;
padding: 16px 0;
}
mat-divider {
margin: 8px 0;
border-top-color: var(--mat-sys-surface-container-highest);
}
.menu-item {
@ -34,60 +33,50 @@ mat-divider {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 1rem;
margin: 8px 0;
@include mat.elevation(0);
// @include mat.elevation-transition();
border-radius: 4px;
&:hover {
cursor: pointer;
background-color: var(--mat-sys-primary-fixed-dim);
@include mat.elevation(4);
}
}
.menu-item mat-icon {
color: var(--mat-sys-on-primary);
margin-right: 8px;
vertical-align: middle;
}
.menu-item .menu-text {
transition: opacity 0.3s ease;
color: var(--mat-sys-on-primary);
}
mat-expansion-panel {
background-color: var(--mat-sys-primary);
color: var(--mat-sys-on-primary);
background-color: var(--mat-sys-surface-container);
border-radius: 4px;
padding: 0px;
box-shadow: none !important;
margin: 8px 0;
&:hover {
cursor: pointer;
background-color: var(--mat-sys-primary-fixed-dim);
}
&.mat-expanded {
background-color: var(--mat-sys-primary);
color: var(--mat-sys-on-primary) !important;
}
&.mat-expansion-panel-body {
color: var(--mat-sys-on-primary) !important;
margin: 0px;
}
}
mat-expansion-panel-header {
padding: 0px 8px;
// @include mat.elevation(0);
}
padding: 0px 12px;
color: var(--mat-sys-primary);
font-size: 14px;
mat-panel-title {
color: var(--mat-sys-on-primary);
mat-icon {
display: flex;
margin-right: 2px;
font-size: 18px;
align-items: center;
}
// mat-expanded {
// background-color: var(--mat-sys-primary);
// }
}
mat-panel-title mat-icon {
@ -95,11 +84,6 @@ mat-panel-title mat-icon {
}
mat-sidenav-content {
margin-left: 260px !important;
margin: 10px;
background-color: var(--mat-sys-surface-dim);
height: 100vh;
}
.menu-text-submenu {
color: var(--mat-sys-on-primary);
}

36
frontend/bec_atlas/src/index.html
View File

@ -1,15 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BecAtlas</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
<head>
<meta charset="utf-8" />
<title>BecAtlas</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

23
frontend/bec_atlas/src/styles.scss
View File

@ -1,9 +1,10 @@
/* You can add global styles to this file, and also import other style files */
@use "@angular/material" as mat;
@use "_theme-colors.scss" as theme;
@import "gridstack/dist/gridstack.min.css";
@import "gridstack/dist/gridstack-extra.min.css";
@import 'css-star-rating/scss/star-rating';
@import "css-star-rating/scss/star-rating";
// gridstack {
// display: grid;
// width: 100%; /* Ensure the grid uses the full width */
@ -30,8 +31,13 @@ html {
@media (prefers-color-scheme: light) {
@include mat.theme(
(
color: mat.$cyan-palette,
typography: Roboto,
color: theme.$primary-palette,
typography: (
plain-family: Poppins,
bold-weight: 600,
medium-weight: 400,
regular-weight: 300,
),
density: 0,
),
$overrides: (primary-container: orange),
@ -43,8 +49,13 @@ html {
@media (prefers-color-scheme: dark) {
@include mat.theme(
(
color: mat.$cyan-palette,
typography: Roboto,
color: theme.$primary-palette,
typography: (
plain-family: Poppins,
bold-weight: 600,
medium-weight: 400,
regular-weight: 300,
),
density: 0,
),
$overrides: (primary-container: darkorange),