From b191c332b9ada8f6c541b64cec04fcb5570a441c Mon Sep 17 00:00:00 2001
From: Peter Dwyer <peter.dwyer@clanwilliamhealth.com>
Date: Mon, 29 Aug 2022 15:27:49 +0100
Subject: [PATCH] fix for columns alignment and title readability.

---
 cbreader/settings/base.py                |   5 +-
 frontend/src/components/ComicCard.vue    | 125 +++++++++++++----------
 frontend/src/components/TheComicList.vue |   6 +-
 frontend/src/components/TheNavbar.vue    |   2 +-
 poetry.lock                              |   6 +-
 pyproject.toml                           |   2 +-
 requirements.txt                         |  63 ------------
 7 files changed, 80 insertions(+), 129 deletions(-)
 delete mode 100644 requirements.txt

diff --git a/cbreader/settings/base.py b/cbreader/settings/base.py
index f2e3bd4..aad04c3 100644
--- a/cbreader/settings/base.py
+++ b/cbreader/settings/base.py
@@ -59,7 +59,7 @@ MIDDLEWARE = [
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     # 'silk.middleware.SilkyMiddleware',
-    'csp.middleware.CSPMiddleware',
+    # 'csp.middleware.CSPMiddleware',
 ]
 
 ROOT_URLCONF = "cbreader.urls"
@@ -147,6 +147,7 @@ CSP_CONNECT_SRC = ("'self'",)
 CSP_INCLUDE_NONCE_IN = ['script-src']
 CSP_SCRIPT_SRC_ATTR = ("'self'",)# "'unsafe-inline'")
 
+
 PERMISSIONS_POLICY = {
     "accelerometer": [],
     "ambient-light-sensor": [],
@@ -208,7 +209,7 @@ WEBPACK_LOADER = {
         'CACHE': not DEBUG,
         'BUNDLE_DIR_NAME': '/bundles/',  # must end with slash
         'STATS_FILE': os.path.join(FRONTEND_DIR, 'webpack-stats.json'),
-        'INTEGRITY': True,
+        'INTEGRITY': not DEBUG,
     }
 }
 
diff --git a/frontend/src/components/ComicCard.vue b/frontend/src/components/ComicCard.vue
index dad47e6..8960efa 100644
--- a/frontend/src/components/ComicCard.vue
+++ b/frontend/src/components/ComicCard.vue
@@ -1,59 +1,61 @@
 <template>
