New feature: hyphenation for survey content on small screens (very lo…

…ng words will be break with hyphens on recent navigators, or with word-wrap on old ones)
LimeSurvey · May 10, 2016 · 1b1b8c5 · 1b1b8c5
1 parent 6c2db35
commit 1b1b8c5
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 9 deletions.
diff --git a/templates/default/css/template.css b/templates/default/css/template.css
@@ -918,3 +918,18 @@ label, th {
 {
     margin-top: 50px;
 }
+
+/* text overflows, ellipsis and hyphens */
+.navbar-brand {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#outerframeContainer {
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    -o-hyphens: auto;
+    hyphens: auto;
+}
diff --git a/templates/default/views/startpage.pstpl b/templates/default/views/startpage.pstpl
@@ -16,16 +16,17 @@
 
     <nav class="navbar navbar-default navbar-fixed-top" id="topsurveymenubar">
       <div class="container">
-        <div class="navbar-header">
+        <div class="navbar-header col-xs-12 col-sm-6 col-lg-8">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <span class="navbar-brand">{SURVEYNAME}</span>
+          <span class="navbar-brand col-xs-10 col-sm-12" >{SURVEYNAME}</span>
         </div>
-        <div id="navbar" class="navbar-collapse collapse">
+
+        <div id="navbar" class="navbar-collapse collapse col-xs-12">
           <ul class="nav navbar-nav">
           </ul>
           <ul class="nav navbar-nav navbar-right">

diff --git a/templates/news_paper/css/template.css b/templates/news_paper/css/template.css
@@ -822,3 +822,18 @@ label, th {
 {
     margin-top: 50px;
 }
+
+/* text overflows, ellipsis and hyphens */
+.navbar-brand {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#outerframeContainer {
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    -o-hyphens: auto;
+    hyphens: auto;
+}
diff --git a/templates/news_paper/views/startpage.pstpl b/templates/news_paper/views/startpage.pstpl
@@ -16,16 +16,17 @@
 
     <nav class="navbar navbar-default navbar-fixed-top" id="topsurveymenubar">
       <div class="container">
-        <div class="navbar-header">
+        <div class="navbar-header col-xs-12 col-sm-6 col-lg-8">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand col-xs-8" href="#">{SURVEYNAME}</a>
+          <span class="navbar-brand col-xs-10 col-sm-12" >{SURVEYNAME}</span>
         </div>
-        <div id="navbar" class="navbar-collapse collapse">
+
+        <div id="navbar" class="navbar-collapse collapse col-xs-12">
           <ul class="nav navbar-nav">
           </ul>
           <ul class="nav navbar-nav navbar-right">

diff --git a/templates/ubuntu_orange/css/template.css b/templates/ubuntu_orange/css/template.css
@@ -817,3 +817,20 @@ label, th {
 {
     margin-top: 50px;
 }
+
+
+
+/* text overflows, ellipsis and hyphens */
+.navbar-brand {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#outerframeContainer {
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    -o-hyphens: auto;
+    hyphens: auto;
+}
diff --git a/templates/ubuntu_orange/views/startpage.pstpl b/templates/ubuntu_orange/views/startpage.pstpl
@@ -16,16 +16,17 @@
 
     <nav class="navbar navbar-default navbar-fixed-top" id="topsurveymenubar">
       <div class="container">
-        <div class="navbar-header">
+        <div class="navbar-header col-xs-12 col-sm-6 col-lg-8">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand col-xs-8" href="#">{SURVEYNAME}</a>
+          <span class="navbar-brand col-xs-10 col-sm-12" >{SURVEYNAME}</span>
         </div>
-        <div id="navbar" class="navbar-collapse collapse">
+
+        <div id="navbar" class="navbar-collapse collapse col-xs-12">
           <ul class="nav navbar-nav">
           </ul>
           <ul class="nav navbar-nav navbar-right">