Skip to content

Commit 3ddb0f0

Browse files
Dhruvi16Dhruvi16
authored
Merge pull request creativecommons#343 from creativecommons/update_project_ideas
update project ideas page
2 parents d096112 + 5b99691 commit 3ddb0f0

File tree

2 files changed

+193
-69
lines changed

2 files changed

+193
-69
lines changed

‎themes/vocabulary_theme/templates/project-ideas.html

+84-61
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,93 @@
11
{% extends "layout.html" %}
2-
{% block title %}Open Source Internships: Project Ideas{% endblock %}
32

4-
{% block header %}Open Source Internships: Project Ideas{% endblock %}
53
{% block body %}
6-
7-
<p class="lead">This is the project idea list for <strong>Google Season of Docs 2020</strong>.</p>
8-
<hr/>
9-
<!-- We display all ideas by default. -->
10-
{% set ideas = site.query('/internships/project-ideas-collection').include_undiscoverable(true) %}
11-
<div class="mt-4">
12-
<div>
13-
<button type="button" class="m-1 btn btn-sm btn-dark filter-btn" data-filter="all">
14-
All Projects
15-
</button>
16-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="difficulty-easy">
17-
Difficulty: Easy
18-
</button>
19-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="difficulty-medium">
20-
Difficulty: Medium
21-
</button>
22-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="difficulty-hard">
23-
Difficulty: Hard
24-
</button>
25-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="skill-javascript">
26-
Skill: JavaScript
27-
</button>
28-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="skill-python">
29-
Skill: Python
30-
</button>
31-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="skill-wordpress">
32-
Skill: WordPress
33-
</button>
34-
<button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="skill-writing">
35-
Skill: Writing
36-
</button>
37-
<ul class="list-unstyled m-3">
4+
<div class="project-ideas">
5+
<div class="title">
6+
<div class="container">
7+
<h1>Open Source Internships: Project Ideas</h1>
8+
<p class="description">This is the project idea list for the <span class="has-color-forest-green">current round of open source internships at Creative Commons.</span></p>
9+
{% set ideas = site.query('/internships/project-ideas-collection').include_undiscoverable(true) %}
10+
<div class="filter-labels" id="project-list">
11+
<button type="button" class="button tag filter-btn" data-filter="all">
12+
All Projects
13+
</button>
14+
<button type="button" class="button tag filter-btn" data-filter="difficulty-easy">
15+
Difficulty: Easy
16+
</button>
17+
<button type="button" class="button tag filter-btn" data-filter="difficulty-medium">
18+
Difficulty: Medium
19+
</button>
20+
<button type="button" class="button tag filter-btn" data-filter="difficulty-hard">
21+
Difficulty: Hard
22+
</button>
23+
<button type="button" class="button tag filter-btn" data-filter="skill-javascript">
24+
Skill: JavaScript
25+
</button>
26+
<button type="button" class="button tag filter-btn" data-filter="skill-python">
27+
Skill: Python
28+
</button>
29+
<button type="button" class="button tag filter-btn" data-filter="skill-wordpress">
30+
Skill: WordPress
31+
</button>
32+
<button type="button" class="button tag filter-btn" data-filter="skill-writing">
33+
Skill: Writing
34+
</button>
35+
</div>
36+
<div class="project-ideas columns is-multiline">
37+
{% for idea in ideas %}
38+
<div class="column is-one-quarter filter filter-label {{ idea.filter_value }}">
39+
<article class="card entry-post horizontal">
40+
<div class="card-content with-button">
41+
<h5 class="card-title"><a href="#{{ idea._slug }}">{{ idea.title }}</a></h5>
42+
</div>
43+
</article>
44+
</div>
45+
{% endfor %}
46+
<div class="column is-one-quarter">
47+
<article class="card entry-post horizontal">
48+
<div class="card-content with-button">
49+
<h5 class="card-title"><a href="#original-ideas">Original Ideas</a></h5>
50+
</div>
51+
</article>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
<div class="body container">
3857
{% for idea in ideas %}
39-
<li class="my-2 filter filter-label {{ idea.filter_value }}"><a href="#{{ idea._slug }}">{{ idea.title }}</a></li>
58+
<div class="project-idea">
59+
<h2><a class="has-color-dark-slate-gray" name="{{ idea._slug }}">{{ idea.title }}</a></h2>
60+
<div class="columns">
61+
<div class="column is-one-quarter">
62+
<h5 class="label">Difficulty</h5>
63+
<p class="content">{{ idea.difficulty }}</p>
64+
<h5 class="label">Skills recommended</h5>
65+
<p class="content">{{ idea.skills_recommended }}</p>
66+
<h5 class="label">Mentors</h5>
67+
<p class="content">{{ idea.mentors }}</p>
68+
</div>
69+
<div class="column is-three-quarters">
70+
<h5 class="label">The Problem</h5>
71+
<p class="content">{{ idea.problem }}</p>
72+
<h5 class="label">Expected Outcome</h5>
73+
<p class="content">{{ idea.expected_outcome }}</p>
74+
<h5 class="label">Internship Tasks</h5>
75+
<p class="content">{{ idea.internship_tasks }}</p>
76+
<h5 class="label">Application Tips</h5>
77+
<p class="content">{{ idea.application_tips }}</p>
78+
<h5 class="label">Resources</h5>
79+
<p class="content">{{ idea.resources }}</p>
80+
</div>
81+
</div>
82+
<a href="#project-list" class="back-to-list"><i class="icon angle-up"></i> Back to the Project list</a>
83+
</div>
4084
{% endfor %}
41-
<li class="my-2"><a href="#original-ideas">Original Ideas</a></li>
42-
</ul>
43-
</div>
44-
<hr/>
45-
{% for idea in ideas %}
46-
<div class="project-idea-card m-1 mb-4 filter filter-block {{ idea.filter_value }}">
47-
<h2 class="card-header project-idea-header"><a name="{{ idea._slug }}">{{ idea.title }}</a></h5>
48-
<ul class="list-group list-group-flush">
49-
<li class="list-group-item"><strong>The Problem:</strong> {{ idea.problem }}</li>
50-
<li class="list-group-item"><strong>Expected Outcome:</strong> {{ idea.expected_outcome }}</li>
51-
<li class="list-group-item"><strong>Internship Tasks:</strong> {{ idea.internship_tasks }}</li>
52-
<li class="list-group-item"><strong>Application Tips:</strong> {{ idea.application_tips }}</li>
53-
<li class="list-group-item"><strong>Resources:</strong> {{ idea.resources }}</li>
54-
<li class="list-group-item"><strong>Skills recommended:</strong> {{ idea.skills_recommended }}</li>
55-
<li class="list-group-item"><strong>Mentors:</strong> {{ idea.mentors }}</li>
56-
<li class="list-group-item"><strong>Difficulty:</strong> {{ idea.difficulty }}</li>
57-
</ul>
85+
<div>
86+
<h2 class="b-header"><a name="original-ideas" class="has-color-dark-slate-gray">Original Ideas</a></h2>
87+
<p class="content padding-vertical-smaller">We are open to original ideas for documentation improvements.</p>
88+
<p class="content padding-vertical-smaller">Please talk to us on the <code>#cc-gsoc-outreachy</code> channel on Slack or via the mailing list to find a mentor for the project before submitting your proposal.</p>
89+
<a href="#project-list" class="back-to-list"><i class="icon angle-up"></i> Back to the Project list</a>
5890
</div>
59-
{% endfor %}
60-
<div class="project-idea-card m-1 mb-4">
61-
<h2 class="card-header project-idea-header"><a name="original-ideas">Original Ideas</a></h5>
62-
<ul class="list-group list-group-flush">
63-
<li class="list-group-item">
64-
<p>We are open to original ideas for documentation improvements.</p>
65-
<p>Please talk to us on the <code>#cc-gsoc-outreachy</code> channel on Slack or via the mailing list to find a mentor for the project before submitting your proposal.</p>
66-
</li>
67-
</ul>
6891
</div>
6992
</div>
7093
{% endblock %}

