Skip to content

Commit 13ca990

Browse files
greatislandergreatislander
authored
feat: share resources form (resolves #296) (#444)
1 parent 2db9031 commit 13ca990

17 files changed

Lines changed: 301 additions & 11 deletions

File tree

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
lts/erbium

‎.prettierrc.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"printWidth": 120,
3+
"tabWidth": 4,
4+
"overrides": [
5+
{
6+
"files": ["*.md"],
7+
"options": {
8+
"tabWidth": 2
9+
}
10+
}
11+
]
12+
}

‎src/_includes/layouts/about.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
{% for card in whatWeDoSection.cards %}
2525
<div class="[ card card--small ]">
2626
<div class="[ card__content ] [ flow ]">
27-
<h3><a href="{{ card.link }}">{{ card.title }}</a></h3>
27+
<h3><a class="[ card__link ]" href="{{ card.link }}">{{ card.title }}</a></h3>
2828
</div>
2929
</div>
3030
{% endfor %}

‎src/_includes/layouts/home.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</figure>
2323
{% endif %}
2424
<div class="[ card__content ] [ flow center ]">
25-
<h3><a href="{{ card.link }}">{{ card.title }}</a></h3>
25+
<h3><a class="[ card__link ]" href="{{ card.link }}">{{ card.title }}</a></h3>
2626
</div>
2727
</div>
2828
{% endfor %}

‎src/_includes/layouts/learn.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{% image card.image, "", 666, 480 %}
2828
</figure>
2929
<div class="[ card__content ] [ flow ]">
30-
<h3><a href="{{ card.link }}">{{ card.title }}</a></h3>
30+
<h3><a class="[ card__link ]" href="{{ card.link }}">{{ card.title }}</a></h3>
3131
{{ card.content | markdown | safe }}
3232
</div>
3333
</div>
@@ -45,7 +45,7 @@
4545
<p class="[ sm:center ]"><a class="call-to-action" href="{{ robotActivitiesSection.callToActionLink }}">{{ robotActivitiesSection.callToActionText }}</a></p>
4646
</div>
4747
<div class="[ two:three__three ] [ flow ]">
48-
<img src="{{ robotActivitiesSection.image }}?nf_resize=fit&w=640&h=360" alt="{{ robotActivitiesSection.imageAlt }}" width="640" height="360" />
48+
<img src="{{ robotActivitiesSection.image }}?nf_resize=fit&w=640&h=360" alt="{{ robotActivitiesSection.imageAlt }}" width="640" height="360" />
4949
</div>
5050
</div>
5151
</div>

‎src/_includes/layouts/share.njk‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{% extends "layouts/base.njk" %}
2+
3+
{% set bodyClass = "page page--share" %}
4+
5+
{% block content %}
6+
<div class="[ wrapper ] [ flow ]">
7+
{{ content | safe }}
8+
<form name="share-resources" method="POST" netlify-honeypot="bot-field" data-netlify="true">
9+
<div class="hidden">
10+
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
11+
</div>
12+
<div class="[ half ]">
13+
<label for="fname">Contributor’s first name*</label>
14+
<input type="text" id="fname" name="fname" required />
15+
</div>
16+
<div class="[ half ]">
17+
<label for="lname">Contributor’s last name*</label>
18+
<input type="text" id="lname" name="lname" required />
19+
</div>
20+
<div class="[ half ]">
21+
<label for="email">Contributor’s email address*</label>
22+
<input type="email" id="email" name="email" required />
23+
</div>
24+
<div class="[ half ]">
25+
<label for="website">Organization website</label>
26+
<input type="text" id="website" name="website" />
27+
</div>
28+
<fieldset>
29+
<legend>What type of resource are you sharing?</legend>
30+
{% for item in ['Lesson plans', 'Unplugged coding activities', 'Robot-based coding activities', 'Educational coding materials', 'Other'] %}
31+
<div>
32+
<input type="checkbox" id="{{ item | slug }}" name="resource-type" value="{{ item }}" />
33+
<label for="{{ item | slug }}">{{ item }}</label>
34+
</div>
35+
{% endfor %}
36+
</fieldset>
37+
<div>
38+
<label for="description">What is this resource about?</label>
39+
<textarea id="description" name="description" aria-describedby="description-hint"></textarea>
40+
<div class="[ hint ]" id="description-hint">Please provide a brief description of the resource.</div>
41+
</div>
42+
<div>
43+
<label for="supportive-material">Upload supportive material</label>
44+
<input type="file" id="supportive-material" name="supportive-material" multiple />
45+
</div>
46+
<button class="[ button ]" type="submit">Share Resource</button>
47+
</form>
48+
</div>
49+
{% endblock %}

‎src/_includes/svg/upload.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/styles/app.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
'layout/header',
2323
'layout/article',
2424
'layout/sidebar',
25-
'layout/footer';
25+
'layout/footer',
26+
'layout/form';
2627

2728
// 5. Components
2829
@import
@@ -35,6 +36,7 @@
3536
'components/filters',
3637
'components/grid-image',
3738
'components/grid-video',
39+
'components/input',
3840
'components/label',
3941
'components/overlay',
4042
'components/navigation',
@@ -50,7 +52,8 @@
5052
'pages/activities',
5153
'pages/guides',
5254
'pages/projects',
53-
'pages/resources';
55+
'pages/resources',
56+
'pages/share';
5457

5558
// 7. Themes
5659
@import

‎src/assets/styles/base/_base.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,25 @@ a:not([class]) {
3232

3333
&:visited {
3434
color: currentColor;
35+
36+
&:active {
37+
color: var(--color-white);
38+
}
39+
}
40+
}
41+
42+
.bg--red-75 a:not([class]) {
43+
&:hover {
44+
color: var(--color-black-25);
45+
}
46+
47+
&:focus {
48+
box-shadow: 0 0 0 var(--space-xxs) var(--color-red-35);
49+
}
50+
51+
&:active,
52+
&:hover:active {
53+
background-color: var(--color-red-35);
54+
color: var(--color-white);
3555
}
3656
}

‎src/assets/styles/components/_button.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
align-items: center;
77
appearance: none;
88
background-color: var(--color-green-45);
9-
border: 0;
9+
border: solid var(--border-thin) var(--fl-fgColor, transparent);
1010
border-radius: var(--radius-lg);
1111
box-shadow: 0 1rem 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-35)));
1212
color: var(--color-white);
@@ -33,11 +33,13 @@
3333
}
3434

3535
&:focus {
36-
box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25))) inset, 0 1rem 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
36+
border-color: var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
37+
box-shadow: 0 1rem 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
3738
outline: none;
3839
}
3940

4041
&:active {
42+
border-color: var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
4143
box-shadow: 0 calc(12 / 16 * 1rem) 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
4244
margin-block: calc(36 / 16 * 1rem) calc(12 / 16 * 1rem);
4345
}
@@ -56,7 +58,7 @@
5658
}
5759

5860
&:focus {
59-
box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25))) inset, 0 calc(12 / 16 * 1rem) 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
61+
box-shadow: 0 calc(12 / 16 * 1rem) 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
6062
outline: none;
6163
}
6264

0 commit comments

Comments
 (0)