changes made to facet display grid styles

a slight rework of the facet views to work with all browsers
see WEB-652

Author: jason-raitz

package.json

@@ -64,6 +64,6 @@
     },
     "./css": "./dist/style.css"
   },
-  "version": "0.0.4",
+  "version": "0.0.10",
   "packageManager": "[email protected]"
 }

src/components/Facet.vue

@@ -45,7 +45,8 @@ function onToggle (event: Event) {
 
 <style lang="scss">
 fieldset.galc-facet {
-  display: contents;
+  display: inherit;
+  border: none;
 
   legend {
     position: absolute;
@@ -54,7 +55,8 @@ fieldset.galc-facet {
   }
 
   details {
-    display: contents;
+    display: inherit;
+    border: none;
 
     summary {
       list-style: none;

src/components/Facets.vue

@@ -94,7 +94,7 @@ div.galc-facets {
 
   form.galc-facet-form {
     display: grid;
-    grid-template-columns: min-content max-content minmax(0, 1fr);
+    grid-template-columns: 1fr;
     align-items: center;
     justify-items: start;
 
@@ -110,6 +110,8 @@ div.galc-facets {
     }
 
     > fieldset {
+      padding-bottom: 0;
+      width: 100%;
 
       details {
         summary {
@@ -127,11 +129,11 @@ div.galc-facets {
         fieldset {
 
           input {
-            grid-column: 2;
+            grid-column: 1;
           }
 
           label {
-            grid-column: 3 / 4;
+            grid-column: 2 / 4;
           }
         }
       }

src/components/InternalFields.vue

@@ -35,7 +35,8 @@ function onToggle (event: Event) {
 // TODO: share styles w/Facet, TermSelection, Suppressed
 
 fieldset.galc-facet {
-  display: contents;
+  display: inherit;
+  border: none;
 
   legend {
     position: absolute;
@@ -44,7 +45,8 @@ fieldset.galc-facet {
   }
 
   details {
-    display: contents;
+    display: inherit;
+    border: none;
 
     summary {
       list-style: none;
@@ -87,7 +89,8 @@ fieldset.galc-facet {
 }
 
 div.galc-term-selection {
-  display: contents;
+  display: inherit;
+  border: none;
 
   @media only screen and (max-width: 700px) {
     font-size: 1.125rem;
@@ -111,7 +114,8 @@ div.galc-term-selection {
   }
 
   fieldset.galc-facet-subterms {
-    display: contents;
+    display: inherit;
+    border: none;
   }
 }
 

src/components/Suppressed.vue

@@ -44,7 +44,8 @@ function onToggle (event: Event) {
 // TODO: share styles w/Facet, TermSelection
 
 fieldset.galc-facet {
-  display: contents;
+  display: inherit;
+  border: none;
 
   legend {
     position: absolute;
@@ -53,7 +54,8 @@ fieldset.galc-facet {
   }
 
   details {
-    display: contents;
+    display: inherit;
+    border: none;
 
     summary {
       list-style: none;
@@ -96,7 +98,8 @@ fieldset.galc-facet {
 }
 
 div.galc-term-selection {
-  display: contents;
+  display: inherit;
+  border: none;
 
   @media only screen and (max-width: 700px) {
     font-size: 1.125rem;
@@ -120,7 +123,11 @@ div.galc-term-selection {
   }
 
   fieldset.galc-facet-subterms {
-    display: contents;
+    display: inherit;
+    border: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 1.3em;
   }
 }
 

src/components/TermSelection.vue

@@ -37,7 +37,12 @@ const selected = selectedTerms(props.facet.name)
 
 <style lang="scss">
 div.galc-term-selection {
-  display: contents;
+  border: none;
+  display: grid;
+  grid-template-columns: 18px 3fr;
+  column-gap: 0.5em;
+  margin-left: 0;
+  padding-left: 0;
 
   @media only screen and (max-width: 700px) {
     font-size: 1.125rem;
@@ -61,7 +66,8 @@ div.galc-term-selection {
   }
 
   fieldset.galc-facet-subterms {
-    display: contents;
+    display: block;
+    border: 0;
   }
 }
 </style>