Merge pull request #719 from OpenBazaar/scrollableUpdateDialog

Scrollable update dialog

Author: rmisio

js/templates/modals/dialog.html

@@ -3,7 +3,9 @@
     <h1><%= ob.title %></h1>
   </div>
   <div class="<%= ob.messageClass %>">
-    <p><%= ob.message %></p>
+    <div class="rowMd innerMessage">
+      <%= ob.message %>
+    </div>
     <% if (ob.buttons.length) { %>
     <div class="buttonWrap">
       <% ob.buttons.forEach((btn, i) => { %>
@@ -16,4 +18,4 @@ <h1><%= ob.title %></h1>
     </div>
     <% } %>
   </div>
-</div>
+</div>

js/utils/autoUpdate.js

@@ -39,12 +39,13 @@ export function updateReady(opts = {}) {
 
   let displayData = '';
   $.each(opts, (key, val) => {
-    displayData += `<b>${key}:</b> <br>${val}<br>`;
+    displayData += `<b>${key}:</b> <pre style="white-space: pre-wrap">${val}</pre>`;
   });
 
   updateReadyDialog = new Dialog({
     title: app.polyglot.t('update.ready.title'),
     message: `${app.polyglot.t('update.ready.msg')}<br><br>${displayData}`,
+    messageClass: 'dialogScrollMsg',
     buttons: [{
       text: app.polyglot.t('update.install'),
       fragment: 'installUpdate',

styles/modules/modals/_message.scss

@@ -6,14 +6,22 @@
   .modalContent {
     width: 600px;
   }
-  
+
   .msgWrap {
     font-size: 1.4rem;
   }
 
   &.dialog {
     // specific to dialog styling
 
+    .dialogScrollMsg {
+      .innerMessage {
+        max-height: 425px;
+        overflow: auto;
+        margin-right: -15px;
+      }
+    }
+
     .buttonWrap {
       text-align: center;
     }