spawntree
/
imaq
2
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

scss and icons

master
FlorianEisenmenger 1 vuosi sitten
vanhempi
5cc6a4bb90
commit
5781c152cd
20 muutettua tiedostoa jossa 270 lisäystä ja 146 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      angular/src/app/_components/layout/two-column/two-column.component.html
  2. +1
    -1
      angular/src/app/_views/base-data/base-data.component.html
  3. +1
    -1
      angular/src/app/_views/dashboard/dashboard.component.html
  4. +41
    -37
      angular/src/app/_views/location/location-form/location-form.component.html
  5. +34
    -30
      angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html
  6. +5
    -4
      angular/src/app/_views/user/user-detail/user-detail.component.html
  7. +1
    -1
      angular/src/app/_views/user/users.component.html
  8. +47
    -43
      angular/src/app/_views/vessel/vessel-form/vessel-form.component.html
  9. +22
    -18
      angular/src/app/_views/zone/zone-form/zone-form.component.html
  10. +4
    -4
      angular/src/app/app.component.html
  11. +2
    -2
      angular/src/app/app.component.ts
  12. +1
    -0
      angular/src/assets/images/icons/dark-mode-toggle-icon.svg
  13. +1
    -0
      angular/src/assets/images/icons/icon-back-white.svg
  14. +1
    -0
      angular/src/assets/images/icons/icon-back.svg
  15. +1
    -0
      angular/src/assets/images/icons/icon-lefthand-active.svg
  16. +1
    -0
      angular/src/assets/images/icons/icon-lefthand.svg
  17. BIN
      angular/src/assets/images/icons/icon-logout.svg
  18. +1
    -0
      angular/src/assets/images/icons/light-mode-toggle-icon.svg
  19. +81
    -1
      angular/src/assets/scss/_basics.scss
  20. +24
    -3
      angular/src/assets/scss/_dark.scss

+ 1
- 1
angular/src/app/_components/layout/two-column/two-column.component.html Näytä tiedosto

@@ -34,7 +34,7 @@
</div>
<div class="pb-5 spt-main">
<div class="pe-3 pt-3">
<div class="btn btn-secondary mb-1" (click)="goBack()" id="go-back">< {{'basic.back' | translate}}</div>
<div class="btn-back mb-1" (click)="goBack()" id="go-back"></div>
<router-outlet></router-outlet>
</div>
</div>

+ 1
- 1
angular/src/app/_views/base-data/base-data.component.html Näytä tiedosto

@@ -1,5 +1,5 @@
<div class="spt-container">
<div class="d-flex justify-content-between align-items-start">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ 'view.base_data' | translate }}</h2>
</div>
<mat-tab-group>


+ 1
- 1
angular/src/app/_views/dashboard/dashboard.component.html Näytä tiedosto

@@ -1,5 +1,5 @@
<div class="spt-container">
<div class="d-flex justify-content-between align-items-start">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ 'dashboard.view' | translate }}</h2>
</div>
Space for important stuff.


+ 41
- 37
angular/src/app/_views/location/location-form/location-form.component.html Näytä tiedosto

@@ -1,39 +1,43 @@
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}</h2>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text" class="form-control" id="name" formControlName="name" required/>
</div>
<div class="mb-3">
<label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
<input type="text" class="form-control" id="code" formControlName="code" required/>
</div>
<div class="mb-3">
<label for="zone" class="form-label">{{ 'model.zone' | translate }}:</label>
<app-search-select #zoneSearchSelect
[formId]="'zone'"
[formLabelLangKey]="'model.zone'"
[documentForm]="form"
[getDataFunction]="getZones"
[displayedDataField]="'name'"
[listColDefinitions]="zoneColDefinitions"
[dataSet]="data?.zone"
>
</app-search-select>
<input id="zone" type="hidden" formControlName="zone"/>
</div>
<div class="spt-container">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}</h2>
</div>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text" class="form-control" id="name" formControlName="name" required/>
</div>
<div class="mb-3">
<label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
<input type="text" class="form-control" id="code" formControlName="code" required/>
</div>
<div class="mb-3">
<label for="zone" class="form-label">{{ 'model.zone' | translate }}:</label>
<app-search-select #zoneSearchSelect
[formId]="'zone'"
[formLabelLangKey]="'model.zone'"
[documentForm]="form"
[getDataFunction]="getZones"
[displayedDataField]="'name'"
[listColDefinitions]="zoneColDefinitions"
[dataSet]="data?.zone"
>
</app-search-select>
<input id="zone" type="hidden" formControlName="zone"/>
</div>

