[isis] branch master updated: ISIS-3022: css: fixed form label width

[ah...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

ahuber pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/isis.git


The following commit(s) were added to refs/heads/master by this push:
     new 0e8fe7642f ISIS-3022: css: fixed form label width
0e8fe7642f is described below

commit 0e8fe7642fe26df95827d47d9aa04e8577f258a9
Author: Andi Huber <ah...@apache.org>
AuthorDate: Tue Apr 26 07:35:46 2022 +0200

    ISIS-3022: css: fixed form label width
    
    - reasonable default: 160px; devs may override CSS vars
      --form-label-width
      --form-field-width
---
 .../wicket/ui/pages/bootstrap-overrides-all-v2.css | 36 ++++++----------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/viewers/wicket/ui/src/main/java/org/apache/isis/viewer/wicket/ui/pages/bootstrap-overrides-all-v2.css b/viewers/wicket/ui/src/main/java/org/apache/isis/viewer/wicket/ui/pages/bootstrap-overrides-all-v2.css
index 29c661b206..a94ca58f01 100644
--- a/viewers/wicket/ui/src/main/java/org/apache/isis/viewer/wicket/ui/pages/bootstrap-overrides-all-v2.css
+++ b/viewers/wicket/ui/src/main/java/org/apache/isis/viewer/wicket/ui/pages/bootstrap-overrides-all-v2.css
@@ -16,6 +16,10 @@
  *  specific language governing permissions and limitations
  *  under the License.
  */
+:root {
+	--form-label-width: 160px;
+	--form-field-width: calc(100% - var(--form-label-width));	
+}
 
 #container {
 	padding-left: 0px;
@@ -505,8 +509,6 @@ span.containedButtonPanel {
 }
 
 
-
-
 /* from entityPropertiesPanel */
 
 
@@ -600,13 +602,6 @@ ul.dropdown-menu {
 	padding: 0px;
 }
 
-.col .additionalLinks,
-.col .additionalLinksAndSelectorDropDown,
-.entityPropertiesPanel .additionalLinks,
-.entityCollectionsPanel .additionalLinksAndSelectorDropDown {
-    /*margin-top: -0.3em;*/
-}
-
 .collection.card-body {
     padding-top: 0px;
 }
@@ -649,7 +644,7 @@ div.label-left.form-group {
 }
 
 div.label-left label.col-form-label {
-    width: 30%;
+    width: var(--form-label-width);
     float: left;
     padding-top: 2px;
     padding-right: 2px;
@@ -661,27 +656,17 @@ div.label-left label.col-form-label {
     padding-left: 10px;
 }
 
-div.label-top label.col-form-label {
-    /*padding-left: 10px;*/
-    /*padding-bottom: 4px;*/
-}
-
 div.label-none label.col-form-label {
     display: none;
 }
 
 div.label-left .scalarValueWrapper {
-    width: 70%;
+    width: var(--form-field-width);
     float: left;
 }
 
-div.label-left.actions-right .scalarValueWrapper {
-    /*width: 62%;*/
-}
-
 .actions-right .additionalLinkListDropDown {
     float:right;
-    /*width: 3%;*/
 }
 
 .float-right .additionalLinkListDropDown li.additionalLinkItem a.btn {
@@ -691,10 +676,7 @@ div.label-left.actions-right .scalarValueWrapper {
 
 div.label-top .scalarValueWrapper,
 div.label-none .scalarValueWrapper {
-    /*width: 99.5%;*/
     display: block;
-    /*padding-left: 8px;*/
-    /*padding-right: 20px;*/
 }
 
 .modal-body div.label-top .scalarValueWrapper,
@@ -726,7 +708,7 @@ div.label-left .choicesPlaceholder {
 }
 
 div.label-right .scalarValueWrapper {
-    padding-left: 30%;
+    padding-left: var(--form-label-width);
 }
 
 div.label-right .scalarValueWrapper .col-form-label{
@@ -734,8 +716,8 @@ div.label-right .scalarValueWrapper .col-form-label{
 }
 
 div.label-right .scalarValueWrapper .feedback-links-below-wrapper {
-    padding-left: 30%;
-    width: 70%;
+    padding-left: var(--form-label-width);
+    width: var(--form-field-width);
     float: left;
 }