config layout tweaks

This commit is contained in:
Joel Wetzell
2026-02-13 20:36:00 -06:00
parent b08aab869c
commit 4572f6bf7a
+31 -29
View File
@@ -1,24 +1,11 @@
@if (config()) {
<div class="flex h-full flex-row m-2 gap-1.5">
<div class="flex flex-col">
<div class="text-2xl text-white text-center">Modules</div>
<div class="flex-grow h-full overflow-scroll gap-1.5 border-2 border-gray-500">
@for (module of modules(); track module; let i = $index) {
<div>
<app-module
[path]="`modules/${i}`"
(moduleChange)="moduleUpdated(i, $event)"
[module]="module"
(delete)="deleteModule(i)"
></app-module>
</div>
}
</div>
<div class="flex mb-2">
<div class="flex h-full flex-row p-2 gap-1.5">
<div class="flex flex-col min-w-1/6 border-2 rounded-lg border-gray-500">
<div class="flex items-center">
@if (schemaService.moduleTypes.length > 0) {
<div
matTooltip="Add Module"
class="flex items-center justify-center w-full h-10 rounded-lg bg-gray-200 hover:cursor-pointer hover:bg-gray-300 m-2"
class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400 border-blue-400 border-2 m-2"
[matMenuTriggerFor]="addModuleMenu"
>
<mat-icon>add</mat-icon>
@@ -31,12 +18,36 @@
}
</mat-menu>
}
<div class="text-2xl text-white flex-grow text-center">Modules</div>
<div class="w-10 h-10 m-2"></div>
</div>
<div class="flex-grow h-full overflow-x-hidden overflow-y-auto gap-1.5">
@for (module of modules(); track module; let i = $index) {
<div>
<app-module
[path]="`modules/${i}`"
(moduleChange)="moduleUpdated(i, $event)"
[module]="module"
(delete)="deleteModule(i)"
></app-module>
</div>
}
</div>
</div>
<div class="flex flex-col flex-grow">
<div class="text-2xl text-white text-center w-full">Routes</div>
<div class="flex flex-col flex-grow border-2 border-gray-500 rounded-lg">
<div class="flex items-center">
<div
matTooltip="Add Route"
class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400 border-blue-400 border-2 m-2"
(click)="addRoute()"
>
<mat-icon>add</mat-icon>
</div>
<div class="text-2xl text-white text-center flex-grow">Routes</div>
<div class="w-10 h-10 m-2"></div>
</div>
<div
class="flex-grow h-full overflow-scroll flex flex-row flex-wrap gap-1.5 content-baseline border-2 border-gray-500"
class="flex-grow h-full overflow-x-hidden overflow-y-auto flex flex-row flex-wrap gap-1.5 content-baselinerounded-sm"
>
@for (route of routes(); track route; let i = $index) {
<div>
@@ -50,15 +61,6 @@
</div>
}
</div>
<div class="flex mb-2">
<div
matTooltip="Add Route"
class="flex items-center justify-center w-full h-10 rounded-lg m-2 bg-gray-200 hover:cursor-pointer hover:bg-gray-300"
(click)="addRoute()"
>
<mat-icon>add</mat-icon>
</div>
</div>
</div>
</div>
}