From c1a1bc01354437c0cb14da94120380b39cf38109 Mon Sep 17 00:00:00 2001
From: Bharadwaja G <bharadwaja.g@osmosys.asia>
Date: Mon, 4 Sep 2017 20:27:52 +0530
Subject: [PATCH] Books grid view

---
 app/Book.php                              |  40 +++++++--
 app/Http/Controllers/BookController.php   |   4 +-
 app/User.php                              |   2 +-
 bootstrap/autoload.php                    |   1 +
 config/app.php                            |   2 +-
 public/book_default_cover.png             | Bin 0 -> 5672 bytes
 public/default.png                        | Bin 4036 -> 0 bytes
 resources/assets/js/global.js             |  66 --------------
 resources/assets/sass/styles.scss         | 102 ++++++++++++++--------
 resources/lang/de/settings.php            |   2 +-
 resources/lang/en/settings.php            |   2 +-
 resources/lang/es/settings.php            |   2 +-
 resources/lang/fr/settings.php            |   2 +-
 resources/lang/nl/settings.php            |   2 +-
 resources/lang/pt_BR/settings.php         |   2 +-
 resources/lang/sk/settings.php            |   2 +-
 resources/views/books/form.blade.php      |  10 +--
 resources/views/books/grid-item.blade.php |  31 ++++---
 resources/views/books/index.blade.php     |  29 ++++--
 resources/views/users/edit.blade.php      |   7 ++
 tests/UserProfileTest.php                 |  12 +--
 21 files changed, 167 insertions(+), 153 deletions(-)
 create mode 100644 public/book_default_cover.png
 delete mode 100644 public/default.png

