fix: handle list overflowing on small screens

Author: dessant

package.json

@@ -38,6 +38,7 @@
     "lodash": "^4.17.4",
     "storage-versions": "dessant/storage-versions#^0.1.1",
     "vue": "^2.5.13",
+    "vue-resize": "^0.4.3",
     "vuedraggable": "^2.15.0",
     "webextension-polyfill": "^0.2.1"
   },
@@ -48,6 +49,7 @@
     "babel-plugin-lodash": "^3.3.2",
     "babel-preset-env": "^1.6.1",
     "babel-preset-minify": "^0.2.0",
+    "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^0.28.7",
     "cssnano": "^3.10.0",
     "del": "^3.0.0",

src/action/App.vue

@@ -13,7 +13,10 @@
     </div>
   </div>
 
-  <transition name="settings">
+  <transition name="settings"
+      @before-enter="beforeSettingsEnter"
+      @after-enter="afterSettingsEnter"
+      @after-leave="afterSettingsLeave">
     <div class="settings" v-show="showSettings">
       <v-textfield v-model="customUrl"
           :placeholder="getText('inputPlaceholder_customURL')"
@@ -22,33 +25,39 @@
     </div>
   </transition>
 
-  <ul class="mdc-list list">
-    <li class="mdc-list-item item ripple-surface"
-        v-if="searchAllEngines"
+  <div class="list-padding-top"></div>
+  <ul class="mdc-list list list-bulk-button" v-if="searchAllEngines">
+    <li class="mdc-list-item list-item ripple-surface"
         @click="selectEngine('allEngines')">
-      <img class="mdc-list-item__start-detail item-icon"
+      <img class="mdc-list-item__start-detail list-item-icon"
           :src="getIcon('allEngines')">
       {{ getText('engineName_allEngines_full') }}
     </li>
-    <li role="separator" class="mdc-list-divider"
-        v-if="searchAllEngines || engines.length > 8">
-    </li>
-    <div class="items">
-      <li class="mdc-list-item item ripple-surface"
+  </ul>
+  <ul class="mdc-list list list-separator"
+      v-if="searchAllEngines || hasScrollBar">
+    <li role="separator" class="mdc-list-divider"></li>
+  </ul>
+  <div class="list-items-wrap" ref="items" :class="listClasses">
+    <resize-observer @notify="handleSizeChange"></resize-observer>
+    <ul class="mdc-list list list-items">
+      <li class="mdc-list-item list-item ripple-surface"
           v-for="engine in engines"
           :key="engine.id"
           @click="selectEngine(engine)">
-        <img class="mdc-list-item__start-detail item-icon"
+        <img class="mdc-list-item__start-detail list-item-icon"
             :src="getIcon(engine)">
         {{ getText(`engineName_${engine}_short`) }}
       </li>
-    </div>
-  </ul>
+    </ul>
+  </div>
+
 </div>
 </template>
 
 <script>
 import browser from 'webextension-polyfill';
+import {ResizeObserver} from 'vue-resize';
 import {TextField} from 'ext-components';
 
 import storage from 'storage/storage';
@@ -63,21 +72,34 @@ import {targetEnv} from 'utils/config';
 
 export default {
   components: {
-    [TextField.name]: TextField
+    [TextField.name]: TextField,
+    [ResizeObserver.name]: ResizeObserver
   },
 
   data: function() {
     return {
       dataLoaded: false,
 
       showSettings: false,
+      hasScrollBar: false,
+      hideScrollBar: false,
+      isAndroid: false,
 
       engines: [],
       searchAllEngines: false,
       customUrl: ''
     };
   },
 
+  computed: {
+    listClasses: function() {
+      return {
+        'list-items-scroll-bar-hidden': this.hideScrollBar,
+        'list-items-max-height': !this.isAndroid
+      };
+    }
+  },
+
   methods: {
     getText: getText,
 
@@ -117,6 +139,24 @@ export default {
       } else {
         window.close();
       }
+    },
+
+    handleSizeChange: function() {
+      const items = this.$refs.items;
+      this.hasScrollBar = items.scrollHeight > items.clientHeight;
+    },
+
+    beforeSettingsEnter: function() {
+      this.hideScrollBar = !this.hasScrollBar;
+    },
+
+    afterSettingsEnter: function() {
+      this.handleSizeChange();
+      this.hideScrollBar = false;
+    },
+
+    afterSettingsLeave: function() {
+      this.handleSizeChange();
     }
   },
 
@@ -127,14 +167,13 @@ export default {
     );
     const enEngines = await getEnabledEngines(options);
 
-    if (
-      targetEnv === 'firefox' &&
-      (await isAndroid()) &&
-      (enEngines.length <= 1 || options.searchAllEnginesAction === 'main')
-    ) {
-      // Removing the action popup has no effect on Android
-      showNotification({messageId: 'error_optionsNotApplied'});
-      return;
+    if (targetEnv === 'firefox' && (await isAndroid())) {
+      this.isAndroid = true;
+      if (enEngines.length <= 1 || options.searchAllEnginesAction === 'main') {
+        // Removing the action popup has no effect on Android
+        showNotification({messageId: 'error_optionsNotApplied'});
+        return;
+      }
     }
 
     this.searchAllEngines = options.searchAllEnginesAction === 'sub';
@@ -143,11 +182,11 @@ export default {
     this.dataLoaded = true;
 
     const mq = window.matchMedia('(min-width: 413px)');
-    const widthChange = function(mq) {
+    const mqChange = function(mq) {
       document.body.style.minWidth = mq.matches ? '413px' : 'initial';
     };
-    mq.addListener(widthChange);
-    widthChange(mq);
+    mq.addListener(mqChange);
+    mqChange(mq);
   }
 };
 </script>
@@ -160,6 +199,19 @@ $mdc-theme-primary: #1abc9c;
 @import '@material/typography/mixins';
 @import "@material/ripple/mixins";
 
+@import 'vue-resize/dist/vue-resize';
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+}
+
 body {
   margin: 0;
   min-width: 413px;
@@ -222,23 +274,46 @@ body {
   opacity: 0;
 }
 
-.items {
-  max-height: 392px;
+.list {
+  padding: 0 !important;
+}
+
+.list-padding-top {
+  margin-bottom: 8px;
+}
+
+.list-bulk-button {
+  height: 48px;
+}
+
+.list-separator {
+  height: 1px;
+}
+
+.list-items-wrap {
   overflow-y: auto;
+  position: relative;
 }
 
-.list {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+.list-items-max-height {
+  max-height: 392px;
+}
+
+.list-items-scroll-bar-hidden {
+  overflow-y: hidden;
+}
+
+.list-items {
+  padding-bottom: 8px !important;
 }
 
-.item {
+.list-item {
   padding-left: 16px;
   padding-right: 48px;
   cursor: pointer;
 }
 
-.item-icon {
+.list-item-icon {
   margin-right: 16px !important;
 }
 

src/manifest.json

@@ -26,7 +26,7 @@
   ],
 
   "content_security_policy":
-    "default-src 'self'; img-src 'self' data:; connect-src *; object-src 'none'; child-src 'none'; form-action 'none';",
+    "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src *; object-src 'none'; child-src 'none'; form-action 'none';",
 
   "icons": {
     "16": "src/icons/app/icon-16.png",