<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.location' | translate }}
<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>
}
</div>
</form>
</div>

@if (isEditMode()) {
<button type="button" class="ms-3 btn btn-primary" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.location' | translate }}
</button>
}
</div>
</form>
</div>
</div>

+ 34
- 30
angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html Näytä tiedosto

@@ -1,34 +1,38 @@
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text"
class="form-control"
id="name"
formControlName="name"
required/>
</div>
<div class="spt-container">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
</div>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text"
class="form-control"
id="name"
formControlName="name"
required/>
</div>

<div class="mb-3">
<label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
<input type="text"
class="form-control"
id="code"
formControlName="code"
required/>
</div>
<div class="mb-3">
<label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
<input type="text"
class="form-control"
id="code"
formControlName="code"
required/>
</div>

<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.shipping_company' | translate }}
<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>
}
</div>
</form>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.shipping_company' | translate }}
</button>
}
</div>
</form>
</div>
</div>

+ 5
- 4
angular/src/app/_views/user/user-detail/user-detail.component.html Näytä tiedosto

@@ -1,5 +1,5 @@
<div *ngIf="user" class="spt-container">
<div class="d-flex justify-content-between align-items-start">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h1>{{ 'users.user' | translate }}: {{ user.firstName }} {{ user.lastName }}</h1>
</div>
<mat-tab-group>
@@ -14,9 +14,10 @@
</dl>
</div>
<div class="col-12 col-sm-6 col-lg-4 has-image">
<!-- <img *ngIf="user.imageUrl !== null && user.imageUrl !== undefined"-->
<!-- src="{{user.imageUrl}}" width="247" height="94"-->
<!-- alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}"/>-->
@if (user.imageUrl !== null && user.imageUrl !== undefined) {
<img src="{{user.imageUrl}}" width="247" height="94"
alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}"/>
}
</div>
</div>
</div>


+ 1
- 1
angular/src/app/_views/user/users.component.html Näytä tiedosto

@@ -1,5 +1,5 @@
<div class="spt-container">
<div class="d-flex justify-content-between align-items-start">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ 'basic.users' | translate }}</h2>
</div>
<app-user-list></app-user-list>


+ 47
- 43
angular/src/app/_views/vessel/vessel-form/vessel-form.component.html Näytä tiedosto

@@ -1,48 +1,52 @@
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text"
class="form-control"
id="name"
formControlName="name"
required/>
</div>
<div class="spt-container">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
</div>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text"
class="form-control"
id="name"
formControlName="name"
required/>
</div>

<div class="mb-3">
<label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
<input type="text"
class="form-control"
id="code"
formControlName="code"
required/>
</div>
<div class="mb-3">
<label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
<input type="text"
class="form-control"
id="code"
formControlName="code"
required/>
</div>

<div class="mb-3">
<label for="company" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
<app-search-select #shippingCompanySearchSelect
[formId]="'company'"
[formLabelLangKey]="'model.shipping_company'"
[documentForm]="form"
[getDataFunction]="getShippingCompanies"
[displayedDataField]="'name'"
[listColDefinitions]="shippingCompanyColDefinitions"
[dataSet]="data?.company">
</app-search-select>
<input id="company" type="hidden" formControlName="company"/>
</div>
<div class="mb-3">
<label for="company" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
<app-search-select #shippingCompanySearchSelect
[formId]="'company'"
[formLabelLangKey]="'model.shipping_company'"
[documentForm]="form"
[getDataFunction]="getShippingCompanies"
[displayedDataField]="'name'"
[listColDefinitions]="shippingCompanyColDefinitions"
[dataSet]="data?.company">
</app-search-select>
<input id="company" type="hidden" formControlName="company"/>
</div>

<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.vessel' | translate }}
<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>
}
</div>
</form>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.vessel' | translate }}
</button>
}
</div>
</form>
</div>
</div>

+ 22
- 18
angular/src/app/_views/zone/zone-form/zone-form.component.html Näytä tiedosto

