css modal title, ifelse for no change, with of the table, full user n…

…ame and ressource name
dainst · Jan 28, 2025 · 9d02edd · 9d02edd
1 parent fd27736
commit 9d02edd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 45 deletions.
diff --git a/desktop/src/app/components/widgets/changes-history-modal.html b/desktop/src/app/components/widgets/changes-history-modal.html
@@ -1,35 +1,28 @@
-<!-- <div id="changes-history-modal-header" class="modal-header">
-    <div class="text-truncate heading">
-        <span class="modal-header-label" i18n="@@widgets.historyModal.header.label">Bearbeitungshistorie der Ressource:</span>
-        <span class="modal-header-resource-name">{{document.resource.identifier}}</span>
-    </div>
-    <button id="changes-history-close-button" class="btn btn-primary btn-square" (click)="closeModal()">
-        <span class="mdi mdi-close"></span>
-    </button>
-</div> -->
-
 <div id="view-modal-header" class="modal-header">
-    <div class="text-truncate heading"
+    <div id="heading-label"
          i18n="@@@@widgets.historyModal.header">
-         Bearbeitungshistorie der Ressource: <b>{{document.resource.identifier}}</b>
+         Bearbeitungshistorie der Ressource:
+         <span id="resource-name-title">{{document.resource.identifier}}</span>
     </div>
     <button id="changes-history-close-button" class="btn btn-primary btn-square" (click)="closeModal()">
         <span class="mdi mdi-close"></span>
     </button>
 </div>
 
 <div id="changes-history-modal-body" class="modal-body">
-    <div class="resource-creation-info-row">
-        <span class="resource-creation-info-label" i18n="@@widgets.changeHistoryModal.creator.name">Erstellt von: </span>
-        <span class="resource-creation-info-text">{{document.created.user}}</span>
-    </div>    
-    <div class="resource-creation-info-row">
-        <span class="resource-creation-info-label" i18n="@@widgets.changeHistoryModal.creation.date">Erstellungsdatum: </span>
-        <span class="resource-creation-info-text">{{formatDateTime(document.created.date)}}</span>
+    <div class="list col-lg-12 col-md-12 col-sm-12 resource-creation-info">
+        <div class="list-row">
+            <span class="resource-creation-info-label" i18n="@@widgets.changeHistoryModal.creator.name">Erstellt von: </span>
+            <span>{{document.created.user}}</span>
+        </div>    
+        <div class="list-row">
+            <span class="resource-creation-info-label" i18n="@@widgets.changeHistoryModal.creation.date">Erstellungsdatum: </span>
+            <span>{{formatDateTime(document.created.date)}}</span>
+        </div>
     </div>
-    
+
     <div *ngIf="document.modified[0].user.length; else noChangeTemplate" id="changes-table">
-        <div id="list" class="col-lg-12 col-md-12 col-sm-12">               
+        <div class="list col-lg-12 col-md-12 col-sm-12">               
             <div id="list-header">  
                 <div class="list-header-field text-right"
                     i18n="@@widgets.changeHistoryModal.changes.table.colnames.date" 
@@ -48,17 +41,15 @@
                 <div *ngFor="let modification of document.modified"
                     class="list-row">                    
                     <div class="list-body-field" [textContent]="formatDateTime(modification.date)"></div>
-                    <div class="list-body-field text-truncate" [textContent]="modification.user"></div>      
+                    <div class="list-body-field" [textContent]="modification.user"></div>      
                 </div> 
             </div>
         </div>
     </div>  
 
     <div #noChangeTemplate [hidden]="document.modified[0].user.length>=1">
         <div id ="no-change-div" i18n="@@widgets.changeHistoryModal.text.when.no.change">
-            <br />
             Es wurde noch keine Änderung für die Ressource aufgeführt.    
         </div>
     </div>
-</div>   
-<br />
+</div>   
diff --git a/desktop/src/app/components/widgets/changes-history-modal.scss b/desktop/src/app/components/widgets/changes-history-modal.scss
@@ -1,13 +1,28 @@
+#heading-label {
+  padding-left: 1ex;
+  font-size: larger;
+  width: 90%;
+}
+
+#resource-name-title {
+  font-weight: bold; 
+}
+
 .history-modal-content .modal-content {
   user-select: none;
   width: fit-content;
 }
 
+#no-change-div {
+  padding: 1em;
+}
+
 #changes-table {
-  padding-top: 1em;
+  padding-top : 1em;
+  padding-bottom : 1em;
 }
 
-#list {
+.list {
   background: white;
   margin-bottom: -20px;
   width: 100%;
@@ -16,7 +31,7 @@
     min-width: 100%;
     user-select: none;
     display: grid;
-    grid-template-columns: 184px 280px;
+    grid-template-columns: 20ex 34ex;
     font-size: 16px;
     padding-top: 1em;
 
@@ -36,9 +51,10 @@
     min-width: 100%;
     user-select: none;
     display: grid;
-    grid-template-columns: 184px 280px;
+    grid-template-columns: 20ex 34ex;
     font-size: 16px;
     font-weight: 500;
+    overflow-x: hidden;
 
     .list-body-field {
       padding: 5px 5px 5px 10px;
@@ -62,17 +78,16 @@
   text-align: right;
 }
 
+.resource-creation-info {
+  margin: 1em;
+  padding-right: 1em;
+  padding-bottom: 1em;
+}
+
 .resource-creation-info-label {
   font-weight: bold;
   color: #484948;
   font-style: italic;
-  width: 200px;
-  float:left;
-  padding-left: 1em;
-}
-
-.resource-creation-info-text {
-  color: black;
 }
 
 #no-change-div {
@@ -81,16 +96,7 @@
   font-size: small;
 }
 
-.modal-header-label {
-  // font-size: small;
-  // background-color: #484948;
-  float: left;
-  color: rgb(29, 74, 92);
-  padding-left: 2%;
-}
-
 .modal-header-resource-name {
-  // font-weight: bold;
   font-size: large;
   color: rgb(29, 63, 128);
   float: left;