fix: Adjust button group layout for consistency

Author: fsbraun

djangocms_frontend/static/djangocms_frontend/css/base.css

@@ -41,14 +41,16 @@ class GridLayout {
      * @method setColumn
      */
     setColumn() {
-        let template = (text = '', link = '#') =>
+        const infoIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon-info icon-primary" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg>';
+        const template = (text = '', link = '#') => (
             '<div class="field-box field-box-label">' +
-            (link != "#" ? `<a href="${link}" target="_blank" class="d-inline-block text-right">` : '')
+            (link != "#" ? `<a href="${link}" target="_blank">` : '')
             + text
-            + (link != "#" ? ' <span class="icon icon-info icon-primary"></span></a>' : "")
-            + "</div>";
-        let container = document.querySelectorAll(this.options.selector);
-        let links = this.options.links;
+            + (link != "#" ? ` ${infoIcon}</a>` : "")
+            + '</div>'
+        );
+        const container = document.querySelectorAll(this.options.selector);
+        const links = this.options.links;
 
         Array.from(container).forEach((item, index) => {
             item.insertAdjacentHTML('afterbegin', template(this.options.rows[index], links[index]));

djangocms_frontend/static/djangocms_frontend/css/button_group.css

@@ -19,14 +19,16 @@ form .form-row div.frontend-button-group.frontend-button-group-block {
 form .form-row div.frontend-button-group {
     label.btn-grp {
         margin: 3px;
+        height: 30px;
+        line-height: calc(30px - 0.15rem);
 
         &:not(.btn) {
             padding: 4px 7px;
         }
 
         text-transform: none;
         text-align: center !important;
-        outline: 2px solid transparent;
+        outline: 1px solid transparent;
         outline-offset: 2px;
         width: auto !important;
         font-weight: normal !important;
@@ -48,7 +50,7 @@ form .form-row div.frontend-button-group {
     input[type="radio"]:checked + label.btn-grp,
     input[type="checkbox"]:checked + label.btn-grp {
         outline-color: $color-primary;
-        border-radius: 0;
+        border-radius: $btn-border-radius-base;
         border: none;
     }
 

djangocms_frontend/static/djangocms_frontend/js/grid.js

@@ -12,7 +12,7 @@
         box-sizing: border-box;
         cursor: pointer;
         margin: 2px;
-        padding: 0.375rem 0.75rem;
+        padding: $nav-pills-padding;
         border-radius: 4px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -35,7 +35,7 @@
 
     // adds basic active effect
     .btn.active {
-        outline: 3px solid $color-primary;
+        outline: 1px solid $color-primary;
         border-color: #fff !important;
     }
 
@@ -293,17 +293,13 @@
 
     .icon-px {
         transform: scale(1.5);
-        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="14px"></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="30px"></rect></svg>');
+        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="14px"></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="30px"></rect></svg>');
         filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
     }
 
     .icon-py {
         transform: scale(1.5);
-        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="31px" stroke-width="none" width="26px" height="4px" x="11px"></rect><rect y="13px" stroke-width="none" width="26px" height="4px" x="11px"></rect></svg>');
+        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="31px" stroke-width="none" width="26px" height="4px" x="11px"></rect><rect y="13px" stroke-width="none" width="26px" height="4px" x="11px"></rect></svg>');
         filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
     }
 }
-
-.icon-info {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 448" style="fill: DeepSkyBlue;"><path d="M256 344v-40c0-4.5-3.5-8-8-8h-24v-128c0-4.5-3.5-8-8-8h-80c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h24v80h-24c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h112c4.5 0 8-3.5 8-8zM224 120v-40c0-4.5-3.5-8-8-8h-48c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h48c4.5 0 8-3.5 8-8zM384 224c0 106-86 192-192 192s-192-86-192-192 86-192 192-192 192 86 192 192z"></path></svg>');
-}

private/sass/button_group.scss

@@ -18,14 +18,14 @@
 }
 
 .icon-info {
-    width: 0.9em;
-    font-size: 110% !important;
+    margin-inline-start: 0.5em;
+    zoom: 85%;
 }
 
 $svg-colors: (
     "white": white,
     "black": black,
-    "primary": #0bf,
+    "primary": $color-primary,
 );
 
 @each $key in map.keys($svg-colors) {

private/sass/components/_button-group.scss

@@ -10,7 +10,7 @@ $font-size-base: 0.8125rem;
 $nav-pills-color: var(--dca-action-text, $body-bg);
 $nav-pills-background: $color-secondary;
 $nav-link-padding-y: 0.3rem;
-$nav-pills-padding: 1px 12px;
+$nav-pills-padding: 0.15rem 0.75rem;
 $nav-pills-margin: 0.5rem;
 $nav-pills-border-radius: 4px;
 $nav-pills-height: 30px;