Got basics working using vue.js

[bookstack] / resources / views / pages / image-manager.blade.php

diff --git a/resources/views/pages/image-manager.blade.php b/resources/views/pages/image-manager.blade.php
index ef52a43d721036d034b895dce612a49721d5d8ae..5a8dc20ae924c016164d9c983592105650cdedd1 100644 (file)
--- a/resources/views/pages/image-manager.blade.php
+++ b/resources/views/pages/image-manager.blade.php
@@ -1,27 +1,22 @@
-<section class="overlay" style="display:none;">
-{{--<section class="overlay">--}}
-    <div id="image-manager">
-        <div class="image-manager-left">
-            <div class="image-manager-header">
-                <button type="button" class="button neg float right" data-action="close">Close</button>
-                <div class="image-manager-title">Image Library</div>
-            </div>
-            <div class="image-manager-display-wrap">
-                <div class="image-manager-display">
-                    <div class="uploads"></div>
-                    <div class="images">
-                        <div class="load-more">Load More</div>
+
+<div id="image-manager">
+    <div class="overlay" v-el="overlay" style="display:none;">
+        <div class="image-manager-body">
+            <div class="image-manager-content">
+                <div class="dropzone-container" v-el="dropZone">
+                    <div class="dz-message">Drop files or click here to upload</div>
+                </div>
+                <div class="image-manager-list">
+                    <div v-repeat="image: images">
+                        <img v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}">
                     </div>
+                    <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
                 </div>
             </div>
-            <form action="/upload/image"
-                  class="dropzone"
-                  id="image-upload-dropzone">
-                {!! csrf_field() !!}
-            </form>
+            <div class="image-manager-sidebar">
+                <button class="neg button image-manager-close">x</button>
+                <h2>Images</h2>
+            </div>
         </div>
-        {{--<div class="sidebar">--}}
-
-        {{--</div>--}}
     </div>
-</section>
\ No newline at end of file
+</div>