status-im
/
swarms
mirror of https://github.com/status-im/swarms.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Responsive layout - Ideas Table / People Table (#243)

This commit is contained in:
Venkata Chandrasekhar Nainala 2018-05-10 06:02:37 +01:00 committed by Oskar Thorén
parent 7f62ba2688
commit 6c656db569
4 changed files with 66 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
!.github !.github
!.gitignore !.gitignore
!*.md !*.md
!*.scss
_site _site
.sass-cache .sass-cache
.jekyll-metadata .jekyll-metadata

16
_includes/ideastable.html
View File

@ -18,14 +18,14 @@
</thead> </thead>
{% for page in ideas %} {% for page in ideas %}
<tr> <tr>
<td class="lead-contributor">{{page.lead-contributor|xml_escape}}</td> <td data-label="Lead Contributor" class="lead-contributor">{{page.lead-contributor|xml_escape}}</td>
<td class="id"><a href="{{page.url|relative_url}}">{{page.id|xml_escape}}</a></td> <td data-label="Idea" class="id"><a href="{{page.url|relative_url}}">{{page.id|xml_escape}}</a></td>
<td class="title">{{page.title|xml_escape}}</td> <td data-label="Title" class="title">{{page.title|xml_escape}}</td>
<td class="categ">{{page.category|xml_escape}}</td> <td data-label="Category" class="categ">{{page.category|xml_escape}}</td>
<td class="success-metrics">{% if page.success-metrics %}✅ {% else %}❌{% endif %}</td> <td data-label="Success metrics" class="success-metrics">{% if page.success-metrics %}✅ {% else %}❌{% endif %}</td>
<td class="exit-criteria">{% if page.exit-criteria %}✅{% else %}❌{% endif %}</td> <td data-label="Exit criteria" class="exit-criteria">{% if page.exit-criteria %}✅{% else %}❌{% endif %}</td>
<td class="clear-roles">{% if page.clear-roles %}✅{% else %}❌{% endif %}</td> <td data-label="Clear roles" class="clear-roles">{% if page.clear-roles %}✅{% else %}❌{% endif %}</td>
<td class="future-iterations">{% if page.future-iterations %}✅{% else %}❌{% endif %}</td> <td data-label="Future iterations?" class="future-iterations">{% if page.future-iterations %}✅{% else %}❌{% endif %}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>

12
_includes/peoplestable.html
View File

@ -19,16 +19,16 @@
{% if count > 0 %} {% if count > 0 %}
<tr> <tr>
<td class="idea"> <td data-label="Idea" class="idea">
<a href="{{page.url|relative_url}}">{{page.id|xml_escape}}</a> <a href="{{page.url|relative_url}}">{{page.id|xml_escape}}</a>
</td> </td>
<td class="role-needed"> <td data-label="Looking for" class="role-needed">
{% for role in page.roles-needed %} {% for role in page.roles-needed %}
{{ role }} {{ role }}
{% endfor %} {% endfor %}
</td> </td>
<td class="status"> {{ page.status }} </td> <td data-label="Idea Status" class="status"> {{ page.status }} </td>
<td class="okr"> <td data-label="OKRs" class="okr">
{% for okr in page.okrs %} {% for okr in page.okrs %}
{{ okr }}<br> {{ okr }}<br>
{% endfor %} {% endfor %}
@ -54,8 +54,8 @@
{% assign ideas = include.ideas|where:"status","Active" %} {% assign ideas = include.ideas|where:"status","Active" %}
<tr> <tr>
<td class="contributor">{{contributor|xml_escape}}</td> <td data-label="Contributor" class="contributor">{{contributor|xml_escape}}</td>
<td class="ideas"> <td data-label="Ideas" class="ideas">
{% for page in ideas %} {% for page in ideas %}
{% if page.contributors contains contributor %} {% if page.contributors contains contributor %}
<a href="{{page.url|relative_url}}">{{page.id|xml_escape}}</a> <a href="{{page.url|relative_url}}">{{page.id|xml_escape}}</a>

51
assets/main.scss Normal file
View File

@ -0,0 +1,51 @@
---
---
@import "minima";
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .9em;
font-weight: bold;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: lighter;
font-size: 0.7em;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}