Full-width section header link
This commit is contained in:
parent
df91d98383
commit
3ea1e933ac
@ -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 }
|
||||||
{
|
{
|
||||||
|
@ -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 }
|
||||||
|
@ -94,9 +94,11 @@ const LegendGroup = (props) => {
|
|||||||
</NavLink>
|
</NavLink>
|
||||||
{
|
{
|
||||||
props.help?
|
props.help?
|
||||||
|
<nav className="icon-buttons">
|
||||||
<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">
|
||||||
<HelpIcon />
|
<HelpIcon />
|
||||||
</a>
|
</a>
|
||||||
|
</nav>
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
</header>
|
</header>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user