truncates long page titles with ellipsis (#369)

DataUSA · Apr 20, 2016 · 5b9021b · 5b9021b
1 parent ce04f77
commit 5b9021b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 48 deletions.
diff --git a/datausa/assets/scss/elements/_nav.scss b/datausa/assets/scss/elements/_nav.scss
@@ -58,14 +58,22 @@ body {
       z-index: 3;
 
       span {
-        @include flex();
-        @include align-items(center);
+        @include box();
+        display: block;
         position: relative;
         top: 0 !important;
         padding: 7px;
         color: $red-w;
         font-family: $pathway;
         font-size: 24px;
+        max-width: 75%;
+        text-align: center;
+        width: 100%;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
       }
 
       img {

diff --git a/datausa/assets/scss/elements/_profile.scss b/datausa/assets/scss/elements/_profile.scss
@@ -719,16 +719,26 @@ body.profile, body.map, body.story {
     z-index: 3;
 
     span {
-      @include flex();
-      @include align-items(flex-start);
+      @include box();
+      display: block;
       position: relative;
-      top: $nav-height - 10;
-      @include transition(top 0.55s 0.03s);
+      // top: 0 !important;
       padding: 6px;
-      @include box();
       color: $red-w;
       font-family: $pathway;
       font-size: 24px;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 75%;
+      text-align: center;
+      width: 100%;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      top: $nav-height - 10;
+      @include transition(top 0.55s 0.03s);
     }
 
     img {

diff --git a/datausa/static/css/site.css b/datausa/static/css/site.css
@@ -544,30 +544,32 @@ body.about #home-btn, body.story #home-btn, body.map #home-btn {
     top: 0;
     z-index: 3; }
     body.about #title-bar span, body.story #title-bar span, body.map #title-bar span {
-      -webkit-justify-content: center;
-      -moz-justify-content: center;
-      justify-content: center;
-      -ms-flex-pack: center;
-      flex-pack: center;
-      display: -webkit-box;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      -webkit-align-items: center;
-      align-items: center;
-      -ms-flex-align: center;
-      flex-align: center;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      display: block;
       position: relative;
       top: 0 !important;
       padding: 7px;
       color: #ef6145;
       font-family: "Pathway Gothic One", sans-serif;
-      font-size: 24px; }
-      body.about #title-bar img, body.story #title-bar img, body.map #title-bar img {
-        width: 72px;
-        margin-top: 6px;
-        margin-right: 5px; }
+      font-size: 24px;
+      max-width: 75%;
+      text-align: center;
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
+      body.about #title-bar span:before, body.about #title-bar span:after,
+      body.story #title-bar span:before, body.story #title-bar span:after,
+      body.map #title-bar span:before, body.map #title-bar span:after {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box; }
+    body.about #title-bar img, body.story #title-bar img, body.map #title-bar img {
+      width: 72px;
+      margin-top: 6px;
+      margin-right: 5px; }
 
 #menu {
   left: -300px;
@@ -3919,33 +3921,28 @@ body.profile #title-bar, body.map #title-bar, body.story #title-bar {
   top: 0;
   z-index: 3; }
   body.profile #title-bar span, body.map #title-bar span, body.story #title-bar span {
-    -webkit-justify-content: center;
-    -moz-justify-content: center;
-    justify-content: center;
-    -ms-flex-pack: center;
-    flex-pack: center;
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-    -ms-flex-align: start;
-    flex-align: start;
-    position: relative;
-    top: 30px;
-    -moz-transition: top 0.55s 0.03s;
-    -o-transition: top 0.55s 0.03s;
-    -webkit-transition: top 0.55s 0.03s;
-    transition: top 0.55s 0.03s;
-    padding: 6px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+    display: block;
+    position: relative;
+    padding: 6px;
     color: #ef6145;
     font-family: "Pathway Gothic One", sans-serif;
-    font-size: 24px; }
+    font-size: 24px;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 75%;
+    text-align: center;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    top: 30px;
+    -moz-transition: top 0.55s 0.03s;
+    -o-transition: top 0.55s 0.03s;
+    -webkit-transition: top 0.55s 0.03s;
+    transition: top 0.55s 0.03s; }
     body.profile #title-bar span:before, body.profile #title-bar span:after,
     body.map #title-bar span:before, body.map #title-bar span:after,
     body.story #title-bar span:before, body.story #title-bar span:after {