Adapt layout to codex's grid system (#849)

chukarave · web-flow · commit 0aeca692147f · 2024-01-26T12:21:31.000+01:00
* Adapt layout to codex's grid system

* add a gap for the results description header
diff --git a/resources/js/Components/ItemIdSearchTextarea.vue b/resources/js/Components/ItemIdSearchTextarea.vue
@@ -98,8 +98,7 @@ defineExpose({validate, serializeInput, validationError});
 </script>
 
 <style lang="scss">
-/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */
-@import '~@wmde/wikit-tokens/dist/_variables';
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
 
 .cdx-field__control {
     position: relative;
@@ -114,7 +113,7 @@ defineExpose({validate, serializeInput, validationError});
             width: 50%;
             margin: auto;
 
-            @media (max-width: $width-breakpoint-tablet) {
+            @media (max-width: $max-width-breakpoint-tablet) {
                 width: 80%;
             }
         }
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -189,6 +189,7 @@ function showRandom(): void{
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: var(--dimension-spacing-small);
 
     h2 {
         // the previous section already has enough margin-bottom
diff --git a/resources/js/Pages/Layout.vue b/resources/js/Pages/Layout.vue
@@ -190,15 +190,16 @@ onBeforeUnmount(() => {
 <style lang="scss">
 @import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
 @import '../../sass/typography';
+@import '../../css/custom-variables.css';
 
 #app {
     box-sizing: border-box;
     min-height: 100%;
     display: flex;
     flex-direction: column;
-
+    
     .content-wrap {
-        max-width: 1168px;
+        max-width: 1142px;
         width: 100%;
         flex-grow: 1;
     }
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -21,7 +21,6 @@ body {
 * Layout
 */
 main {
-    max-width: 1090px;
     padding: 0 var(--dimension-layout-xsmall);
     margin: 0 auto;
 
@@ -31,9 +30,17 @@ main {
         margin: var(--dimension-layout-small) 0;
     }
 
+    @media(min-width: $min-width-breakpoint-mobile){
+        padding: 0 var(--dimension-layout-xsmall);
+    }
+
     @media(min-width: $min-width-breakpoint-tablet){
         padding: 0 var(--dimension-layout-small);
     }
+
+    @media (min-width: $min-width-breakpoint-desktop) {
+        padding: 0 var(--dimension-layout-medium);    
+    }
 }
 
 section {
@@ -89,7 +96,7 @@ li + li {
 #error-section,
 #message-section,
 #description-section {
-    max-width: 705px;
+    max-width: 676px;
 }
 
 #description-section {
@@ -98,6 +105,7 @@ li + li {
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
+        gap: var(--dimension-spacing-small);
     }
 }
 
