Closes #6614

- CSS fixes for revised widget approach.
nasa · Apr 26, 2023 · fe1bbfe · fe1bbfe
1 parent 711e4b1
commit fe1bbfe
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/src/plugins/conditionWidget/components/ConditionWidget.vue b/src/plugins/conditionWidget/components/ConditionWidget.vue
@@ -21,24 +21,18 @@
 *****************************************************************************/
 
 <template>
-<span
+<div
     ref="conditionWidgetElement"
     class="c-condition-widget u-style-receiver js-style-receiver"
 >
-    <a
-        v-if="urlDefined"
-        class="c-condition-widget__label"
+    <component
+        :is="urlDefined ? 'a' : 'div'"
+        class="c-condition-widget__label-wrapper"
         :href="url"
     >
-        {{ label }}
-    </a>
-    <div
-        v-else
-        class="c-condition-widget__label"
-    >
-        {{ label }}
-    </div>
-</span>
+        <div class="c-condition-widget__label">{{ label }}</div>
+    </component>
+</div>
 </template>
 
 <script>

diff --git a/src/plugins/conditionWidget/components/condition-widget.scss b/src/plugins/conditionWidget/components/condition-widget.scss
@@ -26,31 +26,34 @@
     background-color: rgba($colorBodyFg, 0.1); // Give a little presence if the user hasn't defined a fill color
     border-radius: $basicCr;
     border: 1px solid transparent;
-    display: inline-block;
-    padding: $interiorMarginLg $interiorMarginLg * 2;
+    display: block;
+    max-width: max-content;
+
+    a {
+        display: block;
+    }
 }
 
 .c-condition-widget__label {
-    padding: $interiorMargin;
+    // Either a <div> or an <a> tag
+    padding: $interiorMargin $interiorMargin * 1.5;
     text-align: center;
     white-space: normal;
 }
 
-a.c-condition-widget {
-    // Widget is conditionally made into a <a> when URL property has been defined
-    cursor: pointer !important;
-    pointer-events: inherit;
-}
-
 // Make Condition Widget expand when in a hidden frame Layout context
 // For both static and Flexible Layouts
 .c-so-view--conditionWidget.c-so-view--no-frame {
     .c-condition-widget {
         @include abs();
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
+        max-width: unset;
+
+        &__label-wrapper {
+            @include abs();
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
 
     .c-so-view__frame-controls { display: none; }