983 new external page design implementation WIP

app/components/header-nav.hbs

@@ -36,6 +36,16 @@
                     </ddm.linkTo>
                   </ddm.item>
                 {{/each-in}}
+                {{! put links to other pages here }}
+                <LinkTo @route='public.board' class="dropdown-item btn btn-primary">
+                  {{t 'mixin.menuItems.board'}}
+                </LinkTo>
+                <LinkTo @route='public.identity' class="dropdown-item btn btn-primary">
+                  {{t 'mixin.menuItems.identity'}}
+                </LinkTo>
+                <LinkTo @route='public.flux' class="dropdown-item btn btn-primary">
+                  {{t 'mixin.menuItems.flux'}}
+                </LinkTo>
                 <LinkTo @route='public.room-forum' class="dropdown-item btn btn-primary">
                   {{t 'mixin.menuItems.roomForum'}}
                 </LinkTo>
@@ -44,8 +54,8 @@
             <LinkTo @route='static-pages.static-page' @model='word-lid' class="page-actions-buttons">
               <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/word-lid') 'selected'}}">{{t "component.headerNav.becomeMember"}}</BsButton>
             </LinkTo>
-            <LinkTo @route='static-pages.static-page' @model='sponsoring' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
+            <LinkTo @route='public.partners' class="page-actions-buttons">
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/public/partners') 'selected'}}">{{t "component.headerNav.partners"}}</BsButton>
             </LinkTo>
           {{/if}}
         </div>

app/components/public/card.hbs

@@ -0,0 +1,8 @@
+<div class="circle-card {{if @horizontal "horizontal" "vertical"}}">
+  <img class="card-image" src={{@imgurl}} alt="">
+  <div class="content">
+    <h2 class="card-title">{{@title}}</h2>
+    <h3 class="card-subtitle">{{@subtitle}}</h3>
+    <p class="card-text">{{@text}}</p>
+  </div>
+</div>

app/components/public/index/about-alpha.hbs

@@ -2,29 +2,29 @@
   <h1 class="public-title">{{t 'component.public.index.aboutAlpha.intro-title'}}</h1>
   <hr class="public-title-border border border-secondary bg-secondary border-3 opacity-100" />
 
-  <p class="mt-3 text-center about-text">{{t 'component.public.index.aboutAlpha.intro'}}</p>
+  <p class="mt-3 text-center public-text">{{t 'component.public.index.aboutAlpha.intro'}}</p>
 
   <div class="mt-3 row">
     <div class="about-v col-12 col-md-4 mt-5">
-      <img class="about-v-image" src="/images/public/index/vriendschap.jpg" alt="">
-      <h2 class="about-v-title">{{t 'component.public.index.aboutAlpha.vriendschap-title'}}</h2>
-      <p class="about-v-text">
-        {{t 'component.public.index.aboutAlpha.vriendschap-text'}}
-      </p>
+      <Public::Card
+        @imgurl = "/images/public/index/vriendschap.jpg"
+        @title = {{t 'component.public.index.aboutAlpha.vriendschap-title'}}
+        @text = {{t 'component.public.index.aboutAlpha.vriendschap-text'}}
+      />
     </div>
     <div class="about-v col-12 col-md-4">
-      <img class="about-v-image" src="/images/public/index/vorming.jpg" alt="">
-      <h2 class="about-v-title">{{t 'component.public.index.aboutAlpha.vorming-title'}}</h2>
-      <p class="about-v-text">
-        {{t 'component.public.index.aboutAlpha.vorming-text'}}
-      </p>
+      <Public::Card
+        @imgurl = "/images/public/index/vorming.jpg"
+        @title = {{t 'component.public.index.aboutAlpha.vorming-title'}}
+        @text = {{t 'component.public.index.aboutAlpha.vorming-text'}}
+      />
     </div>
     <div class="about-v col-12 col-md-4 mt-5">
-      <img class="about-v-image" src="/images/public/index/verantwoordelijkheid.jpg" alt="">
-      <h2 class="about-v-title">{{t 'component.public.index.aboutAlpha.verantwoordelijkheid-title'}}</h2>
-      <p class="about-v-text">
-        {{t 'component.public.index.aboutAlpha.verantwoordelijkheid-text'}}
-      </p>
+      <Public::Card
+        @imgurl = "/images/public/index/verantwoordelijkheid.jpg"
+        @title = {{t 'component.public.index.aboutAlpha.verantwoordelijkheid-title'}}
+        @text = {{t 'component.public.index.aboutAlpha.verantwoordelijkheid-text'}}
+      />
     </div>
   </div>
 </div>

