info/relaks-wordpress-example
1
0
Fork 0
mirror of https://github.com/trambarhq/relaks-wordpress-example.git synced 2025-09-09 15:40:39 +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 { .archive {
LI { LI {
margin-top: 0.1em; margin-top: 0.2em;
margin-bottom: 0.1em; 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 { .year {

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

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