Skip to content

Commit e4a4f34

Browse files
ssb-cgnssb-cgn
authored
[MIM-2198] Mim-2198 New part Timeline (#3172)
* MIM-2198:Timeline part from design sprint * MIM-2198:Added optionset urlArticle * First version Show more button * Refactoring show more years button * MIM-2198:Added external categoryLink * Fixing bug * Fikse Vis flere knapp og endret hendelsestype * changing catogoryes * Teste alternativ part * Fikse liten feil i ny mal * Added targetUrl to DirectorBox * Fjernet alternativ visning * Lagt til property for visning antall aar og fikset Vis flere knappen * Midtstilt innhold hvis fullbredde * Lagt til tittel og ingress * designendringer tittel og chip * Fikser mer styling * Mer designmikk * designendringer * Mer mikk * Fikset Vis flere knapp ved filtrering * Fikset typescriptfeil * Refaktorering * Endringer på parten
1 parent 6916427 commit e4a4f34

File tree

12 files changed

+835
-0
lines changed

12 files changed

+835
-0
lines changed

‎src/main/resources/assets/styles/_timeline.scss‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
.ssb-timeline {
2+
.title-container {
3+
display: grid;
4+
grid-template-columns: repeat(12, 1fr);
5+
margin-top: 4rem;
6+
margin-bottom: 5rem;
7+
8+
.title-ingress-wrapper {
9+
grid-column: 2 / span 10;
10+
11+
.title {
12+
display: block;
13+
margin: 0 auto;
14+
}
15+
.ingress {
16+
display: block;
17+
margin: 0 auto;
18+
font-size: 1.25rem;
19+
}
20+
}
21+
}
22+
23+
.filter-container {
24+
display: flex;
25+
justify-content: center;
26+
27+
.filter {
28+
display: flex;
29+
grid-column: 3 / span 8;
30+
flex-wrap: wrap;
31+
gap: 0.75rem;
32+
margin-bottom: 4rem;
33+
width: 740px;
34+
35+
.ssb-tag {
36+
&.active {
37+
background: $ssb-dark-5;
38+
border: 2px solid $ssb-dark-5;
39+
color: $ssb-white;
40+
}
41+
}
42+
}
43+
}
44+
45+
.timeline-container {
46+
display: flex;
47+
justify-content: center;
48+
}
49+
50+
.timeline {
51+
position: relative;
52+
padding-left: 20px;
53+
width: 740px;
54+
55+
.circle {
56+
width: 16px;
57+
height: 16px;
58+
background-color: #274247;
59+
border-radius: 50%;
60+
position: absolute;
61+
top: -10px;
62+
transform: translateX(-40%);
63+
}
64+
65+
&:before {
66+
content: '';
67+
width: 4px;
68+
height: 100%;
69+
background: #274247;
70+
position: absolute;
71+
top: 0;
72+
}
73+
74+
&:after {
75+
content: '';
76+
display: block;
77+
width: 100%;
78+
clear: both;
79+
}
80+
81+
.timeline-elements {
82+
padding: 25px 0;
83+
list-style: none;
84+
}
85+
86+
.timeline-content {
87+
left: -20px;
88+
position: relative;
89+
margin-bottom: 30px;
90+
91+
.year {
92+
width: 180px;
93+
height: 80px;
94+
background: #274247;
95+
border-radius: 4px;
96+
position: absolute;
97+
align-content: center;
98+
99+
&:after {
100+
content: '';
101+
position: absolute;
102+
top: 0;
103+
right: -1px;
104+
width: 0;
105+
height: 0;
106+
border-top: 40px solid transparent;
107+
border-bottom: 40px solid transparent;
108+
border-right: 20px solid #f0f8f9;
109+
border-radius: 4px;
110+
}
111+
112+
span {
113+
@include roboto-condenced;
114+
color: #fff;
115+
padding: 20px 40px;
116+
font-size: 28px;
117+
}
118+
}
119+
120+
.events {
121+
padding-top: 90px;
122+
width: 100%;
123+
min-width: 400px;
124+
position: relative;
125+
126+
.event {
127+
margin-bottom: 20px;
128+
129+
&:first-child {
130+
margin-top: 20px;
131+
}
132+
133+
&:last-child {
134+
margin-bottom: 80px;
135+
}
136+
137+
.ssb-card {
138+
max-width: 400px;
139+
}
140+
}
141+
}
142+
143+
.event-box {
144+
background: #fff;
145+
border: 1px solid #274247;
146+
border-radius: 8px;
147+
display: grid;
148+
padding: 20px 40px;
149+
width: 100%;
150+
.title {
151+
@include roboto;
152+
font-weight: bold;
153+
font-size: 20px;
154+
}
155+
.text {
156+
margin-top: 10px;
157+
}
158+
}
159+
}
160+
}
161+
162+
.button-more {
163+
left: -20px;
164+
top: -30px;
165+
position: relative;
166+
}
167+
168+
@include media-breakpoint-down(lg) {
169+
.title-container {
170+
display: block;
171+
margin-top: 2rem;
172+
}
173+
174+
.filter-container {
175+
.filter {
176+
margin-top: 3rem;
177+
margin-bottom: 4rem;
178+
}
179+
}
180+
181+
.timeline-container {
182+
justify-content: start;
183+
}
184+
185+
.timeline {
186+
padding-left: 10px;
187+
width: 100%;
188+
189+
.timeline-content {
190+
width: calc(100% + 10px);
191+
left: -10px;
192+
193+
.events {
194+
min-width: 0;
195+
}
196+
197+
.event-box {
198+
padding: 20px;
199+
}
200+
}
201+
}
202+
203+
.button-more {
204+
left: -10px;
205+
}
206+
}
207+
}

‎src/main/resources/assets/styles/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ $container-max-widths: (
9191
@import './statisticContact';
9292
@import './popup';
9393
@import './print';
94+
@import './timeline';
9495

9596
body {
9697
-moz-osx-font-smoothing: grayscale;

‎src/main/resources/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ declare global {
7171
export type StatisticDescription = _PartComponent<'mimir:statisticDescription'>
7272
export type SubjectArticleList = _PartComponent<'mimir:subjectArticleList'>
7373
export type Table = _PartComponent<'mimir:table'>
74+
export type Timeline = _PartComponent<'mimir:timeline'>
7475
export type UpcomingReleases = _PartComponent<'mimir:upcomingReleases'>
7576
export type Variables = _PartComponent<'mimir:variables'>
7677
export type VideoEmbed = _PartComponent<'mimir:videoEmbed'>

‎src/main/resources/lib/types/partTypes/timeline.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
export interface TimelineProps {
2+
title: string
3+
ingress: string
4+
timelineElements: TimelineElement[]
5+
showFilter: boolean
6+
showMoreButtonText: string
7+
countYear: number
8+
}
9+
10+
export interface TimelineElement {
11+
year: string
12+
event: TimelineEvent[]
13+
//event?: TimelineEvent | TimelineEvent[]
14+
}
15+
16+
export interface TimelineEvent {
17+
eventType: string
18+
title: string
19+
text?: string
20+
directorImage?: string
21+
directorImageAltText?: string
22+
timelineCategory?: string
23+
targetUrl?: string
24+
}
25+
export interface SimpleBox {
26+
title: string
27+
text?: string
28+
timelineCategory: string
29+
urlContentSelector?: hrefManual | hrefContent
30+
}
31+
32+
export interface ExpansionBox {
33+
title: string
34+
text?: string
35+
timelineCategory: string
36+
}
37+
38+
export interface DirectorBox {
39+
title: string
40+
text?: string
41+
directorImage?: string
42+
urlContentSelector?: hrefManual | hrefContent
43+
}
44+
45+
export interface Event {
46+
simpleBox?: SimpleBox
47+
expansionBox?: ExpansionBox
48+
directorBox?: DirectorBox
49+
_selected: 'simpleBox' | 'expansionBox' | 'directorBox'
50+
}
51+
52+
export interface TimelineItemSet {
53+
year: string
54+
event: Event[]
55+
}
56+
57+
interface hrefManual {
58+
_selected: 'optionLink'
59+
optionLink: {
60+
link?: string
61+
}
62+
}
63+
64+
interface hrefContent {
65+
_selected: 'optionXPContent'
66+
optionXPContent: {
67+
xpContent?: string
68+
}
69+
}

‎src/main/resources/site/i18n/phrases.properties‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,7 @@ highcharts.legendLabelNoTitle = Bytt synlighet på serie, {chartTitle}
393393

394394
button.showMore = Vis flere
395395
button.showAll = Vis alle
396+
button.showMoreYears = Vis flere år
396397
methodsAndDocumentation = Metoder og dokumentasjon
397398

398399
nameSearch.title = Navnesøk

‎src/main/resources/site/i18n/phrases_en.properties‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,7 @@ highcharts.legendLabelNoTitle = Toggle series visibility, {chartTitle}
393393

394394
button.showMore = Show more
395395
button.showAll = Show all
396+
button.showMoreYears = Show more years
396397
methodsAndDocumentation = Methods and documentation
397398

398399
nameSearch.title = Name search

‎src/main/resources/site/i18n/phrases_nn.properties‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,7 @@ highcharts.legendLabelNoTitle = Bytt synlighet på serie, {chartTitle}
386386

387387
button.showMore = Vis fleire
388388
button.showAll = Vis alle
389+
button.showMoreYears = Vis fleire år
389390
methodsAndDocumentation = Metoder og dokumentasjon
390391

391392
nameSearch.title = Namnsøk

‎src/main/resources/site/mixins/linkUrlOrContent/linkUrlOrContent.xml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<mixin>
2+
<display-name>Lenke</display-name>
3+
<form>
4+
<option-set name="urlContentSelector">
5+
<label>Lenke</label>
6+
<expanded>false</expanded>
7+
<occurrences minimum="0" maximum="1"/>
8+
<options minimum="0" maximum="1">
9+
<option name="optionLink">
10+
<label>URL</label>
11+
<items>
12+
<input name="link" type="TextLine">
13+
<label>Lenke</label>
14+
<occurrences minimum="0" maximum="1"/>
15+
</input>
16+
</items>
17+
</option>
18+
<option name="optionXPContent">
19+
<label>XP-innhold</label>
20+
<items>
21+
<input name="xpContent" type="ContentSelector">
22+
<label>Innhold i XP</label>
23+
<occurrences minimum="0" maximum="1"/>
24+
<config>
25+
<allowPath>${site}</allowPath>
26+
</config>
27+
</input>
28+
</items>
29+
</option>
30+
</options>
31+
</option-set>
32+
</form>
33+
</mixin>

‎src/main/resources/site/mixins/timelineCategory/timelineCategory.xml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<mixin>
2+
<display-name>Hendelsestype Tidslinje</display-name>
3+
<form>
4+
<input name="timelineCategory" type="RadioButton">
5+
<label>Hendelsestype</label>
6+
<occurrences minimum="1" maximum="1"/>
7+
<config>
8+
<option value="statistic">Statistikk</option>
9+
<option value="aboutSsb">Om SSB</option>
10+
</config>
11+
<default>aboutSsb</default>
12+
</input>
13+
</form>
14+
</mixin>

0 commit comments

Comments
 (0)