New help panel that slides in from the top and pushes the content down so it is not covered. Panel toggles with help button. Still some bugs with small screen viewing.

This commit is contained in:
Andrew Manning
2016-04-17 07:09:42 -04:00
parent ce582ccada
commit d7fe48d1b6
3 changed files with 254 additions and 205 deletions

View File

@@ -1898,28 +1898,35 @@ nav .badge.mail-update:hover {
/* contextual help */
.help-content {
background: rgba(255, 255, 255, 0.9);
color: #333333;
position: fixed;
top: 50px;
left: -80%;
width: 80%;
height: 60%;
padding: 20px;
transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
box-sizing: border-box;
border: #CCC thin solid;
overflow: auto;
background: rgba(255, 255, 255, 0.9);
color: #333333;
position: fixed;
top: -1000px;
left: 0%;
right: 100%;
width: 100%;
height: auto;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
box-sizing: border-box;
border: #CCC thin solid;
overflow: auto;
}
.help-content-open {
left: 0px;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
top: 50px;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
}
main {
top: auto;
}
main.help-content-open {
top: 200px;
}
.help-content dd {
margin-bottom: 1em;
margin-bottom: 1em;
}
/* contextual help end */