app/router.js

@@ -268,6 +268,10 @@ Router.map(function () {
 
   this.route('public', function () {
     this.route('room-forum');
+    this.route('flux');
+    this.route('board');
+    this.route('identity');
+    this.route('partners');
   });
 
   return true;

app/routes/public/board.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class PublicBoardRoute extends Route {}

app/routes/public/flux.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class PublicFluxRoute extends Route {}

app/routes/public/identity.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class PublicIdentityRoute extends Route {}

app/routes/public/partners.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class PublicPartnersRoute extends Route {}

app/styles/app.scss

@@ -26,6 +26,7 @@
 @import 'components/pagination';
 @import 'components/photo-tags';
 @import 'components/public/header';
+@import 'components/public/card';
 @import 'components/public/index/about-alpha';
 @import 'components/public/index/activities';
 @import 'components/public/index/photo-albums';
@@ -72,6 +73,7 @@
 @import 'routes/polls';
 @import 'routes/public';
 @import 'routes/sog/name-trainer';
+@import 'routes/public/board';
 
 // Import package style
 @import 'ember-power-select/themes/bootstrap';

app/styles/components/public/card.scss

@@ -0,0 +1,79 @@
+.circle-card {
+  display: flex;
+
+  &.vertical {
+    flex-direction: column;
+    align-items: center;
+
+    .content {
+      align-items: center; // center titles and text
+      text-align: center;
+    }
+  }
+
+  &.horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+
+    .card-image {
+      margin-right: 2rem; // space between image and content
+    }
+
+    .content {
+      align-items: flex-start; // align left
+      text-align: left;
+
+      .card-title {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .card-image {
+    width: 100%;
+    clip-path: circle();
+    object-fit: cover;
+    max-width: 25rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    .card-title {
+      margin-top: 1rem;
+      color: $brand-secondary;
+      font-family: "Libre Franklin", sans-serif;
+    }
+
+    .card-subtitle {
+      margin-top: 0.3rem;
+      color: $brand-secondary;
+      font-family: "Libre Franklin", sans-serif;
+    }
+
+    .card-text {
+      margin-top: 1rem;
+      text-align: justify;
+      font-size: 1.5rem;
+    }
+  }
+}
+
+/* Responsive: horizontal becomes vertical on small screens */
+@media (width <= 768px) {
+  .circle-card.horizontal {
+    flex-direction: column;
+    align-items: center;
+
+    .card-image {
+      margin-right: 0;
+      margin-bottom: 1.5rem;
+    }
+
+    .content {
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

app/styles/components/public/header.scss

@@ -25,7 +25,7 @@
     border-bottom: 4px solid $brand-secondary;
     height: 100%;
     object-fit: cover;
-    object-position: bottom;
+    object-position: center;
   }
 
   .header-overlay {
@@ -60,4 +60,4 @@
       text-transform: uppercase;
     }
   }
-}
+}

app/styles/components/public/index/about-alpha.scss

@@ -4,30 +4,7 @@
     hyphens: none;
   }
 
-  .about-v {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  .about-v{
     padding: 0 5%;
-
-    .about-v-image {
-      width: 100%;
-      clip-path: circle();
-      object-fit: cover;
-      max-width: 25rem;
-    }
-
-    .about-v-title {
-      margin-top: 1rem;
-      text-align: center;
-      color: $brand-secondary;
-      font-family: "Libre Franklin", sans-serif;
-    }
-
-    .about-v-text {
-      text-align: justify;
-      line-height: 1.6rem;
-      font-size: 1.3rem;
-    }
   }
-}
+}

app/styles/routes/public.scss

@@ -4,18 +4,19 @@
     text-align: center;
     font-family: "Libre Franklin", sans-serif;
     font-size: 3rem;
-  
+
     &.public-title-smaller {
       margin-bottom: 0.8rem;
       font-size: 2.5rem;
     }
   }
 
   .public-text {
+    width: 80vw;
     font-size: 1.5rem;
     hyphens: none;
   }
-  
+
   .public-title-border {
     width: 30vw;
   }
@@ -24,4 +25,23 @@
     text-align: center;
     font-size: 1.2rem;
   }
-}
+
+  .red-container{
+    position: relative;
+    left: 50%;
+    margin-left: -50vw;
+    background: linear-gradient(90deg, rgba(0 0 0 / 40%) 0%, $brand-secondary 100%), $brand-secondary;
+    padding: 1rem;
+    width: 100vw;
+    max-width: 100vw;
+
+
+    .public-title,.public-title-smaller{
+      color: $brand-cream;
+    }
+
+    .public-title-border{
+      border-color: $brand-primary-dark;
+    }
+  }
+}

