Commit 746e315b authored by Svein Olav Styve's avatar Svein Olav Styve

Refine history navigation design

parent 95d67906
......@@ -13,8 +13,8 @@ export default function SessionElement(props) {
}
return (
<div>
<h4>Combination history</h4>
<div className="sessionWrapper">
<h3>Combination history</h3>
<SessionNavigation sessionHistory={sessionHistory} sessionIndex={props.sessionIndex}
backClicked={props.backClicked} fwdClicked={props.fwdClicked} />
<div className="sessionHolder">
......
.sessionWrapper {
background-color: #333;
padding: 8px;
color: white;
}
.sessionWrapper h3 {
display: inline-block;
}
.sessionWrapper .sessionNavButtons {
display: inline-block;
margin: 6px;
}
.sessionHolder {
background-color: #3f3f3f;
border-radius: 4px;
max-height: 200px;
overflow-y: scroll;
}
.sessionHolder > p {
padding: 2px;
margin: 4px;
}
.sessionHolder p:hover {
cursor: pointer;
}
.sessionHolder > .selectedSessionItem {
background-color: #eee;
background-color: #666;
border-radius: 8px;
padding: 2px;
}
@media screen and (max-width: 960px) {
.sessionHolder > p {
padding: 8px;
margin: 4px;
}
}
\ No newline at end of file
.sessionNavButtons > .navBtn {
display: inline-block;
background-color: #ddd;
border: 1px solid #555;
background-color: #555;
border: 1px solid #ddd;
border-radius: 4px;
margin: 6px;
padding: 0px 8px 6px 8px;
font-size: 1.875em;
}
.sessionNavButtons > .navBtn:hover {
background-color: #bbb;
}
.sessionNavButtons > .navBtn:active {
background-color: #999;
}
.sessionNavButtons > .navBtn.inactive {
border: 1px solid #aaa;
background-color: #f8f8f8;
background-color: #555;
color: #aaa;
}
@media screen and (min-width: 960px) {
.sessionNavButtons > .navBtn:hover {
background-color: #bbb;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment