Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling update #964

Closed
wants to merge 6 commits into from
Closed

Styling update #964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5950b92
- Filters made 50/50 on desktop
AllanOcelot Jul 9, 2018
0ef5462
- Popular tag repositioned as I belive users would rather click on th…
AllanOcelot Jul 9, 2018
134469a
- Style the top section / introduction
AllanOcelot Jul 9, 2018
1990493
- Tidying spacing on dropdown filters
AllanOcelot Jul 9, 2018
1f5764f
- Formatting for the section at the bottom
AllanOcelot Jul 10, 2018
1d8f778
Merge branch 'gh-pages' into styling-update
shiftkey Sep 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 13 additions & 15 deletions _includes/after.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,23 @@ <h1><span class="header-inside">I maintain a project!</span></h1>

<p>
What sort of tasks are a good fit?

<ul>
<li>Tasks should take no longer than a few nights' worth of work</li>
<li>Tasks should stand alone - avoid core functionality on which other tasks depend</li>
<li>Tasks should be well described with pointers to help the implementer</li>
</ul>
<ul class="numbered">
<li><span>1</span>Tasks should take no longer than a few nights' worth of work</li>
<li><span>2</span>Tasks should stand alone - avoid core functionality on which other tasks depend</li>
<li><span>3</span>Tasks should be well described with pointers to help the implementer</li>
</ul>
<br>
We suggest the label <code>up-for-grabs</code> but using a different name is also acceptable.
</p>

<p>
We suggest the label <code>up-for-grabs</code>
but using a different name is also acceptable.
</p>
<hr>

<p>
If this sounds like you, getting involved is simple:

<ol>
<li><a href="https://help.github.com/articles/creating-and-editing-labels-for-issues-and-pull-requests/" title="Creating and editing labels for issues and pull requests">Label</a> bugs and feature requests that would be a good place to start</li>
<li>Grab the URL to this list of tasks so that others can get to it easily</li>
<li><a href="https://github.com/login">Sign in to GitHub</a> and <a href="https://github.com/up-for-grabs/up-for-grabs.net#add-a-project">check out the README.</a></li>
</ol>
<ul class="numbered">
<li><span>1</span><a href="https://help.github.com/articles/creating-and-editing-labels-for-issues-and-pull-requests/" title="Creating and editing labels for issues and pull requests">Label</a> bugs and feature requests that would be a good place to start</li>
<li><span>2</span>Grab the URL to this list of tasks so that others can get to it easily</li>
<li><span>3</span><a href="https://github.com/login">Sign in to GitHub</a> and <a href="https://github.com/up-for-grabs/up-for-grabs.net#add-a-project">check out the README.</a></li>
</ul>
</p>
13 changes: 6 additions & 7 deletions _includes/before.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ <h1><span class="header-inside">I want to get involved!</span></h1>
</p>

<p>
Find a project you'd like to get involved with:

