diff options
author | 2019-04-11 21:25:07 +0200 | |
---|---|---|
committer | 2019-04-11 21:25:07 +0200 | |
commit | 6a6f3fbc65077ac68d76382c4e76afc6cc6ed4b1 (patch) | |
tree | 6daabe7a4cafa12c65aab7260a11352e8e8375a8 /src/features | |
parent | fix lint issues (diff) | |
download | ferdium-app-6a6f3fbc65077ac68d76382c4e76afc6cc6ed4b1.tar.gz ferdium-app-6a6f3fbc65077ac68d76382c4e76afc6cc6ed4b1.tar.zst ferdium-app-6a6f3fbc65077ac68d76382c4e76afc6cc6ed4b1.zip |
Finalize styling
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/announcements/components/AnnouncementScreen.js | 124 |
1 files changed, 110 insertions, 14 deletions
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js index 2682b7890..e0c65c11f 100644 --- a/src/features/announcements/components/AnnouncementScreen.js +++ b/src/features/announcements/components/AnnouncementScreen.js | |||
@@ -8,6 +8,13 @@ import { Button } from '@meetfranz/forms'; | |||
8 | 8 | ||
9 | import { announcementsStore } from '../index'; | 9 | import { announcementsStore } from '../index'; |
10 | import UIStore from '../../../stores/UIStore'; | 10 | import UIStore from '../../../stores/UIStore'; |
11 | import { gaEvent } from '../../../lib/analytics'; | ||
12 | |||
13 | const renderer = new marked.Renderer(); | ||
14 | |||
15 | renderer.link = (href, title, text) => `<a target="_blank" href="${href}" title="${title}">${text}</a>`; | ||
16 | |||
17 | const markedOptions = { sanitize: true, renderer }; | ||
11 | 18 | ||
12 | const messages = defineMessages({ | 19 | const messages = defineMessages({ |
13 | headline: { | 20 | headline: { |
@@ -31,32 +38,42 @@ const styles = theme => ({ | |||
31 | headline: { | 38 | headline: { |
32 | color: theme.colorHeadline, | 39 | color: theme.colorHeadline, |
33 | margin: [25, 0, 40], | 40 | margin: [25, 0, 40], |
34 | 'max-width': 500, | 41 | // 'max-width': 500, |
35 | 'text-align': 'center', | 42 | 'text-align': 'center', |
36 | 'line-height': '1.3em', | 43 | 'line-height': '1.3em', |
37 | }, | 44 | }, |
38 | announcement: { | 45 | announcement: { |
39 | height: '100vh', | 46 | height: 'auto', |
40 | display: 'flex', | 47 | |
41 | flexDirection: 'column', | 48 | [`@media(min-width: ${smallScreen})`]: { |
42 | justifyContent: 'center', | 49 | display: 'flex', |
50 | flexDirection: 'column', | ||
51 | justifyContent: 'center', | ||
52 | height: '100vh', | ||
53 | }, | ||
43 | }, | 54 | }, |
44 | main: { | 55 | main: { |
56 | display: 'flex', | ||
57 | flexDirection: 'column', | ||
45 | flexGrow: 1, | 58 | flexGrow: 1, |
59 | justifyContent: 'center', | ||
60 | |||
46 | '& h1': { | 61 | '& h1': { |
47 | marginTop: 40, | 62 | margin: [40, 0, 15], |
48 | fontSize: 50, | 63 | fontSize: 70, |
49 | color: theme.styleTypes.primary.accent, | 64 | color: theme.styleTypes.primary.accent, |
50 | textAlign: 'center', | 65 | textAlign: 'center', |
66 | |||
51 | [`@media(min-width: ${smallScreen})`]: { | 67 | [`@media(min-width: ${smallScreen})`]: { |
52 | marginTop: 75, | 68 | marginTop: 0, |
53 | }, | 69 | }, |
54 | }, | 70 | }, |
55 | '& h2': { | 71 | '& h2': { |
56 | fontSize: 24, | 72 | fontSize: 30, |
57 | fontWeight: 300, | 73 | fontWeight: 300, |
58 | color: theme.colorText, | 74 | color: theme.colorText, |
59 | textAlign: 'center', | 75 | textAlign: 'center', |
76 | marginBottom: 60, | ||
60 | }, | 77 | }, |
61 | }, | 78 | }, |
62 | mainBody: { | 79 | mainBody: { |
@@ -103,8 +120,55 @@ const styles = theme => ({ | |||
103 | }, | 120 | }, |
104 | spotlight: { | 121 | spotlight: { |
105 | height: 'auto', | 122 | height: 'auto', |
123 | background: theme.announcements.spotlight.background, | ||
124 | padding: 60, | ||
125 | marginTop: 80, | ||
126 | [`@media(min-width: ${smallScreen})`]: { | ||
127 | marginTop: 0, | ||
128 | justifyContent: 'center', | ||
129 | alignItems: 'flex-start', | ||
130 | display: 'flex', | ||
131 | flexDirection: 'row', | ||
132 | }, | ||
133 | }, | ||
134 | spotlightTopicContainer: { | ||
135 | textAlign: 'center', | ||
136 | marginBottom: 20, | ||
137 | |||
138 | [`@media(min-width: ${smallScreen})`]: { | ||
139 | marginBottom: 0, | ||
140 | minWidth: 250, | ||
141 | maxWidth: 400, | ||
142 | width: '100%', | ||
143 | textAlign: 'right', | ||
144 | paddingRight: 80, | ||
145 | }, | ||
146 | }, | ||
147 | spotlightContentContainer: { | ||
148 | textAlign: 'center', | ||
149 | [`@media(min-width: ${smallScreen})`]: { | ||
150 | height: 'auto', | ||
151 | maxWidth: 600, | ||
152 | textAlign: 'left', | ||
153 | }, | ||
154 | '& p': { | ||
155 | lineHeight: '1.5em', | ||
156 | }, | ||
157 | }, | ||
158 | spotlightTopic: { | ||
159 | fontSize: 20, | ||
160 | marginBottom: 5, | ||
161 | letterSpacing: 0, | ||
162 | fontWeight: 100, | ||
163 | }, | ||
164 | spotlightSubject: { | ||
165 | fontSize: 20, | ||
106 | }, | 166 | }, |
107 | changelog: { | 167 | changelog: { |
168 | maxWidth: 650, | ||
169 | margin: [100, 'auto'], | ||
170 | height: 'auto', | ||
171 | |||
108 | '& h3': { | 172 | '& h3': { |
109 | fontSize: '24px', | 173 | fontSize: '24px', |
110 | margin: '1.5em 0 1em 0', | 174 | margin: '1.5em 0 1em 0', |
@@ -112,6 +176,9 @@ const styles = theme => ({ | |||
112 | '& li': { | 176 | '& li': { |
113 | marginBottom: '1em', | 177 | marginBottom: '1em', |
114 | }, | 178 | }, |
179 | '& div': { | ||
180 | height: 'auto', | ||
181 | }, | ||
115 | }, | 182 | }, |
116 | }); | 183 | }); |
117 | 184 | ||
@@ -148,20 +215,49 @@ class AnnouncementScreen extends Component { | |||
148 | /> | 215 | /> |
149 | </div> | 216 | </div> |
150 | <div className={classes.mainText}> | 217 | <div className={classes.mainText}> |
151 | <p | 218 | <div |
152 | dangerouslySetInnerHTML={{ | 219 | dangerouslySetInnerHTML={{ |
153 | __html: marked(announcement.main.text, { sanitize: true }), | 220 | __html: marked(announcement.main.text, markedOptions), |
154 | }} | 221 | }} |
155 | /> | 222 | /> |
156 | <div className={classes.mainCtaButton}> | 223 | <div className={classes.mainCtaButton}> |
157 | <Button label={announcement.main.cta.label} /> | 224 | <Button |
225 | label={announcement.main.cta.label} | ||
226 | onClick={() => { | ||
227 | const { analytics } = announcement.main.cta; | ||
228 | window.location.href = `#${announcement.main.cta.href}`; | ||
229 | |||
230 | gaEvent(analytics.category, analytics.action, announcement.main.cta.label); | ||
231 | }} | ||
232 | /> | ||
158 | </div> | 233 | </div> |
159 | </div> | 234 | </div> |
160 | </div> | 235 | </div> |
161 | </div> | 236 | </div> |
162 | {announcement.spotlight && ( | 237 | {announcement.spotlight && ( |
163 | <div className={classes.spotlight}> | 238 | <div className={classes.spotlight}> |
164 | <h2>{announcement.spotlight.title}</h2> | 239 | <div className={classes.spotlightTopicContainer}> |
240 | <h2 className={classes.spotlightTopic}>{announcement.spotlight.title}</h2> | ||
241 | <h3 className={classes.spotlightSubject}>{announcement.spotlight.subject}</h3> | ||
242 | </div> | ||
243 | <div className={classes.spotlightContentContainer}> | ||
244 | <div | ||
245 | dangerouslySetInnerHTML={{ | ||
246 | __html: marked(announcement.spotlight.text, markedOptions), | ||
247 | }} | ||
248 | /> | ||
249 | <div className={classes.mainCtaButton}> | ||
250 | <Button | ||
251 | label={announcement.spotlight.cta.label} | ||
252 | onClick={() => { | ||
253 | const { analytics } = announcement.spotlight.cta; | ||
254 | window.location.href = `#${announcement.spotlight.cta.href}`; | ||
255 | |||
256 | gaEvent(analytics.category, analytics.action, announcement.spotlight.cta.label); | ||
257 | }} | ||
258 | /> | ||
259 | </div> | ||
260 | </div> | ||
165 | </div> | 261 | </div> |
166 | )} | 262 | )} |
167 | </div> | 263 | </div> |
@@ -174,7 +270,7 @@ class AnnouncementScreen extends Component { | |||
174 | </h1> | 270 | </h1> |
175 | <div | 271 | <div |
176 | dangerouslySetInnerHTML={{ | 272 | dangerouslySetInnerHTML={{ |
177 | __html: marked(changelog, { sanitize: true }), | 273 | __html: marked(changelog, markedOptions), |
178 | }} | 274 | }} |
179 | /> | 275 | /> |
180 | </div> | 276 | </div> |