vue updates ^_^

Former-commit-id: 336b37cf681ec2337a1e4d577213aa45f12b81d6 [formerly d8cbb6ff242f9ab3e5c857da6f6758abb0f4fc1a] [formerly 8b9089c816fae3608bf5ef8592cb776fa420a6f6 [formerly e2077efbc6a49a82c9f0fc8741304fd2fc9c7e93]]
Former-commit-id: 30b063fdab7de6f2c1c5f46dd8a1dd354897f5b6 [formerly 8f83b525334b9430ddbe779c6eae3251a5590b75]
Former-commit-id: bbe19a047d103531a542bebb1fe0263bec4cbd88

_assets/src/App.vue

@@ -11,7 +11,7 @@
         <div id="click-overlay"></div>
     </header>
     <nav id="sidebar">
-      <a class="action" :href="baseURL()">
+      <a class="action" :href="baseURL + '/'">
         <i class="material-icons">folder</i>
         <span>My Files</span>
       </a>
@@ -21,10 +21,10 @@
       </div>
     </nav>
     <main>
-      <listing v-if="Kind == 'listing'"></listing> 
+      <listing v-if="page.kind == 'listing'"></listing> 
     </main>
 
-    <preview v-if="Kind == 'preview'"></preview> 
+    <preview v-if="page.kind == 'preview'"></preview> 
 
     <div class="overlay"></div>
     <!-- TODO: show on listing and allowedit -->
@@ -50,17 +50,24 @@
 import Search from './components/Search'
 import Preview from './components/Preview'
 import Listing from './components/Listing'
+import css from './css.js'
+
+function updateColumnSizes () {
+  let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
+  let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
+
+  items.style.width = `calc(${100 / columns}% - 1em)`
+}
 
 export default {
   name: 'app',
   components: { Search, Preview, Listing },
-  data: function () {
-    return window.page
+  mounted: function () {
+    updateColumnSizes()
+    window.addEventListener('resize', updateColumnSizes)
   },
-  methods: {
-    baseURL: function () {
-      return window.data.baseURL + '/'
-    }
+  data: function () {
+    return window.info
   }
 }
 </script>