Add last layout and grid improvements (#874)

chukarave · web-flow · commit 114bb039765a · 2024-02-06T09:09:50.000+01:00
* apply media queries on footer component

* make sure button don't show ellipsis unnecessarily

* add selector and move style from components to app.scss

* add selector to random mismatches
diff --git a/resources/js/Components/WikidataToolFooter.vue b/resources/js/Components/WikidataToolFooter.vue
@@ -90,18 +90,26 @@ withDefaults(defineProps<{
             margin-block-start: var(--dimension-layout-xxsmall);
         }
 
-        @media (min-width: $width-breakpoint-tablet) {
+        @media(min-width: $min-width-breakpoint-mobile) {
+            padding: var(--dimension-layout-xsmall);
+        }
+
+        @media (min-width: $min-width-breakpoint-tablet) {
             flex-direction: row;
             padding: var(--dimension-layout-small);
 
             section {
                 margin-inline-end: var(--dimension-layout-large);
             }
 
-            section + section {
+            section+section {
                 margin-block-start: 0;
             }
         }
+
+        @media(min-width: $min-width-breakpoint-desktop) {
+            padding: var(--dimension-layout-medium);
+        }
     }
 }
 </style>
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -7,6 +7,7 @@
           {{ $i18n('about-mismatch-finder-title') }}
         </h2>
         <cdx-button
+          class="heading-button"
           id="faq-button"
           weight="quiet"
           action="progressive"
@@ -88,7 +89,7 @@
           {{ $i18n('item-form-title') }}
         </h2>
         <cdx-button
-          class="random-mismatches"
+          class="random-mismatches heading-button"
           weight="normal"
           @click="showRandom()"
           :disabled="loading"
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
@@ -15,6 +15,7 @@
           {{ $i18n('results-page-title') }}
         </h2>
         <cdx-button
+          class="heading-button"
           id="instructions-button"
           weight="quiet"
           action="progressive"
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -381,6 +381,10 @@ dl.import-meta .download-csv {
     }
 }
 
+.heading-button {
+    flex-shrink: 0; // don't show ellipsis as long as the text fits
+}
+
 .svg {
     &-white-fill {
         filter: invert(1);

Original file line number	Diff line number	Diff line change
`@@ -90,18 +90,26 @@ withDefaults(defineProps<{`
`90`	`90`	`margin-block-start: var(--dimension-layout-xxsmall);`
`91`	`91`	`}`
`92`	`92`
`93`		`- @media (min-width: $width-breakpoint-tablet) {`
	`93`	`+ @media(min-width: $min-width-breakpoint-mobile) {`
	`94`	`+ padding: var(--dimension-layout-xsmall);`
	`95`	`+ }`
	`96`	`+`
	`97`	`+ @media (min-width: $min-width-breakpoint-tablet) {`
`94`	`98`	`flex-direction: row;`
`95`	`99`	`padding: var(--dimension-layout-small);`
`96`	`100`
`97`	`101`	`section {`
`98`	`102`	`margin-inline-end: var(--dimension-layout-large);`
`99`	`103`	`}`
`100`	`104`
`101`		`- section + section {`
	`105`	`+ section+section {`
`102`	`106`	`margin-block-start: 0;`
`103`	`107`	`}`
`104`	`108`	`}`
	`109`	`+`
	`110`	`+ @media(min-width: $min-width-breakpoint-desktop) {`
	`111`	`+ padding: var(--dimension-layout-medium);`
	`112`	`+ }`
`105`	`113`	`}`
`106`	`114`	`}`
`107`	`115`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -381,6 +381,10 @@ dl.import-meta .download-csv {`
`381`	`381`	`}`
`382`	`382`	`}`
`383`	`383`
	`384`	`+.heading-button {`
	`385`	`+ flex-shrink: 0; // don't show ellipsis as long as the text fits`
	`386`	`+}`
	`387`	`+`
`384`	`388`	`.svg {`
`385`	`389`	`&-white-fill {`
`386`	`390`	`filter: invert(1);`