generated from fastn-stack/fastn-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
lib.ftd
148 lines (116 loc) · 3.99 KB
/
lib.ftd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
-- import: fastn-stack.github.io/fastn-js/utils
-- component display-certificate:
ftd.ui list ui:
boolean landscape: true
string certificate-id: some-certificate-id-for-download-purpose
private boolean $mouse-in: false
private boolean $on-hover: false
private boolean $mouse-over: false
optional string discord-link:
optional string github-link:
optional string linkedin-link:
-- ftd.row:
width if { ftd.device == "mobile" }: fill-container
spacing.fixed.px: 24
-- ftd.column:
width.fixed.px: 1250
align-content: right
-- social-links:
discord-link: $display-certificate.discord-link
github-link: $display-certificate.github-link
linkedin-link: $display-certificate.linkedin-link
-- download-button:
certificate-id: $display-certificate.certificate-id
-- ftd.column:
width: fill-container
id: $display-certificate.certificate-id
-- display-certificate.ui.0:
-- end: ftd.column
-- ftd.image:
src: $assets.files.assets.certificate.fastn-badge-white.svg
width.fixed.px: 140
link: https://fastn.com/
margin-top.px: 8
open-in-new-tab: true
-- end: ftd.column
-- end: ftd.row
-- end: display-certificate
-- component social-links:
string discord-link:
string linkedin-link:
string github-link:
boolean $discord-mouse-in: false
boolean $github-mouse-in: false
boolean $linkedin-mouse-in: false
-- ftd.row:
width: hug-content
align-self: end
padding-horizontal.px: 12
padding-vertical.px: 20
color: $inherited.colors.text-strong
role: $inherited.types.copy-small
spacing.fixed.px: 20
margin-left.px if { ftd.device == "desktop" }: 20
background.solid: $inherited.colors.background.base
-- ftd.image:
if: { social-links.discord-link != NULL }
src: $assets.files.assets.discord.svg
src if { social-links.discord-mouse-in }: $assets.files.assets.discord-hover.svg
width.fixed.px: 35
height.fixed.px: 35
link: $social-links.discord-link
$on-mouse-enter$: $ftd.set-bool($a = $social-links.discord-mouse-in, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $social-links.discord-mouse-in, v = false)
-- ftd.image:
if: { social-links.linkedin-link != NULL }
src: $assets.files.assets.linkedin.svg
src if { social-links.linkedin-mouse-in }: $assets.files.assets.linkedin-hover.svg
width.fixed.px: 35
height.fixed.px: 35
link: $social-links.linkedin-link
$on-mouse-enter$: $ftd.set-bool($a = $social-links.linkedin-mouse-in, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $social-links.linkedin-mouse-in, v = false)
-- ftd.image:
if: { social-links.github-link != NULL }
src: $assets.files.assets.github.svg
src if { social-links.github-mouse-in }: $assets.files.assets.github-hover.svg
width.fixed.px: 35
height.fixed.px: 35
link: $social-links.github-link
$on-mouse-enter$: $ftd.set-bool($a = $social-links.github-mouse-in, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $social-links.github-mouse-in, v = false)
-- end: ftd.row
-- end: social-links
-- component download-button:
boolean $mouse-in: false
string certificate-id:
string filename: certificate.jpg
-- ftd.row:
width: hug-content
align-self: end
padding-horizontal.px: 12
padding-vertical.px: 10
border-width.px: 1
border-color: $inherited.colors.border
border-radius.px: 48
color: $inherited.colors.text-strong
role: $inherited.types.copy-small
spacing.fixed.px: 8
margin-left.px if { ftd.device == "desktop" }: 20
background.solid: $inherited.colors.background.base
background.solid if { download-button.mouse-in }: $inherited.colors.cta-primary.hover
$on-mouse-enter$: $ftd.set-bool($a = $download-button.mouse-in, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $download-button.mouse-in, v = false)
$on-click$: $utils.download-as-image(element_id = $download-button.certificate-id, filename = $download-button.filename)
-- ftd.image:
src: $assets.files.assets.certificate.download.svg
src if { download-button.mouse-in }: $assets.files.assets.certificate.download-hover.svg
width.fixed.px: 16
height.fixed.px: 16
align-self: center
-- ftd.text: Download Certificate
align-self: center
color: $inherited.colors.text
color if { download-button.mouse-in }: white
-- end: ftd.row
-- end: download-button