Fixes for responsible mobile design (#242)

- Ensure that buttons text don't overflow using `white-space: normal` - Ensure that user-provided text (election/question title, description, answers..) use `word-break: break-word` css setting to break the words in two if required because overflowing. - Ensure that the warning messages in the affix-bottom during ballot selection doesn't prevent the next button to show nor they take too much space, by adding `overflow-y: scroll` to that section. - Ensure power-by doesn't take two lines
sequentech · Jun 8, 2022 · e62dc19 · e62dc19
1 parent 3629deb
commit e62dc19
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 28 deletions.
diff --git a/app.less b/app.less
@@ -16,6 +16,7 @@
 **/
 
 /* avBooth */
+@import "avBooth/booth.less";
 @import "avBooth/2questions-conditional-screen-directive/2questions-conditional-screen-directive.less";
 @import "avBooth/election-chooser-screen-directive/election-chooser-screen-directive.less";
 @import "avBooth/booth-header-directive/booth-header-directive.less";

diff --git a/avBooth/accordion-option-directive/accordion-option-directive.html b/avBooth/accordion-option-directive/accordion-option-directive.html
@@ -22,7 +22,7 @@
   </div>
 
   <span
-    class="label label-default"
+    class="label label-default answer-category"
     ng-if="showCategory && !!option.category">
     {{option.category}}
   </span>
@@ -56,15 +56,15 @@
               {{option.selected + 1}}.
           </span>
           <span>
-              <span ng-bind-html="option.text"></span>
+              <span class="answer-text" ng-bind-html="option.text"></span>
               <span
               ng-if="showPoints && option.selected > -1"
               ng-i18next="[i18next]({points: getPoints()})avBooth.showSelectedOptionPoints">
               </span>
           </span>
           </strong>
-          <p class="details visible-lg" ng-if="(dnd_disable || !selectedOptions || (!!selectedOptions && !isTouchDevice)) && option.details && option.details.length > 1" ng-bind-html="option.details">
-          <p class="details hidden-lg" ng-if="!selectedOptions && option.details && option.details.length > 1" ng-bind-html="option.details">
+          <p class="answer-description details visible-lg" ng-if="(dnd_disable || !selectedOptions || (!!selectedOptions && !isTouchDevice)) && option.details && option.details.length > 1" ng-bind-html="option.details">
+          <p class="answer-description details hidden-lg" ng-if="!selectedOptions && option.details && option.details.length > 1" ng-bind-html="option.details">
           </p>
       </div>
     </div>
@@ -84,7 +84,7 @@
   ng-click="!isPreset && toggleSelectItem(option)">
 
   <span
-    class="label label-default"
+    class="label label-default answer-category"
     ng-if="showCategory && !!option.category">
     {{option.category}}
   </span>
@@ -154,15 +154,15 @@
               {{option.selected + 1}}.
           </span>
           <span>
-              <span ng-bind-html="option.text"></span>
+              <span class="answer-text" ng-bind-html="option.text"></span>
               <span
               ng-if="showPoints && option.selected > -1"
               ng-i18next="[i18next]({points: getPoints()})avBooth.showSelectedOptionPoints">
               </span>
           </span>
           </strong>
-          <p class="details visible-lg" ng-if="(dnd_disable || !selectedOptions || (!!selectedOptions && !isTouchDevice)) && option.details && option.details.length > 1" ng-bind-html="option.details">
-          <p class="details hidden-lg" ng-if="!selectedOptions && option.details && option.details.length > 1" ng-bind-html="option.details">
+          <p class="answer-description details visible-lg" ng-if="(dnd_disable || !selectedOptions || (!!selectedOptions && !isTouchDevice)) && option.details && option.details.length > 1" ng-bind-html="option.details">
+          <p class="answer-description details hidden-lg" ng-if="!selectedOptions && option.details && option.details.length > 1" ng-bind-html="option.details">
           </p>
       </div>
     </div>

diff --git a/avBooth/accordion-option-directive/accordion-option-directive.less b/avBooth/accordion-option-directive/accordion-option-directive.less
@@ -24,6 +24,12 @@
   clear: both;
   overflow: hidden;
 
+  .answer-text,
+  .answer-category,
+  .answer-description {
+    word-break: break-all;
+  }
+
   .opt-data {
     display: block;
     float: left;

diff --git a/avBooth/booth-header-directive/booth-header-directive.html b/avBooth/booth-header-directive/booth-header-directive.html
@@ -15,7 +15,7 @@
           />
         </span>
       </div>
-      <div class="col-xs-6" ng-if="!election.logo_url">
+      <div class="col-xs-12 col-sm-6" ng-if="!election.logo_url">
         <span 
           class="powered-by"
           ng-i18next="[html:i18next]({url: organization.orgUrl, name: organization.orgName})avCommon.poweredBy"

diff --git a/avBooth/booth.less b/avBooth/booth.less
@@ -18,4 +18,6 @@
 /* Component LESS */
 /* Add Component LESS Above */
 
-
+button {
+    white-space: normal !important;
+}
diff --git a/avBooth/election-chooser-screen-directive/election-chooser-screen-directive.html b/avBooth/election-chooser-screen-directive/election-chooser-screen-directive.html
@@ -5,7 +5,7 @@
   <div class="navbar-unfixed-top text-center">
     <div class="container">
       <div class="hidden unfixed-top-height"></div>
-      <h1 ng-bind-html="parentElection && (parentElection.presentation.extra_options.public_title || parentElection.title) || !parentElection && (election.presentation.extra_options.public_title || election.title) || ''">
+      <h1 class="election-title" ng-bind-html="parentElection && (parentElection.presentation.extra_options.public_title || parentElection.title) || !parentElection && (election.presentation.extra_options.public_title || election.title) || ''">
       </h1>
     </div>
   </div>

diff --git a/avBooth/election-chooser-screen-directive/election-chooser-screen-directive.less b/avBooth/election-chooser-screen-directive/election-chooser-screen-directive.less
@@ -7,4 +7,9 @@
         margin: 25px;
         font-weight: bold;
     }
+
+    .election-title,
+    .election-description {
+        word-break: break-all;
+    }
 }
