Merge pull request #166 from lblod/fix/home-page-part-2

fix: 🐛 fixed home scrolling through adding a container
lblod · Nov 13, 2023 · 81df656 · 81df656
2 parents 3134d0e + 794aa66
commit 81df656
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 65 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -3,6 +3,7 @@
 module.exports = {
   extends: ['stylelint-config-standard-scss', 'stylelint-prettier/recommended'],
   rules: {
+    'media-feature-range-notation': null,
     'selector-class-pattern': null, // This enforces kebab-case by default but we use BEM which isn't compatible
   },
 };
diff --git a/app/styles/components/_c-home.scss b/app/styles/components/_c-home.scss
@@ -1,5 +1,21 @@
 .c-home-text {
+  width: 600px;
+
+  @media (max-height: 580px) {
+    height: 100%;
+  }
+
+  @media (min-height: 580px) {
+    height: auto;
+  }
+}
+
+.c-home-text-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   overflow-y: auto;
+  height: 100%;
   width: 100%;
 }
 
@@ -21,7 +37,7 @@
 
   @include mq(medium) {
     > * {
-      padding: $au-unit-huge * 2;
+      padding-top: $au-unit-large;
       margin-left: auto;
       margin-right: auto;
     }

diff --git a/app/templates/home.hbs b/app/templates/home.hbs
@@ -1,73 +1,77 @@
 <AuBodyContainer class="au-u-background-gray-100">
   <section class="c-home">
-    <div class="c-home-text">
-      <AuContent>
-        <AuHeading @level="1" @skin="2">Welkom bij Lokaal Beslist, jouw centrale
-          bron voor het ontdekken van agendapunten van lokale besturen.</AuHeading>
-        <div class="c-home__visual">
-          <img
-            src="/assets/homepage-visual.svg"
-            class="c-home-visual"
-            alt=""
-            {{!template-lint-disable require-valid-alt-text}}
-          />
-        </div>
-        <p>Blijf op de hoogte van waar lokale besturen mee bezig zijn en wat er
-          leeft in en rond je omgeving. Start eenvoudig door een gemeente te
-          selecteren of een zoekwoord in te voeren en krijg direct toegang tot
-          relevante informatie.</p>
-      </AuContent>
-      <div class="au-c-home__form au-o-flow">
-        <AuLabel
-          for={{"municipality"}}
-          class="au-u-hidden-visually"
-          @inline={{true}}
-        >
-          In welke gemeente(s) wil je zoeken?
-        </AuLabel>
-        <div
-          class="au-o-flow au-o-flow--small"
-          {{did-insert this.resetLoading}}
-        >
+    <div class="c-home-text-container">
 
-          <PowerSelectMultiple
-            @onChange={{this.handleMunicipalityChange}}
-            @selected={{this.selectedMunicipalities}}
-            @options={{this.municipalities}}
-            @allowClear={{true}}
-            @searchField="label"
-            @placeholder={{"Alle gemeentes"}}
-            @noMatchesMessage={{"Geen gemeentes gevonden"}}
-            @searchMessage="Aan het zoeken..."
-            @searchEnabled={{true}}
-            as |municipality|
+      <div class="c-home-text">
+        <AuContent>
+          <AuHeading @level="1" @skin="2">Welkom bij Lokaal Beslist, jouw
+            centrale bron voor het ontdekken van agendapunten van lokale
+            besturen.</AuHeading>
+          <div class="c-home__visual">
+            <img
+              src="/assets/homepage-visual.svg"
+              class="c-home-visual"
+              alt=""
+              {{!template-lint-disable require-valid-alt-text}}
+            />
+          </div>
+          <p>Blijf op de hoogte van waar lokale besturen mee bezig zijn en wat
+            er leeft in en rond je omgeving. Start eenvoudig door een gemeente
+            te selecteren of een zoekwoord in te voeren en krijg direct toegang
+            tot relevante informatie.</p>
+        </AuContent>
+        <div class="au-c-home__form au-o-flow">
+          <AuLabel
+            for={{"municipality"}}
+            class="au-u-hidden-visually"
+            @inline={{true}}
+          >
+            In welke gemeente(s) wil je zoeken?
+          </AuLabel>
+          <div
+            class="au-o-flow au-o-flow--small"
+            {{did-insert this.resetLoading}}
           >
-            {{municipality.label}}
-          </PowerSelectMultiple>
 
-          <AuInput
-            @queryParam="trefwoord"
-            @value={{this.keywordValue}}
-            @label="Zoeken"
-            @labelHidden={{true}}
-            @icon="search"
-            @width="block"
-            id="keyword"
-            placeholder="Zoek in alle lokale agendaputen"
-            class="au-c-form-row--button au-o-layout--large"
-            {{on "input" this.handleChange}}
-            {{on "keyup" this.handleKeyUp}}
-          />
-          <AuButton
-            @loading={{this.loading}}
-            @width="block"
-            {{on "click" this.handleMunicipalitySelect}}
-          >Bekijk agendapunten</AuButton>
+            <PowerSelectMultiple
+              @onChange={{this.handleMunicipalityChange}}
+              @selected={{this.selectedMunicipalities}}
+              @options={{this.municipalities}}
+              @allowClear={{true}}
+              @searchField="label"
+              @placeholder={{"Alle gemeentes"}}
+              @noMatchesMessage={{"Geen gemeentes gevonden"}}
+              @searchMessage="Aan het zoeken..."
+              @searchEnabled={{true}}
+              as |municipality|
+            >
+              {{municipality.label}}
+            </PowerSelectMultiple>
+
+            <AuInput
+              @queryParam="trefwoord"
+              @value={{this.keywordValue}}
+              @label="Zoeken"
+              @labelHidden={{true}}
+              @icon="search"
+              @width="block"
+              id="keyword"
+              placeholder="Zoek in alle lokale agendaputen"
+              class="au-c-form-row--button au-o-layout--large"
+              {{on "input" this.handleChange}}
+              {{on "keyup" this.handleKeyUp}}
+            />
+            <AuButton
+              @loading={{this.loading}}
+              @width="block"
+              {{on "click" this.handleMunicipalitySelect}}
+            >Bekijk agendapunten</AuButton>
+          </div>
+          <p class="au-u-text-center">
+            <AuLink @route="help">Meer informatie over agendapunten en
+              beslissingen</AuLink>
+          </p>
         </div>
-        <p class="au-u-text-center">
-          <AuLink @route="help">Meer informatie over agendapunten en
-            beslissingen</AuLink>
-        </p>
       </div>
     </div>
   </section>