Skip to content

Commit

Permalink
Columns 2 & 3 improved
Browse files Browse the repository at this point in the history
  • Loading branch information
@artisticlight
artisticlight committed Jul 11, 2024
1 parent 598d838 commit bcea43f
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 40 deletions.
43 changes: 20 additions & 23 deletions ...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
View file
Original file line number Diff line number Diff line change
@@ -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;">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
45 changes: 28 additions & 17 deletions ...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -33,7 +32,7 @@
line-height: 26px !important;
}

.timeseries-filter-row {
.ts-filter-row {
display: flex;
flex-direction: column;
width: 100%;
Expand All @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -114,7 +125,7 @@
top: 0;
}

.timeseries-resize-handle-filler {
.ts-resize-handle-filler {
@include themify($themes) {
background-color: themed('primary-light');
}
Expand All @@ -131,7 +142,7 @@
height: 33px;
}

.timeseries-header {
.ts-header {
@include themify($themes) {
background-color: themed('primary-light');
color: themed('dark-primary-text')
Expand Down Expand Up @@ -171,7 +182,7 @@
}
}

.timeseries-ribbon-group {
.ts-ribbon-group {
justify-content: center;
max-width: fit-content;
}
Expand All @@ -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;
}
Expand Down

0 comments on commit bcea43f

Please sign in to comment.