-  <CCard class="col-xl-2 col-lg-2 col-md-3 col-sm-4 p-0 m-1 ">
-    <CCardImage orientation="top" :src="thumbnail"/>
-    <CCardBody class="pb-0 pt-0 pl-1 pr-1 card-img-overlay d-flex">
-      <span class="badge rounded-pill bg-primary unread-badge" v-if="this.unread > 0 && data.type === 'Directory'">{{ this.unread }}</span>
-      <span class="badge rounded-pill bg-warning classification-badge" v-if="card_type === 'Directory'" >{{ this.$store.state.classifications.find(i => i.value === classification).label }}</span>
-      <CCardTitle class="align-self-end pb-5 mb-4 text-break" style="">
-        <router-link :to="(data.type === 'Directory' ? {'name': 'browse', params: { selector: data.selector }} : {'name': 'read', params: { selector: data.selector }})">{{ data.title }}</router-link>
-      </CCardTitle>
-    </CCardBody>
-    <CCardFooter class="pl-0 pr-0 pt-0">
-      <CProgress class="mb-1 position-relative" >
-        <CProgressBar :value="progressPercentCalc" />
-        <small class="justify-content-center d-flex position-absolute w-100 h-100" style="line-height: normal">{{ progressCalc }} / {{data.total}}</small>
-      </CProgress>
-      <CButtonGroup class="w-100">
-        <CButton color="primary" @click="updateComic('mark_unread')" ><font-awesome-icon icon='book' /></CButton>
-        <CButton color="primary" @click="updateComic('mark_read')" ><font-awesome-icon icon='book-open' /></CButton>
-        <CDropdown variant="btn-group">
-          <CDropdownToggle color="primary"><font-awesome-icon icon='edit' /></CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem @click="updateComic('mark_unread')"><font-awesome-icon icon='book' />Mark Un-read</CDropdownItem>
-            <CDropdownItem @click="updateComic('mark_read')"><font-awesome-icon icon='book-open' />Mark read</CDropdownItem>
-            <CDropdownItem v-if="data.type === 'ComicBook'" @click="$emit('markPreviousRead', data.selector)"><font-awesome-icon icon='book' /><font-awesome-icon icon='turn-up' />Mark previous comics read</CDropdownItem>
-            <CDropdownItem v-if="data.type === 'Directory'" @click="editDirectoryVisible = true"><font-awesome-icon icon='edit' />Edit comic</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      </CButtonGroup>
-    </CCardFooter>
-  </CCard>
-  <CModal :visible="editDirectoryVisible" @close="editDirectoryVisible = false">
-    <CModalHeader>
-      <CModalTitle>{{ data.title }}</CModalTitle>
-    </CModalHeader>
-    <CForm @submit="updateDirectory">
-      <CModalBody>
-        <CFormSelect
-          label="Classification"
-          aria-label="Set Classification"
-          v-model="new_classification"
-          :options="[...this.$store.state.classifications]">
-        </CFormSelect>
-        <CFormCheck
-          label="Recursive"
-          class="mt-2"
-          v-model="recursive"
-        />
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" @click="editDirectoryVisible = false ">
-          Close
-        </CButton>
-        <CButton color="primary" type="submit">Save changes</CButton>
-      </CModalFooter>
-    </CForm>
-  </CModal>
+  <CCol>
+    <CCard class="">
+      <CCardImage orientation="top" :src="thumbnail"/>
+      <CCardBody class="pb-0 pt-0 pl-1 pr-1 card-img-overlay d-flex" @click="$router.push((data.type === 'Directory' ? {'name': 'browse', params: { selector: data.selector }} : {'name': 'read', params: { selector: data.selector }}))">
+        <span class="badge rounded-pill bg-primary unread-badge" v-if="this.unread > 0 && data.type === 'Directory'">{{ this.unread }}</span>
+        <span class="badge rounded-pill bg-warning classification-badge" v-if="card_type === 'Directory'" >{{ this.$store.state.classifications.find(i => i.value === classification).label }}</span>
+        <CCardTitle class="align-self-end text-break" style="">
+          <router-link :to="(data.type === 'Directory' ? {'name': 'browse', params: { selector: data.selector }} : {'name': 'read', params: { selector: data.selector }})">{{ data.title }}</router-link>
+        </CCardTitle>
+      </CCardBody>
+      <CCardFooter class="pl-0 pr-0 pt-0">
+        <CProgress class="mb-1 position-relative" >
+          <CProgressBar :value="progressPercentCalc" />
+          <small class="justify-content-center d-flex position-absolute w-100 h-100" style="line-height: normal">{{ progressCalc }} / {{data.total}}</small>
+        </CProgress>
+        <CButtonGroup class="w-100">
+          <CButton color="primary" @click="updateComic('mark_unread')" ><font-awesome-icon icon='book' /></CButton>
+          <CButton color="primary" @click="updateComic('mark_read')" ><font-awesome-icon icon='book-open' /></CButton>
+          <CDropdown variant="btn-group">
+            <CDropdownToggle color="primary"><font-awesome-icon icon='edit' /></CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem @click="updateComic('mark_unread')"><font-awesome-icon icon='book' />Mark Un-read</CDropdownItem>
+              <CDropdownItem @click="updateComic('mark_read')"><font-awesome-icon icon='book-open' />Mark read</CDropdownItem>
+              <CDropdownItem v-if="data.type === 'ComicBook'" @click="$emit('markPreviousRead', data.selector)"><font-awesome-icon icon='book' /><font-awesome-icon icon='turn-up' />Mark previous comics read</CDropdownItem>
+              <CDropdownItem v-if="data.type === 'Directory'" @click="editDirectoryVisible = true"><font-awesome-icon icon='edit' />Edit comic</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CButtonGroup>
+      </CCardFooter>
+    </CCard>
+    <CModal :visible="editDirectoryVisible" @close="editDirectoryVisible = false">
+      <CModalHeader>
+        <CModalTitle>{{ data.title }}</CModalTitle>
+      </CModalHeader>
+      <CForm @submit="updateDirectory">
+        <CModalBody>
+          <CFormSelect
+            label="Classification"
+            aria-label="Set Classification"
+            v-model="new_classification"
+            :options="[...this.$store.state.classifications]">
+          </CFormSelect>
+          <CFormCheck
+            label="Recursive"
+            class="mt-2"
+            v-model="recursive"
+          />
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" @click="editDirectoryVisible = false ">
+            Close
+          </CButton>
+          <CButton color="primary" type="submit">Save changes</CButton>
+        </CModalFooter>
+      </CForm>
+    </CModal>
+  </CCol>
 </template>
 
 <script>
