From 42707a19bd62fddb6b7097c45166b3cf09d7696b Mon Sep 17 00:00:00 2001
From: Ozzie Isaacs <ozzie.fernandez.isaacs@googlemail.com>
Date: Sun, 14 Mar 2021 16:57:33 +0100
Subject: [PATCH] Code cosmetics

---
 cps/static/css/listen.css    |  13 +-
 cps/static/css/main.css      | 358 ++++++++++++++++++-----------------
 cps/static/css/style.css     |  84 ++++----
 cps/static/js/edit_books.js  |   2 +-
 cps/static/js/filter_grid.js |   8 +-
 cps/static/js/main.js        |   2 +-
 6 files changed, 230 insertions(+), 237 deletions(-)

diff --git a/cps/static/css/listen.css b/cps/static/css/listen.css
index a69af72e..9e1d3bb4 100644
--- a/cps/static/css/listen.css
+++ b/cps/static/css/listen.css
@@ -66,19 +66,12 @@ body {
   right: 40px;
 }
 
-xmp,
-pre,
-plaintext {
-  display: block;
-  font-family: -moz-fixed;
-  white-space: pre;
-  margin: 1em 0;
-}
-
 pre {
+  display: block;
+  margin: 1em 0;
   white-space: pre-wrap;
   word-wrap: break-word;
-  font-family: -moz-fixed;
+  font-family: -moz-fixed, sans-serif;
   column-count: 2;
   -webkit-columns: 2;
   -moz-columns: 2;
diff --git a/cps/static/css/main.css b/cps/static/css/main.css
index 94b04ce0..e97497de 100644
--- a/cps/static/css/main.css
+++ b/cps/static/css/main.css
@@ -72,6 +72,16 @@ body {
   padding: 3px;
 }
 
+#panels a {
+  visibility: hidden;
+  width: 18px;
+  height: 20px;
+  overflow: hidden;
+  display: inline-block;
+  color: #ccc;
+  margin-left: 6px;
+}
+
 #titlebar a:active {
   opacity: 1;
   color: rgba(0, 0, 0, 0.6);
@@ -189,19 +199,24 @@ body {
 
 #title-controls { float: right; }
 
-#panels a {
-  visibility: hidden;
-  width: 18px;
-  height: 20px;
-  overflow: hidden;
-  display: inline-block;
-  color: #ccc;
-  margin-left: 6px;
-}
-
 #panels a::before { visibility: visible; }
 #panels a:hover { color: #aaa; }
 
+.list_item.currentChapter > a,
+.list_item a:hover {
+  color: #f1f1f1;
+}
+
+.list_item a {
+  color: #aaa;
+  text-decoration: none;
+}
+
+#searchResults a {
+  color: #aaa;
+  text-decoration: none;
+}
+
 #panels a:active {
   color: #aaa;
   margin: 1px 0 -1px 6px;
@@ -274,6 +289,17 @@ input:-moz-placeholder { color: #454545; }
   display: block;
 }
 
+.list_item ul {
+  padding-left: 10px;
+  margin-top: 8px;
+  display: none;
+}
+
+.list_item.currentChapter > ul,
+.list_item.openChapter > ul {
+  display: block;
+}
+
 #tocView > ul,
 #bookmarksView > ul {
   margin-top: 15px;
@@ -291,14 +317,34 @@ input:-moz-placeholder { color: #454545; }
   text-transform: capitalize;
 }
 
-#tocView li:active,
-#tocView li.currentChapter {
+.md-content > div ul li {
+  padding: 5px 0;
+}
+
+#settingsPanel li {
+  font-size: 1em;
+  color: #f1f1f1;
+}
+
+#searchResults li {
+  margin-bottom: 10px;
+  width: 225px;
+  font-family: Georgia, "Times New Roman", Times, serif;
   list-style: none;
 }
 
-.list_item a {
-  color: #aaa;
-  text-decoration: none;
+#notes li {
+  color: #eee;
+  font-size: 12px;
+  width: 240px;
+  border-top: 1px #fff solid;
+  padding-top: 6px;
+  margin-bottom: 6px;
+}
+
+#tocView li:active,
+#tocView li.currentChapter {
+  list-style: none;
 }
 
 .list_item a.chapter {
@@ -309,27 +355,11 @@ input:-moz-placeholder { color: #454545; }
   font-size: 0.8em;
 }
 
-.list_item.currentChapter > a,
-.list_item a:hover {
-  color: #f1f1f1;
-}
-
 /* #tocView li.openChapter > a, */
 .list_item a:hover {
   color: #e2e2e2;
 }
 
-.list_item ul {
-  padding-left: 10px;
-  margin-top: 8px;
-  display: none;
-}
-
-.list_item.currentChapter > ul,
-.list_item.openChapter > ul {
-  display: block;
-}
-
 #tocView.hidden {
   display: none;
 }