‎webpack/sass/main.scss

+109-8
Original file line numberDiff line numberDiff line change
@@ -574,20 +574,104 @@ code {
574574
}
575575
}
576576

577-
.community-team-members {
578-
.container {
579-
@extend .padding-horizontal-big;
580-
@extend .padding-bottom-xl;
581-
}
582-
577+
.project-ideas {
583578
.title {
584579
background-color: $color-lighter-gray;
585-
overflow-wrap: break-word;
580+
581+
.container {
582+
@extend .padding-horizontal-big;
583+
@extend .padding-bottom-xl;
586584

587585
.description {
586+
@extend .padding-top-normal;
588587
@extend .body-bigger;
589-
@extend .padding-top-small;
588+
589+
line-height: 2.0625;
590+
}
591+
592+
.filter-labels {
593+
@extend .padding-top-xl;
594+
595+
.button {
596+
@extend .margin-right-normal;
597+
@extend .margin-bottom-normal;
598+
}
599+
}
600+
601+
.project-ideas {
602+
@extend .padding-top-normal;
603+
604+
.column {
605+
@extend .padding-right-big;
606+
@extend .padding-bottom-big;
607+
}
608+
609+
.card {
610+
height: 100%;
611+
}
590612
}
613+
}
614+
}
615+
616+
.body {
617+
@extend .padding-top-larger;
618+
@extend .padding-bottom-xxl;
619+
@extend .padding-horizontal-big;
620+
621+
.project-idea {
622+
@extend .padding-bottom-xl;
623+
624+
.column {
625+
@extend .padding-top-normal;
626+
627+
.label {
628+
@extend .b-header;
629+
@extend .padding-top-big;
630+
}
631+
632+
.content {
633+
@extend .body-normal;
634+
@extend .padding-top-small;
635+
}
636+
637+
li:before {
638+
content: "\ea02";
639+
font-family: "Vocabulary Icons";
640+
display: inline-block;
641+
font-size: 0.375rem;
642+
color: $color-gray;
643+
644+
@extend .padding-right-small;
645+
}
646+
}
647+
648+
&::after {
649+
@extend .padding-top-big;
650+
651+
display: block;
652+
653+
content: '';
654+
655+
border-bottom: 0.1875rem solid $color-light-gray;
656+
}
657+
}
658+
659+
.original-idea {
660+
.label {
661+
@extend .has-color-dark-slate-gray;
662+
}
663+
}
664+
665+
.back-to-list {
666+
@extend .has-color-dark-turquoise;
667+
@extend .caption;
668+
669+
text-decoration: none;
670+
671+
.icon {
672+
@extend .padding-right-small;
673+
}
674+
}
591675
}
592676
}
593677

@@ -627,3 +711,20 @@ code {
627711
}
628712
}
629713
}
714+
715+
.community-team-members {
716+
.container {
717+
@extend .padding-horizontal-big;
718+
@extend .padding-bottom-xl;
719+
}
720+
721+
.title {
722+
background-color: $color-lighter-gray;
723+
overflow-wrap: break-word;
724+
725+
.description {
726+
@extend .body-bigger;
727+
@extend .padding-top-small;
728+
}
729+
}
730+
}

0 commit comments

Comments
 (0)