route animations

frontend/angular.json

@@ -18,7 +18,6 @@
       },
       "root": "",
       "sourceRoot": "src",
-      "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -37,7 +36,8 @@
               "debug",
               "buffer/",
               "sha.js"
-            ]
+            ],
+            "optimization": true
           },
           "configurations": {
             "production": {

frontend/src/app/app.animation.ts

@@ -0,0 +1,75 @@
+import {
+  animate,
+  query,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+
+// This shit worked so beautifully on firefox, but then chrome and angular had to come along and fuck it up
+// Because yes, chrome of course doesnt apply the opacity of an 'diplay: inline' element to its children.
+// Not so difficult right, just change the display to block or something?
+// Yes difficult, because of course the elements I need to apply it to, are all angular components.
+// I could manually add the css to every component, but that is the most stupid solution ever.
+// Maybe there is just an option to change that in angular itself?
+// Because putting 'block' elements inside 'inline' elements isnt even allowed per spec,
+//   surely angular would allow you to follow spec?
+// But no, of course not, having reasonable config options is stupid.
+// The only thing it allows you to do is automatically add the 'display: block' property to every new element with schematics
+// And every single issue that tries to properly fix this bug gets closed with this previous "solution" as answer.
+// It sooo fucking stupid.
+// Now I've just applied block to all the siblings of the router, since those are the only components that REALLY need it.
+// But I still think its a stupid solution.
+
+// Also, why the fuck doesnt 'display: none' work?
+// I'll just use this weird ass 'position: absolute' thingy for now.
+
+export const RouteTransitionAnimations = trigger('mainAnimation', [
+  transition('* => *', [
+    query(
+      ':enter',
+      [
+        style({
+          opacity: 0,
+          overflow: 'hidden',
+          position: 'absolute',
+          top: '-100%',
+          width: '0',
+          display: 'none',
+        }),
+      ],
+      {
+        optional: true,
+      }
+    ),
+
+    query(
+      ':leave',
+      [
+        style({ opacity: 1 }),
+        animate('.1s', style({ opacity: 0 })),
+        style({
+          position: 'absolute',
+          top: '-100%',
+          width: '0',
+          display: 'none',
+        }),
+      ],
+      { optional: true }
+    ),
+
+    query(
+      ':enter',
+      [
+        style({
+          opacity: 0,
+          display: 'block',
+          position: 'revert',
+          width: 'revert',
+        }),
+        animate('.1s', style({ opacity: 1 })),
+      ],
+      { optional: true }
+    ),
+  ]),
+]);

frontend/src/app/app.component.html

@@ -4,14 +4,22 @@
 ></app-header>
 
 <mat-sidenav-container class="grow-full">
-  <mat-sidenav class="sidenav-nav" [mode]="isDesktop ? 'side' : 'over'" opened="false">
+  <mat-sidenav
+    class="sidenav-nav"
+    [mode]="isDesktop ? 'side' : 'over'"
+    opened="false"
+  >
     <ng-template [cdkPortalOutlet]="sidebarPortal"></ng-template>
   </mat-sidenav>
 
   <mat-sidenav-content>
     <div class="sidenav-content" [class.container]="wrapContentWithContainer">
       <div class="header-spacer"></div>
-      <div class="grow-full" [class.container]="wrapContentWithContainer">
+      <div
+        class="grow-full"
+        [class.container]="wrapContentWithContainer"
+        [@mainAnimation]="getRouteAnimData()"
+      >
         <router-outlet></router-outlet>
       </div>
       <app-footer></app-footer>

frontend/src/app/app.component.ts

@@ -9,12 +9,14 @@ import {
   Router
 } from '@angular/router';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { RouteTransitionAnimations } from './app.animation';
 import { PRouteData } from './models/dto/picsur-routes.dto';
-
+let b = 0;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  animations: [RouteTransitionAnimations],
 })
 export class AppComponent implements OnInit {
   readonly logger = console;
@@ -33,6 +35,13 @@ export class AppComponent implements OnInit {
     private breakPointObserver: BreakpointObserver
   ) {}
 
+  public getRouteAnimData() {
+    // Everyone is doing shit with the activated route
+    // This seems so much cleaner tho
+    // Am I just missing something, or is everyone else missing something?
+    return this.router.url;
+  }
+
   public ngOnInit() {
     this.subscribeRouter();
     this.subscribeMobile();

frontend/src/app/app.routing.module.ts

@@ -11,6 +11,11 @@ import { ViewRouteModule } from './routes/view/view.module';
 const routes: PRoutes = [
   {
     path: '',
+    pathMatch: 'full',
+    redirectTo: 'upload',
+  },
+  {
+    path: 'upload',
     loadChildren: () => UploadRouteModule,
   },
   {
@@ -36,9 +41,7 @@ const routes: PRoutes = [
 ];
 
 @NgModule({
-  imports: [
-    RouterModule.forRoot(routes),
-  ],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

frontend/src/app/util/util.service.ts

@@ -44,4 +44,8 @@ export class UtilService {
       });
     });
   }
+
+  public async sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
 }

frontend/src/scss/fixes.scss

@@ -22,6 +22,12 @@ html {
   box-sizing: inherit;
 }
 
+router-outlet ~ * {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
 :not(input) {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -30,9 +36,8 @@ html {
 }
 
 .mat-icon {
-  // Yes yes, !important is here, deal with it
+  // Yes yes, !important is here, god damn css
   // If someone wants to properly figure out why icons are escaping their 24px box, feel free to
   height: initial !important;
   width: initial !important;
 }
-

frontend/src/scss/personal.scss

@@ -5,8 +5,6 @@
 
   border-style: solid;
   border-width: 5px;
-
-  transition: all 0.2s ease-in-out;
 }
 
 // Easily center content
@@ -65,8 +63,11 @@
 
 // Anim
 
-.container, .row > div {
-  transition: ease-in-out all 0.2s;
+.container,
+.row > div {
+  transition-property: max-width;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 
 .fullanimate,