Skip to content

Commit e25efd9

Browse files
Dhruvi16Dhruvi16
committed
Add details to the template
1 parent ee84817 commit e25efd9

File tree

3 files changed

+165
-61
lines changed

3 files changed

+165
-61
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<h1>Open Source Internships: Project Ideas</h1>
88
<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>
99
{% set ideas = site.query('/internships/project-ideas-collection').include_undiscoverable(true) %}
10-
<div class="filter-labels">
10+
<div class="filter-labels" id="project-list">
1111
<button type="button" class="button tag filter-btn" data-filter="all">
1212
All Projects
1313
</button>
@@ -79,12 +79,14 @@ <h5 class="label">Resources</h5>
7979
<p class="content">{{ idea.resources }}</p>
8080
</div>
8181
</div>
82+
<a href="#project-list" class="back-to-list"><i class="icon angle-up"></i> Back to the Project list</a>
8283
</div>
8384
{% endfor %}
8485
<div>
8586
<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>
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>
8890
</div>
8991
</div>
9092
</div>

‎themes/vocabulary_theme/templates/project_list.html

Lines changed: 98 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,106 @@
11
{% extends "layout.html" %}
22
{% block title %}{{ this.title }}{% endblock %}
33
{% block body %}
4-
<p>This is a list of all active open source software projects that Creative Commons maintains.</p>
5-
<p>Please read the <a href="/contributing-code">Contributing Code</a> page for general information on how to get involved. Contribution guidelines specific to an individual project can be found in the <code>README</code> and the <code>CONTRIBUTING</code> files in the root folder of every repository. If you have any questions, don't hesistate to reach out to us through <a href="/community">one of our community forums</a> or open a GitHub issue.</p>
6-
<h2>Featured Projects</h2>
7-
<p>We are actively looking for help with these projects and each project has open GitHub issues that are ready for external contribution.</p>
8-
<div class="card-deck">
9-
{% for repo in bag('repos.repos') %}
10-
{% if repo.featured %}
11-
<div class="card featured-project-card border-dark mb-4">
12-
<div class="card-body">
13-
<h5 class="card-title"><strong>{{ repo.english_name }}</strong>
14-
<div class="float-right">
15-
<a class="btn btn-outline-secondary" href="{{ repo.url }}"><img src="{{ this.attachments.get('mark-github.svg')|url }}" alt="GitHub"/></a>
16-
{% if repo.website %}
17-
<a class="btn btn-outline-secondary" href="{{ repo.website }}"><img src="{{ this.attachments.get('link-external.svg')|url }}" alt="website"/></a>
18-
{% endif %}
4+
<div class="project-list">
5+
<div class="title">
6+
<div class="container">
7+
<h1>Project List</h1>
8+
<p class="description">This is a list of all active open source software projects that Creative Commons maintains.</p>
9+
</div>
10+
</div>
11+
<div class="body container">
12+
<p>Please read the <a href="/contributing-code">Contributing Code</a> page for general information on how to get involved. Contribution guidelines specific to an individual project can be found in the <code>README</code> and the <code>CONTRIBUTING</code> files in the root folder of every repository. If you have any questions, don't hesistate to reach out to us through <a href="/community">one of our community forums</a> or open a GitHub issue.</p>
13+
<div class="featured-projects">
14+
<h2 class="is-paddingless level-left">
15+
Featured Projects
16+
</h2>
17+
<div class="project-list columns">
18+
{% for repo in bag('repos.repos') %}
19+
{% if repo.featured %}
20+
<div class=" column is-one-third">
21+
<article class="card entry-post vertical project-index">
22+
<div class="card-content">
23+
<h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}</a></h4>
24+
<a class="button is-text tiny site-link" href="{{ repo.website }}">
25+
<span>Visit site</span>
26+
<i class="icon external-link"></i>
27+
</a>
28+
<div class="content">
29+
{{ repo.description }}
30+
</div>
31+
<div class="labels">
32+
{% for technology in repo.technologies %}
33+
<button class="button tag">{{ technology }}</button>
34+
{% endfor %}
35+
</div>
36+
<div class="external-links">
37+
<a class="button is-text tiny" href="{{ repo.url }}">
38+
<i class="icon github"></i>
39+
<span class="link-content">Github Repository</span>
40+
</a>
41+
<br>
42+
<a class="button is-text tiny">
43+
<i class="icon slack"></i>
44+
<span class="link-content">Slack channel (#{{ repo.slack }})</span>
45+
</a>
46+
</div>
47+
</div>
48+
</article>
1949
</div>
20-
</h5>
21-
<p class="card-text">{{ repo.description }}</p>
22-
{% for technology in repo.technologies %}
23-
<span class="badge badge-featured-project mr-1 mb-1">{{ technology }}</span>
50+
{% endif %}
51+
{% endfor %}
52+
</div>
53+
</div>
54+
<div class="active-project">
55+
<h2>All Active Projects</h2>
56+
<p class="padding-vertical-big">This is a complete list of active Creative Commons software projects. Archived projects are not documented here and can be found on the <strong><a href="https://github.com/cc-archive">CC Archive GitHub organization</a>.</strong></p>
57+
<div class="table-container">
58+
<table class="table is-bordered is-striped">
59+
<thead>
60+
<tr>
61+
<th scope="col">#</th>
62+
<th scope="col">Name</th>
63+
<th scope="col">Description</th>
64+
<th scope="col">Language</th>
65+
<th scope="col">License</th>
66+
<th scope="col">Links</th>
67+
</tr>
68+
</thead>
69+
{% for repo in bag('repos.repos') %}
70+
<tr>
71+
<td class="padding-vertical-normal padding-right-xl padding-left-normal">{{ loop.index }}</td>
72+
<td class="padding-vertical-normal padding-right-xl padding-left-normal">
73+
<div class="text-bigger has-text-weight-bold padding-bottom-smaller">{{ repo.name }}</div>
74+
</td>
75+
{% if repo.description %}
76+
<td class="padding-vertical-normal padding-right-xl padding-left-normal">{{ repo.description }}</td>
77+
{% else %}
78+
<td class="padding-vertical-normal padding-right-xl padding-left-normal"></td>
79+
{% endif %}
80+
<td class="padding-vertical-normal padding-right-xl padding-left-normal">
81+
{% if repo.language %}{{ repo.language }}{% endif %}
82+
</td>
83+
{% if repo.license %}
84+
<td class="padding-vertical-normal padding-right-xl padding-left-normal">
85+
<a href="{{ repo.license.url }}" class="is-block">{{ repo.license.name }}</a>
86+
</td>
87+
{% else %}
88+
<td>Not specified</td>
89+
{% endif %}
90+
<td class="padding-vertical-normal padding-right-xl padding-left-normal">
91+
{% if repo.website %}
92+
<a href="{{ repo.website }}" class="is-block has-color-dark-slate-gray">Website</a>
93+
{% endif %}
94+
<a href="{{ repo.url }}" class="is-block has-color-dark-slate-gray"><i class="icon github padding-right-small"></i>Github</a>
95+
{% if repo.slack %}
96+
<a href="{{ repo.url }}" class="is-block has-color-dark-slate-gray"><i class="icon slack padding-right-small"></i>Slack</a>
97+
{% endif %}
98+
</td>
99+
</tr>
24100
{% endfor %}
25-
</div>
101+
</table>
26102
</div>
27-
{% endif %}
28-
{% endfor %}
103+
</div>
104+
</div>
29105
</div>
30-
<h2>All Active Projects</h2>
31-
<p>This is a complete list of active Creative Commons software projects. Archived projects are not documented here and can be found on the <strong><a href="https://github.com/cc-archive">CC Archive GitHub organization</a>.</strong></p>
32-
<table class="table table-striped">
33-
<thead class="thead-dark">
34-
<tr>
35-
<th scope="col">#</th>
36-
<th scope="col">Name</th>
37-
<th scope="col">Description</th>
38-
<th scope="col">Language</th>
39-
<th scope="col">License</th>
40-
<th scope="col">Links</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
{% for repo in bag('repos.repos') %}
45-
<tr>
46-
<th scope="row">{{ loop.index }}</th>
47-
<th scope="row">{{ repo.name }}</th>
48-
{% if repo.description %}
49-
<td>{{ repo.description }}</td>
50-
{% else %}
51-
<td></td>
52-
{% endif %}
53-
<td>{% if repo.language %}{{ repo.language }}{% endif %}</td>
54-
{% if repo.license %}
55-
<td><a href="{{ repo.license.url }}">{{ repo.license.name }}</a></td>
56-
{% else %}
57-
<td>Not specified</td>
58-
{% endif %}
59-
<td style="min-width: 16rem;">
60-
<a class="btn btn-outline-secondary btn-sm" href="{{ repo.url }}"><img src="{{ this.attachments.get('mark-github.svg')|url }}" alt="GitHub"/> GitHub</a>{% if repo.website %} <a class="btn btn-outline-secondary btn-sm" href="{{ repo.website }}"><img src="{{ this.attachments.get('link-external.svg')|url }}" alt="website"/> Website</a>{% endif %} {% if repo.slack %} <a class="btn btn-outline-secondary btn-sm" href="https://creativecommons.slack.com/channels/{{ repo.slack }}"><img src="{{ this.attachments.get('mark-slack.svg')|url }}" alt="slack"/> Slack</a>{% endif %}
61-
</td>
62-
</tr>
63-
{% endfor %}
64-
</tbody>
65-
</table>
66106
{% endblock %}

‎webpack/sass/main.scss

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,47 @@ code {
516516
}
517517
}
518518

