Improve display of inline form elements on narrow screen widths

These got jumbled due to some unexpected CSS interactions which prevented the add element button from working. Fixes #1510
EHRI · Jul 22, 2024 · 9de1af7 · 9de1af7
1 parent 5424bf9
commit 9de1af7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 24 deletions.
diff --git a/modules/admin/app/assets/css/admin/_admin.scss b/modules/admin/app/assets/css/admin/_admin.scss
@@ -87,6 +87,11 @@ body > .admin-content > .flash {
   }
 }
 
+.inline-remove > a:hover {
+  text-decoration: none;
+  cursor: pointer;
+}
+
 .address-form,
 .concept-description-form {
   background-color: $gray-100;

diff --git a/modules/admin/app/views/admin/concept/descriptionForm.scala.html b/modules/admin/app/views/admin/concept/descriptionForm.scala.html
@@ -9,15 +9,17 @@
 
 @views.html.admin.common.descriptionForm(desc, cls = "concept-description-form inline-element") {
     <a class="close remove-inline-element" title="@Messages("item.field.remove")" aria-label="@Messages("item.field.remove")" tabindex="-1" href="#">&times;</a>
-    @choiceInput(desc, LANG_CODE, views.Helpers.languagePairList, '_blank -> true)
-    @choiceInput(desc, IDENTIFIER, views.Helpers.scriptPairList, '_blank -> true)
-    @formHelpers.lineInput(desc, PREFLABEL)
-    @formHelpers.inlineNameSet(desc, ALTLABEL)
-    @formHelpers.inlineNameSet(desc, HIDDENLABEL)
-    @formHelpers.inlineTextSet(desc, NOTE)
-    @formHelpers.inlineTextSet(desc, CHANGENOTE)
-    @formHelpers.inlineTextSet(desc, EDITORIALNOTE)
-    @formHelpers.inlineTextSet(desc, HISTORYNOTE)
-    @formHelpers.inlineTextSet(desc, SCOPENOTE)
-    @formHelpers.inlineTextSet(desc, DEFINITION, rows = 4)
+    <div class="concept-description-form-elements">
+        @choiceInput(desc, LANG_CODE, views.Helpers.languagePairList, '_blank -> true)
+        @choiceInput(desc, IDENTIFIER, views.Helpers.scriptPairList, '_blank -> true)
+        @formHelpers.lineInput(desc, PREFLABEL)
+        @formHelpers.inlineNameSet(desc, ALTLABEL)
+        @formHelpers.inlineNameSet(desc, HIDDENLABEL)
+        @formHelpers.inlineTextSet(desc, NOTE)
+        @formHelpers.inlineTextSet(desc, CHANGENOTE)
+        @formHelpers.inlineTextSet(desc, EDITORIALNOTE)
+        @formHelpers.inlineTextSet(desc, HISTORYNOTE)
+        @formHelpers.inlineTextSet(desc, SCOPENOTE)
+        @formHelpers.inlineTextSet(desc, DEFINITION, rows = 4)
+    </div>
 }
diff --git a/modules/admin/app/views/admin/repository/addressForm.scala.html b/modules/admin/app/views/admin/repository/addressForm.scala.html
@@ -2,19 +2,22 @@
 
 @import Isdiah._
 @import views.html.formHelpers._
+@import views.html.admin.repository.inlineGeoname
 
 <div class="address-form inline-element">
-    @formHelpers.hiddenInput(field(Entity.ID))
     <a class="close remove-inline-element" title="@Messages("item.field.remove")" aria-label="@Messages("item.field.remove")" tabindex="-1" href="#">&times;</a>
-    @formHelpers.lineInput(field, ADDRESS_NAME)
-    @formHelpers.lineInput(field, CONTACT_PERSON)
-    @inlineGeoname(field, CITY, "city")
-    @formHelpers.choiceInput(field, COUNTRY_CODE, views.Helpers.countryPairList, '_blank -> true)
-    @inlineGeoname(field, REGION, "region")
-    @inlineGeoname(field, POSTAL_CODE, "postal")
-    @inlineGeoname(field, STREET_ADDRESS, "address")
-    @inlineNameSet(field, EMAIL)
-    @inlineNameSet(field, TELEPHONE)
-    @inlineNameSet(field, FAX)
-    @inlineNameSet(field, URL)
+    <div class="address-form-elements">
+        @formHelpers.hiddenInput(field(Entity.ID))
+        @formHelpers.lineInput(field, ADDRESS_NAME)
+        @formHelpers.lineInput(field, CONTACT_PERSON)
+        @inlineGeoname(field, CITY, "city")
+        @formHelpers.choiceInput(field, COUNTRY_CODE, views.Helpers.countryPairList, '_blank -> true)
+        @inlineGeoname(field, REGION, "region")
+        @inlineGeoname(field, POSTAL_CODE, "postal")
+        @inlineGeoname(field, STREET_ADDRESS, "address")
+        @inlineNameSet(field, EMAIL)
+        @inlineNameSet(field, TELEPHONE)
+        @inlineNameSet(field, FAX)
+        @inlineNameSet(field, URL)
+    </div>
 </div>
diff --git a/modules/portal/app/assets/css/portal/_layout.scss b/modules/portal/app/assets/css/portal/_layout.scss
@@ -283,7 +283,6 @@ ul.pagination {
     }
 
     > .inline-remove {
-      @include make-col-ready();
       @include make-col(1);
     }
   }