@@ -1,21 +1,25 @@
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}</h2>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text" class="form-control" id="name" formControlName="name" required/>
</div>
<div class="spt-container">
<div class="spt-headline d-flex justify-content-between align-items-start">
<h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}</h2>
</div>
<div class="spt-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
<input type="text" class="form-control" id="name" formControlName="name" required/>
</div>

<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.zone' | translate }}
<div class="flex gap-2">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ 'basic.save' | translate }}
</button>
}
</div>
</form>

@if (isEditMode()) {
<button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
{{ 'basic.delete' | translate }} {{ 'model.zone' | translate }}
</button>
}
</div>
</form>
</div>
</div>

+ 4
- 4
angular/src/app/app.component.html Näytä tiedosto

@@ -20,10 +20,10 @@
<!-- <li><a class="dropdown-item" href="#">Peter Matusik: Christian hat einen Kommentar verfasst</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<button class="btn btn-secondary me-3" (click)="logout()">{{ 'basic.logout' | translate }}</button>
<button class="btn btn-primary me-3" id="c-btn" (click)="copyTokenToClipboard()">c</button>
<button [class]="'me-3 btn ' + buttonClassLefties" (click)="leftHanded()">Lefties</button>
<button [class]="'btn ' + buttonClassDarkMode" (click)="darkMode()">Dark</button>
<button class="btn-logout" (click)="logout()"></button>
<button [class]="'toggle-left-hand ' + buttonClassLefties" (click)="leftHanded()" title="Left handed"></button>
<button [class]="'toggle-dark-mode ' + buttonClassDarkMode" (click)="darkMode()" title="Dark mode"></button>
<button class="btn btn-primary ms-3" id="c-btn" (click)="copyTokenToClipboard()">c</button>
</div>
</div>
</nav>


+ 2
- 2
angular/src/app/app.component.ts Näytä tiedosto

@@ -96,10 +96,10 @@ export class AppComponent implements OnInit {
}

get buttonClassLefties(): string {
return this.isLeftHanded ? 'btn-primary' : 'btn-secondary';
return this.isLeftHanded ? 'is-left' : '';
}

get buttonClassDarkMode(): string {
return this.isDarkMode ? 'btn-primary' : 'btn-secondary';
return this.isDarkMode ? 'toggle-light' : 'toggle-dark';
}
}

+ 1
- 0
angular/src/assets/images/icons/dark-mode-toggle-icon.svg Näytä tiedosto

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 262.86"><path fill-rule="nonzero" d="M316.78 16.55h-205.9c-30.5 0-58.22 12.48-78.31 32.57C12.47 69.21 0 96.93 0 127.44c0 30.5 12.47 58.22 32.57 78.31 20.09 20.1 47.81 32.57 78.31 32.57h193.25c21.54 15.43 47.9 24.54 76.26 24.54h.18c36.14 0 69.02-14.79 92.83-38.6 23.8-23.81 38.6-56.67 38.6-92.83 0-36.15-14.78-69.03-38.63-92.8C449.53 14.8 416.67 0 380.57 0h-.18c-23.02 0-44.72 6.02-63.61 16.55zm70.62 97.17.43.09c.82-3.45 2.83-6.19 6.04-8.16 3.2-1.98 6.53-2.57 10.01-1.75l.1-.43c-3.47-.82-6.2-2.83-8.17-6.03-1.98-3.22-2.57-6.55-1.75-10.01l-.43-.1c-.82 3.47-2.83 6.2-6.03 8.18-3.21 1.98-6.55 2.56-10.02 1.74l-.1.43c3.47.82 6.2 2.84 8.18 6.04 1.99 3.19 2.56 6.52 1.74 10zm36.87 16.77.53.12c1.02-4.35 3.55-7.78 7.58-10.26 4.02-2.49 8.2-3.22 12.56-2.19l.13-.53c-4.35-1.03-7.78-3.55-10.26-7.59-2.49-4.03-3.22-8.22-2.2-12.56l-.53-.12c-1.02 4.35-3.55 7.77-7.58 10.26-4.02 2.49-8.21 3.22-12.56 2.19l-.13.53c4.36 1.03 7.78 3.55 10.26 7.58 2.49 4.02 3.22 8.22 2.2 12.57zm-38.79-61.01c-15.69 7.67-26.98 23.26-28.29 41.93-1.96 27.88 19.05 52.06 46.92 54.02 13.23.93 25.64-3.32 35.22-11.02 4.75-3.82 9.66-.45 7.59 4.36-11.33 26.42-38.45 44.04-68.74 41.91-38.29-2.69-67.14-35.91-64.45-74.19C316.3 89.8 347.05 61.67 383.44 62c6.71.06 8.13 4.5 2.04 7.48zm-5.09-53.95h.18c63.75 0 115.91 52.15 115.91 115.9 0 63.75-52.23 115.91-115.91 115.91h-.18c-63.68 0-115.91-52.16-115.91-115.91s52.16-115.9 115.91-115.9z"/></svg>

