Merge pull request #278 from iteratec/bugfix/buttonAndHeaderTextOverflow

Bugfix: aggregation chart menu overflow

Author: DanielSteger

frontend/src/app/modules/aggregation/components/aggregation-chart/aggregation-chart.component.html

@@ -64,12 +64,13 @@
           </li>
         </ng-container>
       </ul>
-    </div>
 
-    <div class="in-chart-buttons">
-      <a data-toggle="modal" role="button" title="Download as PNG">
-        <i class="fas fa-download"></i>
-      </a>
+      <div class="in-chart-buttons">
+        <a data-toggle="modal" role="button" title="Download as PNG">
+          <i class="fas fa-download"></i>
+        </a>
+      </div>
+
     </div>
 
     <div class="svg-container">

frontend/src/app/modules/aggregation/components/aggregation-chart/aggregation-chart.component.scss

@@ -11,21 +11,35 @@ svg.aggregation-chart-svg {
 }
 
 .in-chart-buttons {
-  position: absolute;
-  top: 10px;
-  right: 10px;
   z-index: 2;
+  position: relative;
+  top: 0;
+  right: 0;
 }
 
-.filter-dropdown-group {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  z-index: 2;
-  top: 4px;
-  right: 50px;
-  padding: 6px 12px;
+@media screen and (max-width: 1650px) {
+  .filter-dropdown-group {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 2;
+    padding: 6px 12px;
+  }
+}
 
+@media screen and (min-width: 1651px) {
+  .filter-dropdown-group {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 4px;
+    right: 0;
+    z-index: 2;
+    padding: 6px 12px;
+  }
+}
+
+.filter-dropdown-group {
   ul > li > a {
     cursor: pointer;
   }

frontend/src/app/modules/aggregation/components/aggregation-chart/aggregation-chart.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild} from '@angular/core';
+import {Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation} from '@angular/core';
 import {ChartCommons} from "../../../../enums/chart-commons.enum";
 import {select} from 'd3-selection';
 import {max} from "d3-array";

frontend/src/app/modules/result-selection/components/measurands/measurands.component.html

@@ -2,12 +2,14 @@
   <h2>{{ 'frontend.de.iteratec.osm.resultSelection.measurands.title' | translate }}</h2>
 
   <div class="measurand-card-content">
-    <div class="row form-group" *ngFor="let metric of selectedMeasurands; index as i; trackBy:trackByFn; first as isFirst">
+    <div class="row form-group"
+         *ngFor="let metric of selectedMeasurands; index as i; trackBy:trackByFn; first as isFirst">
       <label class="control-label col-sm-3" *ngIf="isFirst">
         {{ 'frontend.de.iteratec.osm.resultSelection.measurands.title' | translate }}:
       </label>
       <div class="col-sm-8" [ngClass]="{'col-sm-offset-3': !isFirst}">
-        <osm-measurand-select [selectedMeasurand]="metric" [perfAspectTypes$]="aspectTypes$" [selectableMeasurandGroups]="measurands$"
+        <osm-measurand-select [selectedMeasurand]="metric" [perfAspectTypes$]="aspectTypes$"
+                              [selectableMeasurandGroups]="measurands$"
                               (onSelect)="selectMeasurand(i, $event)"></osm-measurand-select>
       </div>
       <div class="col-sm-1 remove-measurand" *ngIf="!isFirst">
@@ -19,7 +21,9 @@ <h2>{{ 'frontend.de.iteratec.osm.resultSelection.measurands.title' | translate }
 
     <div class="row form-group" *ngIf="multipleMeasurands">
       <div class="col-sm-8 col-sm-offset-3">
-        <button type="button" id="add-measurand-button" class="btn btn-default btn-block" (click)="addMeasurandField()" [disabled]="resultSelectionStore.remainingResultSelection.fromComparative || resultSelectionStore.remainingResultSelection.toComparative">
+        <button type="button" id="add-measurand-button" class="btn btn-default btn-block" (click)="addMeasurandField()"
+                [title]="'frontend.de.iteratec.osm.resultSelection.measurands.add' | translate"
+                [disabled]="resultSelectionStore.remainingResultSelection.fromComparative || resultSelectionStore.remainingResultSelection.toComparative">
           <i class="fas fa-plus"></i> {{ 'frontend.de.iteratec.osm.resultSelection.measurands.add' | translate }}
         </button>
       </div>

frontend/src/app/modules/result-selection/components/measurands/measurands.component.scss

@@ -10,3 +10,8 @@
   margin-top: 20px;
   margin-bottom: 20px;
 }
+
+#add-measurand-button {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.html

@@ -76,7 +76,8 @@ <h2>
 
   <div class="row form-group" *ngIf="!comparativeSelectionActive && showComparativeTimeFrame">
     <div class="col-md-8 col-md-offset-3">
-      <button type="button" id="show-comparative-button" class="btn btn-default btn-block" (click)="toggleComparativeSelection()" [disabled]="resultSelectionStore.remainingResultSelection.measurands?.length > 1">
+      <button type="button" id="show-comparative-button" class="btn btn-default btn-block" [title]="'frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.heading' | translate"
+              (click)="toggleComparativeSelection()" [disabled]="resultSelectionStore.remainingResultSelection.measurands?.length > 1">
         <i class="fas fa-plus"></i> {{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.heading' | translate }}
       </button>
     </div>

frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.scss

@@ -21,3 +21,8 @@
 .time-frame-label {
   text-align: right;
 }
+
+#show-comparative-button {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}