From a14e83f2d820a7a6bc19ace79688b16621b57c68 Mon Sep 17 00:00:00 2001
From: isark <mail@isark.me>
Date: Fri, 17 Nov 2023 20:10:48 +0100
Subject: [PATCH] Editor upgrades, less custom css. More bootstrappy

---
 src/app/editor/editor.component.html | 137 ++++++++++++++-------------
 src/app/editor/editor.component.scss |  10 --
 2 files changed, 69 insertions(+), 78 deletions(-)

diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index 27737ab..3b567e9 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -1,82 +1,83 @@
-<div class="buttons m-2">
-  <button mat-raised-button color="primary" (click)="save()">Save plan</button>
-  <button mat-raised-button color="primary" (click)="openPlan()">Open plan for editing</button>
-  <button mat-raised-button color="primary" (click)="loadBasePlan()">Load base plan preset</button>
-</div>
-
-<div cdkDropListGroup *ngIf="areas" class="editor-container">
+<div class="h-100 d-flex flex-column">
+  <div class="buttons m-2">
+    <button mat-raised-button color="primary" (click)="save()">Save plan</button>
+    <button mat-raised-button color="primary" (click)="openPlan()">Open plan for editing</button>
+    <button mat-raised-button color="primary" (click)="loadBasePlan()">Load base plan preset</button>
+  </div>
 
-<div class="row">
-  
-</div>
+  <div class="d-flex flex-column overflow-hidden p-4">
+    <div class="row">
+      <div class="col-6">
+        <mat-form-field color="accent">
+          <mat-label>Area filter</mat-label>
+          <input matInput type="text" [(ngModel)]="areaSearchString">
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>Act filter</mat-label>
+          <mat-select [(value)]="filterAct">
+            <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
 
-  <div class="container">
-    <mat-form-field color="accent">
-      <mat-label>Area filter</mat-label>
-      <input matInput type="text" [(ngModel)]="areaSearchString">
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label>Act filter</mat-label>
-      <mat-select [(value)]="filterAct">
-        <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
-      </mat-select>
-      <!-- <select [(ngModel)]="filterAct">
-        <option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
-      </select> -->
-    </mat-form-field>
+      <div class="col-6">
+        <mat-slide-toggle color="accent" [(ngModel)]="autoScrollToEnd">Auto scroll to end on add to
+          end</mat-slide-toggle><mat-slide-toggle color="accent" [(ngModel)]="reverseDisplay">Reverse
+          display</mat-slide-toggle>
+        <button mat-stroked-button color="warn" (click)="clearPlan()">Clear</button>
 
-    <h2>Campaign zones</h2>
-    <div cdkDropList [cdkDropListData]="filterAreas()" class="list areas" cdkDropListSortingDisabled
-      (cdkDropListDropped)="dropHandler($event)">
-      <div class="box" *ngFor="let item of filterAreas()" cdkDrag (dblclick)="doubleClickArea(item)">
-        <div class="zone-name">{{item.name}}</div>
-        <div class="act">Act {{item.act}}</div>
+        <mat-form-field>
+          <mat-label>Area filter</mat-label>
+          <input matInput type="text" [(ngModel)]="planSearchString">
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>Act filter</mat-label>
+          <mat-select [(value)]="planFilterAct">
+            <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
+          </mat-select>
+        </mat-form-field>
       </div>
+
     </div>
 
-    
-  </div>
+    <div cdkDropListGroup *ngIf="areas" class="row overflow-hidden">
 
-  <div class="container">
-    <div class="d-flex flex-column right-settings">
-      <mat-slide-toggle color="accent" [(ngModel)]="autoScrollToEnd">Auto scroll to end on add to
-        end</mat-slide-toggle><mat-slide-toggle color="accent" [(ngModel)]="reverseDisplay">Reverse
-        display</mat-slide-toggle>
-      <button mat-stroked-button color="warn" (click)="clearPlan()">Clear</button>
 
-      <mat-form-field>
-        <mat-label>Area filter</mat-label>
-        <input matInput type="text" [(ngModel)]="planSearchString">
-      </mat-form-field>
-      <mat-form-field>
-        <mat-label>Act filter</mat-label>
-        <mat-select [(value)]="planFilterAct">
-          <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
-        </mat-select>
-        <!-- <select [(ngModel)]="planFilterAct">
-          <option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
-        </select> -->
-      </mat-form-field>
-    </div>
+      <div class="col-6 d-flex flex-column h-100">
+        <h2>Campaign zones</h2>
+        <div cdkDropList [cdkDropListData]="filterAreas()" class="list areas" cdkDropListSortingDisabled
+          (cdkDropListDropped)="dropHandler($event)">
+          <div class="box" *ngFor="let item of filterAreas()" cdkDrag (dblclick)="doubleClickArea(item)">
+            <div class="zone-name">{{item.name}}</div>
+            <div class="act">Act {{item.act}}</div>
+          </div>
+        </div>
+      </div>
 
-    <h2>Plan</h2>
-    <div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist"
-      (cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD"
-      [cdkDropListEnterPredicate]="canDrop">
-      <div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)">
-        <div class="content">
-          <div class="zone-name">{{areasMap?.get(item.area_key)?.name}}</div>
-          <div class="act">Act {{areasMap?.get(item.area_key)?.act}}</div>
+      <div class="col-6 d-flex flex-column h-100">
+        <h2>Plan</h2>
+        <div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list"
+          (cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD"
+          [cdkDropListEnterPredicate]="canDrop">
+          <div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)">
+            <div class="content">
+              <div class="zone-name">{{areasMap?.get(item.area_key)?.name}}</div>
+              <div class="act">Act {{areasMap?.get(item.area_key)?.act}}</div>
+            </div>
+            <div *ngIf="item.notes" class="notes">(Note)</div>
+            <div class="index">#{{planIndexOf(item)}}</div>
+            <div class="delete" (click)="remove(item)">+</div>
+          </div>
+        </div>
+        <div cdkDropList [cdkDropListData]="plan.plan" class="list end"
+          style="position: relative;display: flex; flex-direction: column; justify-content: center;"
+          (cdkDropListDropped)="dropEndHandler($event)">
+          <span style="position: absolute; ">Place at end of list</span>
         </div>
-        <div *ngIf="item.notes" class="notes">(Note)</div>
-        <div class="index">#{{planIndexOf(item)}}</div>
-        <div class="delete" (click)="remove(item)">+</div>
       </div>
     </div>
-    <div cdkDropList [cdkDropListData]="plan.plan" class="list planlist end"
-      style="position: relative;display: flex; flex-direction: column; justify-content: center;"
-      (cdkDropListDropped)="dropEndHandler($event)">
-      <span style="position: absolute; ">Place at end of list</span>
-    </div>
   </div>
+
+
+
 </div>
\ No newline at end of file
diff --git a/src/app/editor/editor.component.scss b/src/app/editor/editor.component.scss
index 0b2d620..30d405f 100644
--- a/src/app/editor/editor.component.scss
+++ b/src/app/editor/editor.component.scss
@@ -106,16 +106,6 @@
 .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder) {
   transition: transform 125ms cubic-bezier(0, 0, 0.2, 1);
 }
-
-.editor-container {
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-  justify-content: center;
-}
-
 .right-settings {
   gap: 8px;
 }
\ No newline at end of file