Improved styling

albaintor · Oct 7, 2024 · 7a296ad · 7a296ad
1 parent 566bd1a
commit 7a296ad
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/app/active-entities/active-entities.component.css b/src/app/active-entities/active-entities.component.css
@@ -1,3 +1,8 @@
+.smaller-dropdown .p-inputtext
+{
+  font-size: 0.6rem;
+}
+
 .charging-status {
   position: absolute;
   left: 50%;
@@ -61,13 +66,12 @@
 .cdk-drag-preview {
   border-radius: 20px;
   border: 2px solid rgba(255, 255, 255, 0.73);
+  background-color: black;
   position: relative;
   transition: none;
   padding: 5px;
   box-sizing: border-box;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-  0 8px 10px 1px rgba(0, 0, 0, 0.14),
-  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:  10px 5px 25px rgba(255, 255, 255, 0.5);
 }
 
 .cdk-drag-placeholder {

diff --git a/src/app/active-entities/active-entities.component.html b/src/app/active-entities/active-entities.component.html
@@ -3,31 +3,32 @@
   <ng-template pTemplate="end">
     <div class="flex align-items-center gap-2">
       <p-dropdown [(ngModel)]="selectedDashboard" [options]="dashboards" placeholder="Select dashboard"
-                  (ngModelChange)="selectDashboard($event)" optionLabel="name">
+                  (ngModelChange)="selectDashboard($event)" optionLabel="name" class="smaller-dropdown">
       </p-dropdown>
       <p-button icon="pi pi-save" pTooltip="Save dashboard to browser cache"
                 label="Save dashboard" (click)="showDashboardDialog = true"/>
       Scale :
       <p-inputNumber [(ngModel)]="scale" pTooltip="Scale elements" min="0.1" max="3" (ngModelChange)="Helper.setScale(scale)" mode="decimal"
                      [minFractionDigits]="1"
                      [maxFractionDigits]="1" [inputStyle]="{width: '40px'}"/>&nbsp;
-      Play activities :
+      Activities :
       <p-autoComplete [(ngModel)]="newActivity" [dropdown]="true" [suggestions]="suggestedActivities" (completeMethod)="searchActivities($event)" appendTo="body"
-                      [style]="{'width':'100%'}" panelStyleClass="autocomplete-panel-custom" [inputStyle]="{'width':'100%'}" optionLabel="entity_id" (ngModelChange)="addActivity($event)"
+                      [style]="{'width':'50px'}" panelStyleClass="autocomplete-panel-custom" [inputStyle]="{'width':'100%'}" optionLabel="entity_id" (ngModelChange)="addActivity($event)"
                       pTooltip="View activity">
         <ng-template let-item pTemplate="item">
           <div><b>{{Helper.getEntityName(item)}}</b></div>
         </ng-template>
       </p-autoComplete>
-      Add entities :
+      Entities :
       <p-autoComplete [(ngModel)]="newEntity" [dropdown]="true" [suggestions]="suggestions" (completeMethod)="searchEntities($event)" appendTo="body"
-                      [style]="{'width':'100%'}" panelStyleClass="autocomplete-panel-custom" [inputStyle]="{'width':'100%'}" optionLabel="entity_id" (ngModelChange)="addEntity($event)"
+                      [style]="{'width':'50px'}" panelStyleClass="autocomplete-panel-custom" [inputStyle]="{'width':'100%'}" optionLabel="entity_id" (ngModelChange)="addEntity($event)"
                       pTooltip="Add entity">
         <ng-template let-item pTemplate="item">
           <div><b>{{Helper.getEntityName(item)}}</b></div>
         </ng-template>
       </p-autoComplete>
-      <p-dropdown [(ngModel)]="selectedRemote" [options]="remotes" placeholder="Select remote" (ngModelChange)="setRemote(selectedRemote!)">
+      <p-dropdown [(ngModel)]="selectedRemote" [options]="remotes" placeholder="Select remote" (ngModelChange)="setRemote(selectedRemote!)"
+        class="smaller-dropdown">
         <ng-template pTemplate="selectedItem">
           <ng-container *ngIf="selectedRemote">{{selectedRemote.remote_name}} ({{selectedRemote.address}})</ng-container>
           <ng-container *ngIf="!selectedRemote">No remote selected</ng-container>