a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Full-width section header link

Browse Source
This commit is contained in:
Tom Russell 2018-10-05 09:10:20 +01:00
parent df91d98383
commit 3ea1e933ac
4 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/frontend/building-edit.js
View File

@ -104,6 +104,7 @@ class EditForm extends Component {
isActive={() => match}> isActive={() => match}>
<h3 className="h3">{this.props.title}</h3> <h3 className="h3">{this.props.title}</h3>
</NavLink> </NavLink>
<nav className="icon-buttons">
{ {
this.props.help? this.props.help?
<a className="icon-button help" title="Find out more" href={this.props.help} <a className="icon-button help" title="Find out more" href={this.props.help}
@ -126,6 +127,7 @@ class EditForm extends Component {
</Fragment> </Fragment>
: null : null
} }
</nav>
</header> </header>
{ (match && this.props.intro)? <p className="data-intro">{ this.props.intro }</p> : null } { (match && this.props.intro)? <p className="data-intro">{ this.props.intro }</p> : null }
{ {

2
app/src/frontend/building-view.js
View File

@ -57,6 +57,7 @@ const DataSection = (props) => {
isActive={() => match}> isActive={() => match}>
<h3 className="h3">{props.title}</h3> <h3 className="h3">{props.title}</h3>
</NavLink> </NavLink>
<nav className="icon-buttons">
{ {
props.help? props.help?
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer"> <a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
@ -72,6 +73,7 @@ const DataSection = (props) => {
</NavLink> </NavLink>
: null : null
} }
</nav>
</header> </header>
{ (match && props.intro)? <p className="data-intro">{ props.intro }</p> : null } { (match && props.intro)? <p className="data-intro">{ props.intro }</p> : null }
{ match? <dl className="data-list">{props.children}</dl> : null } { match? <dl className="data-list">{props.children}</dl> : null }

8
app/src/frontend/legend.js
View File

@ -94,9 +94,11 @@ const LegendGroup = (props) => {
</NavLink> </NavLink>
{ {
props.help? props.help?
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer"> <nav className="icon-buttons">
<HelpIcon /> <a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
</a> <HelpIcon />
</a>
</nav>
: null : null
} }
</header> </header>

26
app/src/frontend/main.css
View File

@ -14,7 +14,7 @@
.bullet-prefix { .bullet-prefix {
display: block; display: block;
position: relative; position: relative;
padding: 0.6rem 0.5rem 0.5rem 2.25rem; clear: both;
/* cursor: pointer; */ /* cursor: pointer; */
text-decoration: none; text-decoration: none;
color: #222; color: #222;
@ -23,7 +23,9 @@
.bullet-prefix h3 { .bullet-prefix h3 {
display: inline-block; display: inline-block;
} }
.bullet-prefix a:first-child { .bullet-prefix > a {
display: block;
padding: 0.6rem 0.5rem 0.5rem 2.25rem;
color: #222; color: #222;
} }
.bullet-prefix.active, .bullet-prefix.active,
@ -32,7 +34,7 @@
text-decoration: none; text-decoration: none;
background-color: #eeeeee; background-color: #eeeeee;
} }
.bullet-prefix::before { .bullet-prefix > a::before {
display: block; display: block;
position: absolute; position: absolute;
left: 0.55rem; left: 0.55rem;
@ -40,23 +42,29 @@
width: 1.2rem; width: 1.2rem;
height: 1rem; height: 1rem;
text-align: center; text-align: center;
vertical-align: middle;
color: #7d7d7d; color: #7d7d7d;
font-size: 1.2rem; font-size: 1.2rem;
content: '\25A0'; content: '\25A0';
transition: color 0.2s; transition: color 0.2s;
} }
.bullet-prefix:hover::before, .bullet-prefix:hover > a::before,
.bullet-prefix.active::before { .bullet-prefix.active > a::before {
color: #222; color: #222;
} }
.bullet-prefix:hover::before { .bullet-prefix:hover > a::before {
content: '\25BC'; content: '\25BC';
} }
.bullet-prefix.active:hover::before { .bullet-prefix.active:hover > a::before {
content: '\25B2'; content: '\25B2';
} }
.bullet-prefix .icon-buttons {
position: absolute;
top: 0;
right: 0;
padding: 0.6rem 0.5rem 0.5rem 0;
}
.icon-button { .icon-button {
display: inline-block; display: inline-block;
width: 1.8rem; width: 1.8rem;
@ -113,7 +121,7 @@
border-top: 1px solid #ffffff; border-top: 1px solid #ffffff;
} }
.data-section.inactive { .data-section.inactive {
opacity: 0.7; opacity: 0.5;
} }
.data-section.inactive .bullet-prefix::before { .data-section.inactive .bullet-prefix::before {
opacity: 0.4; opacity: 0.4;