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",
|
||||
"defaultBase": "master",
|
||||
"namedInputs": {
|
||||
"default": ["{projectRoot}/**/*", "sharedGlobals"],
|
||||
"production": [
|
||||
"default",
|
||||
"!{projectRoot}/.eslintrc.json",
|
||||
"!{projectRoot}/eslint.config.mjs"
|
||||
],
|
||||
"sharedGlobals": []
|
||||
},
|
||||
"targetDefaults": {
|
||||
"@angular/build:application": {
|
||||
"cache": true,
|
||||
"dependsOn": ["^build"],
|
||||
"inputs": ["production", "^production"]
|
||||
},
|
||||
"@nx/eslint:lint": {
|
||||
"cache": true,
|
||||
"inputs": [
|
||||
"default",
|
||||
"{workspaceRoot}/.eslintrc.json",
|
||||
"{workspaceRoot}/.eslintignore",
|
||||
"{workspaceRoot}/eslint.config.mjs"
|
||||
]
|
||||
}
|
||||
},
|
||||
"generators": {
|
||||
"@nx/angular:application": {
|
||||
"e2eTestRunner": "none",
|
||||
"linter": "eslint",
|
||||
"style": "scss",
|
||||
"unitTestRunner": "none"
|
||||
}
|
||||
},
|
||||
"defaultProject": "student-app"
|
||||
"$schema": "./node_modules/nx/schemas/nx-schema.json",
|
||||
"defaultBase": "master",
|
||||
"namedInputs": {
|
||||
"default": ["{projectRoot}/**/*", "sharedGlobals"],
|
||||
"production": [
|
||||
"default",
|
||||
"!{projectRoot}/.eslintrc.json",
|
||||
"!{projectRoot}/eslint.config.mjs"
|
||||
],
|
||||
"sharedGlobals": []
|
||||
},
|
||||
"targetDefaults": {
|
||||
"@angular/build:application": {
|
||||
"cache": true,
|
||||
"dependsOn": ["^build"],
|
||||
"inputs": ["production", "^production"]
|
||||
},
|
||||
"@nx/eslint:lint": {
|
||||
"cache": true,
|
||||
"inputs": [
|
||||
"default",
|
||||
"{workspaceRoot}/.eslintrc.json",
|
||||
"{workspaceRoot}/.eslintignore",
|
||||
"{workspaceRoot}/eslint.config.mjs"
|
||||
]
|
||||
}
|
||||
},
|
||||
"generators": {
|
||||
"@nx/angular:application": {
|
||||
"e2eTestRunner": "none",
|
||||
"linter": "eslint",
|
||||
"style": "scss",
|
||||
"unitTestRunner": "none"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "nx serve",
|
||||
"build": "nx build",
|
||||
"test": "nx test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/build-angular": "~20.0.0",
|
||||
"@angular/animations": "^20.0.3",
|
||||
"@angular/common": "~20.0.0",
|
||||
"@angular/compiler": "~20.0.0",
|
||||
"@angular/core": "~20.0.0",
|
||||
"@angular/forms": "~20.0.0",
|
||||
"@angular/platform-browser": "~20.0.0",
|
||||
"@angular/platform-server": "~20.0.0",
|
||||
"@angular/router": "~20.0.0",
|
||||
"@angular/ssr": "~20.0.0",
|
||||
"@mmstack/primitives": "^20.0.0",
|
||||
"@primeng/themes": "^19.1.3",
|
||||
"express": "^4.21.2",
|
||||
"primeicons": "^7.0.0",
|
||||
"primeng": "^19.1.3",
|
||||
"rxjs": "~7.8.0",
|
||||
"uuid": "^11.1.0",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/core": "~20.0.0",
|
||||
"@angular-devkit/schematics": "~20.0.0",
|
||||
"@angular/build": "~20.0.0",
|
||||
"@angular/cli": "~20.0.0",
|
||||
"@angular/compiler-cli": "~20.0.0",
|
||||
"@angular/language-service": "~20.0.0",
|
||||
"@eslint/js": "^9.8.0",
|
||||
"@nx/angular": "21.2.0",
|
||||
"@nx/eslint": "21.2.0",
|
||||
"@nx/eslint-plugin": "21.2.0",
|
||||
"@nx/js": "21.2.0",
|
||||
"@nx/web": "21.2.0",
|
||||
"@nx/workspace": "21.2.0",
|
||||
"@schematics/angular": "~20.0.0",
|
||||
"@swc-node/register": "~1.9.1",
|
||||
"@swc/core": "~1.5.7",
|
||||
"@swc/helpers": "~0.5.11",
|
||||
"@types/express": "^4.17.21",
|
||||
"@typescript-eslint/utils": "^8.29.0",
|
||||
"angular-eslint": "^20.0.0",
|
||||
"eslint": "^9.8.0",
|
||||
"eslint-config-prettier": "^10.0.0",
|
||||
"nx": "21.2.0",
|
||||
"prettier": "^2.6.2",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript": "~5.8.2",
|
||||
"typescript-eslint": "^8.29.0"
|
||||
},
|
||||
"nx": {
|
||||
"includedScripts": []
|
||||
}
|
||||
"name": "@student-app/source",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "nx serve",
|
||||
"build": "nx build",
|
||||
"test": "nx test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/build-angular": "~20.0.0",
|
||||
"@angular/animations": "^20.0.3",
|
||||
"@angular/common": "~20.0.0",
|
||||
"@angular/compiler": "~20.0.0",
|
||||
"@angular/core": "~20.0.0",
|
||||
"@angular/forms": "~20.0.0",
|
||||
"@angular/platform-browser": "~20.0.0",
|
||||
"@angular/router": "~20.0.0",
|
||||
"@mmstack/primitives": "^20.0.0",
|
||||
"@primeng/themes": "^19.1.3",
|
||||
"express": "^4.21.2",
|
||||
"primeicons": "^7.0.0",
|
||||
"primeng": "^19.1.3",
|
||||
"rxjs": "~7.8.0",
|
||||
"uuid": "^11.1.0",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/core": "~20.0.0",
|
||||
"@angular-devkit/schematics": "~20.0.0",
|
||||
"@angular/build": "~20.0.0",
|
||||
"@angular/cli": "~20.0.0",
|
||||
"@angular/compiler-cli": "~20.0.0",
|
||||
"@angular/language-service": "~20.0.0",
|
||||
"@eslint/js": "^9.8.0",
|
||||
"@nx/angular": "21.2.0",
|
||||
"@nx/eslint": "21.2.0",
|
||||
"@nx/eslint-plugin": "21.2.0",
|
||||
"@nx/js": "21.2.0",
|
||||
"@nx/web": "21.2.0",
|
||||
"@nx/workspace": "21.2.0",
|
||||
"@schematics/angular": "~20.0.0",
|
||||
"@swc-node/register": "~1.9.1",
|
||||
"@swc/core": "~1.5.7",
|
||||
"@swc/helpers": "~0.5.11",
|
||||
"@types/express": "^4.17.21",
|
||||
"@typescript-eslint/utils": "^8.29.0",
|
||||
"angular-eslint": "^20.0.0",
|
||||
"eslint": "^9.8.0",
|
||||
"eslint-config-prettier": "^10.0.0",
|
||||
"nx": "21.2.0",
|
||||
"prettier": "^2.6.2",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript": "~5.8.2",
|
||||
"typescript-eslint": "^8.29.0"
|
||||
},
|
||||
"nx": {
|
||||
"includedScripts": []
|
||||
}
|
||||
}
|
||||
|
||||
174
project.json
174
project.json
@ -1,91 +1,87 @@
|
||||
{
|
||||
"name": "student-app",
|
||||
"$schema": "node_modules/nx/schemas/project-schema.json",
|
||||
"includedScripts": [],
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"sourceRoot": "./src",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular/build:application",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/student-app",
|
||||
"browser": "./src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": ["./src/styles.scss"],
|
||||
"server": "src/main.server.ts",
|
||||
"ssr": {
|
||||
"entry": "src/server.ts"
|
||||
},
|
||||
"outputMode": "server"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kb",
|
||||
"maximumError": "8kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"continuous": true,
|
||||
"executor": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "student-app:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "student-app:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"executor": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "student-app:build"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": ["./src"]
|
||||
}
|
||||
},
|
||||
"serve-static": {
|
||||
"continuous": true,
|
||||
"executor": "@nx/web:file-server",
|
||||
"options": {
|
||||
"buildTarget": "student-app:build",
|
||||
"staticFilePath": "dist/student-app/browser",
|
||||
"spa": true
|
||||
}
|
||||
}
|
||||
}
|
||||
"name": "student-app",
|
||||
"$schema": "node_modules/nx/schemas/project-schema.json",
|
||||
"includedScripts": [],
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"sourceRoot": "./src",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular/build:application",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/student-app",
|
||||
"browser": "./src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": ["./src/styles.scss"]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kb",
|
||||
"maximumError": "8kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"continuous": true,
|
||||
"executor": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "student-app:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "student-app:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"executor": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "student-app:build"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": ["./src"]
|
||||
}
|
||||
},
|
||||
"serve-static": {
|
||||
"continuous": 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 {
|
||||
.p-inputtext:enabled:focus {
|
||||
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 {
|
||||
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']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -49,104 +49,113 @@ import { ButtonModule } from 'primeng/button';
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--primary-color);
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 var(--spacing-lg);
|
||||
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;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-left .app-title {
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.navbar-center a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0 1rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0 var(--spacing-md);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0;
|
||||
padding: var(--spacing-sm) 0;
|
||||
position: relative;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
transition: color 0.2s;
|
||||
|
||||
.navbar-center a.active,
|
||||
.navbar-center a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
color: #fff;
|
||||
|
||||
.navbar-center a.active::after,
|
||||
.navbar-center a:hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.75rem;
|
||||
margin-right: var(--spacing-sm);
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.username {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-left: 0.25rem;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
background: #fff !important;
|
||||
color: var(--primary-color) !important;
|
||||
border-radius: 50%;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
.dark-theme .theme-toggle-btn {
|
||||
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 {
|
||||
min-height: calc(100vh - 4rem);
|
||||
padding: 2rem 0;
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: var(--background-color);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
margin: 1rem 0;
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
@ -155,7 +164,7 @@ import { ButtonModule } from 'primeng/button';
|
||||
}
|
||||
|
||||
.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 {
|
||||
opacity: 0.8;
|
||||
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 {
|
||||
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 {
|
||||
|
||||
@ -29,6 +29,7 @@ import { StudentService } from './student.service';
|
||||
icon="pi pi-refresh"
|
||||
class="p-button-secondary"
|
||||
(click)="generateMock()"
|
||||
[disabled]="students().length > 0"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -100,6 +101,7 @@ import { StudentService } from './student.service';
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.action-buttons-header {
|
||||
@ -119,8 +121,10 @@ import { StudentService } from './student.service';
|
||||
|
||||
:host ::ng-deep {
|
||||
.p-datatable {
|
||||
border-radius: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--card-shadow);
|
||||
background-color: var(--card-background);
|
||||
|
||||
.p-datatable-header {
|
||||
background-color: var(--card-background) !important;
|
||||
@ -132,7 +136,7 @@ import { StudentService } from './student.service';
|
||||
background-color: var(--table-header-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--table-border-color);
|
||||
}
|
||||
@ -169,12 +173,10 @@ import { StudentService } from './student.service';
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background-color: var(
|
||||
--paginator-button-selected-bg
|
||||
) !important;
|
||||
color: var(--paginator-button-selected-text) !important;
|
||||
border-color: var(--paginator-button-selected-bg) !important;
|
||||
font-weight: 500;
|
||||
background-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #000000 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -188,6 +190,14 @@ import { StudentService } from './student.service';
|
||||
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) {
|
||||
@ -239,4 +249,3 @@ export class OverviewComponent {
|
||||
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,
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
:root {
|
||||
// Base colors
|
||||
--primary-color: #6200ee;
|
||||
--primary-light: #9951ff;
|
||||
--text-color: #333333;
|
||||
--background-color: #ffffff;
|
||||
--card-background: #ffffff;
|
||||
--table-header-bg: #f8f9fa;
|
||||
--table-row-bg: #ffffff;
|
||||
--table-row-hover-bg: #f5f5f5;
|
||||
--table-border-color: #e9ecef;
|
||||
--paginator-button-selected-bg: var(--primary-color);
|
||||
--primary-light: #7f39fb;
|
||||
--primary-dark: #3700b3;
|
||||
--accent-color: #03dac6;
|
||||
--text-color: #23272f;
|
||||
--text-secondary: #555a64;
|
||||
--background-color: #f4f6fa;
|
||||
|
||||
// Card & containers
|
||||
--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-hover-bg: rgba(
|
||||
98,
|
||||
0,
|
||||
238,
|
||||
0.1
|
||||
); /* Light purple for hover state */
|
||||
--paginator-button-hover-bg: rgba(98, 0, 238, 0.08);
|
||||
|
||||
// Spacing
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--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 {
|
||||
--primary-color: #bb86fc;
|
||||
--primary-light: #e2b9ff;
|
||||
--primary-dark: #3700b3;
|
||||
--accent-color: #03dac6;
|
||||
--text-color: #e0e0e0;
|
||||
--background-color: #121212;
|
||||
--card-background: #1e1e1e;
|
||||
--table-header-bg: #2a2a2a;
|
||||
--table-row-bg: #1e1e1e;
|
||||
--table-row-hover-bg: #333333;
|
||||
--table-border-color: #444444;
|
||||
--paginator-button-selected-bg: var(--primary-color);
|
||||
--text-secondary: #b0b0b0;
|
||||
--background-color: #181a20;
|
||||
--card-background: #23242a;
|
||||
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
|
||||
--table-header-bg: #23242a;
|
||||
--table-row-bg: #181a20;
|
||||
--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-hover-bg: rgba(
|
||||
187,
|
||||
134,
|
||||
252,
|
||||
0.2
|
||||
); /* Light purple for hover state in dark mode */
|
||||
}
|
||||
|
||||
// Typography
|
||||
.page-title {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 2rem;
|
||||
margin-top: var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
:host ::ng-deep,
|
||||
body {
|
||||
.p-component {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
.p-inputtext,
|
||||
.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 {
|
||||
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 {
|
||||
background-color: var(--primary-color);
|
||||
&:hover {
|
||||
border: none;
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
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,
|
||||
.p-multiselect {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Tables
|
||||
.p-datatable {
|
||||
margin-top: 1.5rem;
|
||||
background-color: var(--card-background) !important;
|
||||
border-radius: 8px;
|
||||
margin-top: var(--spacing-lg);
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--border-radius);
|
||||
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 {
|
||||
background-color: var(--card-background) !important;
|
||||
padding: 1rem;
|
||||
background-color: var(--card-background);
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--table-header-bg);
|
||||
color: var(--text-color);
|
||||
border-color: var(--table-border-color);
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
padding: var(--spacing-md);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr {
|
||||
background-color: var(--table-row-bg) !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--table-row-bg);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--table-row-hover-bg) !important;
|
||||
background-color: var(--table-row-hover-bg);
|
||||
}
|
||||
|
||||
> td {
|
||||
background-color: transparent !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
border-color: var(--table-border-color);
|
||||
padding: 1rem;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
background-color: var(--card-background) !important;
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--card-background);
|
||||
color: var(--text-color);
|
||||
border-color: var(--table-border-color);
|
||||
padding: 1rem;
|
||||
padding: var(--spacing-md);
|
||||
|
||||
.p-paginator-element.p-highlight {
|
||||
background-color: var(--paginator-button-selected-bg) !important;
|
||||
color: var(--paginator-button-selected-text) !important;
|
||||
background-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.card-container {
|
||||
padding: 1.5rem;
|
||||
@ -169,4 +315,3 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user