From bcea43f1c6c6aa9fdd9b43fcdb6c0da76d0ab0f3 Mon Sep 17 00:00:00 2001
From: Andrew Anderson <raanderson9@alaska.edu>
Date: Thu, 11 Jul 2024 15:37:48 -0700
Subject: [PATCH] Columns 2 & 3 improved

---
 .../timeseries-results-menu.component.html    | 43 +++++++++---------
 .../timeseries-results-menu.component.scss    | 45 ++++++++++++-------
 2 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
index ed73cff3e..2edb5cacc 100644
--- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
+++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
@@ -1,29 +1,26 @@
 <!-- SCENE LIST -->
 <ng-container *ngIf="breakpoint > breakpoints.MOBILE">
-	<mat-card #listCard class="mp0 timeseries-list-card">
-		<mat-card-subtitle class=" timeseries-scene-list-header header">
+
+	<mat-card #listCard class="mp0 ts-list-card">
+		<mat-card-subtitle class="header ts-scene-list-header">
 			<app-scenes-list-header></app-scenes-list-header>
 		</mat-card-subtitle>
 
 		<div>
 			<mat-radio-group>
-
 				@for (point of pointHistory; track $index) {
 					<mat-radio-button color="primary">
 						{{point.flatCoordinates[0]}}, {{point.flatCoordinates[1]}}
 					</mat-radio-button>
 				}
-
-				</mat-radio-group>
+			</mat-radio-group>
 		</div>
-
 	</mat-card>
 
-	<mat-card class="mp0 timeseries-list-card" [style.width]="listCardMaxWidth">
-		<mat-card-subtitle style="display: flex; flex-direction: row; justify-content: center; align-items: flex-start;"
-			class="header">
+	<mat-card class="mp0 ts-list-card ts-layer-list" >
+		<mat-card-subtitle class="header ts-layer-list-header">
 		</mat-card-subtitle>
-		<div class="timeseries-metadata scrollable">
+		<div class="ts-metadata scrollable">
 			<app-scenes-list [resize$]="resize$"></app-scenes-list>
 			<div *ngIf="false" style="margin: 5px; padding-bottom: 36px;">
 				<div class="faint-text w100 h100" style="text-align: center; padding-top: 10px;">
@@ -34,21 +31,21 @@
 	</mat-card>
 </ng-container>
 
-<mat-card #chartCard class="mp0 timeseries-chart-card" [style.max-width]="chartCardMaxWidth" style="box-shadow: none;"
+<mat-card #chartCard class="mp0 ts-chart-card"
 	mwlResizable [enableGhostResize]="true" (resizeEnd)="onResizeEnd($event)">
-	<div mwlResizeHandle [resizeEdges]="{ left: true }" class="chart-draggable-handle timeseries-resize-handle-filler">
+	<div mwlResizeHandle [resizeEdges]="{ left: true }" class="chart-draggable-handle ts-resize-handle-filler">
 		<mat-icon svgIcon="vgrip" class="vgrip-icon"></mat-icon>
 
 	</div>
-	<mat-card-subtitle [class.medium-header]="breakpoint <= breakpoints.MEDIUM" class="timeseries-header">
+	<mat-card-subtitle [class.medium-header]="breakpoint <= breakpoints.MEDIUM" class="ts-header">
 
-		<div class="timeseries-button-group">
+		<div class="ts-button-group">
 			<div class="button-group-label">
 				<label>{{ 'ZOOM' | translate }}</label>
 			</div>
 			<div class="fx-row">
 				<div>
-					<mat-button-toggle-group class="timeseries-toggle-group" name="layerType">
+					<mat-button-toggle-group class="ts-toggle-group" name="layerType">
 						<mat-button-toggle class="control-mat-button-toggle" (click)="zoomIn()"
 							matTooltip="{{ 'ZOOM_IN' | translate }}">
 							<mat-icon class="control-icon">add</mat-icon>
@@ -68,15 +65,15 @@
 			</div>
 		</div>
 
-		<div class="timeseries-button-group-filler timeseries-button-group"></div>
+		<div class="ts-button-group-filler ts-button-group"></div>
 
-		<div class="timeseries-button-group-filler timeseries-button-group"></div>
-		<div class='timeseries-button-group'>
+		<div class="ts-button-group-filler ts-button-group"></div>
+		<div class='ts-button-group'>
 			<div class="button-group-label">
 				<label>{{ 'FILTERS' | translate }}</label>
 			</div>
 			<div class="toggle-group-wrapper--layout">
