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}>
<h3 className="h3">{this.props.title}</h3>
</NavLink>
<nav className="icon-buttons">
{
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>
: null
}
</nav>
</header>
{ (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}>
<h3 className="h3">{props.title}</h3>
</NavLink>
<nav className="icon-buttons">
{
props.help?
<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>
: null
}
</nav>
</header>
{ (match && props.intro)? <p className="data-intro">{ props.intro }</p> : 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>
{
props.help?
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
<HelpIcon />
</a>
<nav className="icon-buttons">
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
<HelpIcon />
</a>
</nav>
: null
}
</header>

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

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