+ 1
- 0
angular/src/assets/images/icons/icon-back-white.svg Näytä tiedosto

@@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M423.466667 141.568a42.666667 42.666667 0 0 1-2.048 60.288l-142.506667 132.992h336.512a280.576 280.576 0 1 1 0 561.152H170.666667a42.666667 42.666667 0 1 1 0-85.333333h444.757333a195.242667 195.242667 0 1 0 0-390.485334H278.912l142.506667 133.034667a42.666667 42.666667 0 1 1-58.24 62.378667L141.568 408.746667a42.666667 42.666667 0 0 1 0-62.421334L363.178667 139.52a42.666667 42.666667 0 0 1 60.288 2.090667z" fill="#ffffff" /></svg>

+ 1
- 0
angular/src/assets/images/icons/icon-back.svg Näytä tiedosto

@@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M423.466667 141.568a42.666667 42.666667 0 0 1-2.048 60.288l-142.506667 132.992h336.512a280.576 280.576 0 1 1 0 561.152H170.666667a42.666667 42.666667 0 1 1 0-85.333333h444.757333a195.242667 195.242667 0 1 0 0-390.485334H278.912l142.506667 133.034667a42.666667 42.666667 0 1 1-58.24 62.378667L141.568 408.746667a42.666667 42.666667 0 0 1 0-62.421334L363.178667 139.52a42.666667 42.666667 0 0 1 60.288 2.090667z" fill="#212529" /></svg>

+ 1
- 0
angular/src/assets/images/icons/icon-lefthand-active.svg Näytä tiedosto

