fix: layout color box in import

onecx · Sep 27, 2024 · 7daaf06 · 7daaf06
1 parent c4f2edc
commit 7daaf06
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/app/shared/theme-color-box/theme-color-box.component.scss b/src/app/shared/theme-color-box/theme-color-box.component.scss
@@ -14,6 +14,6 @@
   }
   // height of a normal text input control
   .h-inputtext {
-    height: 2.786rem;
+    height: 2.786rem !important;
   }
 }
diff --git a/src/app/theme/theme-import/theme-import.component.html b/src/app/theme/theme-import/theme-import.component.html
@@ -25,13 +25,13 @@
     [cancelLabel]="'ACTIONS.CANCEL' | translate"
     [chooseLabel]="'ACTIONS.CHOOSE' | translate"
   ></p-fileUpload>
-  <div *ngIf="themeSnapshot" class="flex flex-wrap justify-content-start align-items-center gap-2 mt-4">
-    <span class="p-float-label" controlErrorAnchor>
+  <div *ngIf="themeSnapshot" class="flex flex-wrap justify-content-start align-items-center gap-3 mt-4">
+    <span class="p-float-label w-full md:w-15rem" controlErrorAnchor>
       <input
         pInputText
         type="text"
         id="th_import_theme_name"
-        class="w-full pt-3 pb-2"
+        class="w-full pt-3 pb-2 text-responsive"
         [(ngModel)]="themeName"
         (ngModelChange)="checkThemeExistence()"
         (keyup)="checkThemeExistence()"
@@ -41,12 +41,12 @@
       />
       <label class="ocx-required-label" for="th_import_theme_name">{{ 'THEME.THEME_NAME' | translate }}</label>
     </span>
-    <span class="p-float-label" controlErrorAnchor>
+    <span class="p-float-label w-full md:w-15rem" controlErrorAnchor>
       <input
         pInputText
         type="text"
         id="th_import_theme_display_name"
-        class="w-full pt-3 pb-2"
+        class="w-full pt-3 pb-2 text-responsive"
         [(ngModel)]="displayName"
         (ngModelChange)="checkThemeExistence()"
         (keyup)="checkThemeExistence()"
@@ -58,7 +58,7 @@
         {{ 'THEME.DISPLAY_NAME' | translate }}
       </label>
     </span>
-    <app-theme-color-box *ngIf="properties" [properties]="properties" />
+    <app-theme-color-box *ngIf="properties" [properties]="properties" styleClass="h-inputtext w-15rem" />
     <div *ngIf="!properties">{{ 'THEME.NO_PROPERTIES' | translate }}</div>
   </div>
   <p-message

diff --git a/src/app/theme/theme-import/theme-import.component.scss b/src/app/theme/theme-import/theme-import.component.scss
@@ -2,3 +2,4 @@
 
 @include correct-file-upload;
 @include dialog-footer-buttons;
+@include displaying-text-responsive;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@

		@include correct-file-upload;
		@include dialog-footer-buttons;
		@include displaying-text-responsive;