@@ -344,14 +374,14 @@ input:-moz-placeholder { color: #454545; }
   user-select: none;
 }
 
-.toc_toggle:before {
+.toc_toggle::before {
   content: '▸';
   color: #fff;
   margin-right: -4px;
 }
 
-.currentChapter > .toc_toggle:before,
-.openChapter > .toc_toggle:before {
+.currentChapter > .toc_toggle::before,
+.openChapter > .toc_toggle::before {
   content: '▾';
 }
 
@@ -369,18 +399,6 @@ input:-moz-placeholder { color: #454545; }
   display: block;
 }
 
-#searchResults li {
-  margin-bottom: 10px;
-  width: 225px;
-  font-family: Georgia, "Times New Roman", Times, serif;
-  list-style: none;
-}
-
-#searchResults a {
-  color: #aaa;
-  text-decoration: none;
-}
-
 #searchResults p {
   text-decoration: none;
   font-size: 12px;
@@ -392,10 +410,21 @@ input:-moz-placeholder { color: #454545; }
   color: #000;
 }
 
+.md-content > div p {
+  margin: 0;
+  padding: 10px 0;
+}
+
 #searchResults li > p {
   color: #aaa;
 }
 
+#notes li a {
+  color: #fff;
+  display: inline-block;
+  margin-left: 6px;
+}
+
 #searchResults li a:hover {
   color: #e2e2e2;
 }
@@ -409,21 +438,6 @@ input:-moz-placeholder { color: #454545; }
   padding: 0 0 0 34px;
 }
 
-#notes li {
-  color: #eee;
-  font-size: 12px;
-  width: 240px;
-  border-top: 1px #fff solid;
-  padding-top: 6px;
-  margin-bottom: 6px;
-}
-
-#notes li a {
-  color: #fff;
-  display: inline-block;
-  margin-left: 6px;
-}
-
 #notes li a:hover {
   text-decoration: underline;
 }
@@ -442,7 +456,7 @@ input:-moz-placeholder { color: #454545; }
 }
 
 #note-text[disabled],
-#note-text[disabled="disabled"]{
+#note-text[disabled="disabled"] {
   opacity: 0.5;
 }
 
@@ -455,6 +469,22 @@ input:-moz-placeholder { color: #454545; }
   display: none;
 }
 
+.md-content h3 {
+  margin: 0;
+  padding: 6px;
+  text-align: center;
+  font-size: 22px;
+  font-weight: 300;
+  opacity: 0.8;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px 3px 0 0;
+}
+
+.md-content > div ul {
+  margin: 0;
+  padding: 0 0 30px 20px;
+}
+
 #settingsPanel h3 {
   color: #f1f1f1;
   font-family: Georgia, "Times New Roman", Times, serif;
@@ -466,11 +496,6 @@ input:-moz-placeholder { color: #454545; }
   list-style-type: none;
 }
 
-#settingsPanel li {
-  font-size: 1em;
-  color: #f1f1f1;
-}
-
 #settingsPanel .xsmall { font-size: x-small; }
 #settingsPanel .small { font-size: small; }
 #settingsPanel .medium { font-size: medium; }
@@ -525,17 +550,6 @@ input:-moz-placeholder { color: #454545; }
   height: 320px;
 }
 
-.md-content h3 {
-  margin: 0;
-  padding: 6px;
-  text-align: center;
-  font-size: 22px;
-  font-weight: 300;
-  opacity: 0.8;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 3px 3px 0 0;
-}
-
 .md-content > div {
   padding: 15px 40px 30px;
   margin: 0;
@@ -543,20 +557,6 @@ input:-moz-placeholder { color: #454545; }
   font-size: 14px;
 }
 
-.md-content > div p {
-  margin: 0;
-  padding: 10px 0;
-}
-
-.md-content > div ul {
-  margin: 0;
-  padding: 0 0 30px 20px;
-}
-
-.md-content > div ul li {
-  padding: 5px 0;
-}
-
 .md-content button {
   display: block;
   margin: 0 auto;
@@ -619,7 +619,7 @@ input:-moz-placeholder { color: #454545; }
 }
 
 @media only screen and (max-width: 550px) {
-  #viewer{
+  #viewer {
     width: 80%;
     margin-left: 10%;
   }
@@ -654,11 +654,6 @@ input:-moz-placeholder { color: #454545; }
     -ms-transform: translate(260px, 0);
   }
 
-  #titlebar {
-    /* font-size: 16px; */
-    /* margin: 0 50px 0 50px; */
-  }
-
   #metainfo {
     font-size: 10px;
   }