@@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: #;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M459.8784 971.52c-208.26112 0-236.19584-210.69824-251.19744-323.88096-1.90464-14.37696-3.64544-27.50464-5.5296-38.81984-8.50944-51.01568-27.05408-110.01856-43.42784-162.05824-16.85504-53.58592-30.16704-95.92832-30.16704-120.3712 0-34.63168 27.53536-60.49792 52.16256-60.49792 30.65856 0 56.05376 20.0192 69.67296 54.91712l42.61888 109.21984c-8.02816-88.7808-18.432-202.60864-20.38784-218.39872-2.95936-23.83872 2.7136-45.23008 15.95392-60.2112 11.1616-12.62592 27.07456-19.58912 44.78976-19.58912 38.35904 0 65.73056 25.81504 73.22624 69.04832 1.88416 10.79296 6.6048 38.42048 12.24704 71.59808L419.84 131.84c0-40.192 30.69952-71.68 69.89824-71.68 39.03488 0 70.78912 32.16384 70.78912 71.68l5.5296 208.9984c11.44832-62.14656 22.62016-125.26592 24.3712-143.872 6.144-65.57696 47.53408-75.3664 71.64928-75.3664 40.88832 0 71.72096 33.024 71.72096 76.8 0 0.55296-0.03072 1.10592-0.09216 1.64864l-46.1824 426.24 54.71232-56.99584c16.0768-16.09728 37.13024-24.84224 59.48416-24.84224 22.34368 0 43.38688 8.74496 59.25888 24.61696 32.84992 32.83968 33.00352 86.15936 0.31744 118.8352l0 0c0.03072 0-53.31968 59.55584-129.51552 135.76192l-12.52352 12.56448C647.0656 908.82048 584.72448 971.52 459.8784 971.52zM181.71904 296.61184c-7.5264 0-21.44256 12.27776-21.44256 29.77792 0 19.73248 13.96736 64.14336 28.75392 111.14496 16.67072 53.01248 35.56352 113.07008 44.42112 166.21568 1.93536 11.6224 3.72736 25.09824 5.6832 39.84384C254.8224 761.9584 278.528 940.8 459.8784 940.8c112.06656 0 167.46496-55.71584 237.59872-126.23872l12.58496-12.61568c75.6224-75.6224 128.4096-134.56384 128.93184-135.13728 21.28896-21.31968 21.13536-55.1424 0.26624-76.02176-10.06592-10.07616-23.40864-15.616-37.53984-15.616-14.14144 0-27.47392 5.53984-37.5296 15.616l-85.7088 89.30304c-4.54656 4.74112-11.61216 6.06208-17.57184 3.2768s-9.49248-9.04192-8.77568-15.57504l50.95424-470.17984c-0.32768-26.70592-17.09056-45.29152-41.00096-45.29152-18.10432 0-37.14048 5.65248-41.07264 47.5136-3.86048 41.22624-49.46944 278.12864-51.41504 288.2048-1.4848 7.70048-8.43776 12.84096-16.34304 12.40064-7.81312-0.63488-13.88544-7.0656-14.09024-14.8992l-9.34912-353.28c-0.01024-23.37792-17.6128-41.3696-40.07936-41.3696-21.97504 0-39.17824 17.99168-39.17824 40.96l0 322.56c0 7.97696-6.11328 14.6432-14.06976 15.3088-7.96672 0.65536-15.09376-4.87424-16.42496-12.73856 0 0-36.61824-215.552-42.73152-250.81856-3.45088-19.88608-13.71136-43.59168-42.96704-43.59168-9.04192 0-16.37376 3.10272-21.77024 9.20576-7.2192 8.17152-10.32192 21.32992-8.48896 36.08576 3.328 26.74688 29.10208 314.84928 30.19776 327.08608 0.67584 7.61856-4.34176 14.58176-11.78624 16.32256-7.35232 1.78176-15.03232-2.22208-17.8176-9.35936l-81.92-209.92C217.61024 318.7712 205.43488 296.61184 181.71904 296.61184z" /></svg>

+ 1
- 0
angular/src/assets/images/icons/icon-lefthand.svg Näytä tiedosto