diff --git a/avBooth/multi-question-directive/multi-question-directive.html b/avBooth/multi-question-directive/multi-question-directive.html
@@ -5,11 +5,16 @@
   <div class="navbar-unfixed-top text-center">
     <div class="container">
       <div class="hidden unfixed-top-height"></div>
-      <h1 ng-if="!showingPreset" ng-bind-html="stateData.question.title"></h1>
+      <h1
+        class="question-title"
+        ng-if="!showingPreset"
+        ng-bind-html="stateData.question.title"
+      ></h1>
       <p
         ng-if="!showingPreset"
-        class="description"
-        ng-bind-html="stateData.question.description | addTargetBlank"></p>
+        class="question-description description"
+        ng-bind-html="stateData.question.description | addTargetBlank"
+      ></p>
     </div>
   </div>
 </div>

diff --git a/avBooth/multi-question-directive/multi-question-directive.less b/avBooth/multi-question-directive/multi-question-directive.less
@@ -5,10 +5,15 @@
     font-size: 16px;
   }
 
-  .description {
+  .question-description {
     padding-bottom: 15px;
   }
 
+  .question-title,
+  .question-description {
+    word-break: break-all;
+  }
+
   .filter-input {
     input {
       border: 0;
@@ -103,3 +108,10 @@
     color: @av-secondary;
   }
 }
+
+@media(max-width: @screen-sm-min) {
+  [avb-simultaneous-questions-screen] .affix-bottom .warnings {
+    overflow-y: scroll;
+    max-height: 60px;
+  }
+}
diff --git a/avBooth/review-ballot-directive/review-ballot-directive.html b/avBooth/review-ballot-directive/review-ballot-directive.html
@@ -7,7 +7,7 @@
   <!-- title -->
   <h3 aria-level="2" class="text-brand-success question-title">
     <span>{{$index + 1}}.</span>
-    <span class="title-text" ng-bind-html="question.title"></span>
+    <span class="question-title title-text" ng-bind-html="question.title"></span>
     <div class="pull-right">
       <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
     </div>

diff --git a/avBooth/review-ballot-directive/review-ballot-directive.less b/avBooth/review-ballot-directive/review-ballot-directive.less
@@ -26,6 +26,12 @@
       padding-top: 20px;
     }
 
+    .selected-answer,
+    .question-title,
+    .question-description {
+      word-break: break-all;
+    }
+
     ul, ol {
       margin-bottom: 0;
       padding-bottom: 10px;

diff --git a/avBooth/review-screen-directive/review-screen-directive.html b/avBooth/review-screen-directive/review-screen-directive.html
@@ -5,10 +5,12 @@
   <div class="navbar-unfixed-top text-center">
     <div class="container">
       <div class="hidden unfixed-top-height"></div>
-      <h1 ng-bind-html="election.presentation.extra_options.public_title || election.title">
+      <h1 
+        class="election-title"
+        ng-bind-html="election.presentation.extra_options.public_title || election.title">
       </h1>
-      <h1 ng-i18next="avBooth.reviewYourBallotTitle"></h1>
-      <p ng-i18next="avBooth.reviewYourBallotText"></p>
+      <h1 class="review-title" ng-i18next="avBooth.reviewYourBallotTitle"></h1>
+      <p class="review-description" ng-i18next="avBooth.reviewYourBallotText"></p>
     </div>
   </div>
 </div>

diff --git a/avBooth/review-screen-directive/review-screen-directive.less b/avBooth/review-screen-directive/review-screen-directive.less
@@ -24,6 +24,10 @@
     padding: 0;
   }
 