@@ -678,115 +673,122 @@ input:-moz-placeholder { color: #454545; }
 
 /* For iPad portrait layouts only */
 @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
-    #viewer iframe {
-        width: 460px;
-        height: 740px;
-    }
+  #viewer iframe {
+    width: 460px;
+    height: 740px;
+  }
 }
 
 @media only screen
-and (min-device-width : 768px)
-and (max-device-width : 1024px)
-and (orientation : landscape)
-/*and (-webkit-min-device-pixel-ratio: 2)*/ {
+  and (min-device-width: 768px)
+  and (max-device-width: 1024px)
+  and (orientation: landscape)
+  /* and (-webkit-min-device-pixel-ratio: 2)*/ {
   #viewer {
     width: 80%;
     margin-left: 10%;
   }
+
   #divider,
   #divider.show {
     display: none;
   }
 }
 
- /*For iPad landscape layouts only */
+/* For iPad landscape layouts only */
 @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
-    #viewer iframe {
-      width: 960px;
-      height: 515px;
-    }
+  #viewer iframe {
+    width: 960px;
+    height: 515px;
+  }
 }
 
 /* For iPhone 6\6s portrait layouts only */
-@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation: portrait) {
-    #viewer {
-      width: 300px;
-      height: 480px;
-    }
-    #viewer iframe {
-       width: 300px;
-       height: 480px;
-    }
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
+  #viewer {
+    width: 300px;
+    height: 480px;
+  }
+
+  #viewer iframe {
+   width: 300px;
+   height: 480px;
+  }
 }
 
 /* For iPhone 6\6s landscape layouts only */
-@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation: landscape) {
-    #viewer {
-      width: 450px;
-      height: 300px;
-    }
-    #viewer iframe {
-       width: 450px;
-       height: 300px;
-    }
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
+  #viewer {
+    width: 450px;
+    height: 300px;
+  }
+
+  #viewer iframe {
+    width: 450px;
+    height: 300px;
+  }
 }
 
 /* For iPhone portrait layouts only */
 @media only screen and (max-device-width: 374px) and (orientation: portrait) {
-    #viewer {
-      width: 256px;
-      height: 432px;
-    }
-    #viewer iframe {
-       width: 256px;
-       height: 432px;
-    }
+  #viewer {
+    width: 256px;
+    height: 432px;
+  }
+
+  #viewer iframe {
+    width: 256px;
+    height: 432px;
+  }
 }
 
 /* For iPhone landscape layouts only */
 @media only screen and (max-device-width: 374px) and (orientation: landscape) {
-    #viewer iframe {
-      width: 256px;
-      height: 124px;
-    }
+  #viewer iframe {
+    width: 256px;
+    height: 124px;
+  }
 }
 
-[class^="icon-"]:before, [class*=" icon-"]:before {
-    font-family: "fontello", serif;
-    font-style: normal;
-    font-weight: normal;
-    speak: none;
-    display: inline-block;
-    text-decoration: inherit;
-    width: 1em;
-    margin-right: 0.2em;
-    text-align: center;
-    /* For safety - reset parent styles, that can break glyph codes*/
-    font-variant: normal;
-    text-transform: none;
-    /* you can be more comfortable with increased icons size */
-    font-size: 112%;
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
+  font-family: "fontello", serif;
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: 0.2em;
+  text-align: center;
+
+  /* For safety - reset parent styles, that can break glyph codes */
+  font-variant: normal;
+  text-transform: none;
+
+  /* you can be more comfortable with increased icons size */
+  font-size: 112%;
 }
 
