portico-css: Reposition header, portico-page content, and footer.

zulip · Jun 19, 2017 · b1e5ee0 · b1e5ee0
1 parent 081e040
commit b1e5ee0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 53 deletions.
diff --git a/static/styles/portico-signin.css b/static/styles/portico-signin.css
@@ -30,10 +30,6 @@ html {
     margin: 10px;
 }
 
-.footer {
-    padding: 20px 0px 10px 0px;
-}
-
 .white-box {
     position: relative;
     padding: 30px;
@@ -146,10 +142,6 @@ html {
     margin-bottom: 0px;
 }
 
-.header {
-    padding: 15px 0px 15px 0px;
-}
-
 .header,
 .header .stripes,
 .header .darker {

diff --git a/static/styles/portico.css b/static/styles/portico.css
@@ -372,22 +372,32 @@ input.text-error {
     outline-color: red;
 }
 
-.header,
+.portico-container {
+    position: relative;
+}
+
+.portico-wrap {
+    overflow: hidden;
+    min-height: 100vh;
+}
+
 .footer {
     position: absolute;
+    bottom: 0;
     z-index: 100;
     width: 100%;
-    background-color: #52c2af;
-}
-
-.footer {
     background-color: transparent;
+    padding-top: 15px;
 }
 
 .footer .footer-navigation {
     margin-left: 0px;
 }
 
+.header {
+    padding: 20px 0 15px;
+}
+
 .header-main .logo {
     display: block;
     text-decoration: none;
@@ -569,6 +579,7 @@ a.bottom-signup-button {
 .portico-page {
     /* height of the white portico navbar */
     min-height: calc(100% - 87px);
+    padding-bottom: 71px;
 }
 
 .signup-signature {

diff --git a/templates/zerver/portico.html b/templates/zerver/portico.html
@@ -11,50 +11,53 @@
 {% endblock %}
 
 {% block content %}
-<div class="header">
-    <div class="stripes"></div>
-    <div class="darker"></div>
-    <div class="header-main" id="top_navbar">
-        <div class="column-left">
-            <div>
-                {% if custom_logo_url %}
-                <a class="brand logo" href="{{ server_uri }}/"><img draggable="false" src="{{ custom_logo_url }}" class="portico-logo" alt="{{ _('Zulip') }}" content="Zulip" /></a>
-                {% else %}
-                <a class="brand logo" href="{{ server_uri }}">
-                    <svg class="brand-logo" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
-                        <g transform="translate(-297.14285,-466.64792)">
-                            <circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#fff;stroke-width:1.93936479;stroke:transparent"></circle>
-                            <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#52c2af;stroke:#52c2af"></path>
-                        </g>
-                    </svg>
-                    <span>Zulip</span>
-                </a>
-                {% endif %}
+<div class="portico-container">
+    <div class="portico-wrap">
+        <div class="header">
+            <div class="stripes"></div>
+            <div class="darker"></div>
+            <div class="header-main" id="top_navbar">
+                <div class="column-left">
+                    <div>
+                        {% if custom_logo_url %}
+                        <a class="brand logo" href="{{ server_uri }}/"><img draggable="false" src="{{ custom_logo_url }}" class="portico-logo" alt="{{ _('Zulip') }}" content="Zulip" /></a>
+                        {% else %}
+                        <a class="brand logo" href="{{ server_uri }}">
+                            <svg class="brand-logo" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
+                                <g transform="translate(-297.14285,-466.64792)">
+                                    <circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#fff;stroke-width:1.93936479;stroke:transparent"></circle>
+                                    <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#52c2af;stroke:#52c2af"></path>
+                                </g>
+                            </svg>
+                            <span>Zulip</span>
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+
+                <div class="column-right top-links">
+                    {% if login_link_disabled %}
+                    {% elif not only_sso %}
+                    <a href="{{login_url}}">{{ _('Log in') }}</a>
+                    {% endif %}
+
+                    {% if register_link_disabled %}
+                    {% elif only_sso %}
+                    <a href="{{ url('login-sso') }}">{{ _('Log in') }}</a>
+                    {% else %}
+                    <a href="{{ url('register') }}">{{ _('Register') }}</a>
+                    {% endif %}
+                </div>
             </div>
         </div>
 
-        <div class="column-right top-links">
-            {% if login_link_disabled %}
-            {% elif not only_sso %}
-            <a href="{{login_url}}">{{ _('Log in') }}</a>
-            {% endif %}
-
-            {% if register_link_disabled %}
-            {% elif only_sso %}
-            <a href="{{ url('login-sso') }}">{{ _('Log in') }}</a>
-            {% else %}
-            <a href="{{ url('register') }}">{{ _('Register') }}</a>
-            {% endif %}
+        <div class="app portico-page">
+            <div class="app-main portico-page-container{% block hello_page_container %}{% endblock %}">
+                {% block portico_content %}
+                {% endblock %}
+            </div>
         </div>
     </div>
+    {% include 'zerver/footer.html' %}
 </div>
-
-<div class="app portico-page">
-    <div class="app-main portico-page-container{% block hello_page_container %}{% endblock %}">
-        {% block portico_content %}
-        {% endblock %}
-    </div>
-</div>
-
-{% include 'zerver/footer.html' %}
 {% endblock %}