Skip to content

Commit ee84817

Browse files
Dhruvi16Dhruvi16
committed
update project ideas page
1 parent 76b6fdb commit ee84817

File tree

2 files changed

+161
-61
lines changed

2 files changed

+161
-61
lines changed

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

Lines changed: 82 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,91 @@
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">
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+
</div>
4083
{% 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>
84+
<div>
85+
<h2 class="b-header"><a name="original-ideas" class="has-color-dark-slate-gray">Original Ideas</a></h2>
86+
<p class="content padding-top-small">We are open to original ideas for documentation improvements.</p>
87+
<p class="content padding-top-small">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>
5888
</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>
6889
</div>
6990
</div>
7091
{% endblock %}

‎webpack/sass/main.scss

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -532,3 +532,82 @@ code {
532532
@extend .padding-bottom-xxl;
533533
}
534534
}
535+
536+
.project-ideas {
537+
.title {
538+
background-color: $color-lighter-gray;
539+
540+
.container {
541+
@extend .padding-horizontal-big;
542+
@extend .padding-bottom-xl;
543+
544+
.description {
545+
@extend .padding-top-normal;
546+
@extend .body-bigger;
547+
548+
line-height: 2.0625;
549+
}
550+
551+
.filter-labels {
552+
@extend .padding-top-xl;
553+
554+
.button {
555+
@extend .margin-right-normal;
556+
@extend .margin-bottom-normal;
557+
}
558+
}
559+
560+
.project-ideas {
561+
@extend .padding-top-normal;
562+
563+
.column {
564+
@extend .padding-right-big;
565+
@extend .padding-bottom-big;
566+
}
567+
568+
.card {
569+
height: 100%;
570+
}
571+
}
572+
}
573+
}
574+
575+
.body {
576+
@extend .padding-top-larger;
577+
@extend .padding-bottom-xxl;
578+
579+
.project-idea {
580+
@extend .padding-bottom-xl;
581+
582+
.column {
583+
@extend .padding-top-normal;
584+
585+
.label {
586+
@extend .b-header;
587+
@extend .padding-top-big;
588+
}
589+
590+
.content {
591+
@extend .body-normal;
592+
@extend .padding-top-small;
593+
}
594+
}
595+
596+
&::after {
597+
@extend .padding-top-big;
598+
599+
display: block;
600+
601+
content: '';
602+
603+
border-bottom: 0.1875rem solid $color-light-gray;
604+
}
605+
}
606+
607+
.original-idea {
608+
.label {
609+
@extend .has-color-dark-slate-gray;
610+
}
611+
}
612+
}
613+
}

0 commit comments

Comments
 (0)