Issue #13: Made header of Tethys Portal more responsive to long title…

…s, which prevents the header wrapping and covering up controls.
tethysplatform · Mar 13, 2015 · f5c2b3e · f5c2b3e
1 parent 0fa0a61
commit f5c2b3e
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 3 deletions.
diff --git a/static/tethys_portal/css/tethys_main.css b/static/tethys_portal/css/tethys_main.css
@@ -640,6 +640,7 @@ a:hover {
   float: left;
   margin: 2px 0;
   min-height: 55px;
+  width: 60%;
 }
 .site-header .header-logo .logo-image {
   display: inline-block;
@@ -653,13 +654,20 @@ a:hover {
 .site-header .header-logo .logo-title {
   display: inline-block;
   float: left;
+  width: 85%;
+  line-height: 50px;
 }
 .site-header .header-logo .logo-title a {
+  display: inline-block;
   font-size: 36px;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #ffffff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
 }
 .site-header .header-logo .logo-title a:hover {
   color: #eaeaea;
@@ -670,6 +678,7 @@ a:hover {
   list-style: none;
   float: right;
   margin: 20px 0;
+  padding-left: 10px;
 }
 .site-header .header-nav li {
   float: left;
@@ -861,10 +870,77 @@ a:hover {
 .mobile-nav-button {
   display: none;
 }
-@media (max-width: 700px) {
+@media (max-width: 1080px) {
+  .site-header {
+    margin: 0 20px;
+  }
+  .site-header .header-logo {
+    margin: 10px 0;
+    width: 55%;
+  }
+  .site-header .header-logo .logo-image img {
+    height: 40px;
+  }
+  .site-header .header-logo .logo-title {
+    line-height: 40px;
+    max-width: 85%;
+  }
+  .site-header .header-logo .logo-title a {
+    display: inline-block;
+    font-size: 32px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+}
+@media (max-width: 900px) {
+  .site-header {
+    margin: 0 20px;
+  }
+  .site-header .header-logo {
+    margin: 10px 0;
+    width: 48%;
+  }
+  .site-header .header-logo .logo-image img {
+    height: 40px;
+  }
+  .site-header .header-logo .logo-title {
+    line-height: 35px;
+    width: 79%;
+  }
+  .site-header .header-logo .logo-title a {
+    display: inline-block;
+    font-size: 28px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+}
+@media (max-width: 750px) {
   .site-header {
     margin: 0 20px;
   }
+  .site-header .header-logo {
+    margin: 10px 0;
+    width: 65%;
+  }
+  .site-header .header-logo .logo-image img {
+    height: 40px;
+  }
+  .site-header .header-logo .logo-title {
+    line-height: 40px;
+    width: 60%;
+  }
+  .site-header .header-logo .logo-title a {
+    display: inline-block;
+    font-size: 22px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
   .header-nav {
     display: none;
   }

diff --git a/static/tethys_portal/less/header.less b/static/tethys_portal/less/header.less
@@ -33,6 +33,7 @@
 		float: left;
 		margin: 2px 0;
         min-height: 55px;
+        width: 60%;
 
         .logo-image {
             display: inline-block;
@@ -49,11 +50,19 @@
         .logo-title {
             display: inline-block;
             float: left;
+            width: 85%;
+            line-height: 50px;
+
             a {
+                display: inline-block;
                 font-size: 36px;
                 font-weight: 400;
                 .font-smoothing();
                 color: #ffffff;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 100%;
 
                 &:hover {
                     color: #eaeaea;
@@ -68,6 +77,7 @@
 	 	list-style: none;
 	  	float: right;
 	  	margin: 20px 0;
+        padding-left: 10px;
 
 		  li {
 			  float: left;
@@ -297,10 +307,100 @@
 	display: none;
 }
 
-@media (max-width: 700px) {
+
+@media (max-width: 1080px) {
+
+  .site-header {
+    margin: 0 20px;
+
+    .header-logo {
+      margin: 10px 0;
+      width: 55%;
+
+      .logo-image {
+        img {
+          height: 40px;
+        }
+      }
+
+      .logo-title {
+        line-height: 40px;
+        max-width: 85%;
+
+        a {
+          display: inline-block;
+          font-size: 32px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 900px) {
+
+  .site-header {
+    margin: 0 20px;
+
+    .header-logo {
+      margin: 10px 0;
+      width: 48%;
+
+      .logo-image {
+        img {
+          height: 40px;
+        }
+      }
+
+      .logo-title {
+        line-height: 35px;
+        width: 79%;
+
+        a {
+          display: inline-block;
+          font-size: 28px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 750px) {
 
   .site-header {
       margin: 0 20px;
+
+      .header-logo {
+        margin: 10px 0;
+        width: 65%;
+
+        .logo-image {
+          img {
+            height: 40px;
+          }
+        }
+
+        .logo-title {
+          line-height: 40px;
+          width: 60%;
+
+          a {
+            display: inline-block;
+            font-size: 22px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 100%;
+          }
+        }
+      }
   }
 
   .header-nav {

diff --git a/templates/header.html b/templates/header.html
@@ -48,7 +48,7 @@
 
       {% if user.is_staff %}
         <li>
-          <a href="" title="System Admin Settings">
+          <a href="{% url 'admin:index' %}" title="System Admin Settings">
             <span>Site Admin</span>
           </a>
         </li>