diff --git a/app/Book.php b/app/Book.php
index 538505266..fed602332 100644
--- a/app/Book.php
+++ b/app/Book.php
@@ -3,7 +3,7 @@
 class Book extends Entity
 {
 
-    protected $fillable = ['name', 'description', 'image'];
+    protected $fillable = ['name', 'description', 'image_id'];
 
     /**
      * Get the url for this book.
@@ -17,30 +17,45 @@ class Book extends Entity
         }
         return baseUrl('/books/' . urlencode($this->slug));
     }
-
-    public function getBookCover()
+    
+    /**
+     * Returns book cover image, if book cover not exists return default cover image.
+     * @param int $height - Height of the image
+     * @param type $width - Width of the image
+     * @return type string
+     */
+    public function getBookCover($height = 170, $width = 300)
     {
-        $default = baseUrl('/default.png');
-        $image = $this->image;
+        $default = baseUrl('/book_default_cover.png');
+        $image = $this->image_id;
         if ($image === 0 || $image === '0' || $image === null) 
             return $default;
         try {
-            $cover = $this->cover ? baseUrl($this->cover->getThumb(120, 192, false)) : $default;
+            $cover = $this->cover ? baseUrl($this->cover->getThumb($width, $height, false)) : $default;
         } catch (\Exception $err) {
             $cover = $default;
         }
         return $cover;
     }
-
+    
+    /**
+     * Get an excerpt of this book's name to the specified length or less.
+     * @param int $length
+     * @return string
+     */
     public function getHeadingExcerpt($length = 35)
     {
         $bookHeading = $this->name;
         return strlen($bookHeading) > $length ? substr($bookHeading, 0, $length-3) . '...' : $bookHeading;
     }
     
+    /**
+     * Get the cover image of the book
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
     public function cover()
     {
-        return $this->belongsTo(Image::class, 'image');
+        return $this->belongsTo(Image::class, 'image_id');
     }
     /*
      * Get the edit url for this book.
@@ -88,5 +103,14 @@ class Book extends Entity
     {
         return "'BookStack\\\\Book' as entity_type, id, id as entity_id, slug, name, {$this->textField} as text,'' as html, '0' as book_id, '0' as priority, '0' as chapter_id, '0' as draft, created_by, updated_by, updated_at, created_at";
     }
+    
+    /**
+     * Get the user that created the page revision
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function createdBy()
+    {   
+        return $this->belongsTo(User::class, 'created_by');
+    }
 
 }
diff --git a/app/Http/Controllers/BookController.php b/app/Http/Controllers/BookController.php
index d515d83a3..b6175d859 100644
--- a/app/Http/Controllers/BookController.php
+++ b/app/Http/Controllers/BookController.php
@@ -40,12 +40,14 @@ class BookController extends Controller
         $recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('book', 4, 0) : false;
         $popular = $this->entityRepo->getPopular('book', 4, 0);
         $new = $this->entityRepo->getRecentlyCreated('book', 4, 0);
+        $booksViewType = $this->currentUser->books_view_type;
         $this->setPageTitle('Books');
         return view('books/index', [
             'books' => $books,
             'recents' => $recents,
             'popular' => $popular,
-            'new' => $new
+            'new' => $new, 
+            'booksViewType' => $booksViewType
         ]);
     }
 
diff --git a/app/User.php b/app/User.php
index 703322cbd..264723be9 100644
--- a/app/User.php
+++ b/app/User.php
@@ -22,7 +22,7 @@ class User extends Model implements AuthenticatableContract, CanResetPasswordCon
      * The attributes that are mass assignable.
      * @var array
      */
-    protected $fillable = ['name', 'email', 'image_id', 'books_display' ];
+    protected $fillable = ['name', 'email', 'image_id', 'books_view_type' ];
 
     /**
      * The attributes excluded from the model's JSON form.
diff --git a/bootstrap/autoload.php b/bootstrap/autoload.php
index 29f66ace4..90a8f4e23 100644
--- a/bootstrap/autoload.php
+++ b/bootstrap/autoload.php
@@ -1,6 +1,7 @@
 <?php
 
 define('LARAVEL_START', microtime(true));
+ini_set('xdebug.max_nesting_level', 120);
 
 /*
 |--------------------------------------------------------------------------
diff --git a/config/app.php b/config/app.php
index a390eaf83..23aad7d48 100644
--- a/config/app.php
+++ b/config/app.php
@@ -18,7 +18,7 @@ return [
     |
     */
 
-    'debug' => env('APP_DEBUG', false),
+    'debug' => env('APP_DEBUG', true),
 
     /*
     |--------------------------------------------------------------------------
diff --git a/public/book_default_cover.png b/public/book_default_cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b6c9953e91d59d03a295e49786889317a3e9ca1
GIT binary patch
literal 5672
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

literal 0
HcmV?d00001

diff --git a/public/default.png b/public/default.png
deleted file mode 100644
index 1147e23e159c6e564c023e4f40dfc06d76432060..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4036
zcmbtXc{o&U|38+HeXL25u}re{NECz8u_Z#5Y>_NYj3tASHNvrlY$eM>Axk4mGh^(_
zqZl4BS;rvdkwn&zrT6r{&-K3V@B01u-q-a#-|Kwu`@YV(?)&@we7>Iqb2CF8&ZC?F
z0Pq+aftIkx!`8;Z20sV(%X(qQ=4xUH!X6$wml`8sci7L!E&u?y1b-P5kehb|4zlBn
zP4(G7u=B9Vh?r}b@xh_v7^~~JOTJjFyAKY21%OL;-EZRD-A)8!aJNqw8k?HCDZ8@+
z0N+Vt@S+udVktk;@7Qp7TkA9_n4;A~{8V`4TJjvXa>8Mzfu-f+*?n{IY3)G*oF~)x
zIUZQjp3LBmPCU<i@>HEiN+yjhZlvTnP4n<y%wo4pP!4zH60d$YZWI;JlW%7&SCc0m
zgIEWvGkmw`x=jiNB!ykG;OykR{XTpZBh+_#IbtewH^_H7JRRbAd_HOBT3fW3NZ%_L
z4;zl{mmv7*+WJ(dZ(E<z<Hp-@ht4QIzS+*r<#GLVXS5w`|6KWZ_`jz94%fN-uR8|x
znd>ZW8yXsJcEoc16aonBQ6>m~9R!cmtO;1}>E`yySumlCUR4(MPQ~)glVr-Heh-zy
ztjsT=?UwQ({y}jNmr;rlv#~<AD0^D^$z_!D#di)!yE-AXw61_Wxuwl*UrJT*2G#B9
zMxUJB8o-T}v9Yl)EiEk&mhJ`2h%cKVXVKsuYUI1bLNQM#bXcnP(PX5J^`?)nCQYsI
zLYEd}POr$%PEjN@-P*MJ(7@OUE`)Dd4p(f4Mwt;s5LnJ!b2<cMMDrcjtXDn4J(U7E
z04}l!d1%a+9yC!~<@@I2s>bunn<PD`H8^K|XRl;&v^vuG2l~{5(<Oqq>WYet-K@(c
zV0id`Kj5c@B*+%)L+37lVsxV9NZ`I_L2rX7;%WXL$7A(A)Lb~R!T~s51YcHE5c|gI
zGGMYXYVA5&BC=nFG5E}o4>5Rlx%K0l)L<h$b@rHcXXI=SlZz72XV`TIxUTSktijLG
z^qxjr{|ysxl}aa6R7`x9_j%^H3;z~v2wy~KX^BulM(`nYIRPr7h7(W*yRIrE4tX8v
z9=TRu$|s+=b_*a207!`JN0^q&SJ~gEmkVIWYu&kl?>|ynV)^9($f)w?1rUPP^DbMJ
zo$MtnFE0o3@bJW+H4PnB>z_yX=V!Et0WGrD6pw{(m*AOJ|D4VbD;dz3Ox9U5Fb43G
zKym`+5BO8X;#Rp#Y4^fTZMaK(h;2Cd{Z;~Q<yMIYFI$Xr)+Z4~D&=)`bv2>2wRNPn
zYCtf3$-7Zbh%<bcHrF_(9)!bLu>iQhz~SEJM0dN4g?snz5%jur(?6j#(P+oAiZ7hh
zS{uQ^$n%o&X1=Pzh6$gwzzq#><GrIOdg;D{t*tE&0-J5NO`{OL-Ns;Q9PI7Aokm+1
z5e+4kl?tCA6XTdvKP(p8AvPG<x6}^3{d0bOfV?BDzmu$3-rD*zDFH<C0sKjS+&~q-
zd0wmY=!)F_!=<gx&d!|53W}-qFuR)RZt8iZ$Iw*z!Nbf)8bX}I(ym7Ko3{$x@`t8B
zn4iSeD6j%@jpkBd-CnChyt?<8pVcFx%@6OLFT<5D9hD82b)~vK4$ZGWefo4U?BSM1
z0_f^OG#oh-!lT0sh;BQkUPb1c*(y1b{ZiD{_Kzc#SM!=~MKC@Xvx{)_<qUlTyU5bM
z&v4oYkqmOiL6haOP%Qs2a2l^ZrP=@7MGz?d(^#jqv2j-~#Qb9|es#7|NPi&>+}AHM
z-!3<7Ll%nE8D;B%83VN_Ik|`<oUs!AY=&OkonsFmg?!u_Lj!||PvetNeg0^|=fyJ3
zS2Z;?MRl7~_-<A@vDw5Tv$4cyYk+A+VG5U6Jo%|7r+<Dup5=a<Kgg|#5ddCwp1EWC
zR(fi1aIlB|DlRTgy1{W70A%v&`HXkIqXZI2=&U(+j8KznSXfhFXB-bIW$#*f=5?aC
zolLq>a$Y~5uE*D-lT%Yu#^74OT&pVg#})#Cuuk-ymN<uBnYq(>x`hb{HbVW-cNz`N
z&mh~{|Fom2=^g^ouE^DpNLwDjcHTxvrPj$caarlv-4f3FfW&wup9z=1z|G|tc0NMZ
za{3}X3d_sO$1}{zDz`1>8u?D?d_oh@ODB?`HDKkYwRN54lmx(Gf{Dvxyv!O&5#o%!
zjh6VC)zo}Nu1-cE;aGa860(<%heyfl&YgR2=F>6p^EyWWmncXPbd;LbE3dehx@9ba
zX#Tz8%Us?5i@OG`-tW|w4pD0f1+Hl_-#&lyrXP?MY<oim5h+H(HD=jdK;$dMMT2Tb
zAga5&TO;AE)(@Yp3@+fbni`G;v9w;LGa$V+n(ZDQ-+245(`aLST%598aW%h%2oS*s
z90Kr35bqdqe-wtB)Ig_iD?Ph;?si@YpCy@Qgn=V0QNJO72m@$UP0b(ouPcs3B+dpG
zc!WGEEiDb6n3y0)6)!Tmkk;SLlIsc?;Km;Z2M2uJt~Jg9qWyW|PHF+XxWT{K1*VXH
zvx{e9Td2EX-S}78c9#`*OxF15sHhiQbIll2TGJr}s#S%E4NWS=yqt`lc6hP5xfy&{
zJYQOAj1Szix3wLuo6=DIlT}+=I|0T=!Qdwl!NNLFg*0=9I-8rD%TCV!bLry9eBF3e
z@2Png(Ip%W$<Ki<xLks3Wg4{-(n?Tz+JECHH=FZ@JV`r;%7h3vu^v|O=OUovaJA1W
zZC+9;KPQ)5b^WM(ue1i+m=ArwA_4LLOzUyW77A#TeP9$aJ%=p5S>8d;7#nFzuuUXV
z-OtBVsR7<3tQIwTfdAvikMx<YP&)uf>iDoSdNrr)y|MQyelO*=8fCb)Dqj2PJ+-4L
zKEr|gb|PVMx4pf;ZuM!BpOHwmg{Q*LXN-}P3S<oo3?yWVM~_LJe1Ok`!cr^qjJ*}{
z*+wz~A#~!mbbE%TRF~7WWHL3kt2^2gzE~Q#kyn4G*;zA0FSqWiR>G21$n_P)n|9gg
znKjwM0m+~nH`t?kjJ>C9l&iHc0^(c+`mQx&i$rYXk{V;D9#wN#s#{xWS5*Yvnf&mf
z4hWXzUDgA)SlY-m`xuB!Q|oUxg}akeiEAvui4|uOmLkgI@pI1wQC%^m7~b5{9TpLE
z42v?b-BCVtC0M`#Eg{J|;3$W37Un9rXl2bX0d+O|fA_Y}7<+hJD<}s`hsnzeRJ#cJ
z3Jg*`*LP-mJOeli!h(1^{$C?9FL1vBZytAZQvLx%Cx#o*>QRi%QcQ#x0_B`3DK73X
zF*dgS7moUyX@Dp)qQfps_GrotOShK9<u_u2-bcE_^`IVSTM{<(St(}M!)_TB%YPLB
zIHZ<ObANnMios6mUq#jNlX|HTe$iVpZSPu41XYo|oh`r;b+#ZQ#L3fhK6)Jedr?u*
zH-rT$Z#(FPbm4$*pfVS4=Ah-Cz1MRh@w)+lzf0tOyW>At8G^Sq;4&+tSwq|M!Q+QD
z0!DDOD^HYQK>fo3Xbazc#~c+p!*F)-?Q>JzOi4-Ew+y~v!>USCBb}JVf<i1&CD3D3
zu`TpDo`r=aRkJ30vR)kFzefF`SM*LO>5uO@r&X0HiYjpa=N6xgjE8JBzj?G?0qL}b
zjf@_*N0-mPDKT)Wyv=1JG-qRMVC&#OzqYK^4MFKfUG&5<;rog(NzC1C@Z|T`031^x
z(R0;r;fCP_|7`mlHD~MVbZewV!`bG^TIe&gz6I|&T@D>dgjZhJRmae!*RoEvy(tu%
z>=_u&9zcY2UT;s;C-uOL7>40Fhlbm)%iw@XWv=#Uz%+-ONw#8xs2OW|5NX#0`9lZT
z)4Low9({<bw}ADAkDXcl`!qO>jt?-pm*Bg-{<Y-_B5(=P^5vXLp@>wHXJAIG+xY8)
zKee_XP~U`ow*|&_wyPtLq|>Bk*?=Qag1RNs<0B(M4HXrndLog)616{cxT%PlWb2;e
zZZ|SQBoZmN)$C0`$>0tF@(xkBPEt6TqORQz=VSajQR+Eu!6(gCfK$q6{a9EJ;;of6
z_MyQu>a)Smcdf0fgQ{=AhY1-y<ZU^bbvc%baJ*m3yGUtaEc9Qn9@d7o!xsXYABR_&
zzkj{JQ_J1C4ImBn?cG(MJcr9fI|YhdsG|IqbveAKq{Mxaah|3Y3Y=KBit+%A3QsYM
z0T+HH6@^04Wr^wsRw95G0ipa)gcWQu_s3rM)xIs$7f&oETeva*f+K$5hPEloS`tOw
zdTpn_zdx|Y?d~gNbTjD!M3&B>E<HwKm-I!QHjEntGLPQxD>u(Sv#R!mJ8LuBaJz}-
z{sQ;@b@8DxOZodyq5P`FU)b7u%U@^M+K9@7*s$~|HsDD@LPC*|%$h7fu8vMUr*I>i
z-?gA@_qa0BLH`*+SP4JZn<dE<rTd7paAh$YxIktcMXDb^=jYNuU&<D^Uj;V}VFPnB
zOirW0MoK=8P;VIBuBdh|m!a9f#K+COM}$Ni2VZy<ca3mZdO4I<+!@;)ATAj+3>hHP
z9ncIb3&dL?{qpZ$I}WYAJc{%oSS`K;?Lb@&CYRJ0Q{b&0Dho_1hx_Dxk?Ii&7I!yv
z64W1A34!qWVOn`cGGX)mL=p*>2B3Z5P++L5>#W^51j<<F{0?b4A~dJTXSyZ)r;;x_
zf&{01;XG^)IzNmeR-YH%;b3JRrU^SH)UL2jGnzuypTbQ?WOVz?MGe)4Yxk2le=osI
zD9=*`aund=i~Q?u0}LStzA^#}m%0}DS36B|l=nUKS#7PYol>E*Llul`C4oLF_9ZMo
zUDTg8cQ`4lGuy%Sp-7$hQqG;ja)B99*<81dr5Ajkc_HAANZ*a!M*`$`>#Mx*$%!=T
zW+hW>GF`rX4smsL9l%g3=h0^mh~<<b`Rw+F*Aq@Bg+^G~e2_<Ra=wy8?CybH(Tc@+
z?CB$u*UdDXeC)stUzo)O!AyS-<%fvDbs~0}F*>@{VEMh|k;N!}ZTwg?sxUw1mCG+V
z_}@zIU;6Jq+VB6!!heSU*BxQ2JiYCH|Nc(qo1aWNZR%`5&@q=^V%k{W3?%5eME?Vy
C{EtEa

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 176aff733..26dbf9a5e 100644
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -102,64 +102,6 @@ jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
     };
 });
 
-// Global jQuery Elements
-let notifications = $('.notification');
-let successNotification = notifications.filter('.pos');
-let errorNotification = notifications.filter('.neg');
-let warningNotification = notifications.filter('.warning');
-// Notification Events
-window.Events.listen('success', function (text) {
-    successNotification.hide();
-    successNotification.find('span').text(text);
-    setTimeout(() => {
-        successNotification.show();
-    }, 1);
-});
-window.Events.listen('warning', function (text) {
-    warningNotification.find('span').text(text);
-    warningNotification.show();
-});
-window.Events.listen('error', function (text) {
-    errorNotification.find('span').text(text);
-    errorNotification.show();
-});
-
-// Notification hiding
-notifications.click(function () {
-    $(this).fadeOut(100);
-});
-
-// Chapter page list toggles
-$('.chapter-toggle').click(function (e) {
-    e.preventDefault();
-    $(this).toggleClass('open');
-    $(this).closest('.chapter').find('.inset-list').slideToggle(180);
-});
-
-// Back to top button
-$('#back-to-top').click(function() {
-     $('#header').smoothScrollTo();
-});
-let scrollTopShowing = false;
-let scrollTop = document.getElementById('back-to-top');
-let scrollTopBreakpoint = 1200;
-window.addEventListener('scroll', function() {
-    let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
-    if (!scrollTopShowing && scrollTopPos > scrollTopBreakpoint) {
-        scrollTop.style.display = 'block';
-        scrollTopShowing = true;
-        setTimeout(() => {
-            scrollTop.style.opacity = 0.4;
-        }, 1);
-    } else if (scrollTopShowing && scrollTopPos < scrollTopBreakpoint) {
-        scrollTop.style.opacity = 0;
-        scrollTopShowing = false;
-        setTimeout(() => {
-            scrollTop.style.display = 'none';
-        }, 500);
-    }
-});
-
 // Common jQuery actions
 $('[data-action="expand-entity-list-details"]').click(function() {
     $('.entity-list.compact').find('p').not('.empty-text').slideToggle(240);
@@ -172,14 +114,6 @@ $(document).ready(function(){
    });
 });
 
-// Popup close
-$('.popup-close').click(function() {
-    $(this).closest('.overlay').fadeOut(240);
-});
-$('.overlay').click(function(event) {
-    if (!$(event.target).hasClass('overlay')) return;
-    $(this).fadeOut(240);
-});
 
 // Detect IE for css
 if(navigator.userAgent.indexOf('MSIE')!==-1
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index b0b41afc7..04aa0d968 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -228,39 +228,73 @@ $btt-size: 40px;
   }
 }
 
-
-
-.gallery-item {
-  margin-bottom: 32px;
-  height: 350px;
-  overflow: hidden;
-  border: 1px solid #ccc;
-  h4 {
-    font-size: 1.2em;
-    text-align: center;
-    height: 55px;
-    padding: 0px 12px;
-  }
-  p {
-    font-size: 0.8em;
-    text-align: center;
-    padding: 0px 12px;
-  }
-  &.collapse {
-    height: 150px;
-  }
-}
-
-.gallery-image {
-  margin-top: 5%;
-  text-align: center;
-  img {
-    border-radius: 3px;
-  }
-}
-
+// styles for Books grid view
 .cover {
-    height: 192px;
-    width: 120px;
+    width: 290px;
     border-radius: 3px;
-  }
\ No newline at end of file
+  }
+
+.featured-image-container {
+    position: relative;
+    overflow: hidden;
+    background: #F2F2F2;
+    border: 1px solid #ddd;
+    border-bottom: 0px;
+}
+
+.featured-image-container img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease;
+    -ms-transition: all .5s ease;
+    -o-transition: all .5s ease;
+    transition: all .5s ease;
+}
+
+.book-content {
+    padding: 30px;
+    border: 1px solid #ddd;
+    border-top: 0px;
+    border-bottom-width: 2px;
+}
+.book-content h2 {
+    font-size: 1.5em;
+    line-height: 1.2;
+    margin: 0 0 10px;
+}
+
+.book-content  h2 a {
+    display: block;
+    color: #009688;;
+    text-decoration: none;
+}
+
+.book-content p {
+    font-size: .85em;
+    margin: 0 0 10px;
+    line-height: 1.6em;
+}
+
+.featured-image-container img:hover {
+    -webkit-transform: scale(1.15);
+    -moz-transform: scale(1.15);
+    -ms-transform: scale(1.15);
+    -o-transform: scale(1.15);
+    transform: scale(1.15);
+    opacity: .5;
+}
+.books-grid-div {
+    margin-bottom : 20px;
+}
+
+@media (min-width:992px){
+    .row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
+}
+@media (min-width:992px){
+    .row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
+}
+@media (max-width:991px){
+    .row.auto-clear .col-xs-6:nth-child(2n+1){clear:left;}
+}
\ No newline at end of file
diff --git a/resources/lang/de/settings.php b/resources/lang/de/settings.php
index 598f9f663..2da517292 100644
--- a/resources/lang/de/settings.php
+++ b/resources/lang/de/settings.php
@@ -96,7 +96,7 @@ return [
     'users_delete_warning' => 'Der Benutzer ":userName" wird aus dem System gelöscht.',
     'users_delete_confirm' => 'Sind Sie sicher, dass Sie diesen Benutzer löschen möchten?',
     'users_delete_success' => 'Benutzer erfolgreich gelöscht.',
-    'users_books_display_type' => 'Bevorzugtes Display-Layout für Bücher',
+    'users_books_view_type' => 'Bevorzugtes Display-Layout für Bücher',
     'users_edit' => 'Benutzer bearbeiten',
     'users_edit_profile' => 'Profil bearbeiten',
     'users_edit_success' => 'Benutzer erfolgreich aktualisisert',
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 14b5371ff..644ca3a31 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -94,7 +94,7 @@ return [
     'users_external_auth_id' => 'External Authentication ID',
     'users_password_warning' => 'Only fill the below if you would like to change your password:',
     'users_system_public' => 'This user represents any guest users that visit your instance. It cannot be used to log in but is assigned automatically.',
-    'users_books_display_type' => 'Preferred layout for books viewing',
+    'users_books_view_type' => 'Preferred layout for books viewing',
     'users_delete' => 'Delete User',
     'users_delete_named' => 'Delete user :userName',
     'users_delete_warning' => 'This will fully delete this user with the name \':userName\' from the system.',
diff --git a/resources/lang/es/settings.php b/resources/lang/es/settings.php
index 4651247b9..9535d3f45 100644
--- a/resources/lang/es/settings.php
+++ b/resources/lang/es/settings.php
@@ -91,7 +91,7 @@ return [
     'users_external_auth_id' => 'ID externo de autenticación',
     'users_password_warning' => 'Solo rellene a continuación si desea cambiar su password:',
     'users_system_public' => 'Este usuario representa cualquier usuario invitado que visita la aplicación. No puede utilizarse para hacer login sio que es asignado automáticamente.',
-    'users_books_display_type' => 'Diseño de pantalla preferido para libros',
+    'users_books_view_type' => 'Diseño de pantalla preferido para libros',
     'users_delete' => 'Borrar usuario',
     'users_delete_named' => 'Borrar usuario :userName',
     'users_delete_warning' => 'Se borrará completamente el usuario con el nombre \':userName\' del sistema.',
diff --git a/resources/lang/fr/settings.php b/resources/lang/fr/settings.php
index 5516e66a4..399afdc9a 100644
--- a/resources/lang/fr/settings.php
+++ b/resources/lang/fr/settings.php
@@ -91,7 +91,7 @@ return [
     'users_external_auth_id' => 'Identifiant d\'authentification externe',
     'users_password_warning' => 'Remplissez ce fomulaire uniquement si vous souhaitez changer de mot de passe:',
     'users_system_public' => 'Cet utilisateur représente les invités visitant votre instance. Il est assigné automatiquement aux invités.',
-    'users_books_display_type' => 'Disposition d\'affichage préférée pour les livres',
+    'users_books_view_type' => 'Disposition d\'affichage préférée pour les livres',
     'users_delete' => 'Supprimer un utilisateur',
     'users_delete_named' => 'Supprimer l\'utilisateur :userName',
     'users_delete_warning' => 'Ceci va supprimer \':userName\' du système.',
diff --git a/resources/lang/nl/settings.php b/resources/lang/nl/settings.php
index 0323d87d4..7b8adf602 100644
--- a/resources/lang/nl/settings.php
+++ b/resources/lang/nl/settings.php
@@ -91,7 +91,7 @@ return [
     'users_external_auth_id' => 'External Authentication ID',
     'users_password_warning' => 'Vul onderstaande formulier alleen in als je het wachtwoord wilt aanpassen:',
     'users_system_public' => 'De eigenschappen van deze gebruiker worden voor elke gastbezoeker gebruikt. Er kan niet mee ingelogd worden en wordt automatisch toegewezen.',
-    'users_books_display_type' => 'Voorkeursuitleg voor het weergeven van boeken',
+    'users_books_view_type' => 'Voorkeursuitleg voor het weergeven van boeken',
     'users_delete' => 'Verwijder gebruiker',
     'users_delete_named' => 'Verwijder gebruiker :userName',
     'users_delete_warning' => 'Dit zal de gebruiker \':userName\' volledig uit het systeem verwijderen.',
diff --git a/resources/lang/pt_BR/settings.php b/resources/lang/pt_BR/settings.php
index 6c8ff3039..8ebd2b728 100644
--- a/resources/lang/pt_BR/settings.php
+++ b/resources/lang/pt_BR/settings.php
@@ -91,7 +91,7 @@ return [
     'users_external_auth_id' => 'ID de Autenticação Externa',
     'users_password_warning' => 'Preencha os dados abaixo caso queira modificar a sua senha:',
     'users_system_public' => 'Esse usuário representa quaisquer convidados que visitam o aplicativo. Ele não pode ser usado para login.',
-    'users_books_display_type' => 'Layout preferido para mostrar livros',
+    'users_books_view_type' => 'Layout preferido para mostrar livros',
     'users_delete' => 'Excluir Usuário',
     'users_delete_named' => 'Excluir :userName',
     'users_delete_warning' => 'A ação vai excluir completamente o usuário de nome \':userName\' do sistema.',
diff --git a/resources/lang/sk/settings.php b/resources/lang/sk/settings.php
index 8a8d93e59..4438f8038 100644
--- a/resources/lang/sk/settings.php
+++ b/resources/lang/sk/settings.php
@@ -91,7 +91,7 @@ return [
     'users_external_auth_id' => 'Externé autentifikačné ID',
     'users_password_warning' => 'Pole nižšie vyplňte iba ak chcete zmeniť heslo:',
     'users_system_public' => 'Tento účet reprezentuje každého hosťovského používateľa, ktorý navštívi Vašu inštanciu. Nedá sa pomocou neho prihlásiť a je priradený automaticky.',
-    'users_books_display_type' => 'Preferované rozloženie pre prezeranie kníh',
+    'users_books_view_type' => 'Preferované rozloženie pre prezeranie kníh',
     'users_delete' => 'Zmazať používateľa',
     'users_delete_named' => 'Zmazať používateľa :userName',
     'users_delete_warning' => ' Toto úplne odstráni používateľa menom \':userName\' zo systému.',
diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php
index fc30093d2..6356da72b 100644
--- a/resources/views/books/form.blade.php
+++ b/resources/views/books/form.blade.php
@@ -14,13 +14,13 @@
         <p class="small">{{ trans('common.cover_image_description') }}</p>
 
         @include('components.image-picker', [
-            'resizeHeight' => '192',
-            'resizeWidth' => '120',
+            'resizeHeight' => '512',
+            'resizeWidth' => '512',
             'showRemove' => true,
             'defaultImage' => baseUrl('/default.png'),
-            'currentImage' => @isset($model) ? $model->getBookCover(80) : baseUrl('/default.png') ,
-            'currentId' => @isset($model) ? $model->image : 0,
-            'name' => 'image',
+            'currentImage' => @isset($model) ? $model->getBookCover() : baseUrl('/default.png') ,
+            'currentId' => @isset($model) ? $model->image_id : 0,
+            'name' => 'image_id',
             'imageClass' => 'cover'
         ])
 </div>
diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
index 3c0ec1ef7..74801ec84 100644
--- a/resources/views/books/grid-item.blade.php
+++ b/resources/views/books/grid-item.blade.php
@@ -1,19 +1,18 @@
-<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3"  data-entity-type="book" data-entity-id="{{$book->id}}">
-    <div class="gallery-item">
-    <h4>
-        <a class="text-book entity-list-item-link" href="{{$book->getUrl()}}" title="{{$book->name}}"><i class="zmdi zmdi-book"></i><span class="entity-list-item-name">{{$book->getHeadingExcerpt()}}</span>
-        <br>
-        </a>
-    </h4>
-    <div class="gallery-image">
-        <a class="text-book entity-list-item-link" href="{{$book->getUrl()}}">
-        <img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
+<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 books-grid-div"  data-entity-type="book" data-entity-id="{{$book->id}}">
+    <div class="featured-image-container">
+        <a href="{{$book->getUrl()}}" title="{{$book->name}}">
+            <img width="1600" height="900" src="{{$book->getBookCover()}}" alt="{{$book->name}}">
         </a>
     </div>
-    @if(isset($book->searchSnippet))
-        <p class="text-muted">{!! $book->searchSnippet !!}</p>
-    @else
-        <p class="text-muted">{{ $book->getExcerpt(80) }}</p>
-    @endif
-</div>
+    <div class="book-content">
+        <h2><a href="{{$book->getUrl()}}" title="{{$book->name}}" > {{$book->getHeadingExcerpt()}} </a></h2>
+        @if(isset($book->searchSnippet))
+            <p >{{!! $book->searchSnippet !!}}</p>
+        @else
+            <p >{{ $book->getExcerpt(130) }}</p>
+        @endif
+        <div >
+            <span>@include('partials.entity-meta', ['entity' => $book])</span>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index c22b4591f..d392af045 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -39,15 +39,29 @@
 @stop
 
 @section('body')
-
-    <div class="container small" ng-non-bindable>
+    @if($booksViewType === 'list')
+        <div class="container small" ng-non-bindable>
+    @else
+        <div class="container" ng-non-bindable>
+    @endif
         <h1>{{ trans('entities.books') }}</h1>
         @if(count($books) > 0)
-            @foreach($books as $book)
-                @include('books/list-item', ['book' => $book])
-                <hr>
-            @endforeach
-            {!! $books->render() !!}
+            @if($booksViewType === 'list')
+                @foreach($books as $book)
+                    @include('books/list-item', ['book' => $book])
+                    <hr>
+                @endforeach
+                {!! $books->render() !!}
+            @else 
+             <div class="row auto-clear">
+                    @foreach($books as $key => $book)
+                            @include('books/grid-item', ['book' => $book])
+                    @endforeach
+                <div class="col-xs-12">
+                    {!! $books->render() !!}
+                </div>
+             </div>
+            @endif
         @else
             <p class="text-muted">{{ trans('entities.books_empty') }}</p>
             @if(userCan('books-create-all'))
@@ -55,5 +69,4 @@
             @endif
         @endif
     </div>
-
 @stop
\ No newline at end of file
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index fc75593b8..00db02907 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -43,6 +43,13 @@
                                     @endforeach
                                 </select>
                             </div>
+                            <div class="form-group">
+                                <label for="books-view-type">{{ trans('settings.users_books_view_type') }}</label>
+                                <select name="books_view_type" id="books-view-type">
+                                    <option @if($user->books_view_type === 'grid') selected @endif value="grid">Grid</option>
+                                    <option @if($user->books_view_type === 'list') selected @endif value="list">List</option>
+                                </select>
+                            </div>
                         </div>
                     </div>
                     <div class="form-group text-right">
diff --git a/tests/UserProfileTest.php b/tests/UserProfileTest.php
index e0c87d992..eabfce004 100644
--- a/tests/UserProfileTest.php
+++ b/tests/UserProfileTest.php
@@ -95,26 +95,26 @@ class UserProfileTest extends BrowserKitTest
             ->see('cannot delete the guest user');
     }
 
-    public function test_books_display_is_list()
+    public function test_books_view_is_list()
     {
         $editor = $this->getEditor([
-          'books_display' => 'list'
+          'books_view_type' => 'list'
         ]);
 
         $this->actingAs($editor)
             ->visit('/books')
-            ->pageNotHasElement('.gallery-item')
+            ->pageNotHasElement('.featured-image-container')
             ->pageHasElement('.entity-list-item');
     }
 
-    public function test_books_display_is_grid()
+    public function test_books_view_is_grid()
     {
         $editor = $this->getEditor([
-          'books_display' => 'grid'
+          'books_view_type' => 'grid'
         ]);
 
         $this->actingAs($editor)
             ->visit('/books')
-            ->pageHasElement('.gallery-item');
+            ->pageHasElement('.featured-image-container');
     }
 }