info/relaks-wordpress-example
1
0
Fork 0
mirror of https://github.com/trambarhq/relaks-wordpress-example.git synced 2025-09-03 13:12:38 +02:00
Code Issues Releases Wiki Activity

Highlighting selected category and month (issue #9).

Browse Source
This commit is contained in:
Chung Leong
2019-01-22 00:31:28 +01:00
parent 176d0825a2
commit a0f0c9191d
2 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/style.scss
View File

@@ -44,10 +44,39 @@ A {
}
}
.categories {
LI {
margin-top: 0.2em;
margin-bottom: 0.2em;
A {
padding: 0.2em 0.5em 0.17em 0.5em;
margin-left: -0.4em;
&.selected {
border-radius: 0.5em;
background-color: #990000;
color: #eeeeee;
}
}
}
}
.archive {
LI {
margin-top: 0.1em;
margin-bottom: 0.1em;
margin-top: 0.2em;
margin-bottom: 0.2em;
A {
padding: 0.2em 0.5em 0.17em 0.5em;
margin-left: -0.4em;
&.selected {
border-radius: 0.5em;
background-color: #990000;
color: #eeeeee;
}
}
}
.year {

25
src/widgets/side-nav.jsx
View File

@@ -153,11 +153,10 @@ class SideNavSync extends PureComponent {
renderCategory(category, i) {
let { route, categoryPosts } = this.props;
let { monthSlug } = route.params;
let { monthSlug, categorySlug } = route.params;
let name = _.get(category, 'name', '');
let description = _.get(category, 'description', '');
let categorySlug = _.get(category, 'slug', '');
let slugs = [ categorySlug ];
let slugs = [ category.slug ];
if (monthSlug) {
slugs.unshift(monthSlug);
}
@@ -166,9 +165,13 @@ class SideNavSync extends PureComponent {
if (_.isEmpty(posts) && !_.isUndefined(posts)) {
url = undefined;
}
let className;
if (categorySlug === category.slug) {
className = 'selected';
}
return (
<li key={i}>
<a href={url} title={description}>{name}</a>
<a className={className} href={url} title={description}>{name}</a>
</li>
);
}
@@ -191,16 +194,13 @@ class SideNavSync extends PureComponent {
renderYear(yearEntry, i) {
let { selectedYear } = this.props;
let labelClass = 'year';
let listClass = 'months';
if (yearEntry.year === selectedYear) {
labelClass += ' selected';
} else {
if (yearEntry.year !== selectedYear) {
listClass += ' collapsed';
}
return (
<li key={i}>
<span className={labelClass} data-year={yearEntry.year} onClick={this.handleYearClick}>
<span data-year={yearEntry.year} onClick={this.handleYearClick}>
{yearEntry.label}
</span>
<ul className={listClass}>
@@ -216,13 +216,18 @@ class SideNavSync extends PureComponent {
renderMonth(monthEntry, i) {
let { route } = this.props;
let { monthSlug } = route.params;
let url = route.find([ monthEntry.slug ]);
if (_.isEmpty(monthEntry.posts) && !_.isUndefined(monthEntry.posts)) {
url = undefined;
}
let className;
if (monthSlug === monthEntry.slug) {
className = 'selected';
}
return (
<li key={i}>
<a href={url}>{monthEntry.label}</a>
<a className={className} href={url}>{monthEntry.label}</a>
</li>
);
}