jwetzell/showbridge-webui
1
0
Fork 0
mirror of https://github.com/jwetzell/showbridge-webui.git synced 2026-09-04 12:58:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

config layout tweaks

Browse Source
This commit is contained in:
Joel Wetzell
2026-02-13 20:36:00 -06:00
parent b08aab869c
commit 4572f6bf7a
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/config/config.component.html
+31 -29
View File
@@ -1,24 +1,11 @@
@if (config()) { @if (config()) {
<div class="flex h-full flex-row m-2 gap-1.5"> <div class="flex h-full flex-row p-2 gap-1.5">
<div class="flex flex-col"> <div class="flex flex-col min-w-1/6 border-2 rounded-lg border-gray-500">
<div class="text-2xl text-white text-center">Modules</div> <div class="flex items-center">
<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">
@if (schemaService.moduleTypes.length > 0) { @if (schemaService.moduleTypes.length > 0) {
<div <div
matTooltip="Add Module" 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" [matMenuTriggerFor]="addModuleMenu"
> >
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
@@ -31,12 +18,36 @@
} }
</mat-menu> </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> </div>
<div class="flex flex-col flex-grow"> <div class="flex flex-col flex-grow border-2 border-gray-500 rounded-lg">
<div class="text-2xl text-white text-center w-full">Routes</div> <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 <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) { @for (route of routes(); track route; let i = $index) {
<div> <div>
@@ -50,15 +61,6 @@
</div> </div>
} }
</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>
</div> </div>
} }