Bunch of website fixes (#2433)

website/src/privacy.md

@@ -33,6 +33,8 @@ Since we do not store data on data subjects, migration or deletion tools are not
 
 We use the following third-party services which also store data about you:
 
+<div class="table-responsive">
+
 | supplier              | subject                 | data                                     | encryption    | anonymized  | discarded  |
 | :---------------------| :---------------------- | :--------------------------------------- | :-----------: | :---------: | :--------: |
 | Transloadit           | end user (data subject) | browser identifiers                      |               |             | instantly  |
@@ -40,6 +42,8 @@ We use the following third-party services which also store data about you:
 | Tus.io                | end user (data subject) | test files                               |               |             | in 72h     |
 | Google Analytics      | customer (business)     | browser identifiers                      |               | ✅          |            |
 
+</div>
+
 - **anonymized**: Any data that can be used to identify the 'data subject' is scrubbed
 - **discarded**: Data is destroyed
 

website/src/support.md

@@ -10,6 +10,8 @@ body_class: "page-support"
 
 This approach is new, we may make changes as we learn. Here are the current options in detail:
 
+<div class="table-responsive">
+
 |                                               |   🦄<br>Community    |                          🥉<br>Bronze                          |                               🥈<br>Silver and up                                |
 |----------------------------------------------:|:--------------------:|:--------------------------------------------------------------:|:--------------------------------------------------------------------------------:|
 |                                               |    anyone,<br/>$0    | included with all Transloadit Plans,<br/>which start at $49/mo |                   Enterprise addons,<br/>starting at $1499/mo                    |
@@ -26,6 +28,7 @@ This approach is new, we may make changes as we learn. Here are the current opti
 |                               Health & Status |          -           |            Access to Personal Transloadit Dashboard           |  Access to Personal Transloadit Dashboard. Proactive monitoring & notifications |
 |              Support for non-current releases |          -           |                               -                                |                               0 - 10 releases back                              |
 
+</div>
 
 If you want to apply for: 
 

website/themes/uppy/layout/page.ejs

@@ -1,4 +1,4 @@
-<% if (page.type && page.type !== 'page') { %>
+<% if (page.type) { %>
     <%- partial('partials/sidebar', { only_modules: false, add_taglines: false, type: page.type, index: page.index }) %>
 <% } %>
 <div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">

website/themes/uppy/layout/partials/plugin_list.ejs

@@ -3,32 +3,35 @@
 <small>
    ⚠️ Note that this includes the dependencies for each package, some of which are shared when you install multiple plugins. For example, the <code>@uppy/dropbox</code> and <code>@uppy/instagram</code> package are both over 11kB including dependencies, but only sum up to about 15kB when they are used together.
 </small>
-<table class="Stats-bundleSizes">
-  <thead>
-    <tr>
-      <th class="Stats-bundleSizeHeader">Package</th>
-      <th class="Stats-bundleSizeHeader">Version</th>
-      <th class="Stats-bundleSizeHeader">Minified</th>
-      <th class="Stats-bundleSizeHeader">Gzip</th>
-    </tr>
-  </thead>
-  <tbody>
-    <% for (const [name, sizes] of Object.entries(theme.uppy_bundle_kb_sizes)) { %>
-      <% const { minified, gzipped, prettyMinified, prettyGzipped, version } = sizes %>
+
+<div class="table-responsive">
+  <table class="Stats-bundleSizes">
+    <thead>
       <tr>
-        <td><a class="Stats-package" target="_blank" href="https://npmjs.com/package/<%= name %>"><%= name %></a></td>
-        <td><%= version %></td>
-        <td><%= prettyMinified %></td>
-        <td class="
-          <% if (gzipped > 30 * 1000) { %>Stats-large<% } %>
-          <% if (gzipped < 10 * 1000) { %>Stats-small<% } %>
-        ">
-          <%= prettyGzipped %>
-        </td>
+        <th class="Stats-bundleSizeHeader">Package</th>
+        <th class="Stats-bundleSizeHeader">Version</th>
+        <th class="Stats-bundleSizeHeader">Minified</th>
+        <th class="Stats-bundleSizeHeader">Gzip</th>
       </tr>
-    <% } %>
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <% for (const [name, sizes] of Object.entries(theme.uppy_bundle_kb_sizes)) { %>
+        <% const { minified, gzipped, prettyMinified, prettyGzipped, version } = sizes %>
+        <tr>
+          <td><a class="Stats-package" target="_blank" href="https://npmjs.com/package/<%= name %>"><%= name %></a></td>
+          <td><%= version %></td>
+          <td class="Stats-size"><%= prettyMinified %></td>
+          <td class="
+            <% if (gzipped > 30 * 1000) { %>Stats-large<% } %>
+            <% if (gzipped < 10 * 1000) { %>Stats-small<% } %>
+           Stats-size">
+            <%= prettyGzipped %>
+          </td>
+        </tr>
+      <% } %>
+    </tbody>
+  </table>
+</div>
 
 <iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
 <p>

website/themes/uppy/layout/partials/sidebar.ejs

@@ -2,17 +2,19 @@
   <ul class="main-menu">
     <%- partial('partials/main_menu') %>
   </ul>
+  
+  <% if (page.type !== "page") { %>
   <div class="list">
     <h2>
-      <% if (page.type) { %>
-        <a href="/<%- type %>"><%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %></a>
-        <% } %>
-      </h2>
+      <a href="/<%- type %>"><%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %></a>
+    </h2>
       
     <div class="menu-root">
       <%- partial('partials/docs_menu') %>
     </div>
+
     <%- partial('partials/social') %>
-  </div>
+    </div>
+  <% } %>
 </div>
 

website/themes/uppy/source/css/_common.scss

@@ -115,7 +115,7 @@ hr {
   table, tr, td {
     width: 100%;
     border-collapse: collapse;
-    padding: 0;
+    padding: 0 !important;
     margin: 0;
   }
 
@@ -170,7 +170,6 @@ hr {
 .page-inner .MainContent {
   position: relative;
   z-index: 1;
-  overflow-x: hidden;
   padding: 2em 1.4em 0;
 
   @media #{$screen-medium} {

website/themes/uppy/source/css/_page.scss

@@ -181,18 +181,27 @@
     vertical-align: middle;
   }
 
+  .table-responsive {
+    @media screen and (max-width: 767px) {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
   table {
     width: 100%;
     text-align: left;
-    display: block;
     font-size: 85%;
-    border-spacing: 10px;
-    overflow-x: auto;
+    border-collapse: collapse;
+  }
+
+  table th,
+  table td {
+    padding: 14px 8px;
   }
 
   table td { 
     vertical-align: top;
-    padding: 8px;
     border-bottom: 1px solid #eee;
   }
 
@@ -362,23 +371,11 @@
 
 // Support page table overrides
 
-.page-support table {
-  overflow: visible;
-}
-.page-support .highlight table {
-  overflow: scroll;
-}
 .page-support table tr:first-child td {
   white-space: nowrap;
   font-size: 90%;
 }
 
-// Privacy policy table overrides
-
-.page-privacy table td {
-  padding: 8px 0;
-}
-
 // Plugin list
 
 body.page-plugin-list .Content ul {

website/themes/uppy/source/css/_stats.scss

@@ -17,6 +17,10 @@
   th { text-align: left; }
 }
 
+.Stats-size {
+  white-space: nowrap;
+}
+
 a.Stats-package {
   color: #e02177;
 }