Some tweaks to book uploader. Still messy code

public/style.css

@@ -7984,11 +7984,18 @@ video {
   border: solid 1px rgba(56, 181, 187, 0.3);
   flex-basis: 100%; }
 
+.has-wrap {
+  flex-wrap: wrap; }
+
 .book-thumb {
   transition: all .2s;
   z-index: inherit;
   flex-basis: 12%;
-  text-align: center; }
+  text-align: center;
+  min-width: 180px;
+  background-color: whitesmoke;
+  padding: 5px;
+  margin: 5px; }
 
 .book-thumb.enabled {
   cursor: pointer; }
@@ -8109,11 +8116,31 @@ video {
 .page-editor .croppa-container {
   border: 2px solid whitesmoke;
   border-radius: 8px;
-  background-color: white; }
+  color: white; }
 
 .book-thumb.page-preview {
   flex-basis: unset; }
 
+.book-stitch-preview-left::before {
+  content: '';
+  height: 100%;
+  position: absolute;
+  width: 50%;
+  left: -50%;
+  top: 0;
+  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
+  background: url("/images/default-user-avatar.png"); }
+
+.stitch-preview-right {
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 100%); }
+
+.stitch-preview-left {
+  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3) 0%, transparent 100%); }
+
+.book-stitch-preview-right::after {
+  content: '';
+  background: url("/images/default-user-avatar.png"); }
+
 .edit-page-controllers {
   border-radius: 15px;
   background-color: rgba(134, 134, 134, 0.1); }

resources/sass/main.scss

@@ -342,6 +342,9 @@ video{
   flex-basis: 100%;
   // max-width: 15vh;
 }
