me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 11:27:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add list group for each year of articles on the navbar

Browse Source
This commit is contained in:
Matthew Grove
2019-02-05 20:25:51 +00:00
parent 3ede6835fb
commit cbe34aa100
3 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
_includes/navbar.html
View File

@@ -14,17 +14,26 @@
</a>
{% if site.categories.articles %}
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Articles</h3>
<h3 class="mdc-typography--headline7">Articles</h3>
{% for article in site.categories.articles %}
{% assign currentdate = article.date | date: "%Y" %}
{% if currentdate != date %}
{% if article.url != site.categories.articles.first.url %}
</div>
{% endif %}
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">{{ currentdate }}</h3>
{% assign date = currentdate %}
{% endif %}
<a class="mdc-list-item" href="{{ page.url | relative_url }}" data-mdc-auto-init="MDCRipple">
<a class="mdc-list-item" href="{{ article.url | relative_url }}" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">{{ article.title }}</span>
</a>
{% if currentdate != date %}
{% endif %}
{% if article.url == site.categories.articles.last.url %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}

5
css/global.css
View File

@@ -18,6 +18,11 @@ a {
color: var(--mdc-theme-secondary);
}
.mdc-list-group h3 {
margin: 20px 16px auto 16px;
font-weight: normal;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;

7
css/mdc-card-list.css
View File

@@ -14,7 +14,7 @@
clear:left;
width: 49%;
}
.main-content .mdc-card:nth-of-type(4n){
.main-content .mdc-card:nth-of-type(even){
float:right;
clear:right;
}
@@ -23,3 +23,8 @@
clear: none;
width: auto;
}
.main-content .mdc-card:nth-of-type(odd) ~ .mdc-card:last-of-type {
float: none;
clear: both;
width: auto;
}