fix: tuning roles and slots

onecx · Oct 13, 2024 · da6ca88 · da6ca88
1 parent 0e7f068
commit da6ca88
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 41 deletions.
diff --git a/src/app/workspace/workspace-detail/workspace-roles/workspace-roles.component.html b/src/app/workspace/workspace-detail/workspace-roles/workspace-roles.component.html
@@ -13,7 +13,7 @@
   currentPageReportTemplate="{first} - {last} {{ 'ACTIONS.SEARCH.OF' | translate }} {totalRecords}"
 >
   <ng-template pTemplate="header">
-    <div class="ml-1 flex flex-wrap align-items-center column-gap-4 row-gap-1">
+    <div class="sm:ml-1 flex flex-wrap align-items-center column-gap-4 row-gap-1">
       <!-- Quick Filter -->
       <div
         class="slim-selectbutton filter-selectbutton"
@@ -103,7 +103,7 @@
   <!-- GRID -->
   <ng-template let-roles pTemplate="gridItem">
     <div class="grid grid-nogutter">
-      <div *ngFor="let role of roles; index as i" class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-2 sm:px-3">
+      <div *ngFor="let role of roles; index as i" class="col-6 md:col-4 lg:col-4 xl:col-3 p-2 sm:px-3">
         <a
           [id]="'ws_roles_grid_data_row_' + i"
           class="block card relative py-2 px-4 hover:bg-gray-200 cursor-pointer"
@@ -159,15 +159,17 @@
             tooltipPosition="top"
             tooltipEvent="hover"
           ></a>
+
+          <!-- CONTENT -->
           <div
             [id]="'ws_roles_grid_data_row_' + i + '_role_name'"
-            class="h-2-5rem flex flex-column justify-content-center text-center word-wrap-break"
+            class="h-2-5rem flex flex-column justify-content-center text-sm sm:text-base text-center word-wrap-break"
             [attr.aria-label]="role.name"
-            [pTooltip]="role.name?.length > 50 ? role.name : ''"
+            [pTooltip]="role.name?.length > 40 ? role.name : ''"
             tooltipPosition="top"
             tooltipEvent="hover"
           >
-            {{ limitText(role.name, 50) }}
+            {{ limitText(role.name, 40) }}
           </div>
         </a>
       </div>

diff --git a/...app/workspace/workspace-detail/workspace-slot-detail/workspace-slot-detail.component.html b/...app/workspace/workspace-detail/workspace-slot-detail/workspace-slot-detail.component.html
@@ -166,8 +166,8 @@
       tooltipPosition="top"
       tooltipEvent="hover"
     >
-      <div class="mt-3 flex flex-column justify-content-between gap-3">
-        <div class="flex flex-row flex-wrap justify-content-between gap-3">
+      <div class="mt-3 flex flex-column justify-content-between gap-4">
+        <div class="flex flex-row flex-wrap justify-content-start gap-3">
           <span *ngIf="slot?.creationDate" class="p-float-label">
             <div
               id="ws_slot_detail_item_creation_date"
@@ -182,7 +182,7 @@
             <span class="ocx-float-label">{{ 'INTERNAL.CREATION_DATE' | translate }}</span>
           </span>
           <div class="w-12 sm:w-7 sm:pl-3">
-            <span class="p-float-label mb-1">
+            <span class="p-float-label">
               <input
                 pInputText
                 type="text"
@@ -199,39 +199,37 @@
           </div>
         </div>
 