@@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: #2ecc71;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M459.8784 971.52c-208.26112 0-236.19584-210.69824-251.19744-323.88096-1.90464-14.37696-3.64544-27.50464-5.5296-38.81984-8.50944-51.01568-27.05408-110.01856-43.42784-162.05824-16.85504-53.58592-30.16704-95.92832-30.16704-120.3712 0-34.63168 27.53536-60.49792 52.16256-60.49792 30.65856 0 56.05376 20.0192 69.67296 54.91712l42.61888 109.21984c-8.02816-88.7808-18.432-202.60864-20.38784-218.39872-2.95936-23.83872 2.7136-45.23008 15.95392-60.2112 11.1616-12.62592 27.07456-19.58912 44.78976-19.58912 38.35904 0 65.73056 25.81504 73.22624 69.04832 1.88416 10.79296 6.6048 38.42048 12.24704 71.59808L419.84 131.84c0-40.192 30.69952-71.68 69.89824-71.68 39.03488 0 70.78912 32.16384 70.78912 71.68l5.5296 208.9984c11.44832-62.14656 22.62016-125.26592 24.3712-143.872 6.144-65.57696 47.53408-75.3664 71.64928-75.3664 40.88832 0 71.72096 33.024 71.72096 76.8 0 0.55296-0.03072 1.10592-0.09216 1.64864l-46.1824 426.24 54.71232-56.99584c16.0768-16.09728 37.13024-24.84224 59.48416-24.84224 22.34368 0 43.38688 8.74496 59.25888 24.61696 32.84992 32.83968 33.00352 86.15936 0.31744 118.8352l0 0c0.03072 0-53.31968 59.55584-129.51552 135.76192l-12.52352 12.56448C647.0656 908.82048 584.72448 971.52 459.8784 971.52zM181.71904 296.61184c-7.5264 0-21.44256 12.27776-21.44256 29.77792 0 19.73248 13.96736 64.14336 28.75392 111.14496 16.67072 53.01248 35.56352 113.07008 44.42112 166.21568 1.93536 11.6224 3.72736 25.09824 5.6832 39.84384C254.8224 761.9584 278.528 940.8 459.8784 940.8c112.06656 0 167.46496-55.71584 237.59872-126.23872l12.58496-12.61568c75.6224-75.6224 128.4096-134.56384 128.93184-135.13728 21.28896-21.31968 21.13536-55.1424 0.26624-76.02176-10.06592-10.07616-23.40864-15.616-37.53984-15.616-14.14144 0-27.47392 5.53984-37.5296 15.616l-85.7088 89.30304c-4.54656 4.74112-11.61216 6.06208-17.57184 3.2768s-9.49248-9.04192-8.77568-15.57504l50.95424-470.17984c-0.32768-26.70592-17.09056-45.29152-41.00096-45.29152-18.10432 0-37.14048 5.65248-41.07264 47.5136-3.86048 41.22624-49.46944 278.12864-51.41504 288.2048-1.4848 7.70048-8.43776 12.84096-16.34304 12.40064-7.81312-0.63488-13.88544-7.0656-14.09024-14.8992l-9.34912-353.28c-0.01024-23.37792-17.6128-41.3696-40.07936-41.3696-21.97504 0-39.17824 17.99168-39.17824 40.96l0 322.56c0 7.97696-6.11328 14.6432-14.06976 15.3088-7.96672 0.65536-15.09376-4.87424-16.42496-12.73856 0 0-36.61824-215.552-42.73152-250.81856-3.45088-19.88608-13.71136-43.59168-42.96704-43.59168-9.04192 0-16.37376 3.10272-21.77024 9.20576-7.2192 8.17152-10.32192 21.32992-8.48896 36.08576 3.328 26.74688 29.10208 314.84928 30.19776 327.08608 0.67584 7.61856-4.34176 14.58176-11.78624 16.32256-7.35232 1.78176-15.03232-2.22208-17.8176-9.35936l-81.92-209.92C217.61024 318.7712 205.43488 296.61184 181.71904 296.61184z" /></svg>

BIN
angular/src/assets/images/icons/icon-logout.svg Näytä tiedosto


