EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add basic menu

foundationworkpage
jonahmania 2018-02-13 12:25:00 -05:00
parent 28151eaa2d
commit 55d63dc984
2 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/templates/base.html
View File

@ -56,8 +56,8 @@
</div>
<div id="header-search-bar">
<form action="{% url 'search' %}" method="get">
<input type="text" placeholder="Search" id="nowatermark" size="25" onfocus="imgfocus()" onblur="imgblur(15)" class="inputbox" name="q" value="{{ q }}"></input>
<i class="fa fa-search"></i>
<input type="text" id="nowatermark" size="25" onfocus="imgfocus()" onblur="imgblur(15)" class="inputbox" name="q" value="{{ q }}"></input>
</form>
</div>
<div id="header-login">
@ -102,6 +102,20 @@
</div>
<div id="header-menu">
<i class="fa fa-bars"></i>
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>

43
static/scss/header.scss
View File

@ -16,55 +16,62 @@
}
#header-search-bar {
margin-top:auto;
margin-bottom:auto;
padding-left: 10px;
margin-top: auto;
margin-bottom: auto;
padding-left: 8px;
padding-right: 8px;
flex: 1 1 auto;
}
#header-search-bar form {
width:100%;
max-width: 800px;
margin-right:auto;
margin-left:auto;
margin-right: auto;
margin-left: auto;
display: flex;
align-items: flex-start;
background: #1779ba;
border-right: 2px solid #1779ba;
border-radius: 0 6px 6px 0;
}
#header-search-bar form i {
align-self: flex-start;
font-size: 1.5em;
margin-top:auto;
margin-bottom:auto;
margin-top: auto;
margin-bottom: auto;
color: white;
padding: 4px;
background: #1779ba;
}
#header-search-bar form input {
align-self: flex-start;
margin-top:auto;
margin-bottom:auto;
margin-top: auto;
margin-bottom: auto;
}
#header-login {
flex: 0 0 auto;
margin-top:auto;
margin-bottom:auto;
margin-top: auto;
margin-bottom: auto;
padding-left: 8px;
padding-right: 8px;
}
#header-menu {
flex: 0 0 auto;
margin-top:auto;
margin-bottom:auto;
margin-top: auto;
margin-bottom: auto;
padding-left: 8px;
}
#header-menu i {
font-size: 3em;
margin-top:auto;
margin-bottom:auto;
margin-top: auto;
margin-bottom: auto;
}
.wrapper {
max-width: 1000px;
padding-top: 24px;