-.icon-search:before { content: '\e807'; } /* '' */
-.icon-resize-full-1:before { content: '\e804'; } /* '' */
-.icon-cancel-circled2:before { content: '\e80f'; } /* '' */
-.icon-link:before { content: '\e80d'; } /* '' */
-.icon-bookmark:before { content: '\e805'; } /* '' */
-.icon-bookmark-empty:before { content: '\e806'; } /* '' */
-.icon-download-cloud:before { content: '\e811'; } /* '' */
-.icon-edit:before { content: '\e814'; } /* '' */
-.icon-menu:before { content: '\e802'; } /* '' */
-.icon-cog:before { content: '\e813'; } /* '' */
-.icon-resize-full:before { content: '\e812'; } /* '' */
-.icon-cancel-circled:before { content: '\e80e'; } /* '' */
-.icon-up-dir:before { content: '\e80c'; } /* '' */
-.icon-right-dir:before { content: '\e80b'; } /* '' */
-.icon-angle-right:before { content: '\e809'; } /* '' */
-.icon-angle-down:before { content: '\e80a'; } /* '' */
-.icon-right:before { content: '\e815'; } /* '' */
-.icon-list-1:before { content: '\e803'; } /* '' */
-.icon-list-numbered:before { content: '\e801'; } /* '' */
-.icon-columns:before { content: '\e810'; } /* '' */
-.icon-list:before { content: '\e800'; } /* '' */
-.icon-resize-small:before { content: '\e808'; } /* '' */
+.icon-search::before { content: '\e807'; } /* '' */
+.icon-resize-full-1::before { content: '\e804'; } /* '' */
+.icon-cancel-circled2::before { content: '\e80f'; } /* '' */
+.icon-link::before { content: '\e80d'; } /* '' */
+.icon-bookmark::before { content: '\e805'; } /* '' */
+.icon-bookmark-empty::before { content: '\e806'; } /* '' */
+.icon-download-cloud::before { content: '\e811'; } /* '' */
+.icon-edit::before { content: '\e814'; } /* '' */
+.icon-menu::before { content: '\e802'; } /* '' */
+.icon-cog::before { content: '\e813'; } /* '' */
+.icon-resize-full::before { content: '\e812'; } /* '' */
+.icon-cancel-circled::before { content: '\e80e'; } /* '' */
+.icon-up-dir::before { content: '\e80c'; } /* '' */
+.icon-right-dir::before { content: '\e80b'; } /* '' */
+.icon-angle-right::before { content: '\e809'; } /* '' */
+.icon-angle-down::before { content: '\e80a'; } /* '' */
+.icon-right::before { content: '\e815'; } /* '' */
+.icon-list-1::before { content: '\e803'; } /* '' */
+.icon-list-numbered::before { content: '\e801'; } /* '' */
+.icon-columns::before { content: '\e810'; } /* '' */
+.icon-list::before { content: '\e800'; } /* '' */
+.icon-resize-small::before { content: '\e808'; } /* '' */
diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index 8f54beff..02658771 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -28,6 +28,11 @@ html.http-error {
   height: 100%;
 }
 