+ 1
- 0
angular/src/assets/images/icons/light-mode-toggle-icon.svg Näytä tiedosto

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 256.04"><path d="M128.02 0h.18c22.03 0 42.83 5.66 61 15.6h210.38c30.89 0 59 12.65 79.38 33.04C499.35 68.99 512 97.1 512 128.02c0 30.92-12.66 59.03-33.02 79.4l-.42.38c-20.34 20.15-48.29 32.64-78.98 32.64H189.24c-18.17 9.93-38.98 15.6-61.04 15.6h-.18c-35.2 0-67.22-14.41-90.42-37.6C14.41 195.25 0 163.24 0 128.02s14.4-67.24 37.59-90.43l.91-.83C61.65 14.05 93.29 0 128.02 0zm-5.95 54.42c0-1.95.8-3.73 2.08-5 2.74-2.77 7.27-2.76 10.02-.01l.14.16a7.042 7.042 0 0 1 1.94 4.85v12.95c0 1.95-.8 3.73-2.08 5.01-2.75 2.75-7.27 2.75-10.02 0a7.084 7.084 0 0 1-2.08-5.01V54.42zm6.05 31.17c11.72 0 22.32 4.75 30 12.43 7.67 7.68 12.43 18.29 12.43 30 0 11.72-4.75 22.32-12.43 30s-18.28 12.43-30 12.43c-11.72 0-22.32-4.75-30.01-12.43-7.67-7.68-12.43-18.28-12.43-30 0-11.72 4.76-22.32 12.43-30 7.69-7.67 18.3-12.43 30.01-12.43zm-56.33-5.34a7.114 7.114 0 0 1-2.07-5.01c0-3.9 3.18-7.09 7.09-7.09 1.81 0 3.62.69 5 2.07l9.16 9.16a7.065 7.065 0 0 1 2.08 5.01c0 1.8-.7 3.62-2.08 5.01a7.057 7.057 0 0 1-5.01 2.08c-1.8 0-3.61-.7-5-2.07l-9.17-9.16zm-17.28 53.81c-1.95 0-3.73-.8-5-2.08-2.77-2.74-2.76-7.27-.01-10.01l.15-.14a7.04 7.04 0 0 1 4.86-1.94h12.94a7.082 7.082 0 0 1 7.09 7.09c0 1.95-.8 3.73-2.07 5.01a7.099 7.099 0 0 1-5.02 2.07H54.51zm25.82 50.28a7.049 7.049 0 0 1-5 2.07c-3.91 0-7.09-3.16-7.09-7.08 0-1.81.68-3.62 2.07-5.01l9.31-9.29a7.02 7.02 0 0 1 4.86-1.94 7.09 7.09 0 0 1 7.09 7.09c0 1.79-.69 3.6-2.08 4.99l-9.16 9.17zm53.82 17.29c0 1.94-.8 3.73-2.08 5-2.74 2.76-7.27 2.75-10.02 0l-.13-.15a7.033 7.033 0 0 1-1.94-4.85v-12.95c0-1.96.8-3.73 2.07-5.01 2.76-2.75 7.27-2.75 10.03 0a7.1 7.1 0 0 1 2.07 5.01v12.95zm50.28-25.83a7.055 7.055 0 0 1 2.07 5.01c0 3.89-3.18 7.09-7.08 7.09-1.81 0-3.63-.69-5.01-2.07l-9.16-9.16a7.095 7.095 0 0 1-2.07-5.02c0-3.9 3.18-7.09 7.08-7.09 1.8 0 3.61.7 5 2.08l9.17 9.16zm17.29-53.82c1.93 0 3.73.81 5 2.08 2.76 2.75 2.75 7.27 0 10.02l-.15.14a7.098 7.098 0 0 1-4.85 1.94h-12.95c-1.96 0-3.74-.8-5.01-2.08-2.76-2.75-2.76-7.27 0-10.02a7.049 7.049 0 0 1 5.01-2.08h12.95zM175.89 71.7a7.074 7.074 0 0 1 5-2.07c3.9 0 7.1 3.19 7.1 7.09 0 1.81-.69 3.62-2.07 5l-9.32 9.31a7.12 7.12 0 0 1-4.86 1.93c-3.91 0-7.09-3.18-7.09-7.09 0-1.8.7-3.61 2.08-5l9.16-9.17zm34.17-41.87c2.96 2.47 5.81 5.07 8.53 7.8 23.22 23.15 37.63 55.17 37.63 90.39s-14.42 67.23-37.6 90.42a130.2 130.2 0 0 1-8.5 7.77h189.46c26.83 0 51.24-10.91 69.02-28.5l.32-.35c17.79-17.79 28.85-42.35 28.85-69.34 0-26.99-11.06-51.55-28.85-69.35-17.77-17.8-42.33-28.84-69.34-28.84H210.06zm-82.04-14.71h.18c62.09 0 112.89 50.81 112.89 112.9 0 62.1-50.86 112.9-112.89 112.9h-.18c-62.03 0-112.9-50.8-112.9-112.9 0-62.09 50.81-112.9 112.9-112.9z"/></svg>

+ 81
- 1
angular/src/assets/scss/_basics.scss Näytä tiedosto

@@ -78,10 +78,73 @@ body {
color: #fff;
}

.btn-logout {
width: 30px;
height: 30px;
padding: 0;
margin: 0 0 0 10px;
border: none;
background: transparent url("../images/icons/icon-logout.svg") no-repeat left top;
background-size: 100% auto;
}

.toggle-left-hand {
width: 30px;
height: 30px;
padding: 0;
margin: 0 0 0 10px;
border: none;
background: transparent url("../images/icons/icon-lefthand.svg") no-repeat left top;
background-size: 100% auto;

&.is-left {
background: transparent url("../images/icons/icon-lefthand-active.svg") no-repeat left top;
background-size: 100% auto;
}
}

.toggle-dark-mode {
width: 46px;
height: 23px;
padding: 0;
border: none;
margin: 0 0 0 10px;
background: transparent;

&.toggle-dark {
background: transparent url("../images/icons/light-mode-toggle-icon.svg") no-repeat left top;
background-size: 100% auto;
}

&.toggle-light {
background: transparent url("../images/icons/dark-mode-toggle-icon.svg") no-repeat left top;
background-size: 100% auto;
}
}

