Skip to content

Commit

Permalink
Redesign of external website 2023 - Index page (#758)
Browse files Browse the repository at this point in the history
* Started on index page

* added 3 v's and videos

* added frontpage images

* added activities and photos

* temp commit

* dynamic columns for calendar and photo-albums

* frontpage done - cleanup still needed

* cleanup part 1

* cleanup part 2

* re-structured language files to split up public website from logged in one

* added text to language files

* merge fixed

* minor renamings

* merge fixed - part 2

* fixed linting errors

* fixed one last issue

* fixed requested changes

* fixed ad heights

* Minor fixes

* added untracked files

---------

Co-authored-by: guidojw <[email protected]>
  • Loading branch information
Ellen-Wittingen and guidojw authored Jul 25, 2023
1 parent 102a482 commit 49b1d77
Show file tree
Hide file tree
Showing 90 changed files with 1,264 additions and 1,111 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ testem.log
# IDE Folders #
###############
/.idea/*
/.vscode/*

# ember-try
/.node_modules.ember-try/
Expand Down
2 changes: 1 addition & 1 deletion app/components/advertisement-tool.hbs
Original file line number Diff line number Diff line change
@@ -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|}}
Expand Down
18 changes: 0 additions & 18 deletions app/components/cards/frontpage-activity-card-small.js

This file was deleted.

2 changes: 1 addition & 1 deletion app/components/cards/photo-album-card.hbs
Original file line number Diff line number Diff line change
@@ -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}}'
Expand Down
2 changes: 1 addition & 1 deletion app/components/cards/photo-album-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Component from '@ember/component';
const PhotoAlbumCardComponent = Component.extend({});

PhotoAlbumCardComponent.reopenClass({
positionalParams: ['album'],
positionalParams: ['album', 'public'],
});

export default PhotoAlbumCardComponent;
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
Expand Down
21 changes: 21 additions & 0 deletions app/components/cards/public-activity-card-small.js
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
File renamed without changes.
6 changes: 3 additions & 3 deletions app/components/footer-nav.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
href='https://societeitflux.nl/#/contact'
target='_blank'
>
Neem contact op
{{t 'component.footerNav.flux-contact'}}
</a>
</td>
</tr>
Expand All @@ -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'}}
Expand Down
50 changes: 32 additions & 18 deletions app/components/header-nav.hbs
Original file line number Diff line number Diff line change
@@ -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>
75 changes: 19 additions & 56 deletions app/components/header-nav.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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() {
Expand Down Expand Up @@ -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;
},
});
2 changes: 1 addition & 1 deletion app/components/index/authenticated.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
46 changes: 10 additions & 36 deletions app/components/index/public.hbs
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 49b1d77

Please sign in to comment.