schn33fuchs/ticketsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Sidebar styling

Browse Source 
In general styling capabilities with scsss
This commit is contained in:
Silas
2026-05-02 12:27:27 +02:00
parent fa77190555
commit 9eb843a786
9 changed files with 94 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/index.html
View File

@@ -1,10 +1,13 @@
<!doctype html>
<html>
<head>
<head>
<link data-trunk rel="rust" data-bin="bin" />
<link rel="scss" href="src/styles/main.scss" />
<meta charset="utf-8" />
<title>Yew App</title>
</head>
<body></body>
</html>
</head>
<body></body>
</html>

1330
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
frontend/package.json
View File

@@ -1,20 +0,0 @@
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:scss": "sass src/styles/main.scss static/main.css --no-source-map --style=compressed",
"watch:scss": "sass --watch src/styles/main.scss:static/main.css",
"start": "npm-run-all --parallel watch:scss "trunk serve""
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"autoprefixer": "^10.5.0",
"postcss-cli": "^11.0.1",
"sass": "^1.99.0"
}
}

6
frontend/src/styles/_mixins.scss Normal file
View File

@@ -0,0 +1,6 @@
@mixin card {
backgroud: #fff;
border-radius: &border-radius;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
padding: $spacing-md;
}

4
frontend/src/styles/_utilities.scss Normal file
View File

@@ -0,0 +1,4 @@
.u-hidden { display: none !important; }
.u-gap-sm { gap: $spacing-sm; }
.text-muted { color: $color-muted; }

8
frontend/src/styles/_variables.scss Normal file
View File

@@ -0,0 +1,8 @@
$color-bg: #ffffff;
$color-sidebar: #0f172a;
$color-accent: #2563eb;
$color-muted: #6b7280;
$spacing-sm: 8px;
$spacing-md: 16px;
$border-radius: 6px;

34
frontend/src/styles/components/_sidebar.scss Normal file
View File

@@ -0,0 +1,34 @@
@use "../variables" as *;
@use "../mixins" as *;
.sidebar {
width: 260px;
background: $color-sidebar;
color: #fff;
min-height: 100vh;
padding: $spacing-md;
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; }
a, .menu-toggle {
color: #fff;
text-decoration: none;
display: block;
padding: 8px 12px;
border-radius: 4px;
&:hover { background: rgba(255,255,255,0.04); }
}
.menu-toggle { background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; }
.submenu {
margin-left: 8px;
background: rgba(255,255,255,0.02);
border-radius: 4px;
padding: 6px;
li { padding: 4px 0; }
}
&.user { width: 220px; background: darken($color-sidebar, 6%); }
}

10
frontend/src/styles/components/_tickets.scss Normal file
View File

@@ -0,0 +1,10 @@
.ticket-card {
@include card();
border-left: 4px solid $color-accent;
display: flex;
flex-direction: column;
gap: $spacing-sm;
.meta { color: $color-muted; font-size: 0.9rem; }
.title { font-weight: 600; }
}

22
frontend/src/styles/main.scss Normal file
View File

@@ -0,0 +1,22 @@
@use "variables";
@use "mixins";
@use "utilities";
@use "components/sidebar";
@use "components/tickets";
body {
background: variables.$color-bg;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color: #111827;
margin: 0;
}
.admin { display: flex; }
.content { flex: 1; padding: variables.$spacing-md; }
@media (max-width: 768px) {
.sidebar { position: fixed; left: -100%; transition: left .2s; }
.sidebar.open { left: 0; }
.content { margin-left: 0; }
}