Redesign of external website 2023 - Index page

.gitignore

@@ -42,6 +42,7 @@ testem.log
 # IDE Folders #
 ###############
 /.idea/*
+/.vscode/*
 
 # ember-try
 /.node_modules.ember-try/

app/components/advertisement-tool.hbs

@@ -1,4 +1,4 @@
-<div class='banner adv-ad'>
+<div class='banner adv-ad advertisement-tool'>
   <div class='tool adv-container'>
     <div class='d-flex adv-row flex-column flex-wrap justify-content-center'>
       {{#each advertisements as |advertisement index|}}

app/components/cards/photo-album-card.hbs

@@ -1,4 +1,4 @@
-<div class='card photo-album-card border-0' data-test-photo-album-card>
+<div class='card photo-album-card {{if public "public"}} border-0' data-test-photo-album-card>
   <div class='card-header card-header--overlay'>
     <img
       alt='{{album.title}}'

app/components/cards/photo-album-card.js

@@ -3,7 +3,7 @@ import Component from '@ember/component';
 const PhotoAlbumCardComponent = Component.extend({});
 
 PhotoAlbumCardComponent.reopenClass({
-  positionalParams: ['album'],
+  positionalParams: ['album', 'public'],
 });
 
 export default PhotoAlbumCardComponent;

app/components/cards/frontpage-activity-card-small.hbs → app/components/cards/public-activity-card-small.hbs

@@ -4,7 +4,7 @@
   class='card-body p-0'
   {{action action}}
 >
-  <div class='d-flex' data-test-frontpage-activity-card>
+  <div class='d-flex' data-test-public-activity-card>
     <div
       class='col-3 date-holder p-3'
       itemprop='startDate'
@@ -16,7 +16,7 @@
       <b class='month-abbrev'> {{moment-format activity.startTime 'MMM'}}</b>
       <b class='time'> {{moment-format activity.startTime 'HH:mm'}}</b>
     </div>
-    <div class='col-9 frontpage-card-image p-3' style={{style}}>
+    <div class='col-9 public-card-image p-3' style={{style}}>
       <h4 itemprop='name' class='card-title'>{{activity.title}}</h4>
       <span itemprop='location' itemscope itemtype='https://schema.org/Place'>
         <i class='text-light' itemprop='name address'>{{activity.location}}</i>

app/components/cards/public-activity-card-small.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+const PublicActivityCardSmall = Component.extend({
+  classNames: ['card', 'public-activity-card-small', 'border-0', 'p-0'],
+  style: computed('activity.coverPhotoUrl', function () {
+    if (this.activity.coverPhotoUrl) {
+      return htmlSafe(`background-image: url(${this.activity.coverPhotoUrl})`);
+    }
+    return htmlSafe(
+      'background: center/cover url(/images/fallback/public_coverphoto_default.png), rgb(0 0 0 / 12%);'
+    );
+  }),
+});
+
+PublicActivityCardSmall.reopenClass({
+  positionalParams: ['activity'],
+});
+
+export default PublicActivityCardSmall;

app/components/cards/frontpage-article-card.hbs → app/components/cards/public-article-card.hbs

@@ -7,7 +7,7 @@
     <div class='card border-0'>
       <div
         class='card-header card-header--overlay'
-        data-test-frontpage-article-card
+        data-test-public-article-card
       >
         <div class='embed-responsive embed-responsive-16x9'>
           <img

app/components/footer-nav.hbs

@@ -136,7 +136,7 @@
                       href='https://societeitflux.nl/#/contact'
                       target='_blank'
                     >
-                      Neem contact op
+                      {{t 'component.footerNav.flux-contact'}}
                     </a>
                   </td>
                 </tr>
@@ -163,14 +163,14 @@
 
           <div class='col-12 col-sm-6 col-md-3 row justify-content-center'>
             <LinkTo @route='index'>
-              <img src='/images/alphalogowhite.svg' height='160px' />
+              <img src='{{if session.isAuthenticated "/images/alphalogowhite.svg" "/images/alphalogo.svg"}}' height='160px' />
             </LinkTo>
           </div>
         </div>
       </div>
     </div>
 
-    <div class='d-flex footer-bottom pt-3 pb-5 justify-content-center'>
+    <div class='d-flex footer-bottom pt-3 justify-content-center'>
       <span class='footer-bottom-text'>
         {{t 'component.footerNav.by'}}
         {{moment-format (now) 'YYYY'}}

app/components/header-nav.hbs

@@ -1,58 +1,72 @@
-<nav class='navbar pb-0 pt-0' aria-label='breadcrumb'>
+<nav class='navbar pb-0 pt-0 {{if (not session.isAuthenticated) "public"}}' aria-label='breadcrumb'>
   <div class="container-fluid d-flex justify-content-between">
     <span
-      class='left-sidebar-toggle d-block d-md-none link'
+      class='{{if session.isAuthenticated "half-toggle" "pe-2"}} left-sidebar-toggle d-block d-md-none link'
       {{action 'toggleLeftSidebar'}}
     >
       ☰
     </span>
 
-    <span {{action 'handleLogoAction'}} class='navbar-brand'>
-      <div class='header-logo'> </div>
-    </span>
+    {{#if session.isAuthenticated }}
+      <span {{action 'handleLogoAction'}} class='navbar-brand'>
+        <div class='header-logo'> </div>
+      </span>
+    {{else}}
+      <div class='public-header-logo'> </div>
+    {{/if}}
 
-    <div class='d-flex col ps-0 pe-0 navbar-contents-holder'>
+    <div class='d-flex col ps-0 pe-0 navbar-contents-holder {{if (not session.isAuthenticated) "public"}}'>
       <div class='navbar-overflow-wrapper'>
         <div class='navbar-nav col d-flex flex-row'>
-          {{#if (or session.isAuthenticated media.isMobile)}}
+          {{#if session.isAuthenticated}}
             <Breadcrumbs @routeInfos={{@routeInfos}} />
-          {{else}}
-            <BsDropdown {{did-insert (action 'setAvailableStaticPages')}} as |dd|>
-              <dd.button @type="primary">
+          {{else if media.isMobile}}
+          {{else if (not media.isMobile)}}
+            <LinkTo @route='index' class="page-actions-buttons">
+              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentRouteName 'index') 'selected'}}">Home</BsButton>
+            </LinkTo>
+            <BsDropdown class="position-static" as |dd| {{did-insert (action 'setStaticPages')}}>
+              <dd.button @type="primary" class="public-navbar-button {{if this.onAboutUsPage 'selected'}}">
                 {{t "component.headerNav.aboutUs"}}
               </dd.button>
-              <dd.menu @renderInPlace={{false}} as |ddm|>
-                {{#each-in staticPagesForDropdown as |id title|}}
+              <dd.menu class="public-about-us-dropdown" @renderInPlace={{true}} as |ddm|>
+                {{#each-in staticPages as |id title|}}
                   <ddm.item>
-                    <ddm.linkTo @route='static-pages.static-page' @model={{id}}>
+                    <ddm.linkTo @route='static-pages.static-page' @model={{id}} class="btn btn-primary">
                       {{title}}
                     </ddm.linkTo>
                   </ddm.item>
                 {{/each-in}}
               </dd.menu>
             </BsDropdown>
-            <PageActionsButtons @pageActions={{unAuthenticatedMenuOptions}} />
+            <LinkTo @route='static-pages.static-page' @model='word-lid' class="page-actions-buttons">
+              <BsButton @type="primary" class="public-navbar-button {{if (eq 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 router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
+            </LinkTo>
           {{/if}}
         </div>
       </div>
 
+      <div id='navbar-wormhole'></div>
+
       {{#unless session.isAuthenticated}}
         <LinkTo @route='login' class='d-none d-md-flex me-2'>
-          <button class='btn btn-primary' type='button'>
+          <button class='btn btn-primary public-navbar-button {{if (eq router.currentRouteName 'login') 'selected'}}' type='button'>
             {{t 'tag.button.signin'}}
           </button>
         </LinkTo>
       {{/unless}}
-      <div id='navbar-wormhole'></div>
     </div>
 
     {{#unless session.isAuthenticated}}
       <button
-        class='btn btn-locale btn-inverse-locale-{{intl.locale}}'
+        class='btn btn-locale btn-inverse-locale-{{intl.locale}} me-2'
         title='{{t "component.headerNav.changeLocale"}}'
         {{action 'toggleLocale'}}
         type='button'>
       </button>
     {{/unless}}
   </div>
-</nav>
+</nav>

app/components/header-nav.js

@@ -1,8 +1,7 @@
-import { set } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { computed } from '@ember/object';
 import Component from '@ember/component';
 import { tracked } from '@glimmer/tracking';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   tagName: 'nav',
@@ -15,42 +14,15 @@ export default Component.extend({
   store: service(),
   router: service(),
   abilities: service(),
-  availableStaticPages: tracked(),
-  staticPagesForDropdown: computed('availableStaticPages', function () {
-    const result = {};
-    if (this.availableStaticPages) {
-      Object.entries(this.availableStaticPages).forEach(([id, title]) => {
-        if (!['word-lid', 'word-oud-lid', 'sponsoring'].includes(id)) {
-          result[id] = title;
-        }
-      });
-    }
-    return result;
+  staticPages: tracked(),
+
+  onAboutUsPage: computed('router.{currentRouteName,currentURL}', function () {
+    return (
+      this.router.currentRouteName === 'static-pages.static-page.index' &&
+      this.router.currentURL !== '/static-pages/word-lid' &&
+      this.router.currentURL !== '/static-pages/sponsoring'
+    );
   }),
-  unAuthenticatedMenuOptions: computed(
-    'intl.locale',
-    'availableStaticPages',
-    function () {
-      let list = [];
-      list = this.addStaticPageOption(list, 'word-lid', 'becomeMember');
-      list = this.addStaticPageOption(list, 'word-oud-lid', 'becomeOldMember');
-      list.push(
-        {
-          link: 'articles',
-          title: this.intl.t('mixin.menuItems.articles'),
-          icon: '',
-          canAccess: this.abilities.can('show articles'),
-        },
-        {
-          link: 'photo-albums',
-          title: this.intl.t('mixin.menuItems.photoAlbums'),
-          icon: '',
-          canAccess: this.abilities.can('show photo-albums'),
-        }
-      );
-      return this.addStaticPageOption(list, 'sponsoring', 'sponsoring');
-    }
-  ),
 
   actions: {
     handleLogoAction() {
@@ -78,30 +50,21 @@ export default Component.extend({
         this.set('intl.locale', 'nl');
         localStorage.setItem('locale', 'nl');
       }
+      console.log(this.router);
     },
-    setAvailableStaticPages() {
+    setStaticPages() {
       if (!this.session.isAuthenticated && !this.media.isMobile) {
         this.store.findAll('static-page').then((pages) => {
-          // make key-value pairs for all found static pages
-          let newAvailableStaticPages = pages.reduce(
-            (obj, page) => Object.assign(obj, { [page.id]: page.title }),
-            {}
-          );
-          set(this, 'availableStaticPages', newAvailableStaticPages);
+          // make key-value pairs for all found static pages that do not appear by itself
+          let staticPages = {};
+          pages.forEach((page) => {
+            if (!['word-lid', 'sponsoring'].includes(page.id)) {
+              staticPages[page.id] = page.title;
+            }
+          });
+          this.staticPages = staticPages;
         });
       }
     },
   },
-  addStaticPageOption: function (list, id, localeName) {
-    if (this.availableStaticPages && this.availableStaticPages[id]) {
-      list.push({
-        link: 'static-pages.static-page',
-        linkArgument: id,
-        title: this.intl.t('component.headerNav.' + localeName),
-        icon: '',
-        canAccess: this.abilities.can('show static-pages'),
-      });
-    }
-    return list;
-  },
 });

app/components/index/authenticated.hbs

@@ -15,7 +15,7 @@
 <div class='article-cards-wrapper full-width-small-screens ps-3 ps-md-0'>
   <div class='row pb-3 horizontal-scroll-container'>
     {{#each @articles as |article|}}
-      {{cards/frontpage-article-card article class='col-10 col-sm-8 col-lg-4'}}
+      {{cards/public-article-card article class='col-10 col-sm-8 col-lg-4'}}
     {{/each}}
   </div>
 </div>

app/components/index/public.hbs

@@ -1,40 +1,14 @@
-<div class='container-fluid index-header'>
-  <Index::Public::BackgroundImage />
-  <div class="index-poster-overlay"></div>
-  <img src='images/alphalogowhite-large.svg' class='image' />
-  <p class="new-member-text">{{t 'component.index.public.potentialMember.banner'}}</p>
-  <a
-      class='btn btn-lg btn-primary frontpage-button'
-      href='https://forms.gle/R4WYzbWameD6wN817'
-      target='_blank'
-    >
-    {{t 'component.index.public.actionButtons.memberButton'}}
-  </a>
-</div>
-
-<div class='index-yellow-bar full-width'>
-  <div class='container'>
-    <Index::Public::AboutAlpha />
-    <Index::Public::Activities />
-  </div>
-</div>
-
-<Index::Public::PotentialMemberSection />
+<div class="public-index">
+  <Public::Index::Header/>
 
-<div class='flex-items-xs-center index-promo-video'>
-  <Index::Public::YoutubeVideos />
-</div>
-
-<Index::Public::ActionButtons />
-
-<div class='row'>
-  <div class='col-xs col-md-12'>
-    <Index::Public::Articles @articles={{@articles}} />
-    <Index::Public::Photos />
+  <Public::Index::AboutAlpha />
 
-    <AdvertisementTool @row={{true}} />
+  <Public::Index::YoutubeVideos />
 
-    <Index::Public::MemberStories />
-    <Index::Public::AboutFlux />
+  <div class="row">
+    <Public::Index::Activities @doubleActivityColumns={{doubleActivityColumns}} @activities={{activities}} @class="col-12 {{if doubleActivityColumns 'col-lg-8' 'col-lg-5'}}" />
+    <Public::Index::PhotoAlbums @doubleActivityColumns={{doubleActivityColumns}} @class="col-12 {{if doubleActivityColumns 'col-lg-4' 'col-lg-7'}}" />
   </div>
-</div>
+
+  <Public::Index::SponsorBanner />
+</div>