-        <div class="flex flex-row flex-wrap justify-content-between gap-3">
-          <div class="flex flex-row flex-wrap justify-content-between gap-3">
-            <span *ngIf="slot?.modificationDate" class="p-float-label">
-              <div
-                id="ws_slot_detail_item_modification_date"
-                class="ocx-float-label-textbox pt-3 pb-2"
-                [attr.aria-label]="'INTERNAL.MODIFICATION_DATE' | translate"
-                [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
+        <div class="flex flex-row flex-wrap justify-content-start gap-3">
+          <span *ngIf="slot?.modificationDate" class="p-float-label">
+            <div
+              id="ws_slot_detail_item_modification_date"
+              class="ocx-float-label-textbox pt-3 pb-2"
+              [attr.aria-label]="'INTERNAL.MODIFICATION_DATE' | translate"
+              [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
+              tooltipPosition="top"
+              tooltipEvent="hover"
+            >
+              {{ slot ? (slot.modificationDate | date: dateFormat) : '' }}
+            </div>
+            <span class="ocx-float-label">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</span>
+          </span>
+          <div class="w-12 sm:w-7 sm:pl-3">
+            <span class="p-float-label">
+              <input
+                pInputText
+                type="text"
+                readonly
+                id="ws_slot_detail_intern_item_modification-user"
+                class="w-full pt-3 pb-2 text-responsive"
+                [value]="slot?.modificationUser"
+                [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
+              />
+              <label for="ws_slot_detail_intern_item_modification-user">
+                {{ 'INTERNAL.MODIFICATION_USER' | translate }}</label
               >
-                {{ slot ? (slot.modificationDate | date: dateFormat) : '' }}
-              </div>
-              <span class="ocx-float-label">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</span>
             </span>
-            <div class="w-12 sm:w-7 sm:pl-3">
-              <span class="p-float-label mb-1">
-                <input
-                  pInputText
-                  type="text"
-                  readonly
-                  id="ws_slot_detail_intern_item_modification-user"
-                  class="w-full pt-3 pb-2 text-responsive"
-                  [value]="slot?.modificationUser"
-                  [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
-                  tooltipPosition="top"
-                  tooltipEvent="hover"
-                />
-                <label for="ws_slot_detail_intern_item_modification-user">
-                  {{ 'INTERNAL.MODIFICATION_USER' | translate }}</label
-                >
-              </span>
-            </div>
           </div>
         </div>
       </div>

diff --git a/src/app/workspace/workspace-detail/workspace-slots/workspace-slots.component.html b/src/app/workspace/workspace-detail/workspace-slots/workspace-slots.component.html
@@ -65,7 +65,7 @@
   <!-- GRID -->
   <ng-template let-slots pTemplate="gridItem">
     <div class="grid grid-nogutter">
-      <div *ngFor="let slot of slots; index as i" class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-2 sm:px-3">
+      <div *ngFor="let slot of slots; index as i" class="col-6 md:col-4 lg:col-4 xl:col-3 p-2 sm:px-3">
         <a
           [id]="'ws_slots_grid_data_row_' + i + '_action_detail'"
           class="block card relative py-2 px-4"
@@ -126,7 +126,9 @@
             tooltipPosition="top"
             tooltipEvent="hover"
           ></span>
-          <div class="h-2-5rem flex flex-column justify-content-center text-center">
+
+          <!-- CONTENT -->
+          <div class="h-2-5rem flex flex-column justify-content-center text-center text-sm sm:text-base">
             <div
               [id]="'ws_slots_grid_data_row_' + i + '_slot_name'"
               [attr.aria-label]="slot.name"

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -329,8 +329,8 @@
       "UNDEPLOYED.TOOLTIP": "Dieser Slot ist nicht länger nutzbar.",
       "PRODUCTS": "Registrierende Applikationen",
       "PRODUCTS.NOT_EXIST": "Keine",
-      "PRODUCTS.TOOLTIP": "Applikationen, die diesen Slot registriert haben:",
-      "NO_PRODUCTS": "Keine Applikation gefunden, die diesen Slot registriert hat",
+      "PRODUCTS.TOOLTIP": "Applikationen die den Slot registriert haben:",
+      "NO_PRODUCTS": "Keine Applikation gefunden, die den Slot registriert hat",
       "COMPONENTS": "Inhaltsbildende Komponenten",
       "COMPONENTS.USED": "Verwendete Komponenten",
       "COMPONENTS.USED.TOOLTIP": "Im Slot verwendeten Komponenten, in der Reihenfolge von oben nach unten.",