Update header layout

foundationworkpage
jonahmania 2018-02-07 23:56:59 -05:00
parent 8af37b8d2f
commit 28151eaa2d
3 changed files with 103 additions and 39 deletions

View File

@ -13,6 +13,9 @@
<link href="{% sass_src 'scss/global.scss' %}" rel="stylesheet" type="text/css" />
<link href="{% sass_src 'scss/foundation/scss/foundation.scss' %}" rel="stylesheet" type="text/css" />
<link href="{% sass_src 'scss/header.scss' %}" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="/static/css/font-awesome.min.css" />
<script type="text/javascript" src="{{ jquery_home }}"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/sitewide1.js"></script>
@ -46,26 +49,18 @@
</div>
</div>
<div id="js-page-wrap">
<div id="js-header">
<div class="js-main">
<div class="js-logo">
<a href="{% url 'landing' %}"><img src="/static/images/logo.png" alt="unglue.it" title="unglue.it" /></a>
</div>
{% block search_box %}
{% if not suppress_search_box %}
<div class="js-search">
<div class="js-search-inner">
<form action="{% url 'search' %}" method="get">
<div class="inputalign">
<input type="text" id="nowatermark" size="25" onfocus="imgfocus()" onblur="imgblur(15)" class="inputbox" name="q" value="{{ q }}">
<input type="submit" class="button">
</div>
</form>
</div>
</div>
{% endif %}
{% endblock %}
<div id="page-wrapper">
<div id="header">
<div id="header-logo">
<a href="{% url 'landing' %}"><img src="/static/images/logo.png" alt="unglue.it" title="unglue.it"/></a>
</div>
<div id="header-search-bar">
<form action="{% url 'search' %}" method="get">
<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">
{% block signin %}
{% if user.is_authenticated %}
<div class="js-topmenu" id="authenticated">
@ -100,27 +95,22 @@
</ul>
</div>
{% else %}
<div class="js-topmenu">
<ul class="menu">
<li><a class="notbutton hijax" href="{% url 'superlogin' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}"><span>Sign In</span></a></li>
{% if not suppress_search_box %}
{% if request.get_full_path != "/accounts/register/" %}
<li class="last"><a class="btn btn-signup" href="{% url 'registration_register' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}">Sign Up <i class="fa fa-chevron-right"></i></a></li>
{% endif %}
{% endif %}
</ul>
</div>
<a class="notbutton hijax" href="{% url 'superlogin' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}"><span>Log In</span></a>
<a class="btn btn-signup" href="{% url 'registration_register' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}">Sign Up <i class="fa fa-chevron-right"></i></a>
{% endif %}
{% endblock %}
</div>
<div id="header-menu">
<i class="fa fa-bars"></i>
</div>
</div>
{% block news %}
{% endblock %}
{% block topsection %}{% endblock %}
{% block content %}{% endblock %}
</div>
{% block topsection %}{% endblock %}
{% block content %}{% endblock %}
{% block footer %}
<div id="footer">
<div class="js-main">
@ -174,24 +164,24 @@
</div>
</div>
{% endblock %}
</div>
{% block counter %}
{% if show_google_analytics %}
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28369982-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{% endif %}
{% endblock %}
</body>
</html>

View File

@ -61,7 +61,6 @@
". bookComments .";
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.bookDescription {

75
static/scss/header.scss Normal file
View File

@ -0,0 +1,75 @@
#page-wrapper {
display: flex;
flex-direction: column;
width:100%;
}
#header {
width:100%;
display: flex;
align-items: flex-start;
padding: 10px;
}
#header-logo {
align-self: flex-start
}
#header-search-bar {
margin-top:auto;
margin-bottom:auto;
padding-left: 10px;
flex: 1 1 auto;
}
#header-search-bar form {
width:100%;
max-width: 800px;
margin-right:auto;
margin-left:auto;
display: flex;
align-items: flex-start;
}
#header-search-bar form i {
align-self: flex-start;
font-size: 1.5em;
margin-top:auto;
margin-bottom:auto;
}
#header-search-bar form input {
align-self: flex-start;
margin-top:auto;
margin-bottom:auto;
}
#header-login {
flex: 0 0 auto;
margin-top:auto;
margin-bottom:auto;
}
#header-menu {
flex: 0 0 auto;
margin-top:auto;
margin-bottom:auto;
}
#header-menu i {
font-size: 3em;
margin-top:auto;
margin-bottom:auto;
}
.wrapper {
max-width: 1000px;
padding-top: 24px;
}
#footer {
width:100%;
}