Moved book cover image input into collapsible section

Prevent extra friction when creating a new book and makes it easier to
skip if grid view is not in use

resources/assets/js/components/collapsible.js

@@ -0,0 +1,37 @@
+/**
+ * Collapsible
+ * Provides some simple logic to allow collapsible sections.
+ */
+class Collapsible {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.trigger = elem.querySelector('[collapsible-trigger]');
+        this.content = elem.querySelector('[collapsible-content]');
+
+        if (!this.trigger) return;
+
+        this.trigger.addEventListener('click', this.toggle.bind(this));
+    }
+
+    open() {
+        this.elem.classList.add('open');
+        $(this.content).slideDown(400);
+    }
+
+    close() {
+        this.elem.classList.remove('open');
+        $(this.content).slideUp(400);
+    }
+
+    toggle() {
+        if (this.elem.classList.contains('open')) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+}
+
+module.exports = Collapsible;

resources/assets/js/components/index.js

@@ -15,6 +15,7 @@ let componentMapping = {
     'markdown-editor': require('./markdown-editor'),
     'editor-toolbox': require('./editor-toolbox'),
     'image-picker': require('./image-picker'),
+    'collapsible': require('./collapsible'),
 };
 
 window.components = {};

resources/assets/sass/_forms.scss

@@ -191,6 +191,41 @@ input:checked + .toggle-switch {
   }
 }
 
+.form-group[collapsible] {
+  margin-left: -$-m;
+  margin-right: -$-m;
+  padding: 0 $-m;
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  .collapse-title {
+    margin-left: -$-m;
+    margin-right: -$-m;
+    padding: $-s $-m;
+  }
+  .collapse-title, .collapse-title label {
+    cursor: pointer;
+  }
+  .collapse-title label {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    color: inherit;
+  }
+  .collapse-title label:before {
+    display: inline-block;
+    content: '▸';
+    margin-right: $-m;
+    transition: all ease-in-out 400ms;
+    transform: rotate(0);
+  }
+  .collapse-content {
+    display: none;
+    padding-bottom: $-m;
+  }
+  &.open .collapse-title label:before {
+    transform: rotate(90deg);
+  }
+}
+
 .inline-input-style {
   display: block;
   width: 100%;

resources/views/books/form.blade.php

@@ -9,20 +9,25 @@
     <label for="description">{{ trans('common.description') }}</label>
     @include('form/textarea', ['name' => 'description'])
 </div>
-<div class="form-group" id="logo-control">
-        <label for="user-avatar">{{ trans('common.cover_image') }}</label>
-        <p class="small">{{ trans('common.cover_image_description') }}</p>
 
-        @include('components.image-picker', [
-            'resizeHeight' => '512',
-            'resizeWidth' => '512',
-            'showRemove' => false,
-            'defaultImage' => baseUrl('/book_default_cover.png'),
-            'currentImage' => @isset($model) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
-            'currentId' => @isset($model) ? $model->image_id : 0,
-            'name' => 'image_id',
-            'imageClass' => 'cover'
-        ])
+<div class="form-group" collapsible id="logo-control">
+        <div class="collapse-title text-primary" collapsible-trigger>
+            <label for="user-avatar">{{ trans('common.cover_image') }}</label>
+        </div>
+        <div class="collapse-content" collapsible-content>
+            <p class="small">{{ trans('common.cover_image_description') }}</p>
+
+            @include('components.image-picker', [
+                'resizeHeight' => '512',
+                'resizeWidth' => '512',
+                'showRemove' => false,
+                'defaultImage' => baseUrl('/book_default_cover.png'),
+                'currentImage' => @isset($model) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
+                'currentId' => @isset($model) ? $model->image_id : 0,
+                'name' => 'image_id',
+                'imageClass' => 'cover'
+            ])
+        </div>
 </div>
 
 <div class="form-group text-right">