✨ feat(junior) add footer to first pages

Co-authored-by: rouxxi <[email protected]> Co-authored-by: Yaelle YAMA <[email protected]> Co-authored-by: Guillaume Lagorce <[email protected]> Co-authored-by: Theotime2005 <[email protected]>
1024pix · Jul 9, 2024 · 378915d · 378915d
1 parent d969b66
commit 378915d
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 318 deletions.
diff --git a/junior/app/components/footer/component.js b/junior/app/components/footer/component.js
diff --git a/junior/app/components/footer/template.hbs b/junior/app/components/footer/template.hbs
@@ -1,30 +1,26 @@
 <footer id="footer" class="footer">
-  <div class="footer__container">
-    <div class="footer-container__content">
-      <nav class="footer-container-content__navigation" role="navigation" aria-label={{t "navigation.footer.label"}}>
-        <ul class="footer-container-content__navigation-list">
-          <li>
-            <a
-              href="{{t 'navigation.footer.legal-notices-url'}}"
-              target="_blank"
-              class="footer-navigation__item"
-              rel="noopener noreferrer"
-            >
-              {{t "navigation.footer.legal-notices"}}
-            </a>
-          </li>
-          <li>
-            <a
-              href="{{t 'navigation.footer.student-data-protection-policy-url'}}"
-              target="_blank"
-              class="footer-navigation__item"
-              rel="noopener noreferrer"
-            >
-              {{t "navigation.footer.student-data-protection-policy"}}
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
+  <nav class="footer__navigation" role="navigation" aria-label={{t "navigation.footer.label"}}>
+    <ul class="footer-navigation__list">
+      <li>
+        <a
+          href="{{t 'navigation.footer.legal-notice-url'}}"
+          target="_blank"
+          class="footer-navigation__item"
+          rel="noopener noreferrer"
+        >
+          {{t "navigation.footer.legal-notice"}}
+        </a>
+      </li>
+      <li>
+        <a
+          href="{{t 'navigation.footer.student-data-protection-policy-url'}}"
+          target="_blank"
+          class="footer-navigation__item"
+          rel="noopener noreferrer"
+        >
+          {{t "navigation.footer.student-data-protection-policy"}}
+        </a>
+      </li>
+    </ul>
+  </nav>
 </footer>
diff --git a/junior/app/styles/app.scss b/junior/app/styles/app.scss
@@ -35,9 +35,6 @@ body {
   font-family: $font-nunito;
   text-align: center;
   background: rgba(236 242 251 / 20%);
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
 }
 
 b {
@@ -58,4 +55,12 @@ b {
   @include device-is('large-screen') {
     margin: 32px auto;
   }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    min-height: 95vh;
+  }
 }
+
+
diff --git a/junior/app/styles/components/footer.scss b/junior/app/styles/components/footer.scss
@@ -1,99 +1,13 @@
 #footer {
-  margin-top: auto;
+  margin:auto 20px 20px 20px;
 }
 
-.footer__container {
-  display: flex;
-  flex-direction: column;
-  max-width: 1280px;
-  padding: $pix-spacing-m 20px;
-
-  @include device-is('desktop') {
-    flex-direction: row;
-    margin: 0 auto;
-  }
-}
-
-.footer-container {
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--pix-spacing-8x);
-    width: 100%;
-
-    @include device-is('tablet') {
-      flex-direction: column;
-      justify-content: space-between;
-      border: none;
-    }
-
-    @include device-is('desktop') {
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-
-  &__logos {
+.footer-navigation {
+  &__list {
     display: flex;
-    align-items: center;
-    padding-bottom: 16px;
-
-    @include device-is('tablet') {
-      padding-bottom: 0;
-    }
-
-    img {
-      max-width: unset;
-    }
+    flex-wrap: wrap;
   }
-}
-
-.footer-container-content {
-  &__navigation {
-    @include device-is('tablet') {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    @include device-is('desktop') {
-      margin-left: 12px;
-    }
 
-    &-list {
-      display: flex;
-      flex-wrap: wrap;
-      margin: 0;
-      margin-top: 20px;
-      padding: 0;
-      list-style: none;
-
-      @include device-is('tablet') {
-        flex-direction: row;
-        align-self: center;
-      }
-
-      @include device-is('desktop') {
-        margin: 0;
-        padding-top: 0;
-      }
-    }
-  }
-
-  &__copyrights {
-    padding-top: 16px;
-    color: $pix-neutral-50;
-    font-size: 0.75rem;
-    font-family: $font-roboto;
-    letter-spacing: 0.008rem;
-
-    @include device-is('desktop') {
-      padding: 0;
-      white-space: nowrap;
-    }
-  }
-}
-
-.footer-navigation {
   &__item {
     display: inline-block;
     padding: 0 12px 6px 0;
@@ -103,22 +17,6 @@
     line-height: 1.375rem;
     letter-spacing: 0.009rem;
 
-    &--internal-link {
-      &:visited {
-        color: $pix-neutral-60;
-      }
-    }
-
-    @include device-is('desktop') {
-      margin: 0 10px;
-      padding: 0;
-    }
-
-    &.active {
-      color: $pix-primary-70;
-      text-decoration: none;
-    }
-
     &:focus {
       color: $pix-neutral-50;
       text-decoration: none;
@@ -131,18 +29,3 @@
     }
   }
 }
-
-.footer-logos {
-  display: flex;
-
-  &__french-government {
-    > img {
-      height: 45px;
-      margin-right: 24px;
-
-      @include device-is('tablet') {
-        height: 54px;
-      }
-    }
-  }
-}
diff --git a/junior/app/templates/application.hbs b/junior/app/templates/application.hbs
@@ -3,5 +3,4 @@
   <main>
     {{outlet}}
   </main>
-</div>
-<Footer />
+</div>
diff --git a/junior/app/templates/organization-code.hbs b/junior/app/templates/organization-code.hbs
@@ -20,4 +20,5 @@
   <PixButton class="pix1d-button" @type="submit" @shape="rounded" @size="large">
     {{t "pages.home.go-to-school"}}
   </PixButton>
-</form>
+</form>
+<Footer />
diff --git a/junior/app/templates/school/divisions.hbs b/junior/app/templates/school/divisions.hbs
@@ -8,4 +8,5 @@
       <p class="item__title">{{division}}</p>
     </LinkTo>
   {{/each}}
-</div>
+</div>
+<Footer />