-				<mat-button-toggle class="control-mat-button-toggle timeseries-criteria-button-toggle"
+				<mat-button-toggle class="control-mat-button-toggle ts-criteria-button-toggle"
 					(click)="onToggleFiltersMenu()">
 					{{ 'TIMESERIES FILTERS' | translate }}<mat-icon class="more-horiz">more_horiz</mat-icon>
 				</mat-button-toggle>
@@ -88,15 +85,15 @@
 	<div class="resize-handle-left" mwlResizeHandle [resizeEdges]="{ left: true }">
 	</div>
 
-	<div class="timeseries-chart-row">
-		<div class="timeseries-column-1">
+	<div class="ts-chart-row">
+		<div class="ts-column-1">
 		</div>
 
-		<div id="timeseries-chart-column" class="timeseries-column-2">
+		<div id="ts-chart-column" class="ts-column-2">
 			<app-timeseries-chart></app-timeseries-chart>
 		</div>
 	</div>
 
-	<div class="timeseries-filter-row">
+	<div class="ts-filter-row">
 	</div>
 </mat-card>
diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss
index 5576ee8bf..daadc9fa0 100644
--- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss
+++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss
@@ -2,27 +2,26 @@
 
 @import "asf-theme";
 
-.timeseries-chart-row {
+.ts-chart-row {
 	display: flex;
 	flex-direction: row;
 	height: calc(100% - 137px);
 }
 
-.timeseries-chart-card {
+.ts-chart-card {
 	box-shadow: none;
 	height: 100%;
 	width: 100%;
-	max-width: 60%;
 	flex: 1 1 100%;
 	box-sizing: border-box;
 }
 
-.timeseries-criteria-button-toggle-group {
+.ts-criteria-button-toggle-group {
 	flex: 0 1 149px !important;
 	margin-top: 5px;
 }
 
-.timeseries-criteria-button-toggle {
+.ts-criteria-button-toggle {
 	background: red;
 	font-size: 14px;
 }
@@ -33,7 +32,7 @@
 	line-height: 26px !important;
 }
 
-.timeseries-filter-row {
+.ts-filter-row {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -45,23 +44,35 @@
 	padding: 2px 10px;
 }
 
-.timeseries-column-1 {
+.ts-column-1 {
 	flex-basis: 150px;
 	flex-shrink: 0;
 	flex-grow: 0;
 }
 
-.timeseries-column-2 {
+.ts-column-2 {
 	flex: 1 1 auto;
 }
 
-.timeseries-list-card {
+.ts-list-card {
 	box-shadow: none !important;
 	box-sizing: border-box;
   width: 130px;
 }
 
-.timeseries-scene-list-header {
+.ts-layer-list {
+  flex-basis: 500px;
+  flex-grow: 0;
+}
+
+.ts-layer-list-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.ts-scene-list-header {
   justify-content: flex-start;
   align-items: center;
   flex-basis: 130px;
@@ -70,7 +81,7 @@
   max-width: 130px;
 }
 
-.timeseries-metadata {
+.ts-metadata {
 	@include themify($themes) {
 		border-left: solid 1px themed('primary-light');
 		border-right: solid 2px themed('primary-light');
@@ -114,7 +125,7 @@
 	top: 0;
 }
 
-.timeseries-resize-handle-filler {
+.ts-resize-handle-filler {
 	@include themify($themes) {
 		background-color: themed('primary-light');
 	}
@@ -131,7 +142,7 @@
 	height: 33px;
 }
 
-.timeseries-header {
+.ts-header {
 	@include themify($themes) {
 		background-color: themed('primary-light');
 		color: themed('dark-primary-text')
@@ -171,7 +182,7 @@
 	}
 }
 
-.timeseries-ribbon-group {
+.ts-ribbon-group {
 	justify-content: center;
 	max-width: fit-content;
 }
@@ -184,18 +195,18 @@
 	align-items: stretch;
 }
 
-.timeseries-button-group {
+.ts-button-group {
 	max-width: fit-content;
 	flex: 1 1 0%;
 	box-sizing: border-box;
 }
 
-.timeseries-button-group-filler {
+.ts-button-group-filler {
 	width: 10px;
 	max-width: 10px;
 }
 
-.timeseries-toggle-group {
+.ts-toggle-group {
 	flex: 1 1 0%;
 	box-sizing: border-box;
 }