app/styles/routes/public/board.scss

@@ -0,0 +1,9 @@
+.board{
+  .members{
+    .member{
+      margin: 2rem 0;
+      padding: 0 5%;
+    }
+  }
+}
+

app/templates/public/board.hbs

@@ -0,0 +1,77 @@
+<div class="public">
+  <Public::Header
+    @imageUrl="/images/public/board/banner.jpeg"
+    @title="{{t 'template.public.board.header'}}"
+  />
+  <div class="board row my-4 d-flex flex-column align-items-center">
+    <h1 class="public-title">{{t 'template.public.board.senaat'}}</h1>
+    <hr class="public-title-border border border-secondary bg-secondary border-3 opacity-100" />
+    <p class="mt-3 text-center public-text">{{t 'template.public.board.intro'}}</p>
+    <p class="text-center public-text"><i>{{t 'template.public.board.slogan'}}</i></p>
+    <div class="members row">
+      <div class="member col-12 col-md-6" >
+        <Public::Card
+          @imgurl="/images/public/board/Stefan.jpg"
+          @title="{{t 'template.public.board.chair'}}"
+          @subtitle="{{t 'template.public.board.chair-name'}}"
+          @text="{{t 'template.public.board.chair-story'}}"
+        />
+      </div>
+      <div class="member col-12 col-md-6">
+        <Public::Card
+          @imgurl="/images/public/board/Jesse.jpg"
+          @title="{{t 'template.public.board.secretary'}}"
+          @subtitle="{{t 'template.public.board.secretary-name'}}"
+          @text="{{t 'template.public.board.secretary-story'}}"
+        />
+      </div>
+      <div class="member col-12 col-md-6">
+        <Public::Card
+          @imgurl="/images/public/board/Niels.jpg"
+          @title="{{t 'template.public.board.treasurer'}}"
+          @subtitle="{{t 'template.public.board.treasurer-name'}}"
+          @text="{{t 'template.public.board.treasurer-story'}}"
+        />
+      </div>
+      <div class="member col-12 col-md-6">
+        <Public::Card
+          @imgurl="/images/public/board/Alina.jpg"
+          @title="{{t 'template.public.board.assessor1'}}"
+          @subtitle="{{t 'template.public.board.assessor1-name'}}"
+          @text="{{t 'template.public.board.assessor1-story'}}"
+        />
+      </div>
+    </div>
+    <a class="text-center" href="{{t 'template.public.board.photographer-url'}}">{{t 'template.public.board.photographer'}}</a>
+  </div>
+  <div class="red-container row d-flex flex-column align-items-center">
+    <h1 class="public-title">{{t 'template.public.board.previous-boards'}}</h1>
+    <hr class="public-title-border border border-primary bg-primary border-3 opacity-100" />
+    <div class="previous-boards row px-10">
+      <div class="previous-board col-12 col-sm-6 col-md-4 p-3">
+        <h3 class="public-title-smaller text-center">{{t 'template.public.board.old-boards.board1'}}</h3>
+        <img src="/images/public/board/XLIV.jpeg">
+      </div>
+      <div class="previous-board col-12 col-sm-6 col-md-4 p-3">
+        <h3 class="public-title-smaller text-center">{{t 'template.public.board.old-boards.board2'}}</h3>
+        <img src="/images/public/board/XLIII.jpeg">
+      </div>
+      <div class="previous-board col-12 col-sm-6 col-md-4 p-3">
+        <h3 class="public-title-smaller text-center">{{t 'template.public.board.old-boards.board3'}}</h3>
+        <img src="/images/public/board/XLII.jpeg">
+      </div>
+      <div class="previous-board col-12 col-sm-6 col-md-4 p-3">
+        <h3 class="public-title-smaller text-center">{{t 'template.public.board.old-boards.board4'}}</h3>
+        <img src="/images/public/board/XLI.jpeg">
+      </div>
+      <div class="previous-board col-12 col-sm-6 col-md-4 p-3">
+        <h3 class="public-title-smaller text-center">{{t 'template.public.board.old-boards.board5'}}</h3>
+        <img src="/images/public/board/XL.jpeg">
+      </div>
+      <div class="previous-board col-12 col-sm-6 col-md-4 p-3">
+        <h3 class="public-title-smaller text-center">{{t 'template.public.board.old-boards.board6'}}</h3>
+        <img src="/images/public/board/XXXIX.jpeg">
+      </div>
+    </div>
+  </div>
+</div>