519+
.project-list {
520+
.title {
521+
background-color: $color-lighter-gray;
522+
523+
524+
.container {
525+
@extend .padding-horizontal-big;
526+
527+
.description {
528+
@extend .padding-top-normal;
529+
@extend .padding-bottom-xl;
530+
@extend .body-bigger;
531+
532+
line-height: 1.4375;
533+
}
534+
}
535+
}
536+
537+
.body {
538+
@extend .padding-horizontal-big;
539+
@extend .body-big;
540+
@extend .padding-top-larger;
541+
@extend .padding-bottom-xxl;
542+
543+
line-height: 1.8125;
544+
545+
.featured-projects {
546+
@extend .padding-vertical-larger;
547+
548+
.columns {
549+
@extend .padding-bottom-smaller;
550+
}
551+
}
552+
553+
.table {
554+
@extend .margin-top-normal;
555+
@extend .margin-bottom-xxl;
556+
}
557+
}
558+
}
559+
519560
.cc-search-guide {
520561
.title {
521562
background-color: $color-lighter-gray;
@@ -591,6 +632,16 @@ code {
591632
@extend .body-normal;
592633
@extend .padding-top-small;
593634
}
635+
636+
li:before {
637+
content: "\ea02";
638+
font-family: "Vocabulary Icons";
639+
display: inline-block;
640+
font-size: 0.375rem;
641+
color: $color-gray;
642+
643+
@extend .padding-right-small;
644+
}
594645
}
595646

596647
&::after {
@@ -609,5 +660,16 @@ code {
609660
@extend .has-color-dark-slate-gray;
610661
}
611662
}
663+
664+
.back-to-list {
665+
@extend .has-color-dark-turquoise;
666+
@extend .caption;
667+
668+
text-decoration: none;
669+
670+
.icon {
671+
@extend .padding-right-small;
672+
}
673+
}
612674
}
613675
}

0 commit comments

Comments
 (0)