+body {
+  background: #f2f2f2;
+  margin-bottom: 40px;
+}
+
 .http-error body {
   margin: 0;
   height: 100%;
@@ -41,11 +46,6 @@ html.http-error {
   text-align: center;
 }
 
-body {
-  background: #f2f2f2;
-  margin-bottom: 40px;
-}
-
 body h2 {
   font-weight: normal;
   color: #444;
@@ -56,10 +56,16 @@ a,
 .book-remove,
 .editable-empty,
 .editable-empty:hover { color: #45b29d; }
-
-.book-remove:hover { color: #23527c; }
-
+.user-remove:hover { color: #23527c; }
 .btn-default a { color: #444; }
+.panel-title > a { text-decoration: none; }
+
+.navigation li a {
+  color: #444;
+  text-decoration: none;
+  display: block;
+  padding: 10px;
+}
 
 .btn-default a:hover {
   color: #45b29d;
@@ -85,11 +91,17 @@ a.editable-click:hover { border-bottom: None; }
   padding-top: 20px;
 }
 
-.navigation li a {
-  color: #444;
+.book-meta .tags a { display: inline; }
+table .bg-primary a { color: #fff; }
+table .bg-dark-danger a { color: #fff; }
+.book-meta .identifiers a { display: inline; }
+
+.navigation .create-shelf a {
+  color: #fff;
+  background: #45b29d;
+  padding: 10px 20px;
+  border-radius: 5px;
   text-decoration: none;
-  display: block;
-  padding: 10px;
 }
 
 .navigation li a:hover {
@@ -105,14 +117,6 @@ a.editable-click:hover { border-bottom: None; }
   text-align: center;
 }
 
-.navigation .create-shelf a {
-  color: #fff;
-  background: #45b29d;
-  padding: 10px 20px;
-  border-radius: 5px;
-  text-decoration: none;
-}
-
 .row.display-flex {
   display: flex;
   flex-wrap: wrap;
@@ -134,17 +138,32 @@ a.editable-click:hover { border-bottom: None; }
   display: flex;
   flex-direction: column;
 }
+.cover { margin-bottom: 10px; }
 
 .container-fluid .book .cover {
   height: 225px;
   position: relative;
 }
 
+.author-link img {
+  display: block;
+  height: 100%;
+}
+
 .container-fluid .book .cover span.img {
   bottom: 0;
   height: 100%;
   position: absolute;
 }
+.author-bio img { margin: 0 1em 1em 0; }
+
+.container-fluid .single .cover img {
+  border: 1px solid #fff;
+  box-sizing: 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;
+}
 
 .container-fluid .book .cover span img {
   position: relative;
@@ -159,6 +178,7 @@ a.editable-click:hover { border-bottom: None; }
 }
 
 .container-fluid .book .meta { margin-top: 10px; }
+.media-body p { text-align: justify; }
 .container-fluid .book .meta p { margin: 0; }
 
 .container-fluid .book .meta .title {
@@ -208,20 +228,9 @@ span.glyphicon.glyphicon-tags {
 }
 
 .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;
-  box-sizing: 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; }
 
 .cover .badge {
   position: absolute;
@@ -308,10 +317,8 @@ table .bg-dark-danger {
   background-color: #d9534f;
   color: #fff;
 }
-table .bg-dark-danger a { color: #fff; }
 table .bg-dark-danger:hover { background-color: #c9302c; }
 table .bg-primary:hover { background-color: #1c5484; }
-table .bg-primary a { color: #fff; }
 .block-label { display: block; }
 
 .fake-input {
@@ -345,19 +352,12 @@ input.pill:checked + label {
 
 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; }
 
@@ -371,7 +371,6 @@ input.pill:not(:checked) + label .glyphicon { display: none; }
 }
 
 .media-list { padding-right: 15px; }
-.media-body p { text-align: justify; }
 
 #meta-info img {
   max-height: 150px;
@@ -384,7 +383,7 @@ input.pill:not(:checked) + label .glyphicon { display: none; }
 #btn-upload-format { display: none; }
 .upload-cover-input-text { display: initial; }
 #btn-upload-cover { display: none; }
-.panel-title > a { text-decoration: none; }
+
 .editable-buttons {
   display: inline-block;
   margin-left: 7px;
@@ -417,4 +416,3 @@ div.log {
   white-space: nowrap;
   padding: 0.5em;
 }
-
diff --git a/cps/static/js/edit_books.js b/cps/static/js/edit_books.js
index 8f683be4..8cedf688 100644
--- a/cps/static/js/edit_books.js
+++ b/cps/static/js/edit_books.js
@@ -265,7 +265,7 @@ $("#search").on("change input.typeahead:selected", function(event) {
             }
         });
         $("#include_tag option:selected").each(function () {
-            $("#exclude_tag").find("[value="+$(this).val() + "]").prop("disabled", true);
+            $("#exclude_tag").find("[value=" + $(this).val() + "]").prop("disabled", true);
         });
         $("#include_tag").selectpicker("refresh");
         $("#exclude_tag").selectpicker("refresh");
diff --git a/cps/static/js/filter_grid.js b/cps/static/js/filter_grid.js
index f5ccd3de..d57d155f 100644
--- a/cps/static/js/filter_grid.js
+++ b/cps/static/js/filter_grid.js
@@ -56,15 +56,15 @@ $("#asc").click(function() {
 $("#all").click(function() {
     // go through all elements and make them visible
     $list.isotope({ filter: function() {
-            return true;
-        }
+        return true;
+    }
     });
 });
 
 $(".char").click(function() {
     var character = this.innerText;
     $list.isotope({ filter: function() {
-            return this.attributes["data-id"].value.charAt(0).toUpperCase() == character;
-        }
+        return this.attributes["data-id"].value.charAt(0).toUpperCase() === character;
+    }
     });
 });
diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index dd2efe52..fea85990 100644
--- a/cps/static/js/main.js
+++ b/cps/static/js/main.js
@@ -55,7 +55,7 @@ $(document).on("change", "select[data-control]", function() {
 $(document).on("change", "select[data-controlall]", function() {
     var $this = $(this);
     var name = $this.data("controlall");
-    var showOrHide = parseInt($this.val());
+    var showOrHide = parseInt($this.val(), 10);
     if (showOrHide) {
         $("[data-related=" + name + "]").show();
     } else {