.btn-back {
width: 30px;
height: 30px;
background: transparent url("../images/icons/icon-back.svg") no-repeat left top;
background-size: 100% auto;
cursor: pointer;
@media only screen and (min-width: 1200px) {
position: relative;
z-index: 100;
}
}

.spt-headline {
@media only screen and (min-width: 1200px) {
margin: -32px 0 0 50px;
}
}

label,
.form-label {
font-size: 13px;
margin-bottom: 5px !important;

a {
color: rgba(33, 37, 41);
}
@@ -307,8 +370,10 @@ textarea#pasteCodes {
margin-bottom: 3px;
position: relative;
cursor: pointer;

&.small {
padding: 6px 10px 6px 83px;

&:before,
&:after {
top: 14px;
@@ -445,9 +510,11 @@ textarea#pasteCodes {
}
}
}

.mat-mdc-header-row {
height: auto;
}

img {
width: 30px;
}
@@ -590,12 +657,14 @@ textarea#pasteCodes {
width: 54px;
height: 28px;
margin: 0 !important;

input {
opacity: 0;
width: 0;
height: 0;
}
}

.slider {
position: absolute;
cursor: pointer;
@@ -605,6 +674,7 @@ textarea#pasteCodes {
bottom: 0;
background-color: #ccc;
transition: .4s;

&:before {
position: absolute;
content: "";
@@ -616,15 +686,19 @@ textarea#pasteCodes {
transition: .4s;
}
}

input:checked + .slider {
background-color: #2ecc71;
}

input:checked + .slider:before {
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
@@ -654,6 +728,7 @@ input[readonly], input:disabled {
font-size: 10px;
line-height: 13px;
}

.lastname {
top: 75%;
font-size: 8px;
@@ -678,7 +753,7 @@ input[readonly], input:disabled {
//transform: translate(-50%, -50%);
right: 0;
bottom: 0;
transform: translate(-10%,-46.3%);
transform: translate(-10%, -46.3%);
width: 65%;
}

@@ -747,11 +822,13 @@ input[readonly], input:disabled {
&:first-child {
border: none;
}

> div {
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 20px;

div {
&:first-child {
min-width: 300px;
@@ -804,13 +881,16 @@ input[readonly], input:disabled {
border: 1px solid #2b3b44;
padding: 10px 0;
max-height: 600px;

ul {
margin-right: 20px;

li {
border-bottom: 1px solid #eee;
padding: 3px 0;
}
}

p {
margin-bottom: 0;
}


+ 24
- 3
angular/src/assets/scss/_dark.scss Näytä tiedosto

@@ -1,5 +1,4 @@
.dark-mode {
.navbar-primary,
.spt-main,
.mat-mdc-table,
.mat-elevation-z8 th, .mat-mdc-elevation-specific.mat-elevation-z8 th,
@@ -7,6 +6,10 @@
background: #2b3a44 !important;
}

.navbar-primary {
background: #6a7277 !important;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1,
.mat-mdc-select,
.mat-mdc-select-arrow svg,
@@ -32,31 +35,49 @@
fill: #fff;
}

.toggle:before, .toggle:after {
.toggle:before, .toggle:after,
#btn-sidebar::after {
background: #fff;
}

.spt-dl dt,
.spt-dl dd,
.mat-mdc-cell,
.spt-container .card:not(.contacts .card, .tasks .card, .post .card) {
.spt-container .card:not(.contacts .card, .tasks .card, .post .card),
#btn-sidebar::before, #btn-sidebar::after,
.mat-elevation-z8 th, .mat-mdc-elevation-specific.mat-elevation-z8 th {
border-color: #fff;
}

.mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon {
fill: #3e525f;
}

.mat-mdc-tab-list .mat-ripple {
background: #4e697b;
}

.mat-mdc-table .mat-mdc-row:hover .mdc-data-table__cell,
.toggle,
.mat-mdc-tab-list .mdc-tab-indicator--active .mat-ripple {
background: #3e525f;
}

.spt-icon-details {
border-color: #3e525f;
}

.form-control,
select {
background: #1d262d !important;
}

.modal-content {
background-color: #6c757d;
}

.btn-back {
background-image: url("../images/icons/icon-back-white.svg");
background-size: 100% auto;
}
}

Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna