small improvements, version bump

buntspecht-backend/pom.xml

@@ -14,7 +14,7 @@
 		<maven.compiler.source>${java.version}</maven.compiler.source>
 		<maven.compiler.target>${java.version}</maven.compiler.target>
 		<querydsl.version>5.1.0</querydsl.version>
-		<revision>0.1.0</revision>
+		<revision>0.2.0</revision>
 	</properties>
 
 	<parent>

buntspecht-frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "buntspecht-web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "buntspecht-web",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "license": "AGPL3",
       "dependencies": {
         "@angular/animations": "^18.2.7",

buntspecht-frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buntspecht-web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "AGPL3",
   "scripts": {
     "ng": "ng",

buntspecht-frontend/src/app/pages/login/login.page.scss

@@ -6,11 +6,11 @@ img.logo {
 mat-form-field,
 mat-slide-toggle {
   display: block;
-  margin-bottom: 25px;
+  margin: 20px 0;
 }
 
 a.external-login {
-  margin: 15px 0;
+  margin: 20px 0;
   flex-basis: 100%;
   flex-shrink: 0;
 }

buntspecht-frontend/src/app/pages/notfound/notfound.page.scss

@@ -1,6 +1,6 @@
 .box {
   margin: 5px;
-  min-width: 400px;
+  min-width: 390px;
 
   @media screen and (min-width: 576px) {
     max-width: 100%;

buntspecht-frontend/src/app/pages/password/password.page.scss

@@ -1,11 +1,11 @@
 mat-form-field {
   display: block;
-  margin: 25px 0 !important;
+  margin: 20px 0 !important;
 }
 
 form {
   margin: 5px;
-  min-width: 400px;
+  min-width: 390px;
 
   @media screen and (min-width: 576px) {
     max-width: 100%;

buntspecht-frontend/src/app/pages/profile/profile.page.scss

@@ -1,12 +1,12 @@
 mat-form-field,
 mat-slide-toggle {
   display: block;
-  margin: 25px 0 !important;
+  margin: 20px 0 !important;
 }
 
 form {
   margin: 5px;
-  min-width: 400px;
+  min-width: 390px;
 
   @media screen and (min-width: 576px) {
     max-width: 100%;

buntspecht-frontend/src/app/pages/turnover/turnover.page.scss

@@ -1,6 +1,6 @@
 mat-form-field {
   display: block;
-  margin: 25px 0 !important;
+  margin: 20px 0 !important;
 }
 
 mat-chip mat-icon.mat-icon-inline {
@@ -10,7 +10,7 @@ mat-chip mat-icon.mat-icon-inline {
 
 form {
   margin: 5px;
-  min-width: 400px;
+  min-width: 390px;
 
   @media screen and (min-width: 576px) {
     max-width: 100%;

buntspecht-frontend/src/app/pages/unavailable/unavailable.page.scss

@@ -1,6 +1,6 @@
 .box {
   margin: 5px;
-  min-width: 400px;
+  min-width: 390px;
 
   @media screen and (min-width: 576px) {
     max-width: 100%;

buntspecht-frontend/src/app/pages/users/users.page.html

@@ -66,7 +66,7 @@
 
 
     <form [formGroup]="form" (ngSubmit)="createUser()" #formDirective="ngForm">
-        <div class="flex middle">
+        <div class="flex wrap middle">
             <mat-form-field class="margin">
                 <mat-label>{{'profile.username' | i18n}}</mat-label>
                 <input matInput formControlName="username" type="text" [required]="true">

buntspecht-frontend/src/app/ui/main/main.ui.html

@@ -9,10 +9,14 @@
     <span class="hide-small">{{'buntspecht' | i18n}}</span>
   </a>
   <span class="spacer"></span>
-  @if (authenticated) {
+  @if (authenticated && isBiggerScreen) {
   <a class="margin" routerLink="/create" mat-raised-button color="accent">
     <mat-icon>edit</mat-icon>
-    <span class="hide-small">{{'turnover.create' | i18n}}</span>
+    {{'turnover.create' | i18n}}
+  </a>
+  } @if (authenticated && !isBiggerScreen) {
+  <a class="margin" routerLink="/create" mat-mini-fab color="accent">
+    <mat-icon>edit</mat-icon>
   </a>
   }
   <ng-container>
@@ -59,26 +63,26 @@
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [opened]="opened" [autoFocus]="false"
+  <mat-sidenav #sidenav [mode]="isBiggerScreen ? 'side' : 'over'" [opened]="opened" [autoFocus]="false"
-    (click)="!isBiggerScreen() && this.close()">
+    (click)="!isBiggerScreen && this.close()">
     @if (authenticated) {
     <mat-nav-list>
-      <a routerLink="" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
+      <a routerLink="" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
         <mat-icon matListItemIcon>receipt</mat-icon>
         <span>{{(admin ? 'turnovers.mine' : 'turnovers') | i18n}}</span>
       </a>
       @if(admin) {
       <mat-divider></mat-divider>
-      <a routerLink="m" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
+      <a routerLink="m" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
         <mat-icon matListItemIcon>insert_chart_outlined</mat-icon>
         <span>{{'management' | i18n}}</span>
       </a>
-      <a routerLink="t" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
+      <a routerLink="t" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
         <mat-icon matListItemIcon>receipt_long</mat-icon>
         <span>{{'turnovers' | i18n}}</span>
       </a>
       <mat-divider></mat-divider>
-      <a routerLink="u" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
+      <a routerLink="u" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen && this.close()">
         <mat-icon matListItemIcon>people</mat-icon>
         <span>{{'users' | i18n}}</span>
       </a>

buntspecht-frontend/src/app/ui/main/main.ui.ts

@@ -30,6 +30,7 @@ export class UiMain {
   admin: boolean = false;
   debug: boolean = false;
   hasUpdate: boolean = false;
+  isBiggerScreen: boolean = false;
 
   touchThresh: number = 150;
   touchStartX: number;
@@ -88,8 +89,10 @@ export class UiMain {
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     if (width < 768) {
       this.opened = false;
+      this.isBiggerScreen = false;
     } else {
       this.opened = true;
+      this.isBiggerScreen = true;
     }
 
     if (localStorage.getItem("buntspecht.darkTheme") == "true") {
@@ -162,15 +165,6 @@ export class UiMain {
     })
   }
 
-  isBiggerScreen() {
-    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    if (width < 768) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
   openExternal(event, url, target = '_self') {
     window.open(url, target);
     this.preventClose(event);
@@ -180,8 +174,10 @@ export class UiMain {
   onResize(event) {
     if (event.target.innerWidth < 768) {
       this.opened = false;
+      this.isBiggerScreen = false;
     } else {
       this.opened = true;
+      this.isBiggerScreen = true;
     }
   }