@@ -154,10 +156,21 @@ export default {
 </script>
 
 <style scoped>
+
 .card-title a {
   color: white;
   text-shadow: .2rem .2rem .3rem black ;
-  }
+}
+
+h5.card-title {
+  margin-bottom: 75px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
+}
+
+h5.card-title::before {
+  filter: blur(12px);
+}
+
 .card .unread-badge {
     position: absolute;
     top: 10px;
diff --git a/frontend/src/components/TheComicList.vue b/frontend/src/components/TheComicList.vue
index fce326b..d079f34 100644
--- a/frontend/src/components/TheComicList.vue
+++ b/frontend/src/components/TheComicList.vue
@@ -1,5 +1,5 @@
 <template>
-  <CContainer>
+  <CContainer fluid>
     <CRow>
       <CInputGroup>
         <CFormInput placeholder="Search" aria-label="Filter comics by name" v-model="this.filters.search_string"/>
@@ -15,7 +15,7 @@
         </CDropdown>
       </CInputGroup>
     </CRow>
-    <CRow>
+    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 row-cols-xl-auto" >
       <template v-if="loading">
         <CCol>
           <CProgress class="mt-3" >
@@ -28,7 +28,7 @@
           <comic-card :data="comic" @updateComicList="updateComicList" @markPreviousRead="markPreviousRead" @updateThumbnail="updateThumbnail" />
         </template>
       </template>
-    </CRow>
+    </div>
   </CContainer>
 </template>
 
diff --git a/frontend/src/components/TheNavbar.vue b/frontend/src/components/TheNavbar.vue
index 26ea356..4afd977 100644
--- a/frontend/src/components/TheNavbar.vue
+++ b/frontend/src/components/TheNavbar.vue
@@ -43,7 +43,7 @@ export default {
   },
   data() {
     return {
-      visible: true
+      visible: false
     }
   },
   methods: {
diff --git a/poetry.lock b/poetry.lock
index 063d002..aa235f9 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -411,7 +411,7 @@ validation = ["swagger-spec-validator (>=2.1.0)"]
 
 [[package]]
 name = "executing"
-version = "0.10.0"
+version = "1.0.0"
 description = "Get the currently executing AST node of a frame, and other information"
 category = "dev"
 optional = false
@@ -875,7 +875,7 @@ python-versions = ">=3.5"
 
 [[package]]
 name = "stack-data"
-version = "0.4.0"
+version = "0.5.0"
 description = "Extract data from python stack frames and tracebacks for informative displays"
 category = "dev"
 optional = false
@@ -934,7 +934,7 @@ python-versions = ">=2"
 
 [[package]]
 name = "ua-parser"
-version = "0.16.0"
+version = "0.16.1"
 description = "Python port of Browserscope's user agent parser"
 category = "main"
 optional = false
diff --git a/pyproject.toml b/pyproject.toml
index 442222a..f188b20 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -3,7 +3,7 @@ line_length = 119
 
 [tool.poetry]
 name = "cbwebreader"
-version = "1.0.2"
+version = "1.0.3"
 description = "CBR/Z Web Reader"
 authors = ["ajurna <ajurna@gmail.com>"]
 license = "Creative Commons Attribution-ShareAlike 4.0 International License"
diff --git a/requirements.txt b/requirements.txt
deleted file mode 100644
index d20dac1..0000000
--- a/requirements.txt
+++ /dev/null
@@ -1,63 +0,0 @@
-asgiref==3.5.2; python_version >= "3.8"
-autopep8==1.7.0; python_version >= "3.7"
-beautifulsoup4==4.11.1; python_full_version >= "3.6.0" and python_version >= "3.7"
-certifi==2022.6.15; python_version >= "3.7" and python_version < "4"
-charset-normalizer==2.1.1; python_version >= "3.7" and python_version < "4" and python_full_version >= "3.6.0"
-colorama==0.4.5; python_version >= "3.5" and python_full_version < "3.0.0" and sys_platform == "win32" or sys_platform == "win32" and python_version >= "3.5" and python_full_version >= "3.5.0"
-coreapi==2.3.3; python_version >= "3.6"
-coreschema==0.0.4; python_version >= "3.6"
-coverage==6.4.4; python_version >= "3.7"
-dj-database-url==1.0.0
-django-appconf==1.0.5; python_version >= "3.6"
-django-boost==2.0
-django-bootstrap4==22.2; python_version >= "3.7"
-django-cors-headers==3.13.0; python_version >= "3.7"
-django-csp==3.7
-django-extensions==3.2.0; python_version >= "3.6"
-django-filter==22.1; python_version >= "3.7"
-django-imagekit==4.1.0
-django-node-assets==0.9.11
-django-permissions-policy==4.13.0; python_version >= "3.7"
-django-silk==5.0.1; python_version >= "3.7"
-django-sri==0.4.0; python_version >= "3.8"
-django-webpack-loader==1.6.0
-django==4.0.7; python_version >= "3.8"
-djangorestframework-simplejwt==5.2.0; python_version >= "3.7"
-djangorestframework==3.13.1; python_version >= "3.6"
-drf-extensions==0.7.1
-drf-yasg==1.21.3; python_version >= "3.6"
-gprof2dot==2022.7.29; python_version >= "3.7"
-gunicorn==20.1.0; python_version >= "3.5"
-idna==3.3; python_version >= "3.7" and python_version < "4"
-inflection==0.5.1; python_version >= "3.6"
-itypes==1.2.0; python_version >= "3.6"
-jinja2==3.1.2; python_version >= "3.7"
-loguru==0.6.0; python_version >= "3.5"
-markdown==3.4.1; python_version >= "3.7"
-markupsafe==2.1.1; python_version >= "3.7"
-mysqlclient==2.1.1; python_version >= "3.5"
-packaging==21.3; python_version >= "3.6"
-pilkit==2.0
-pillow==9.2.0; python_version >= "3.7"
-psycopg2==2.9.3; python_version >= "3.6"
-pycodestyle==2.9.1; python_version >= "3.7"
-pyjwt==2.4.0; python_version >= "3.7"
-pymupdf==1.18.19
-pyparsing==3.0.9; python_full_version >= "3.6.8" and python_version >= "3.6"
-python-dateutil==2.8.2; python_version >= "3.7" and python_full_version < "3.0.0" or python_full_version >= "3.3.0" and python_version >= "3.7"
-python-dotenv==0.20.0; python_version >= "3.5"
-pytz==2022.2.1; python_version >= "3.7"
-rarfile==4.0
-requests==2.28.1; python_version >= "3.7" and python_version < "4"
-ruamel.yaml.clib==0.2.6; platform_python_implementation == "CPython" and python_version < "3.11" and python_version >= "3.6"
-ruamel.yaml==0.17.21; python_version >= "3.6"
-six==1.16.0; python_version >= "3.7" and python_full_version < "3.0.0" or python_full_version >= "3.3.0" and python_version >= "3.7"
-soupsieve==2.3.2.post1; python_full_version >= "3.6.0" and python_version >= "3.7"
-sqlparse==0.4.2; python_version >= "3.8"
-toml==0.10.2; python_version >= "3.7" and python_full_version < "3.0.0" or python_full_version >= "3.3.0" and python_version >= "3.7"
-tzdata==2022.2; sys_platform == "win32" and python_version >= "3.8"
-ua-parser==0.16.0
-uritemplate==4.1.1; python_version >= "3.6"
-urllib3==1.26.12; python_version >= "3.7" and python_full_version < "3.0.0" and python_version < "4" or python_full_version >= "3.6.0" and python_version < "4" and python_version >= "3.7"
-user-agents==2.2.0
-win32-setctime==1.1.0; sys_platform == "win32" and python_version >= "3.5"