+.has-wrap{
+  flex-wrap: wrap;
+}
 
 .book-thumb{
   // cursor: not-allowed;
@@ -349,6 +352,10 @@ video{
   z-index: inherit;
   flex-basis: 12%;
   text-align: center;
+  min-width: 180px;
+  background-color: whitesmoke;
+  padding: 5px;
+  margin: 5px;
 }
 .book-thumb.enabled{
   cursor: pointer;
@@ -494,12 +501,46 @@ video{
   .croppa-container {
     border: 2px solid whitesmoke;
     border-radius: 8px;
-    background-color: white;
+    color: white;
   }
 }
 .book-thumb.page-preview{
   flex-basis: unset;
 }
+.book-stitch-preview-left{
+  &::before{
+    content: '';
+    height: 100%;
+    position: absolute;
+    // background-color: black;
+    width:50%;
+    left:-50%;
+    top:0;
+    mask-image: linear-gradient(to left, rgba(0,0,0,.3) 0%, transparent 100%);
+    background: url('/images/default-user-avatar.png');
+  }
+}
+.stitch-preview-right{
+  // position: absolute;
+  // top:0;
+  // right:0;
+  mask-image: linear-gradient(to right, rgba(0,0,0,.3) 0%, transparent 100%);
+
+}
+.stitch-preview-left{
+  // position: absolute;
+  // top:0;
+  // left:0;
+  mask-image: linear-gradient(to left, rgba(0,0,0,.3) 0%, transparent 100%);
+
+}
+.book-stitch-preview-right{
+  &::after{
+    content: '';
+
+    background: url('/images/default-user-avatar.png');
+  }
+}
 .edit-page-controllers{
   border-radius: 15px;
   background-color: rgba(134, 134, 134, 0.1);

resources/scripts/applications/home/views/call_views/Lobby.vue

@@ -4,7 +4,7 @@
       <h2 class="subtitle">
         <i class="fa fa-fw fa-book"></i> Select A Book
       </h2>
-      <div class="is-flex m-b-md">
+      <div class="is-flex m-b-md has-wrap">
         <div
           :class="['book-thumb', 'm-l-md', {'enabled': callManager.isHost}]"
           v-for="(book, index) in callManager.books"

resources/scripts/applications/home/views/edit_book.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container is-fullwidth is-fullheight-container">
+  <div class="is-fullwidth is-fullheight-container p-l-lg p-r-lg">
     <transition name="fade">
       <div class="book-uploading-overlay" v-if="uploading">
         <div class="section book-uploading-overlay-content has-text-centered">
@@ -86,10 +86,7 @@
                       <span>Edit</span>
                     </a>
                   </li>
-                  <li
-                    :class="!editMode ? 'is-active' : ''"
-                    @click="currentPage = -7;editMode=false"
-                  >
+                  <li :class="!editMode ? 'is-active' : ''" @click="onEditClicked()">
                     <a>
                       <span class="icon is-small">
                         <i class="fa fa-eye" aria-hidden="true"></i>
@@ -106,6 +103,19 @@
                 <div class="edit" v-if="editMode">
                   <div class="has-text-centered" v-if="currentPage < -1">
                     <h1 class="subtitle m-t-xl m-b-xl">This is exciting...</h1>
+                    <div class="has-text-left">
+                      <p>Here will be some more instructions in the future...</p>
+                      <p>Also maybe some gifs fo help...</p>
+                      <ul>
+                        <li>Add a title and author for the book</li>
+                        <li>Add first image (Cover of the book)</li>
+                        <li>Try to fit the image as close as possible to edges of the "page"</li>
+                        <li>You can modify the width/height while editing the cover</li>
+                        <li>You can always zoom in/out and drag the image to make it fit better</li>
+                        <li>Please click on preview to actualy see how the book will look like before uploading</li>
+                        <li>Once all done. Click on "Upload Book"</li>
+                      </ul>
+                    </div>
                     <a class="button is-large is-rounded" @click="onAddPageClicked()">
                       <i class="fa fa-fw fa-plus"></i> Add Cover
                     </a>
@@ -116,6 +126,14 @@
                       <div class="column has-text-centered">
                         <div v-if="pages[currentPage].loaded">
                           <h1 class="subtitle is-3">{{pages[currentPage].text}}</h1>
+                          <div class="is-relative is-flex is-justify-centered">
+                            <div
+                              class="stitch-preview-left"
+                              v-if="currentPage != 0 && currentPage % 2 === 0 && book.ltr"
+                              :style="`width:${croppaWidth}px;height:${croppaHeight}px;`"
+                            >
+                              <img :src="pages[currentPage-1].image" alt />
+                            </div>
                             <croppa
                               v-model="pages[currentPage].croppa"
                               :prevent-white-space="false"
@@ -127,8 +145,17 @@
                               :disable-drag-to-move="false"
                               :disable-scroll-to-zoom="true"
                               :zoom-speed="1"
+                              canvas-color="white"
                               @loading-end="onCroppaImageLoaded()"
                             ></croppa>
+                            <div
+                              class="stitch-preview-right"
+                              v-if="currentPage != 0 && currentPage % 2 === 0 && !book.ltr"
+                              :style="`width:${croppaWidth}px;height:${croppaHeight}px;`"
+                            >
+                              <img :src="pages[currentPage-1].image" alt />
+                            </div>
+                          </div>
                         </div>
                       </div>
                       <!-- Controllers -->
@@ -499,6 +526,13 @@ export default {
         });
         return;
       }
+      if (!this.pages[this.pages.length - 1].base64) {
+        this.notify({
+          message: "You last page is empty. Delete or update",
+          level: "warning"
+        });
+        return;
+      }
       this.uploading = true;
       try {
         const resp = await Services.ApiService.uploadBook({
@@ -528,6 +562,35 @@ export default {
       }
       this.uploading = false;
     },
+    async onEditClicked() {
+      const lastPage = this.currentPage;
+      if (lastPage >= 0) {
+        const imageBlob = await this.pages[lastPage].croppa.promisedBlob(
+          MIME_TYPE,
+          COMPRESSION_RATE
+        );
+        if (!imageBlob) {
+          this.notify({
+            message: "Cant have an empty page.",
+            level: "warning"
+          });
+          this.currentPage = lastPage;
+          return;
+        }
+        let url = URL.createObjectURL(imageBlob);
+        this.pages[lastPage].base64 = this.pages[
+          lastPage
+        ].croppa.generateDataUrl(MIME_TYPE, COMPRESSION_RATE);
+        this.pages[lastPage].image = url;
+        this.currentPage = -7;
+        this.editMode = false;
+      } else {
+        this.notify({
+          message: `Please add pages before preview`,
+          level: "warning"
+        });
+      }
+    },
     async onAddPageClicked() {
       const lastPage = this.pages.length - 1;
       if (lastPage < 0) {
@@ -557,13 +620,11 @@ export default {
           this.currentPage = lastPage;
           return;
         }
+        this.editMode = true;
         let url = URL.createObjectURL(imageBlob);
         this.pages[lastPage].base64 = this.pages[
           lastPage
         ].croppa.generateDataUrl(MIME_TYPE, COMPRESSION_RATE);
-        const c01 = this.pages[lastPage].croppa.generateDataUrl(MIME_TYPE, 0.1);
-        console.log(`COMPRESSION_RATE: ${this.pages[lastPage].base64.length}`);
-        console.log(`0.1: ${c01.length}`);
         this.pages[lastPage].image = url;
         this.pages.push({
           text: `Page ${nextPage}`,
@@ -604,6 +665,12 @@ export default {
     bookPages() {
       return this.pages.slice(1);
     },
+    croppaClass() {
+      if (this.currentPage != 0 && this.currentPage % 2 == 0) {
+        return `book-stitch-preview-${this.book.ltr ? "left" : "right"}`;
+      }
+      return true;
+    },
     canFlipLeft() {
       return this.flipbookRef && this.$refs.flipbook.canFlipLeft;
     },

resources/scripts/applications/home/views/home.vue

@@ -138,7 +138,7 @@
                 <h2 class="subtitle">
                   <i class="fa fa-fw fa-book"></i> My Books
                 </h2>
-                <div class="is-flex m-b-md is-justify-centered">
+                <div class="is-flex m-b-md is-justify-centered has-wrap">
                   <div class="book-thumb m-l-md" v-for="book in user.books" :key="book.id">
                     <div class="book-cover">
                       <figure class="image is-2by3 m-a">