bugfix: webkit scroll #826

assets/css/app.scss

@@ -422,9 +422,9 @@ section[role="main-content"]{
     }
 
     >nav{
-      padding-bottom: 0;
       $pager_h:2em;
-
+      display: flex;
+      flex-direction: column;
       span.nav-title{ display:none; }
 
       section#toc{
@@ -490,7 +490,7 @@ section[role="main-content"]{
         height:$pager_h;
         overflow: hidden;
         box-sizing: content-box;
-        padding:0 1.5em;
+        padding:1em 0 0 1.5em;
         select{
           option{
             padding:0;
@@ -985,6 +985,12 @@ footer[role="tools"]{
   input[type="search"]{
     margin:0;
     padding:0;
+    -webkit-appearance:textfield;
+    -webkit-box-sizing:content-box;
+  }
+  input::-webkit-search-decoration,
+  input::-webkit-search-cancel-button {
+      display: none;
   }
   .vs__search{
     &, &:focus{
@@ -995,6 +1001,12 @@ footer[role="tools"]{
       box-sizing: border-box;
     }
   }
+  .vs__dropdown-toggle{
+    input::placeholder{background-color: #fff;}
+  }
+  .vs__selected-options{
+    background-color: #fff;
+  }
   .vs__actions{
     padding:1px 3px;
     svg[role="presentation"]{

assets/css/base/_layout.scss

@@ -33,13 +33,17 @@ body{
     }
   }
   section[role="main-content"]{
+    display: flex;
     flex:1 1 auto;
     @extend %layout-element;
     overflow: hidden;
+    position: relative;
     >.wrapper{
       position: relative;
       padding:0 $side-padding 0 $side-padding;
-      height:100%; max-height:100%;
+      // height:100%; max-height:100%;
+      display: flex;
+      flex: 1;
       overflow-y: hidden;
       overflow-x: hidden;
       >*{
@@ -51,16 +55,21 @@ body{
       }
     }
     .main-content-layout{
-      height: 100%;
+      position: relative;
+      // https://stackoverflow.com/a/33644245
+      display: flex;
+      flex: 1;
+      >section{
+        max-height: 100%;
+      }
       >header,
-      >section,
+      >section>.wrapper,
       >nav{
+        box-sizing: border-box;
         max-height: 100%;
         padding-top:1em;
-        padding-bottom:1em;
       }
-
-      >section,
+      >section>.wrapper,
       >nav{
         overflow-x: hidden;
         overflow-y: auto;

assets/css/base/_transitions.scss

@@ -46,14 +46,6 @@
   }
 }
 
-// .fade-enter,
-// .fade-leave-to{
-//   opacity: 0;
-// }
-// .fade-enter-to,
-// .fade-leave{
-//   opacity:1;
-// }
 .fade-enter-active{
   transition: all 300ms ease-in-out;
 }
@@ -61,13 +53,6 @@
   transition: all 200ms ease-in-out;
 }
 
-// .fade-enter-active,
-// .fade-leave-active {
-//   transition-duration: 0.3s;
-//   transition-property: opacity;
-//   transition-timing-function: ease;
-// }
-
 .fade-enter,
 .fade-leave-active {
   opacity: 0

src/components/Layouts/MainContentLayout.vue

@@ -7,8 +7,16 @@
       <slot name="header" />
     </header>
 
-    <section ref="scrollablecenter" class="med-col-6 large-col-6" @scroll.passive="onScrollCenter">
-      <slot />
+    <section
+      class="med-col-6 large-col-6"
+      @scroll.passive="onScrollCenter"
+    >
+      <div
+        class="wrapper"
+        ref="scrollablecenter"
+      >
+        <slot />
+      </div>
     </section>
 
     <nav class="med-col-3 large-col-3" :class="{ opened: navopened }">

src/components/nav/HeaderMenu.vue

@@ -2,7 +2,7 @@
   <nav id="header-menu">
     <!-- <span v-if="!corpusLoaded" class="loading">Loading ...</span> -->
     <ul>
-      <li >
+      <li>
         <span v-if="!corpusLoaded" class="loading">Loading ...</span>
         <router-link v-else to="/corpus">Corpus</router-link>
       </li>

src/index.js

@@ -34,8 +34,12 @@ Vue.use(VueScrollTo)
 Vue.component('v-select', VueSelect)
 Vue.use(Vue2TouchEvents)
 
-window.apipath = process.env === 'prod' ? `http://${window.location.hostname}/api` : 'http://localhost:8984'
-
+// https://apple.stackexchange.com/questions/17077/add-a-hosts-file-entry-without-jailbreaking
+window.apipath = process.env === 'prod' || window.location.hostname === 'dev.gdp.fr' ? `http://${window.location.hostname}/api` : 'http://localhost:8984'
+// if (window.location.hostname === 'dev.gdp.fr') {
+//   window.apipath = `http://${window.location.hostname}/api`
+// }
+// window.apipath = `http://${window.location.hostname}:8984`
 // sync(store, router) // done. Returns an unsync callback fn
 
 new Vue({