+  .election-title {
+    word-break: break-all;
+  }
+
   .locator-text-click-audit {
     padding: 10px;
 

diff --git a/avBooth/simultaneous-question-answer-directive/simultaneous-question-answer-directive.less b/avBooth/simultaneous-question-answer-directive/simultaneous-question-answer-directive.less
@@ -88,10 +88,12 @@
       .answer-text {
         font-size: 18px;
         font-weight: bold;
+        word-break: break-all;
       }
 
       .answer-details {
         font-size: 14px;
+        word-break: break-all;
       }
     }
 

diff --git a/avBooth/simultaneous-questions-screen-directive/simultaneous-questions-screen-directive.html b/avBooth/simultaneous-questions-screen-directive/simultaneous-questions-screen-directive.html
@@ -4,8 +4,10 @@
 <div class="content avb-content">
   <div class="container">
     <div class="col-xs-12 text-center">
-      <h1 ng-bind-html="election.presentation.extra_options.public_title || election.title">
-      </h1>
+      <h1
+        class="election-title"
+        ng-bind-html="election.presentation.extra_options.public_title || election.title"
+      ></h1>
       <p
         ng-if="election.description"
         class="election-description"

diff --git a/avBooth/simultaneous-questions-screen-directive/simultaneous-questions-screen-directive.less b/avBooth/simultaneous-questions-screen-directive/simultaneous-questions-screen-directive.less
@@ -89,6 +89,13 @@
     font-size: 24px;
   }
 
+  .question-title,
+  .election-title,
+  .question-description,
+  .error-list li {
+    word-break: break-all;
+  }
+
   .question-answer-wrapper.col-md-12,
   .question-answer-wrapper.col-md-6,
   .question-answer-wrapper.col-md-4,
@@ -109,3 +116,10 @@
     }
   }
 }
+
+@media(max-width: @screen-sm-min) {
+  [avb-simultaneous-questions-screen] [av-affix-bottom] .error-list > ul {
+    overflow-y: scroll;
+    max-height: 60px;
+  }
+}
diff --git a/avBooth/start-screen-directive/start-screen-directive.html b/avBooth/start-screen-directive/start-screen-directive.html
@@ -5,9 +5,14 @@
   <div class="navbar-unfixed-top text-center">
     <div class="container">
       <div class="hidden unfixed-top-height"></div>
-      <h1 ng-bind-html="parentElection && (parentElection.presentation.extra_options.public_title || parentElection.title) || !parentElection && (election.presentation.extra_options.public_title || election.title) || ''">
-      </h1>
-      <p class="description" ng-bind-html="((parentElection && parentElection.description) || (!parentElection && election.description) || '') | addTargetBlank"></p>
+      <h1
+        class="election-title"
+        ng-bind-html="parentElection && (parentElection.presentation.extra_options.public_title || parentElection.title) || !parentElection && (election.presentation.extra_options.public_title || election.title) || ''"
+      ></h1>
+      <p
+        class="election-description description" 
+        ng-bind-html="((parentElection && parentElection.description) || (!parentElection && election.description) || '') | addTargetBlank"
+      ></p>
     </div>
   </div>
 </div>
@@ -42,7 +47,7 @@ <h4>{{tosTitle}}</h4>
     </div>
 
     <div class="row" ng-if="legal">
-      <div class="padded col-xs-12">
+      <div class="padded col-xs-12 legal-terms">
         <!-- Legal terms -->
         <h4 ng-i18next="avBooth.legal.title"></h4>
         <span ng-if="extra_data.name" ng-i18next>{{extra_data.name}}, </span>

diff --git a/avBooth/start-screen-directive/start-screen-directive.less b/avBooth/start-screen-directive/start-screen-directive.less
@@ -20,7 +20,13 @@
     padding-bottom: 10px;
   }
 
-  .description {
+  .election-description {
     padding-bottom: 15px;
   }
+
+  .election-title,
+  .election-description,
+  .legal-terms {
+    word-break: break-all;
+  }
 }
diff --git a/avBooth/success-screen-directive/success-screen-directive.html b/avBooth/success-screen-directive/success-screen-directive.html
@@ -5,8 +5,8 @@
   <div class="navbar-unfixed-top text-center" av-collapsing=".unfixed-top-height" data-toggle-selector="[avb-success-screen] #avb-toggle">
     <div class="container">
       <div class="hidden unfixed-top-height"></div>
-      <h1 ng-i18next="avBooth.successTitle"></h1>
-      <p ng-i18next="avBooth.successSubheader"></p>
+      <h1 class="success-title" ng-i18next="avBooth.successTitle"></h1>
+      <p class="success-subheader" ng-i18next="avBooth.successSubheader"></p>
     </div>
   </div>
 </div>

diff --git a/avBooth/success-screen-directive/success-screen-directive.less b/avBooth/success-screen-directive/success-screen-directive.less
@@ -23,6 +23,11 @@
     display: block;
   }
 
+  .success-title,
+  .success-subheader {
+    word-break: break-all;
+  }
+
   .social-net-img {
       max-height: 48px;
       max-width: 150px;