Fixed Responsiveness, Refactored title, context path, application key

SoftwareAG · Apr 25, 2023 · 3cb439d · 3cb439d
1 parent ea441b0
commit 3cb439d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Cumulocity Silo Capacity Widget Plugin [<img width="35" src="https://user-images.githubusercontent.com/32765455/211497905-561e9197-18b9-43d5-a023-071d3635f4eb.png"/>](https://github.com/SoftwareAG/cumulocity-silo-capacity-widget-plugin/releases/download/1.0.1-beta/silo-capacity-widget-1.0.1-beta.zip)
+# Cumulocity Silo Capacity Widget Plugin [<img width="35" src="https://user-images.githubusercontent.com/32765455/211497905-561e9197-18b9-43d5-a023-071d3635f4eb.png"/>](https://github.com/SoftwareAG/cumulocity-silo-capacity-widget-plugin/releases/download/1.0.1/sag-ps-pkg-silo-capacity-1.0.1.zip)
 
 Cumulocity Silo Capacity Widget is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. It displays a configurable silo capacity graphic with fill levels, foreground image overlay, optional background image and colorized thresholds.
 
@@ -31,7 +31,7 @@ Cumulocity Silo Capacity Widget is the Cumulocity module federation plugin creat
 ## Installation
 ### Runtime Widget Deployment?
 
-* This widget support runtime deployment. Download [Runtime Binary](https://github.com/SoftwareAG/cumulocity-silo-capacity-widget-plugin/releases/download/1.0.1-beta/silo-capacity-widget-1.0.1-beta.zip) and install via Administrations --> Ecosystems --> Applications --> Packages 
+* This widget support runtime deployment. Download [Runtime Binary](https://github.com/SoftwareAG/cumulocity-silo-capacity-widget-plugin/releases/download/1.0.1/sag-ps-pkg-silo-capacity-1.0.1.zip) and install via Administrations --> Ecosystems --> Applications --> Packages 
 
 ## QuickStart
 

diff --git a/widget/silo-capacity-widget.component.css b/widget/silo-capacity-widget.component.css
@@ -143,4 +143,19 @@ input {
 
 .threshold-normal {
     color: green;
+}
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.flex-item-left {
+    padding-left: 16px;
+    flex: 50%;
+}
+
+.flex-item-right {
+    padding-left: 10px;
+    flex: 50%;
 }
diff --git a/widget/silo-capacity-widget.component.html b/widget/silo-capacity-widget.component.html
@@ -1,10 +1,10 @@
-<div class="row no-margin">
-    <div class="col-sm-3 col-md-6 col-lg-5">
+<div class="flex-container">
+    <div class="flex-item-left">
         <div class="images-container" [ngStyle]="(measurementContainerStyle | async)">
             <ng-container *ngIf="config.showForegroundImage === true && calculatedForegroundImageHeight">
                 <div class="image-container">
                     <div class="foreground-image">
-                        <img #foregroundImagePlaceHolder [src]="getForegroundImage()"
+                        <img #foregroundImagePlaceHolder [src]="getForegroundImage()" class="img-responsive"
                             [ngStyle]="{'width': 'auto', 'height': calculatedForegroundImageHeight.toString() + 'px', 'margin-left': config.foregroundImageLeftMargin.toString() + 'px', 'margin-top': config.foregroundImageTopMargin.toString() + 'px'}"
                             alt="Foreground image" />
                     </div>
@@ -14,7 +14,7 @@
             <ng-container *ngIf="config.showBackgroundImage === true && calculatedForegroundImageHeight">
                 <div class="image-container">
                     <div class="background-image">
-                        <img #backgroundImagePlaceHolder [src]="getBackgroundImage()"
+                        <img #backgroundImagePlaceHolder [src]="getBackgroundImage()" class="img-responsive"
                             [ngStyle]="{'width': 'auto', 'height': calculatedBackgroundImageHeight.toString() + 'px', 'left': config.backgroundImageLeftMargin.toString() + 'px', 'top': config.backgroundImageTopMargin.toString() + 'px'}"
                             alt="Background image" />
                     </div>
@@ -44,7 +44,7 @@
             </ng-container>
         </div>
     </div>
-    <div class="col-sm-9 col-md-6 col-lg-7">
+    <div class="flex-item-right">
         <div class="measurement-container" [ngStyle]="(measurementContainerStyle | async)">
             <ng-container *ngIf="config.fillLevelMaximumLabel && config.fillLevelMaximumLabel.length > 0">
                 <p class="measurement-label">{{config.fillLevelMaximumLabel}}</p>