Skip to content

Commit fdaf03b

Browse files
ToMaartonToMaarton
committed
added public card for easy developing
1 parent 86773e9 commit fdaf03b

File tree

8 files changed

+133
-44
lines changed

8 files changed

+133
-44
lines changed

‎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: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,25 @@
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/styles/app.scss‎

Lines changed: 1 addition & 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';

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

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

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

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,7 @@
44
hyphens: none;
55
}
66

7-
.about-v {
8-
display: flex;
9-
flex-direction: column;
10-
align-items: center;
7+
.about-v{
118
padding: 0 5%;
12-
13-
.about-v-image {
14-
width: 100%;
15-
clip-path: circle();
16-
object-fit: cover;
17-
max-width: 25rem;
18-
}
19-
20-
.about-v-title {
21-
margin-top: 1rem;
22-
text-align: center;
23-
color: $brand-secondary;
24-
font-family: "Libre Franklin", sans-serif;
25-
}
26-
27-
.about-v-text {
28-
text-align: justify;
29-
line-height: 1.6rem;
30-
font-size: 1.3rem;
31-
}
329
}
33-
}
10+
}

‎app/templates/public/flux.hbs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,4 @@
55
@introTitle="{{t 'component.public.roomForum.intro-title'}}"
66
@intro="{{t 'component.public.flux.intro'}}"
77
/>
8-
98
</div>

‎tests/integration/components/public/card-test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { render } from '@ember/test-helpers';
4+
import { hbs } from 'ember-cli-htmlbars';
5+
6+
module('Integration | Component | public/card', function (hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function (assert) {
10+
// Set any properties with this.set('myProperty', 'value');
11+
// Handle any actions with this.set('myAction', function(val) { ... });
12+
13+
await render(hbs`<Public::Card />`);
14+
assert.dom(this.element).hasText('');
15+
16+
await render(hbs`<Public::Card @title="title"/>`);
17+
assert.dom(this.element).hasText('title');
18+
await render(hbs`<Public::Card @subtitle="subtitle"/>`);
19+
assert.dom(this.element).hasText('subtitle');
20+
await render(hbs`<Public::Card @text="sample text"/>`);
21+
assert.dom(this.element).hasText('sample text');
22+
});
23+
});

‎yarn.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8828,9 +8828,9 @@ __metadata:
88288828
linkType: hard
88298829

88308830
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000844, caniuse-lite@npm:^1.0.30001313, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001541":
8831-
version: 1.0.30001668
8832-
resolution: "caniuse-lite@npm:1.0.30001668"
8833-
checksum: ce6996901b5883454a8ddb3040f82342277b6a6275876dfefcdecb11f7e472e29877f34cae47c2b674f08f2e71971dd4a2acb9bc01adfe8421b7148a7e9e8297
8831+
version: 1.0.30001733
8832+
resolution: "caniuse-lite@npm:1.0.30001733"
8833+
checksum: cf9d0701ef5617231072be7db74a077ac7a453c8672fe0f17df14aee73f8f253b42cd0d95e1f150ff73453edb115b7131e98b416070b798c8f41b25606f15292
88348834
languageName: node
88358835
linkType: hard
88368836

0 commit comments

Comments
 (0)