From fa080626be7cb1d6a0cfd9e008d041aeb46106a6 Mon Sep 17 00:00:00 2001
From: otapi <31888571+otapi@users.noreply.github.com>
Date: Sat, 16 Jun 2018 22:17:36 +0200
Subject: [PATCH] Make cover images bigger in details view

Make cover images bigger at mobile devices in details view
---
 cps/static/css/style.css | 210 +++++++++++++++++++++------------------
 1 file changed, 112 insertions(+), 98 deletions(-)

diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index a89291e5..9c83f8e8 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -1,98 +1,112 @@
-@font-face {
-  font-family: 'Grand Hotel';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Grand Hotel'), local('GrandHotel-Regular'), url("fonts/GrandHotel-Regular.ttf") format('truetype');
-}
-
-body{background:#f2f2f2}body h2{font-weight:normal;color:#444}
-body { margin-bottom: 40px;}
-a{color: #45b29d}a:hover{color: #444;}
-.navigation .nav-head{text-transform:uppercase;color:#999;margin:20px 0}.navigation .nav-head:nth-child(1n+2){border-top:1px solid #ccc;padding-top:20px}
-.navigation li a{color:#444;text-decoration:none;display:block;padding:10px}.navigation li a:hover{background:rgba(153,153,153,0.4);border-radius:5px}
-.navigation li a span{margin-right:10px}
-.navigation .create-shelf{margin:30px 0;font-size:12px;text-align:center}.navigation .create-shelf a{color:#fff;background:#45b29d;padding:10px 20px;border-radius:5px;text-decoration:none}
-.container-fluid img{display:block;max-width:100%;height:auto}
-.container-fluid .discover{margin-bottom:50px}
-.container-fluid .new-books{border-top:1px solid #ccc}.container-fluid .new-books h2{margin:50px 0 0 0}
-.container-fluid .book{margin-top:20px}.container-fluid .book .cover{height:225px;position:relative}.container-fluid .book .cover img{border:1px solid #fff;/*border-radius:7px;*/box-sizeing:border-box;height:100%;bottom:0;position:absolute;-webkit-box-shadow: 0 5px 8px -6px #777;-moz-box-shadow: 0 5px 8px -6px #777;box-shadow: 0 5px 8px -6px #777;}
-.container-fluid .book .meta{margin-top:10px}.container-fluid .book .meta p{margin:0}
-.container-fluid .book .meta .title{font-weight:bold;font-size:15px;color:#444}
-.container-fluid .book .meta .author{font-size:12px;color:#999}
-.container-fluid .book .meta .rating{margin-top:5px}.rating .glyphicon-star{color:#999}.rating .glyphicon-star.good{color:#45b29d}
-.navbar-brand{font-family: 'Grand Hotel', cursive; font-size: 35px; color: #45b29d !important;}
-.more-stuff{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc}
-.more-stuff>li{margin-bottom: 10px;}
-.navbar-collapse.in .navbar-nav{margin: 0;}
-span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: text-top;}
-.book-meta {padding-bottom: 20px;}
-.book-meta .tags a {display: inline;}
-.book-meta .identifiers a {display: inline;}
-.container-fluid .single .cover img {
-    border: 1px solid #fff;
-    /*border-radius: 7px;*/
-    box-sizeing: border-box;
-    -webkit-box-shadow: 0 5px 8px -6px #777;
-    -moz-box-shadow: 0 5px 8px -6px #777;
-    box-shadow: 0 5px 8px -6px #777;
-}
-.navbar-default .navbar-toggle .icon-bar {background-color: #000;}
-.navbar-default .navbar-toggle {border-color: #000;}
-.cover { margin-bottom: 10px;}
-
-.btn-file {position: relative; overflow: hidden;}
-.btn-file input[type=file] {position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block;}
-
-.btn-toolbar .btn,.discover .btn { margin-bottom: 5px; }
-.button-link {color:#fff;}
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary{ background-color: #1C5484; }
-.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #89B9E2; }
-.btn-toolbar>.btn+.btn, .btn-toolbar>.btn-group+.btn, .btn-toolbar>.btn+.btn-group, .btn-toolbar>.btn-group+.btn-group { margin-left:0px; }
-
-.spinner {margin:0 41%;}
-.spinner2 {margin:0 41%;}
-
-.block-label {display: block;}
-.fake-input {position: absolute; pointer-events: none; top: 0;}
-
-input.pill { position: absolute; opacity: 0; }
-input.pill + label {
-    border: 2px solid #45b29d;
-    border-radius: 15px;
-    color: #45b29d;
-    cursor: pointer;
-    display: inline-block;
-    padding: 3px 15px;
-    user-select: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-input.pill:checked + label {
-    background-color: #45b29d;
-    border-color: #fff;
-    color: #fff;
-}
-input.pill:not(:checked) + label .glyphicon {
-    display: none;
-}
-
-.author-bio img {margin: 0 1em 1em 0;}
-.author-link {display: inline-block; margin-top: 10px; width: 100px;}
-.author-link img {display: block; height: 100%;}
-
-#remove-from-shelves .btn,
-#shelf-action-errors {
-    margin-left: 5px;
-}
-
-.tags_click, .serie_click, .language_click {margin-right: 5px;}
-
-#meta-info img { max-height: 150px; max-width: 100px; cursor: pointer; }
-
-.padded-bottom { margin-bottom: 15px; }
-
-.upload-format-input-text {display: initial;}
-#btn-upload-format {display: none;}
-
-.upload-format-input-text {display: initial;}
-#btn-upload-format {display: none;}
+@font-face {
+  font-family: 'Grand Hotel';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Grand Hotel'), local('GrandHotel-Regular'), url("fonts/GrandHotel-Regular.ttf") format('truetype');
+}
+
+body{background:#f2f2f2}body h2{font-weight:normal;color:#444}
+body { margin-bottom: 40px;}
+a{color: #45b29d}a:hover{color: #444;}
+.navigation .nav-head{text-transform:uppercase;color:#999;margin:20px 0}.navigation .nav-head:nth-child(1n+2){border-top:1px solid #ccc;padding-top:20px}
+.navigation li a{color:#444;text-decoration:none;display:block;padding:10px}.navigation li a:hover{background:rgba(153,153,153,0.4);border-radius:5px}
+.navigation li a span{margin-right:10px}
+.navigation .create-shelf{margin:30px 0;font-size:12px;text-align:center}.navigation .create-shelf a{color:#fff;background:#45b29d;padding:10px 20px;border-radius:5px;text-decoration:none}
+.container-fluid img{display:block;max-width:100%;height:auto}
+.container-fluid .discover{margin-bottom:50px}
+.container-fluid .new-books{border-top:1px solid #ccc}.container-fluid .new-books h2{margin:50px 0 0 0}
+.container-fluid .book{margin-top:20px}.container-fluid .book .cover{height:225px;position:relative}.container-fluid .book .cover img{border:1px solid #fff;/*border-radius:7px;*/box-sizeing:border-box;height:100%;bottom:0;position:absolute;-webkit-box-shadow: 0 5px 8px -6px #777;-moz-box-shadow: 0 5px 8px -6px #777;box-shadow: 0 5px 8px -6px #777;}
+.container-fluid .book .meta{margin-top:10px}.container-fluid .book .meta p{margin:0}
+.container-fluid .book .meta .title{font-weight:bold;font-size:15px;color:#444}
+.container-fluid .book .meta .author{font-size:12px;color:#999}
+.container-fluid .book .meta .rating{margin-top:5px}.rating .glyphicon-star{color:#999}.rating .glyphicon-star.good{color:#45b29d}
+.navbar-brand{font-family: 'Grand Hotel', cursive; font-size: 35px; color: #45b29d !important;}
+.more-stuff{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc}
+.more-stuff>li{margin-bottom: 10px;}
+.navbar-collapse.in .navbar-nav{margin: 0;}
+span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: text-top;}
+.book-meta {padding-bottom: 20px;}
+.book-meta .tags a {display: inline;}
+.book-meta .identifiers a {display: inline;}
+.container-fluid .single .cover img {
+    border: 1px solid #fff;
+    /*border-radius: 7px;*/
+    box-sizeing: border-box;
+    -webkit-box-shadow: 0 5px 8px -6px #777;
+    -moz-box-shadow: 0 5px 8px -6px #777;
+    box-shadow: 0 5px 8px -6px #777;
+}
+.navbar-default .navbar-toggle .icon-bar {background-color: #000;}
+.navbar-default .navbar-toggle {border-color: #000;}
+.cover { margin-bottom: 10px;}
+
+.btn-file {position: relative; overflow: hidden;}
+.btn-file input[type=file] {position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block;}
+
+.btn-toolbar .btn,.discover .btn { margin-bottom: 5px; }
+.button-link {color:#fff;}
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary{ background-color: #1C5484; }
+.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #89B9E2; }
+.btn-toolbar>.btn+.btn, .btn-toolbar>.btn-group+.btn, .btn-toolbar>.btn+.btn-group, .btn-toolbar>.btn-group+.btn-group { margin-left:0px; }
+
+.spinner {margin:0 41%;}
+.spinner2 {margin:0 41%;}
+
+.block-label {display: block;}
+.fake-input {position: absolute; pointer-events: none; top: 0;}
+
+input.pill { position: absolute; opacity: 0; }
+input.pill + label {
+    border: 2px solid #45b29d;
+    border-radius: 15px;
+    color: #45b29d;
+    cursor: pointer;
+    display: inline-block;
+    padding: 3px 15px;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+input.pill:checked + label {
+    background-color: #45b29d;
+    border-color: #fff;
+    color: #fff;
+}
+input.pill:not(:checked) + label .glyphicon {
+    display: none;
+}
+
+.author-bio img {margin: 0 1em 1em 0;}
+.author-link {display: inline-block; margin-top: 10px; width: 100px;}
+.author-link img {display: block; height: 100%;}
+
+#remove-from-shelves .btn,
+#shelf-action-errors {
+    margin-left: 5px;
+}
+
+.tags_click, .serie_click, .language_click {margin-right: 5px;}
+
+#meta-info img { max-height: 150px; max-width: 100px; cursor: pointer; }
+
+.padded-bottom { margin-bottom: 15px; }
+
+.upload-format-input-text {display: initial;}
+#btn-upload-format {display: none;}
+
+.upload-format-input-text {display: initial;}
+#btn-upload-format {display: none;}
+
+.div[id="bookDetailsModal"] .container-fluid .book .cover {
+    height: auto;
+    width: 100%;
+}
+
+.div[class="col-sm-3.col-lg-3.col-xs-5"] {
+    width: 100%;
+}
+
+.col-xs-5 {
+    width: 100%;
+}
+