kinda okj
This commit is contained in:
Gal Podlipnik
parent
09a21fdbf2
commit
ea7a8cd5de
73
nx.json
73
nx.json
@ -1,38 +1,39 @@
|
|||||||
{
|
{
|
||||||
"$schema": "./node_modules/nx/schemas/nx-schema.json",
|
"$schema": "./node_modules/nx/schemas/nx-schema.json",
|
||||||
"defaultBase": "master",
|
"defaultBase": "master",
|
||||||
"namedInputs": {
|
"namedInputs": {
|
||||||
"default": ["{projectRoot}/**/*", "sharedGlobals"],
|
"default": ["{projectRoot}/**/*", "sharedGlobals"],
|
||||||
"production": [
|
"production": [
|
||||||
"default",
|
"default",
|
||||||
"!{projectRoot}/.eslintrc.json",
|
"!{projectRoot}/.eslintrc.json",
|
||||||
"!{projectRoot}/eslint.config.mjs"
|
"!{projectRoot}/eslint.config.mjs"
|
||||||
],
|
],
|
||||||
"sharedGlobals": []
|
"sharedGlobals": []
|
||||||
},
|
},
|
||||||
"targetDefaults": {
|
"targetDefaults": {
|
||||||
"@angular/build:application": {
|
"@angular/build:application": {
|
||||||
"cache": true,
|
"cache": true,
|
||||||
"dependsOn": ["^build"],
|
"dependsOn": ["^build"],
|
||||||
"inputs": ["production", "^production"]
|
"inputs": ["production", "^production"]
|
||||||
},
|
},
|
||||||
"@nx/eslint:lint": {
|
"@nx/eslint:lint": {
|
||||||
"cache": true,
|
"cache": true,
|
||||||
"inputs": [
|
"inputs": [
|
||||||
"default",
|
"default",
|
||||||
"{workspaceRoot}/.eslintrc.json",
|
"{workspaceRoot}/.eslintrc.json",
|
||||||
"{workspaceRoot}/.eslintignore",
|
"{workspaceRoot}/.eslintignore",
|
||||||
"{workspaceRoot}/eslint.config.mjs"
|
"{workspaceRoot}/eslint.config.mjs"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"generators": {
|
"generators": {
|
||||||
"@nx/angular:application": {
|
"@nx/angular:application": {
|
||||||
"e2eTestRunner": "none",
|
"e2eTestRunner": "none",
|
||||||
"linter": "eslint",
|
"linter": "eslint",
|
||||||
"style": "scss",
|
"style": "scss",
|
||||||
"unitTestRunner": "none"
|
"unitTestRunner": "none"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"defaultProject": "student-app"
|
"defaultProject": "student-app"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
44665
package-lock.json
generated
44665
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
120
package.json
120
package.json
@ -1,63 +1,61 @@
|
|||||||
{
|
{
|
||||||
"name": "@student-app/source",
|
"name": "@student-app/source",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "nx serve",
|
"start": "nx serve",
|
||||||
"build": "nx build",
|
"build": "nx build",
|
||||||
"test": "nx test"
|
"test": "nx test"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular-devkit/build-angular": "~20.0.0",
|
"@angular-devkit/build-angular": "~20.0.0",
|
||||||
"@angular/animations": "^20.0.3",
|
"@angular/animations": "^20.0.3",
|
||||||
"@angular/common": "~20.0.0",
|
"@angular/common": "~20.0.0",
|
||||||
"@angular/compiler": "~20.0.0",
|
"@angular/compiler": "~20.0.0",
|
||||||
"@angular/core": "~20.0.0",
|
"@angular/core": "~20.0.0",
|
||||||
"@angular/forms": "~20.0.0",
|
"@angular/forms": "~20.0.0",
|
||||||
"@angular/platform-browser": "~20.0.0",
|
"@angular/platform-browser": "~20.0.0",
|
||||||
"@angular/platform-server": "~20.0.0",
|
"@angular/router": "~20.0.0",
|
||||||
"@angular/router": "~20.0.0",
|
"@mmstack/primitives": "^20.0.0",
|
||||||
"@angular/ssr": "~20.0.0",
|
"@primeng/themes": "^19.1.3",
|
||||||
"@mmstack/primitives": "^20.0.0",
|
"express": "^4.21.2",
|
||||||
"@primeng/themes": "^19.1.3",
|
"primeicons": "^7.0.0",
|
||||||
"express": "^4.21.2",
|
"primeng": "^19.1.3",
|
||||||
"primeicons": "^7.0.0",
|
"rxjs": "~7.8.0",
|
||||||
"primeng": "^19.1.3",
|
"uuid": "^11.1.0",
|
||||||
"rxjs": "~7.8.0",
|
"zone.js": "~0.15.0"
|
||||||
"uuid": "^11.1.0",
|
},
|
||||||
"zone.js": "~0.15.0"
|
"devDependencies": {
|
||||||
},
|
"@angular-devkit/core": "~20.0.0",
|
||||||
"devDependencies": {
|
"@angular-devkit/schematics": "~20.0.0",
|
||||||
"@angular-devkit/core": "~20.0.0",
|
"@angular/build": "~20.0.0",
|
||||||
"@angular-devkit/schematics": "~20.0.0",
|
"@angular/cli": "~20.0.0",
|
||||||
"@angular/build": "~20.0.0",
|
"@angular/compiler-cli": "~20.0.0",
|
||||||
"@angular/cli": "~20.0.0",
|
"@angular/language-service": "~20.0.0",
|
||||||
"@angular/compiler-cli": "~20.0.0",
|
"@eslint/js": "^9.8.0",
|
||||||
"@angular/language-service": "~20.0.0",
|
"@nx/angular": "21.2.0",
|
||||||
"@eslint/js": "^9.8.0",
|
"@nx/eslint": "21.2.0",
|
||||||
"@nx/angular": "21.2.0",
|
"@nx/eslint-plugin": "21.2.0",
|
||||||
"@nx/eslint": "21.2.0",
|
"@nx/js": "21.2.0",
|
||||||
"@nx/eslint-plugin": "21.2.0",
|
"@nx/web": "21.2.0",
|
||||||
"@nx/js": "21.2.0",
|
"@nx/workspace": "21.2.0",
|
||||||
"@nx/web": "21.2.0",
|
"@schematics/angular": "~20.0.0",
|
||||||
"@nx/workspace": "21.2.0",
|
"@swc-node/register": "~1.9.1",
|
||||||
"@schematics/angular": "~20.0.0",
|
"@swc/core": "~1.5.7",
|
||||||
"@swc-node/register": "~1.9.1",
|
"@swc/helpers": "~0.5.11",
|
||||||
"@swc/core": "~1.5.7",
|
"@types/express": "^4.17.21",
|
||||||
"@swc/helpers": "~0.5.11",
|
"@typescript-eslint/utils": "^8.29.0",
|
||||||
"@types/express": "^4.17.21",
|
"angular-eslint": "^20.0.0",
|
||||||
"@typescript-eslint/utils": "^8.29.0",
|
"eslint": "^9.8.0",
|
||||||
"angular-eslint": "^20.0.0",
|
"eslint-config-prettier": "^10.0.0",
|
||||||
"eslint": "^9.8.0",
|
"nx": "21.2.0",
|
||||||
"eslint-config-prettier": "^10.0.0",
|
"prettier": "^2.6.2",
|
||||||
"nx": "21.2.0",
|
"tslib": "^2.3.0",
|
||||||
"prettier": "^2.6.2",
|
"typescript": "~5.8.2",
|
||||||
"tslib": "^2.3.0",
|
"typescript-eslint": "^8.29.0"
|
||||||
"typescript": "~5.8.2",
|
},
|
||||||
"typescript-eslint": "^8.29.0"
|
"nx": {
|
||||||
},
|
"includedScripts": []
|
||||||
"nx": {
|
}
|
||||||
"includedScripts": []
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
174
project.json
174
project.json
@ -1,91 +1,87 @@
|
|||||||
{
|
{
|
||||||
"name": "student-app",
|
"name": "student-app",
|
||||||
"$schema": "node_modules/nx/schemas/project-schema.json",
|
"$schema": "node_modules/nx/schemas/project-schema.json",
|
||||||
"includedScripts": [],
|
"includedScripts": [],
|
||||||
"projectType": "application",
|
"projectType": "application",
|
||||||
"prefix": "app",
|
"prefix": "app",
|
||||||
"sourceRoot": "./src",
|
"sourceRoot": "./src",
|
||||||
"tags": [],
|
"tags": [],
|
||||||
"targets": {
|
"targets": {
|
||||||
"build": {
|
"build": {
|
||||||
"executor": "@angular/build:application",
|
"executor": "@angular/build:application",
|
||||||
"outputs": ["{options.outputPath}"],
|
"outputs": ["{options.outputPath}"],
|
||||||
"options": {
|
"options": {
|
||||||
"outputPath": "dist/student-app",
|
"outputPath": "dist/student-app",
|
||||||
"browser": "./src/main.ts",
|
"browser": "./src/main.ts",
|
||||||
"polyfills": ["zone.js"],
|
"polyfills": ["zone.js"],
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "scss",
|
"inlineStyleLanguage": "scss",
|
||||||
"assets": [
|
"assets": [
|
||||||
{
|
{
|
||||||
"glob": "**/*",
|
"glob": "**/*",
|
||||||
"input": "public"
|
"input": "public"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"styles": ["./src/styles.scss"],
|
"styles": ["./src/styles.scss"]
|
||||||
"server": "src/main.server.ts",
|
},
|
||||||
"ssr": {
|
"configurations": {
|
||||||
"entry": "src/server.ts"
|
"production": {
|
||||||
},
|
"budgets": [
|
||||||
"outputMode": "server"
|
{
|
||||||
},
|
"type": "initial",
|
||||||
"configurations": {
|
"maximumWarning": "500kb",
|
||||||
"production": {
|
"maximumError": "1mb"
|
||||||
"budgets": [
|
},
|
||||||
{
|
{
|
||||||
"type": "initial",
|
"type": "anyComponentStyle",
|
||||||
"maximumWarning": "500kb",
|
"maximumWarning": "4kb",
|
||||||
"maximumError": "1mb"
|
"maximumError": "8kb"
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
"type": "anyComponentStyle",
|
"outputHashing": "all"
|
||||||
"maximumWarning": "4kb",
|
},
|
||||||
"maximumError": "8kb"
|
"development": {
|
||||||
}
|
"optimization": false,
|
||||||
],
|
"extractLicenses": false,
|
||||||
"outputHashing": "all"
|
"sourceMap": true
|
||||||
},
|
}
|
||||||
"development": {
|
},
|
||||||
"optimization": false,
|
"defaultConfiguration": "production"
|
||||||
"extractLicenses": false,
|
},
|
||||||
"sourceMap": true
|
"serve": {
|
||||||
}
|
"continuous": true,
|
||||||
},
|
"executor": "@angular/build:dev-server",
|
||||||
"defaultConfiguration": "production"
|
"configurations": {
|
||||||
},
|
"production": {
|
||||||
"serve": {
|
"buildTarget": "student-app:build:production"
|
||||||
"continuous": true,
|
},
|
||||||
"executor": "@angular/build:dev-server",
|
"development": {
|
||||||
"configurations": {
|
"buildTarget": "student-app:build:development"
|
||||||
"production": {
|
}
|
||||||
"buildTarget": "student-app:build:production"
|
},
|
||||||
},
|
"defaultConfiguration": "development"
|
||||||
"development": {
|
},
|
||||||
"buildTarget": "student-app:build:development"
|
"extract-i18n": {
|
||||||
}
|
"executor": "@angular/build:extract-i18n",
|
||||||
},
|
"options": {
|
||||||
"defaultConfiguration": "development"
|
"buildTarget": "student-app:build"
|
||||||
},
|
}
|
||||||
"extract-i18n": {
|
},
|
||||||
"executor": "@angular/build:extract-i18n",
|
"lint": {
|
||||||
"options": {
|
"executor": "@nx/eslint:lint",
|
||||||
"buildTarget": "student-app:build"
|
"options": {
|
||||||
}
|
"lintFilePatterns": ["./src"]
|
||||||
},
|
}
|
||||||
"lint": {
|
},
|
||||||
"executor": "@nx/eslint:lint",
|
"serve-static": {
|
||||||
"options": {
|
"continuous": true,
|
||||||
"lintFilePatterns": ["./src"]
|
"executor": "@nx/web:file-server",
|
||||||
}
|
"options": {
|
||||||
},
|
"buildTarget": "student-app:build",
|
||||||
"serve-static": {
|
"staticFilePath": "dist/student-app/browser",
|
||||||
"continuous": true,
|
"spa": true
|
||||||
"executor": "@nx/web:file-server",
|
}
|
||||||
"options": {
|
}
|
||||||
"buildTarget": "student-app:build",
|
}
|
||||||
"staticFilePath": "dist/student-app/browser",
|
|
||||||
"spa": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -80,13 +80,37 @@ import { StudentService } from './student.service';
|
|||||||
:host ::ng-deep {
|
:host ::ng-deep {
|
||||||
.p-inputtext:enabled:focus {
|
.p-inputtext:enabled:focus {
|
||||||
border-color: var(--primary-color);
|
border-color: var(--primary-color);
|
||||||
box-shadow: 0 0 0 1px var(--primary-light);
|
box-shadow: var(--focus-ring);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-multiselect:not(.p-disabled).p-focus {
|
.p-multiselect:not(.p-disabled).p-focus {
|
||||||
border-color: var(--primary-color);
|
border-color: var(--primary-color);
|
||||||
box-shadow: 0 0 0 1px var(--primary-light);
|
box-shadow: var(--focus-ring);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-inputtext,
|
||||||
|
.p-multiselect {
|
||||||
|
background-color: var(--card-background) !important;
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
border-radius: var(--input-radius) !important;
|
||||||
|
border: 1px solid var(--table-border-color) !important;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
|
||||||
|
color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputtext:enabled:hover,
|
||||||
|
.p-multiselect:not(.p-disabled):hover {
|
||||||
|
border-color: var(--primary-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
max-width: 480px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
],
|
],
|
||||||
@ -125,3 +149,4 @@ export class AddStudentComponent {
|
|||||||
this.router.navigate(['/students']);
|
this.router.navigate(['/students']);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -49,104 +49,113 @@ import { ButtonModule } from 'primeng/button';
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
padding: 0 1.5rem;
|
padding: 0 var(--spacing-lg);
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-left .app-title {
|
.navbar-left .app-title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 1.4rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-center a {
|
.navbar-center a {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
margin: 0 1rem;
|
margin: 0 var(--spacing-md);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 0.5rem 0;
|
padding: var(--spacing-sm) 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s;
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-center a.active,
|
&.active,
|
||||||
.navbar-center a:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-center a.active::after,
|
&::after {
|
||||||
.navbar-center a:hover::after {
|
content: '';
|
||||||
content: '';
|
position: absolute;
|
||||||
position: absolute;
|
bottom: -2px;
|
||||||
bottom: 0;
|
left: 0;
|
||||||
left: 0;
|
width: 100%;
|
||||||
width: 100%;
|
height: 2px;
|
||||||
height: 2px;
|
background-color: #fff;
|
||||||
background-color: #fff;
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-right {
|
.navbar-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 0.75rem;
|
margin-right: var(--spacing-sm);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-toggle-btn {
|
.theme-toggle-btn {
|
||||||
background: transparent;
|
background: #fff !important;
|
||||||
color: #fff;
|
color: var(--primary-color) !important;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-toggle-btn:hover {
|
.dark-theme .theme-toggle-btn {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: #fff !important;
|
||||||
|
color: var(--primary-color) !important;
|
||||||
|
border: 1.5px solid var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root .theme-toggle-btn {
|
||||||
|
--theme-toggle-bg: #f3f4f8;
|
||||||
|
--theme-toggle-icon: #23272f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
min-height: calc(100vh - 4rem);
|
min-height: calc(100vh - 4rem);
|
||||||
padding: 2rem 0;
|
padding: var(--spacing-xl) 0;
|
||||||
|
background: var(--background-color);
|
||||||
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 1.5rem;
|
padding: 0 var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.navbar {
|
.navbar {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 1rem;
|
padding: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-center {
|
.navbar-center {
|
||||||
margin: 1rem 0;
|
margin: var(--spacing-md) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-right {
|
.navbar-right {
|
||||||
@ -155,7 +164,7 @@ import { ButtonModule } from 'primeng/button';
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
padding: 1rem 0;
|
padding: var(--spacing-md) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
@ -193,4 +202,3 @@ export class App implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +0,0 @@
|
|||||||
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
|
|
||||||
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
|
||||||
import { appConfig } from './app.config';
|
|
||||||
import { serverRoutes } from './app.routes.server';
|
|
||||||
|
|
||||||
const serverConfig: ApplicationConfig = {
|
|
||||||
providers: [provideServerRendering(withRoutes(serverRoutes))],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { RenderMode, ServerRoute } from '@angular/ssr';
|
|
||||||
|
|
||||||
export const serverRoutes: ServerRoute[] = [
|
|
||||||
{
|
|
||||||
path: '**',
|
|
||||||
renderMode: RenderMode.Prerender,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -94,12 +94,38 @@ import { StudentService } from './student.service';
|
|||||||
.p-inputtext:disabled {
|
.p-inputtext:disabled {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-inputtext,
|
||||||
|
.p-multiselect {
|
||||||
|
background-color: var(--card-background) !important;
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
border-radius: var(--input-radius) !important;
|
||||||
|
border: 1px solid var(--table-border-color) !important;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
|
||||||
|
color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputtext:enabled:focus,
|
||||||
.p-multiselect:not(.p-disabled).p-focus {
|
.p-multiselect:not(.p-disabled).p-focus {
|
||||||
border-color: var(--primary-color);
|
border-color: var(--primary-color);
|
||||||
box-shadow: 0 0 0 1px var(--primary-light);
|
box-shadow: var(--focus-ring);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-inputtext:enabled:hover,
|
||||||
|
.p-multiselect:not(.p-disabled):hover {
|
||||||
|
border-color: var(--primary-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
max-width: 480px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.not-found-message {
|
.not-found-message {
|
||||||
|
|||||||
@ -29,6 +29,7 @@ import { StudentService } from './student.service';
|
|||||||
icon="pi pi-refresh"
|
icon="pi pi-refresh"
|
||||||
class="p-button-secondary"
|
class="p-button-secondary"
|
||||||
(click)="generateMock()"
|
(click)="generateMock()"
|
||||||
|
[disabled]="students().length > 0"
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -100,6 +101,7 @@ import { StudentService } from './student.service';
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons-header {
|
.action-buttons-header {
|
||||||
@ -119,8 +121,10 @@ import { StudentService } from './student.service';
|
|||||||
|
|
||||||
:host ::ng-deep {
|
:host ::ng-deep {
|
||||||
.p-datatable {
|
.p-datatable {
|
||||||
border-radius: 8px;
|
border-radius: var(--border-radius);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
background-color: var(--card-background);
|
||||||
|
|
||||||
.p-datatable-header {
|
.p-datatable-header {
|
||||||
background-color: var(--card-background) !important;
|
background-color: var(--card-background) !important;
|
||||||
@ -132,7 +136,7 @@ import { StudentService } from './student.service';
|
|||||||
background-color: var(--table-header-bg) !important;
|
background-color: var(--table-header-bg) !important;
|
||||||
color: var(--text-color) !important;
|
color: var(--text-color) !important;
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
border-width: 0 0 1px 0;
|
border-width: 0 0 1px 0;
|
||||||
border-color: var(--table-border-color);
|
border-color: var(--table-border-color);
|
||||||
}
|
}
|
||||||
@ -169,12 +173,10 @@ import { StudentService } from './student.service';
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.p-highlight {
|
&.p-highlight {
|
||||||
background-color: var(
|
background-color: #000000 !important;
|
||||||
--paginator-button-selected-bg
|
color: #ffffff !important;
|
||||||
) !important;
|
border-color: #000000 !important;
|
||||||
color: var(--paginator-button-selected-text) !important;
|
font-weight: 600;
|
||||||
border-color: var(--paginator-button-selected-bg) !important;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -188,6 +190,14 @@ import { StudentService } from './student.service';
|
|||||||
background-color: var(--table-row-bg) !important;
|
background-color: var(--table-row-bg) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-button {
|
||||||
|
border-radius: var(--input-radius);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
@ -239,4 +249,3 @@ export class OverviewComponent {
|
|||||||
this.studentsService.deleteSutdent(id);
|
this.studentsService.deleteSutdent(id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
import { bootstrapApplication } from '@angular/platform-browser';
|
|
||||||
import { App } from './app/app.component';
|
|
||||||
import { config } from './app/app.config.server';
|
|
||||||
|
|
||||||
const bootstrap = () => bootstrapApplication(App, config);
|
|
||||||
|
|
||||||
export default bootstrap;
|
|
||||||
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
import {
|
|
||||||
AngularNodeAppEngine,
|
|
||||||
createNodeRequestHandler,
|
|
||||||
isMainModule,
|
|
||||||
writeResponseToNodeResponse,
|
|
||||||
} from '@angular/ssr/node';
|
|
||||||
import express from 'express';
|
|
||||||
import { dirname, resolve } from 'node:path';
|
|
||||||
import { fileURLToPath } from 'node:url';
|
|
||||||
|
|
||||||
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
|
|
||||||
const browserDistFolder = resolve(serverDistFolder, '../browser');
|
|
||||||
|
|
||||||
const app = express();
|
|
||||||
const angularApp = new AngularNodeAppEngine();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Example Express Rest API endpoints can be defined here.
|
|
||||||
* Uncomment and define endpoints as necessary.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
* ```ts
|
|
||||||
* app.get('/api/**', (req, res) => {
|
|
||||||
* // Handle API request
|
|
||||||
* });
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Serve static files from /browser
|
|
||||||
*/
|
|
||||||
app.use(
|
|
||||||
express.static(browserDistFolder, {
|
|
||||||
maxAge: '1y',
|
|
||||||
index: false,
|
|
||||||
redirect: false,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle all other requests by rendering the Angular application.
|
|
||||||
*/
|
|
||||||
app.use('/**', (req, res, next) => {
|
|
||||||
angularApp
|
|
||||||
.handle(req)
|
|
||||||
.then((response) =>
|
|
||||||
response ? writeResponseToNodeResponse(response, res) : next()
|
|
||||||
)
|
|
||||||
.catch(next);
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start the server if this module is the main entry point.
|
|
||||||
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
|
|
||||||
*/
|
|
||||||
if (isMainModule(import.meta.url)) {
|
|
||||||
const port = process.env['PORT'] || 4000;
|
|
||||||
app.listen(port, () => {
|
|
||||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
|
|
||||||
*/
|
|
||||||
export const reqHandler = createNodeRequestHandler(app);
|
|
||||||
297
src/styles.scss
297
src/styles.scss
@ -3,158 +3,304 @@
|
|||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
transition: background-color 0.3s, color 0.3s;
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
// Base colors
|
||||||
--primary-color: #6200ee;
|
--primary-color: #6200ee;
|
||||||
--primary-light: #9951ff;
|
--primary-light: #7f39fb;
|
||||||
--text-color: #333333;
|
--primary-dark: #3700b3;
|
||||||
--background-color: #ffffff;
|
--accent-color: #03dac6;
|
||||||
--card-background: #ffffff;
|
--text-color: #23272f;
|
||||||
--table-header-bg: #f8f9fa;
|
--text-secondary: #555a64;
|
||||||
--table-row-bg: #ffffff;
|
--background-color: #f4f6fa;
|
||||||
--table-row-hover-bg: #f5f5f5;
|
|
||||||
--table-border-color: #e9ecef;
|
// Card & containers
|
||||||
--paginator-button-selected-bg: var(--primary-color);
|
--card-background: #fff;
|
||||||
|
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
// Table colors
|
||||||
|
--table-header-bg: #f3f4f8;
|
||||||
|
--table-row-bg: #fff;
|
||||||
|
--table-row-hover-bg: #f0f0f5;
|
||||||
|
--table-border-color: #e0e3ea;
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
--paginator-button-selected-bg: #000000;
|
||||||
--paginator-button-selected-text: #ffffff;
|
--paginator-button-selected-text: #ffffff;
|
||||||
--paginator-button-hover-bg: rgba(
|
--paginator-button-hover-bg: rgba(98, 0, 238, 0.08);
|
||||||
98,
|
|
||||||
0,
|
// Spacing
|
||||||
238,
|
--spacing-xs: 0.25rem;
|
||||||
0.1
|
--spacing-sm: 0.5rem;
|
||||||
); /* Light purple for hover state */
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--spacing-xl: 2rem;
|
||||||
|
|
||||||
|
// Border radius
|
||||||
|
--border-radius: 12px;
|
||||||
|
--input-radius: 8px;
|
||||||
|
|
||||||
|
// Focus
|
||||||
|
--focus-ring: 0 0 0 2px var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-theme {
|
.dark-theme {
|
||||||
--primary-color: #bb86fc;
|
--primary-color: #bb86fc;
|
||||||
--primary-light: #e2b9ff;
|
--primary-light: #e2b9ff;
|
||||||
|
--primary-dark: #3700b3;
|
||||||
|
--accent-color: #03dac6;
|
||||||
--text-color: #e0e0e0;
|
--text-color: #e0e0e0;
|
||||||
--background-color: #121212;
|
--text-secondary: #b0b0b0;
|
||||||
--card-background: #1e1e1e;
|
--background-color: #181a20;
|
||||||
--table-header-bg: #2a2a2a;
|
--card-background: #23242a;
|
||||||
--table-row-bg: #1e1e1e;
|
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
|
||||||
--table-row-hover-bg: #333333;
|
--table-header-bg: #23242a;
|
||||||
--table-border-color: #444444;
|
--table-row-bg: #181a20;
|
||||||
--paginator-button-selected-bg: var(--primary-color);
|
--table-row-hover-bg: #23242a;
|
||||||
|
--table-border-color: #33343a;
|
||||||
|
--paginator-button-hover-bg: rgba(187, 134, 252, 0.12);
|
||||||
|
--paginator-button-selected-bg: #000000;
|
||||||
--paginator-button-selected-text: #ffffff;
|
--paginator-button-selected-text: #ffffff;
|
||||||
--paginator-button-hover-bg: rgba(
|
|
||||||
187,
|
|
||||||
134,
|
|
||||||
252,
|
|
||||||
0.2
|
|
||||||
); /* Light purple for hover state in dark mode */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Typography
|
||||||
.page-title {
|
.page-title {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-lg);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Layout patterns
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-between {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-gap {
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cards and containers
|
||||||
|
.card-container {
|
||||||
|
background-color: var(--card-background);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: var(--spacing-xl) var(--spacing-lg);
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
transition: background-color 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Forms
|
||||||
.form-field {
|
.form-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field label {
|
.form-field label {
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: var(--spacing-sm);
|
||||||
color: var(--text-color);
|
color: var(--text-secondary);
|
||||||
|
letter-spacing: 0.2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-actions {
|
.form-actions {
|
||||||
margin-top: 2rem;
|
margin-top: var(--spacing-xl);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 1rem;
|
gap: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host ::ng-deep,
|
input[type='text'],
|
||||||
body {
|
input[type='email'],
|
||||||
.p-component {
|
.p-inputtext,
|
||||||
font-family: var(--font-family);
|
.p-multiselect {
|
||||||
}
|
border-radius: var(--input-radius) !important;
|
||||||
|
border: 1px solid var(--table-border-color) !important;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md) !important;
|
||||||
|
background-color: var(--card-background) !important;
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
|
||||||
|
color 0.3s;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='text']:focus,
|
||||||
|
input[type='email']:focus,
|
||||||
|
.p-inputtext:focus,
|
||||||
|
.p-multiselect.p-focus {
|
||||||
|
border-color: var(--primary-color) !important;
|
||||||
|
box-shadow: var(--focus-ring) !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect {
|
||||||
|
min-height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect .p-multiselect-label {
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// PrimeNG component styling
|
||||||
|
.p-component-styles {
|
||||||
|
// Buttons
|
||||||
.p-button {
|
.p-button {
|
||||||
|
border-radius: var(--input-radius);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
&.p-button-primary {
|
&.p-button-primary {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
&:hover {
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-color: var(--primary-light);
|
background-color: var(--primary-light);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-secondary {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border: none;
|
||||||
|
color: #23272f;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: #26ffe6;
|
||||||
|
color: #23272f;
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid var(--primary-color);
|
||||||
|
color: var(--primary-color);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: var(--primary-light);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-danger {
|
||||||
|
background-color: #e53935;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: #b71c1c;
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--primary-color);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: var(--primary-light);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inputtext,
|
// Tables
|
||||||
.p-multiselect {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable {
|
.p-datatable {
|
||||||
margin-top: 1.5rem;
|
margin-top: var(--spacing-lg);
|
||||||
background-color: var(--card-background) !important;
|
background-color: var(--card-background);
|
||||||
border-radius: 8px;
|
border-radius: var(--border-radius);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--card-shadow);
|
||||||
|
transition: background-color 0.3s, box-shadow 0.3s;
|
||||||
|
|
||||||
.p-datatable-header {
|
.p-datatable-header {
|
||||||
background-color: var(--card-background) !important;
|
background-color: var(--card-background);
|
||||||
padding: 1rem;
|
padding: var(--spacing-md);
|
||||||
border-bottom: 1px solid var(--table-border-color);
|
border-bottom: 1px solid var(--table-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datatable-thead > tr > th {
|
.p-datatable-thead > tr > th {
|
||||||
background-color: var(--table-header-bg) !important;
|
background-color: var(--table-header-bg);
|
||||||
color: var(--text-color) !important;
|
color: var(--text-color);
|
||||||
border-color: var(--table-border-color);
|
border-color: var(--table-border-color);
|
||||||
padding: 1rem;
|
padding: var(--spacing-md);
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datatable-tbody > tr {
|
.p-datatable-tbody > tr {
|
||||||
background-color: var(--table-row-bg) !important;
|
background-color: var(--table-row-bg);
|
||||||
color: var(--text-color) !important;
|
color: var(--text-color);
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--table-row-hover-bg) !important;
|
background-color: var(--table-row-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
> td {
|
> td {
|
||||||
background-color: transparent !important;
|
background-color: transparent;
|
||||||
color: var(--text-color) !important;
|
color: var(--text-color);
|
||||||
border-color: var(--table-border-color);
|
border-color: var(--table-border-color);
|
||||||
padding: 1rem;
|
padding: var(--spacing-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-paginator {
|
.p-paginator {
|
||||||
background-color: var(--card-background) !important;
|
background-color: var(--card-background);
|
||||||
color: var(--text-color) !important;
|
color: var(--text-color);
|
||||||
border-color: var(--table-border-color);
|
border-color: var(--table-border-color);
|
||||||
padding: 1rem;
|
padding: var(--spacing-md);
|
||||||
|
|
||||||
.p-paginator-element.p-highlight {
|
.p-paginator-element.p-highlight {
|
||||||
background-color: var(--paginator-button-selected-bg) !important;
|
background-color: #000000 !important;
|
||||||
color: var(--paginator-button-selected-text) !important;
|
color: #ffffff !important;
|
||||||
|
border-color: #000000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-paginator-element:hover {
|
.p-paginator-element:hover {
|
||||||
background-color: var(--paginator-button-hover-bg) !important;
|
background-color: var(--paginator-button-hover-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datatable-emptymessage td {
|
|
||||||
background-color: var(--table-row-bg) !important;
|
|
||||||
color: var(--text-color) !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Apply these styles globally
|
||||||
|
body {
|
||||||
|
@extend .p-component-styles;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
background: var(--background-color);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--table-border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.card-container {
|
.card-container {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
@ -169,4 +315,3 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user