<ul>
<li>Read the contributor guidelines for the project</li>
<li>Get the project running locally</li>
<li>Leave a message on a task you'd like to work on</li>
<li>Get to work!</li>
<ul class='numbered'>
<li><span>1</span> Find a project you'd like to get involved with </li>
<li><span>2</span> Read the contributor guidelines for the project</li>
<li><span>3</span> Get the project running locally</li>
<li><span>4</span> Leave a message on a task you'd like to work on</li>
<li><span>5</span> Get to work!</li>
</ul>
</p>
16 changes: 9 additions & 7 deletions _includes/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
<script type="text/html" id="projects-panel-template">
<div class="filters-panel full-width">
<h5>Popular tags: </h5>
<ul class="popular-tags">
<% _.each(popularTags, function(entry, key){ %>
<li><a href="#/tags/<%-encodeURIComponent(entry.name)%>"><%-entry.name%> (<%-entry.frequency%>) </a></li>
<% }) %>
</ul>
</div>
<div class="filters-panel cf">
<h5>Filter by name: </h5>
<select class="names-filter" multiple data-placeholder="Select a project..." >
Expand All @@ -14,12 +22,6 @@ <h5>Filter by tags: </h5>
<option value="<%-key%>"><%- entry.name%> (<%-entry.frequency%>)</option>
<% }) %>
</select>
<h5>Popular tags: </h5>
<ul class="popular-tags">
<% _.each(popularTags, function(entry, key){ %>
<li><a href="#/tags/<%-encodeURIComponent(entry.name)%>"><%-entry.name%></a> (<%-entry.frequency%>)</li>
<% }) %>
</ul>
</div>
<table class="projects">
<% _.each(projects, function(project){ %>
Expand All @@ -30,7 +32,7 @@ <h5>Popular tags: </h5>
</td>
</tr>
<tr>
<td class="details">
<td class="details left">
<p class="label"><a href="<%- project.upforgrabs.link %>" title="View open issues for <%-project.name %>" target="_blank"><%-project.upforgrabs.name %></a></p>
</td>
<td class="details">
Expand Down
115 changes: 96 additions & 19 deletions stylesheets/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
}

h1, h2, h3 {
font-family: 'Cookie', cursive;
font-family: 'Cookie', cursive;
margin-bottom: 20px;
color: #2E7BA9;
}
Expand All @@ -84,6 +84,7 @@ h1 {
.block h1 .header-inside {
padding: 2px 16px;
background: white;
cursor: default;
}

h2 {
Expand All @@ -102,11 +103,12 @@ h4, h5, h6 {

p {
margin: 10px 0 15px 0;
cursor: default;
}

img {
border: none; }

#go-back-home {
margin: 20px 0 0; }
#go-back-home:hover {
Expand Down Expand Up @@ -188,6 +190,7 @@ ul, ol, dl {
ul li {
list-style: inside;
padding-left: 20px;
cursor: default;
}

ol li {
Expand Down Expand Up @@ -237,7 +240,7 @@ footer {
display: table; }
.container:after {
clear: both; }

#main-container {
background: #fff;
border-radius: 7px;
Expand Down Expand Up @@ -408,12 +411,12 @@ th {
background: #373737;
color: #fff;
}

td {
padding: 10px 0;
border: 1px solid #373737;
}

td:not(:last-child) {
padding-right: 10px;
}
Expand All @@ -426,7 +429,7 @@ form {
/* https://css-tricks.com/snippets/css/ribbon/ */
.ribbon {
font-size: 28px !important;
width: 40%;
width: 40%;
position: absolute;
background: #2E7BA9;
color: #E4F0F8;
Expand All @@ -436,9 +439,10 @@ form {
right: 2em;
top: 25%;
}
.ribbon-content {
.ribbon-content {
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
cursor: default;
}
.ribbon a {
color: #fff;
Expand Down Expand Up @@ -477,7 +481,41 @@ form {
right: 0;
border-width: 1em 1em 0 0;
}



/* Numbered bullet points in the 'Before.html' section */
.numbered {
padding: 0;
margin: 0;
}

.numbered li {
padding: 0;
position: relative;
margin: 0 0 10px 0;
list-style: none;
line-height: 30px;
}

.numbered li:last-of-type {
margin-bottom: 0;
}

.numbered li span {
border-radius: 50%;
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
line-height: 28px;
background-color: #2E7BA9;
color: #fff;
font-weight: 900;
margin: 0 10px 0 0;
}

/* End of numbered section */

#downloads {
position: absolute;
width: 210px;
Expand All @@ -488,6 +526,32 @@ form {
background: url('../images/icon_download.png') no-repeat 0% 90%;
}

/* Styling the 'Filters' section */

#projects-panel .filters-panel {
float: left;
width: 50%;
padding: 0 0 20px 0;
border-bottom: 1px solid #eee;
}

#projects-panel .filters-panel.full-width {
width: 100%;
text-align: center;
padding: 4px 10px 5px 10px;
background: #f7f7f7;
margin: 20px 0;
box-sizing: border-box;
margin: 0 0 20px 0;
border: none;
}

#projects-panel .filters-panel.full-width label {
text-align: center;
}

/* End of filter section */

.projects, .projects td {
border: 0 none;
}
Expand All @@ -496,11 +560,12 @@ form {
padding-bottom: 0px;
}

.projects td.details {
.projects tr.details {
padding-top: 0px;
word-wrap: break-word;
}


.projects tbody {
padding-top: 12px;
}
Expand Down Expand Up @@ -570,17 +635,30 @@ form {

.popular-tags li {
display: inline-block;
font-size: 18px;
padding-left: 0;
background: #2E7BA9;
border-radius: 2px;
color: #FFF;
display: inline-block;
font-size: 14px;
white-space: nowrap;
padding: 0;
margin-right: 10px;
transition: all 0.2s;
}
.popular-tags li::before {
content: ' ';
margin-right: 12px;

.popular-tags li:hover {
background: #3892c7;
}

.popular-tags li a {
color: #fff;
padding: 5px 8px;
margin: 0;
}

@media (max-width: 768px) {
body {
padding: 0 0; }
padding: 0 0; }
#forkme_banner {
display: none;
}
Expand All @@ -598,13 +676,13 @@ form {
.block h1 .header-inside {
padding: 0;
}
#main-container {
#main-container {
border-right: none;
border-left: none;
border-left: none;
border-radius: 0;
}
#main-container .block {
padding: 20px;
padding: 20px;
}
table.projects td {
display: block;
Expand All @@ -619,4 +697,3 @@ form {
top: 0;
}
}