chore: layout changes

apps/taiga-lumbermill/src/components/app/app.component.ts → apps/taiga-lumbermill/src/app/app.component.ts

@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TUI_DARK_MODE, TuiRoot} from '@taiga-ui/core';
 
-import {NavigationComponent} from '../navigation/navigation.component';
+import {NavigationComponent} from '../components/navigation/navigation.component';
 
 @Component({
     standalone: true,

apps/taiga-lumbermill/src/components/app/app.routes.ts → apps/taiga-lumbermill/src/app/app.routes.ts

@@ -4,52 +4,50 @@ export const appRoutes: Route[] = [
     {
         path: 'dashboards',
         loadComponent: async () =>
-            import('../list/list.component').then((mod) => mod.ListComponent),
+            import('../components/list/list.component').then((mod) => mod.ListComponent),
     },
     {
         path: 'dashboards/iot',
         loadComponent: async () =>
-            import('../../dashboards/iot/iot.component').then((mod) => mod.IotComponent),
+            import('../dashboards/iot/iot.component').then((mod) => mod.IotComponent),
         data: {title: 'Iot'},
     },
     {
         path: 'dashboards/crypto',
         loadComponent: async () =>
-            import('../../dashboards/crypto/crypto.component').then(
+            import('../dashboards/crypto/crypto.component').then(
                 (mod) => mod.CryptoComponent,
             ),
         data: {title: 'Crypto'},
     },
     {
         path: 'pages',
         loadComponent: async () =>
-            import('../list/list.component').then((mod) => mod.ListComponent),
+            import('../components/list/list.component').then((mod) => mod.ListComponent),
     },
     {
         path: 'pages/login',
         loadComponent: async () =>
-            import('../../features/login/login.component').then(
-                (mod) => mod.LoginComponent,
-            ),
+            import('../features/login/login.component').then((mod) => mod.LoginComponent),
     },
     {
         path: 'pages/sign-up',
         loadComponent: async () =>
-            import('../../features/sign-up/sign-up.component').then(
+            import('../features/sign-up/sign-up.component').then(
                 (mod) => mod.SignUpComponent,
             ),
     },
     {
         path: 'color-generator',
         loadComponent: async () =>
-            import('../../features/theme-generator/theme-generator.component').then(
+            import('../features/theme-generator/theme-generator.component').then(
                 (mod) => mod.ThemeGeneratorComponent,
             ),
     },
     {
         path: '',
         loadComponent: async () =>
-            import('../../components/common-page/common-page.component').then(
+            import('../components/common-page/common-page.component').then(
                 (mod) => mod.CommonPageComponent,
             ),
     },

apps/taiga-lumbermill/src/components/common-page/common-page.component.less

@@ -14,7 +14,7 @@
 }
 
 .action-button {
-    margin: 0 auto;
+    margin: 1rem auto;
 }
 
 .cards {

apps/taiga-lumbermill/src/components/list/list.component.html

@@ -18,6 +18,7 @@
         tuiCardLarge
         tuiHeader
         tuiSurface="elevated"
+        class="lmb-list-card"
         [routerLink]="card.link"
     >
         <h2 tuiTitle>

apps/taiga-lumbermill/src/components/list/list.component.less

@@ -1,5 +1,19 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
 :host {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-gap: 1rem;
+}
+
+.lmb-list-card {
+    grid-column: span 6;
+    grid-gap: 1rem;
+}
+
+@media @tui-mobile {
+    .lmb-list-card {
+        grid-column: span 12;
+        grid-gap: 1rem;
+    }
 }

apps/taiga-lumbermill/src/components/navigation/navigation.component.html

@@ -180,6 +180,6 @@
         </footer>
     </aside>
     <main tuiNavigationMain>
-        <router-outlet [style.display]="'none'" />
+        <router-outlet [style.display]="'contents'" />
     </main>
 </div>

apps/taiga-lumbermill/src/components/navigation/navigation.component.less

@@ -2,10 +2,19 @@
 
 .aside-bar {
     block-size: calc(100vh - 3rem);
+
+    & + main[tuiNavigationMain] {
+        grid-auto-rows: min-content;
+    }
 }
 
 @media @tui-mobile {
     .aside-bar {
         display: none;
+        inline-size: 100%;
+
+        & + main[tuiNavigationMain] {
+            max-inline-size: 100%;
+        }
     }
 }

apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.html

@@ -14,6 +14,8 @@
     <div class="info">
         <img
             alt="logo"
+            height="144"
+            width="144"
             class="logo"
             [ngSrc]="tracks[activeIndex].logo"
         />

apps/taiga-lumbermill/src/main.server.ts

@@ -1,8 +1,8 @@
 import type {ApplicationRef} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {AppComponent} from './components/app/app.component';
-import {config} from './components/app/app.config.server';
+import {AppComponent} from './app/app.component';
+import {config} from './app/app.config.server';
 
 const bootstrap = async (): Promise<ApplicationRef> =>
     bootstrapApplication(AppComponent, config);

apps/taiga-lumbermill/src/main.ts

@@ -2,7 +2,7 @@
 
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {AppComponent} from './components/app/app.component';
-import {appConfig} from './components/app/app.config';
+import {AppComponent} from './app/app.component';
+import {appConfig} from './app/app.config';
 
 bootstrapApplication(AppComponent, appConfig).catch((err: any) => console.error(err));

apps/taiga-lumbermill/src/styles.less

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+[tuiNavigationNav] {
+    grid-column: span 12;
+}