fix for columns alignment and title readability.

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,
     }
 }
 

frontend/src/components/ComicCard.vue

@@ -1,10 +1,11 @@
 <template>
-  <CCard class="col-xl-2 col-lg-2 col-md-3 col-sm-4 p-0 m-1 ">
+  <CCol>
+    <CCard class="">
       <CCardImage orientation="top" :src="thumbnail"/>
-    <CCardBody class="pb-0 pt-0 pl-1 pr-1 card-img-overlay d-flex">
+      <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 pb-5 mb-4 text-break" style="">
+        <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>
@@ -54,6 +55,7 @@
         </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;

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>
 

frontend/src/components/TheNavbar.vue

@@ -43,7 +43,7 @@ export default {
   },
   data() {
     return {
-      visible: true
+      visible: false
     }
   },
   methods: {

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

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"

requirements.txt

@@ -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"