Skip to content

Commit 050fab4

Browse files
ToMaartonTimonBoerlodewigescoderabbitai[bot]
authored
983 new external page design implementation WIP (#1022)
* removed dropdown links, and added flux page * added public card for easy developing * minor lint fix * New/bestuur (#1025) * start with board page * board page is done * lint fix * lint fix * lint fix * lint fix * identity page done (#1026) * identity page done * small responsive fix * lint fix * lint fix * lint fix * partners page * translation fix * added back links to static pages * Update app/templates/public/partners.hbs Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update nl.yaml * Update app/templates/public/identity.hbs Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update app/components/public/index/about-alpha.hbs Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update app/components/public/index/about-alpha.hbs Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update app/components/public/index/about-alpha.hbs Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update app/components/public/index/about-alpha.hbs Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fixed coderabits nitpicks --------- Co-authored-by: Timon Boer <[email protected]> Co-authored-by: lodewiges <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 74f823e commit 050fab4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+554
-139
lines changed

‎app/components/header-nav.hbs‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,16 @@
3636
</ddm.linkTo>
3737
</ddm.item>
3838
{{/each-in}}
39+
{{! put links to other pages here }}
40+
<LinkTo @route='public.board' class="dropdown-item btn btn-primary">
41+
{{t 'mixin.menuItems.board'}}
42+
</LinkTo>
43+
<LinkTo @route='public.identity' class="dropdown-item btn btn-primary">
44+
{{t 'mixin.menuItems.identity'}}
45+
</LinkTo>
46+
<LinkTo @route='public.flux' class="dropdown-item btn btn-primary">
47+
{{t 'mixin.menuItems.flux'}}
48+
</LinkTo>
3949
<LinkTo @route='public.room-forum' class="dropdown-item btn btn-primary">
4050
{{t 'mixin.menuItems.roomForum'}}
4151
</LinkTo>
@@ -44,8 +54,8 @@
4454
<LinkTo @route='static-pages.static-page' @model='word-lid' class="page-actions-buttons">
4555
<BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/word-lid') 'selected'}}">{{t "component.headerNav.becomeMember"}}</BsButton>
4656
</LinkTo>
47-
<LinkTo @route='static-pages.static-page' @model='sponsoring' class="page-actions-buttons">
48-
<BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
57+
<LinkTo @route='public.partners' class="page-actions-buttons">
58+
<BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/public/partners') 'selected'}}">{{t "component.headerNav.partners"}}</BsButton>
4959
</LinkTo>
5060
{{/if}}
5161
</div>

‎app/components/public/card.hbs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="circle-card {{if @horizontal "horizontal" "vertical"}}">
2+
<img class="card-image" src={{@imgurl}} alt="">
3+
<div class="content">
4+
<h2 class="card-title">{{@title}}</h2>
5+
<h3 class="card-subtitle">{{@subtitle}}</h3>
6+
<p class="card-text">{{@text}}</p>
7+
</div>
8+
</div>

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,29 @@
22
<h1 class="public-title">{{t 'component.public.index.aboutAlpha.intro-title'}}</h1>
33
<hr class="public-title-border border border-secondary bg-secondary border-3 opacity-100" />
44

5-
<p class="mt-3 text-center about-text">{{t 'component.public.index.aboutAlpha.intro'}}</p>
5+
<p class="mt-3 text-center public-text">{{t 'component.public.index.aboutAlpha.intro'}}</p>
66

77
<div class="mt-3 row">
88
<div class="about-v col-12 col-md-4 mt-5">
9-
<img class="about-v-image" src="/images/public/index/vriendschap.jpg" alt="">
10-
<h2 class="about-v-title">{{t 'component.public.index.aboutAlpha.vriendschap-title'}}</h2>
11-
<p class="about-v-text">
12-
{{t 'component.public.index.aboutAlpha.vriendschap-text'}}
13-
</p>
9+
<Public::Card
10+
@imgurl="/images/public/index/vriendschap.jpg"
11+
@title={{t 'component.public.index.aboutAlpha.vriendschap-title'}}
12+
@text={{t 'component.public.index.aboutAlpha.vriendschap-text'}}
13+
/>
1414
</div>
1515
<div class="about-v col-12 col-md-4">
16-
<img class="about-v-image" src="/images/public/index/vorming.jpg" alt="">
17-
<h2 class="about-v-title">{{t 'component.public.index.aboutAlpha.vorming-title'}}</h2>
18-
<p class="about-v-text">
19-
{{t 'component.public.index.aboutAlpha.vorming-text'}}
20-
</p>
16+
<Public::Card
17+
@imgurl="/images/public/index/vorming.jpg"
18+
@title={{t 'component.public.index.aboutAlpha.vorming-title'}}
19+
@text={{t 'component.public.index.aboutAlpha.vorming-text'}}
20+
/>
2121
</div>
2222
<div class="about-v col-12 col-md-4 mt-5">
23-
<img class="about-v-image" src="/images/public/index/verantwoordelijkheid.jpg" alt="">
24-
<h2 class="about-v-title">{{t 'component.public.index.aboutAlpha.verantwoordelijkheid-title'}}</h2>
25-
<p class="about-v-text">
26-
{{t 'component.public.index.aboutAlpha.verantwoordelijkheid-text'}}
27-
</p>
23+
<Public::Card
24+
@imgurl="/images/public/index/verantwoordelijkheid.jpg"
25+
@title={{t 'component.public.index.aboutAlpha.verantwoordelijkheid-title'}}
26+
@text={{t 'component.public.index.aboutAlpha.verantwoordelijkheid-text'}}
27+
/>
2828
</div>
2929
</div>
3030
</div>

‎app/router.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,10 @@ Router.map(function () {
268268

269269
this.route('public', function () {
270270
this.route('room-forum');
271+
this.route('flux');
272+
this.route('board');
273+
this.route('identity');
274+
this.route('partners');
271275
});
272276

273277
return true;

‎app/routes/public/board.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Route from '@ember/routing/route';
2+
3+
export default class PublicBoardRoute extends Route {}

‎app/routes/public/flux.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Route from '@ember/routing/route';
2+
3+
export default class PublicFluxRoute extends Route {}

‎app/routes/public/identity.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Route from '@ember/routing/route';
2+
3+
export default class PublicIdentityRoute extends Route {}

‎app/routes/public/partners.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Route from '@ember/routing/route';
2+
3+
export default class PublicPartnersRoute extends Route {}

‎app/styles/app.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@import 'components/pagination';
2727
@import 'components/photo-tags';
2828
@import 'components/public/header';
29+
@import 'components/public/card';
2930
@import 'components/public/index/about-alpha';
3031
@import 'components/public/index/activities';
3132
@import 'components/public/index/photo-albums';
@@ -72,6 +73,7 @@
7273
@import 'routes/polls';
7374
@import 'routes/public';
7475
@import 'routes/sog/name-trainer';
76+
@import 'routes/public/board';
7577

7678
// Import package style
7779
@import 'ember-power-select/themes/bootstrap';

‎app/styles/components/public/card.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.circle-card {
2+
display: flex;
3+
4+
&.vertical {
5+
flex-direction: column;
6+
align-items: center;
7+
8+
.content {
9+
align-items: center; // center titles and text
10+
text-align: center;
11+
}
12+
}
13+
14+
&.horizontal {
15+
flex-direction: row;
16+
align-items: flex-start;
17+
18+
.card-image {
19+
margin-right: 2rem; // space between image and content
20+
}
21+
22+
.content {
23+
align-items: flex-start; // align left
24+
text-align: left;
25+
26+
.card-title {
27+
margin-top: 0;
28+
}
29+
}
30+
}
31+
32+
.card-image {
33+
width: 100%;
34+
clip-path: circle();
35+
object-fit: cover;
36+
max-width: 25rem;
37+
}
38+
39+
.content {
40+
display: flex;
41+
flex-direction: column;
42+
43+
.card-title {
44+
margin-top: 1rem;
45+
color: $brand-secondary;
46+
font-family: "Libre Franklin", sans-serif;
47+
}
48+
49+
.card-subtitle {
50+
margin-top: 0.3rem;
51+
color: $brand-secondary;
52+
font-family: "Libre Franklin", sans-serif;
53+
}
54+
55+
.card-text {
56+
margin-top: 1rem;
57+
text-align: justify;
58+
font-size: 1.5rem;
59+
}
60+
}
61+
}
62+
63+
/* Responsive: horizontal becomes vertical on small screens */
64+
@media (width <= 768px) {
65+
.circle-card.horizontal {
66+
flex-direction: column;
67+
align-items: center;
68+
69+
.card-image {
70+
margin-right: 0;
71+
margin-bottom: 1.5rem;
72+
}
73+
74+
.content {
75+
align-items: center;
76+
text-align: center;
77+
}
78+
}
79+
}

0 commit comments

Comments
 (0)