Migrate to bootstrap 5.

TheReverend403 · Feb 28, 2024 · 5931fbc · 5931fbc
1 parent 35864f1
commit 5931fbc
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 138 deletions.
diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
   "license": "GPL-3.0+",
   "private": true,
   "dependencies": {
-    "bootstrap": "^4.6.2",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
     "dropzone": "^5.9.3",
-    "jquery": "^3.7.1",
-    "popper.js": "^1.16.1"
+    "jquery": "^3.7.1"
   }
 }
diff --git a/pste/__init__.py b/pste/__init__.py
@@ -110,43 +110,19 @@ def register_extensions(app):
 
 def register_assets(app):
     bundles = {
-        "css-pygments": Bundle(
+        "css-app": Bundle(
             "css/pygments.css",
-            filters="cssmin",
-            output="css/pygments-%(version)s.css",
-        ),
-        "css-dropzone": Bundle(
+            "css/starwars-glyphicons.css",
             f"{paths.NODE_MODULES}/dropzone/dist/dropzone.css",
-            filters="cssmin",
-            output="css/vendor/dropzone-%(version)s.css",
-        ),
-        "css-app": Bundle(
             "scss/app.scss",
-            "css/starwars-glyphicons.css",
             filters="libsass,cssmin",
             output="css/app-%(version)s.css",
         ),
-        "js-jquery": Bundle(
+        "js-app": Bundle(
             f"{paths.NODE_MODULES}/jquery/dist/jquery.slim.js",
-            filters="rjsmin",
-            output="js/vendor/jquery-%(version)s.js",
-        ),
-        "js-popper": Bundle(
-            f"{paths.NODE_MODULES}/popper.js/dist/umd/popper.js",
-            filters="rjsmin",
-            output="js/vendor/popper-%(version)s.js",
-        ),
-        "js-bootstrap": Bundle(
+            f"{paths.NODE_MODULES}/@popperjs/core/dist/umd/popper.js",
             f"{paths.NODE_MODULES}/bootstrap/dist/js/bootstrap.js",
-            filters="rjsmin",
-            output="js/vendor/bootstrap-%(version)s.js",
-        ),
-        "js-dropzone": Bundle(
             f"{paths.NODE_MODULES}/dropzone/dist/dropzone.js",
-            filters="rjsmin",
-            output="js/vendor/dropzone-%(version)s.js",
-        ),
-        "js-app": Bundle(
             "js/app.js",
             filters="rjsmin",
             output="js/app-%(version)s.js",

diff --git a/pste/assets/scss/app.scss b/pste/assets/scss/app.scss
@@ -16,80 +16,90 @@
  */
 
 @import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-
-$enable-rounded: false;
 
-$theme-colors: (
-    primary: #754DAC
-);
+$primary: #754dac;
+$info: $primary;
 
-$input-focus-border-color: theme-color("primary");
+$enable-rounded: false;
+$input-focus-border-color: $primary;
 $input-focus-box-shadow: 0;
 
+@import "bootstrap/scss/variables";
 @import "bootstrap/scss/bootstrap";
 
 .navbar {
-  margin-bottom: 20px;
-  border-bottom: 2px solid theme-color("primary");
+    border-bottom: 2px solid $primary;
 }
 
 .swg-r2d2-2 {
-  color: #5468B1;
+    color: #5468b1;
 }
 
 .swg-c3po-2 {
-  color: #EDA35C;
+    color: #eda35c;
 }
 
 .dropzone {
-  background: $gray-200;
-  font-size: 1.2em;
-  border: none;
+    background-color: var(--bs-secondary-bg);
+    font-size: 1.2em;
+    border: none;
 }
 
 .dz-preview {
-  border: 1px solid theme-color("primary");
-  font-size: 0.9em;
+    border: 1px solid $primary;
+    font-size: 0.9em;
 }
 
 .dz-image {
-  border-radius: 0 !important;
-  background: none !important;
-  border-bottom: 1px solid theme-color("primary");
+    border-radius: 0 !important;
+    background: none !important;
+    border-bottom: 1px solid $primary;
 }
 
 .code {
-  padding-left: 10px;
+    padding-left: 10px;
 }
 
 .pre-scrollable {
-  max-height: 65vh;
-  border: 1px lightgray solid;
+    max-height: 75vh;
+    border: 1px lightgray solid;
 }
 
 .linenos {
-  vertical-align: top;
-  background: #F5F5F5;
-  padding-left: 5px;
-  padding-right: 10px;
+    vertical-align: top;
+    background-color: var(--bs-secondary-bg);
+    padding-left: 5px;
+    padding-right: 10px;
+}
+
+.linenodiv > pre > span > a {
+    color: $pink-500;
+
+    &:not(:hover) {
+        text-decoration: none;
+    }
 }
 
 .paste-info {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .list-inline-separators {
-  li:after {
-    content: '|';
-    padding-left: 8px;
-  }
-
-  li:last-child:after {
-    content: '';
-    padding-left: 0;
-  }
+    li:after {
+        content: "|";
+        padding-left: 8px;
+    }
+
+    li:last-child:after {
+        content: "";
+        padding-left: 0;
+    }
+}
+
+a:not(:hover),
+.btn-link:not(:hover) {
+    text-decoration: none;
 }
diff --git a/pste/templates/auth/_form.html b/pste/templates/auth/_form.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-7">
             <h2>{{ title }}</h2>
             <hr>
             {% block form %}

diff --git a/pste/templates/auth/login.html b/pste/templates/auth/login.html
@@ -3,22 +3,20 @@
 {% block form %}
     <form action="" method="post" role="form">
         {{ form.hidden_tag() }}
-        <div class="form-group">
+        <div class="mb-3">
             <input type="email" class="form-control" id="email" name="email"
                    aria-label="{{ form.email.label.text }}" placeholder="{{ form.email.label.text }}">
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <input type="password" class="form-control" id="password" name="password"
                    aria-label="{{ form.password.label.text }}" placeholder="{{ form.password.label.text }}">
         </div>
-        <div class="form-group form-check">
-            <div class="float-right">
-                {% if config['ENABLE_REGISTRATION'] %}
-                    <button type="button" class="btn btn-link" aria-label="Register"><a
-                            href="{{ url_for('auth.register') }}" class="text-primary">Register</a></button>
-                {% endif %}
-                <button type="submit" class="btn btn-primary">{{ form.submit.label.text }}</button>
-            </div>
+        <div class="float-end">
+            {% if config['ENABLE_REGISTRATION'] %}
+                <button type="button" class="btn btn-link" aria-label="Register"><a
+                    href="{{ url_for('auth.register') }}" class="text-primary">Register</a></button>
+            {% endif %}
+            <button type="submit" class="btn btn-primary">{{ form.submit.label.text }}</button>
         </div>
     </form>
 {% endblock %}
diff --git a/pste/templates/auth/register.html b/pste/templates/auth/register.html
@@ -3,24 +3,22 @@
 {% block form %}
     <form action="" method="post" role="form">
         {{ form.hidden_tag() }}
-        <div class="form-group">
+        <div class="mb-3">
             <input type="email" class="form-control" id="email" name="email"
                    aria-label="{{ form.email.label.text }}" placeholder="{{ form.email.label.text }}">
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <input type="password" class="form-control" id="password" name="password"
                    aria-label="{{ form.password.label.text }}" placeholder="{{ form.password.label.text }}">
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <input type="password" class="form-control" id="password-confirm" name="confirm"
                    aria-label="{{ form.confirm.label.text }}" placeholder="{{ form.confirm.label.text }}">
         </div>
-        <div class="form-group form-check">
-            <div class="float-right">
-                <button type="button" class="btn btn-link" aria-label="Sign in"><a
-                        href="{{ url_for('auth.login') }}" class="text-primary">Sign in</a></button>
-                <button type="submit" class="btn btn-primary">{{ form.submit.label.text }}</button>
-            </div>
+        <div class="float-end">
+            <button type="button" class="btn btn-link" aria-label="Sign in"><a
+                href="{{ url_for('auth.login') }}" class="text-primary">Sign in</a></button>
+            <button type="submit" class="btn btn-primary">{{ form.submit.label.text }}</button>
         </div>
     </form>
 {% endblock %}
diff --git a/pste/templates/base.html b/pste/templates/base.html
@@ -18,16 +18,12 @@
 
 <div class="container">
     <div class="row justify-content-center">
-        <div class="col-lg-10">
-            <nav class="navbar navbar-light navbar-border navbar-expand-sm" role="navigation">
+        <div class="col-lg-8">
+            <nav class="navbar navbar-light navbar-border navbar-expand-sm mb-3" role="navigation">
                 <a class="navbar-brand" href="{{ url_for('web.index') }}">
                     <img src="{{ url_for('static', filename='img/favicon.png') }}" width="30" height="30" alt="">
                 </a>
                 {% if current_user.is_authenticated %}
-                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
-                            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
                     <div class="collapse navbar-collapse justify-content-end" id="navbarText">
                         <div class="navbar-nav">
                             <a href="{{ url_for('auth.logout') }}" class="nav-item nav-link text-muted">Log out</a>
@@ -78,15 +74,7 @@
     </div>
 </div>
 
-{% assets 'js-jquery' %}
-    <script src="{{ ASSET_URL }}"></script>
-{% endassets %}
-
-{% assets 'js-popper' %}
-    <script src="{{ ASSET_URL }}"></script>
-{% endassets %}
-
-{% assets 'js-bootstrap' %}
+{% assets 'js-app' %}
     <script src="{{ ASSET_URL }}"></script>
 {% endassets %}
 

diff --git a/pste/templates/main/index.html b/pste/templates/main/index.html
@@ -1,21 +1,5 @@
 {% extends 'base.html' %}
 
-{% block stylesheets %}
-    {% assets 'css-dropzone' %}
-        <link rel="stylesheet" href="{{ ASSET_URL }}"/>
-    {% endassets %}
-{% endblock %}
-
-{% block scripts %}
-    {% assets 'js-dropzone' %}
-        <script src="{{ ASSET_URL }}"></script>
-    {% endassets %}
-
-    {% assets 'js-app' %}
-        <script src="{{ ASSET_URL }}"></script>
-    {% endassets %}
-{% endblock %}
-
 {% block content %}
     <div class="row justify-content-center">
         <div class="col-md-10 col-lg-10">

diff --git a/pste/templates/main/paste.html b/pste/templates/main/paste.html
@@ -1,18 +1,12 @@
 {% extends 'base.html' %}
 
-{% block stylesheets %}
-    {% assets 'css-pygments' %}
-        <link rel="stylesheet" href="{{ ASSET_URL }}">
-    {% endassets %}
-{% endblock %}
-
 {% block content %}
     <div class="row">
         <div class="col-sm-4">
             <h4 aria-label="File name">{{ name }}</h4>
         </div>
         <div class="col-sm-8 paste-info">
-            <ul class="list-inline text-secondary text-center float-md-right list-inline-separators">
+            <ul class="list-inline text-secondary float-md-end list-inline-separators">
                 <li class="list-inline-item">
                     <span aria-label="Plain text version">
                         <a href="{{ raw_url }}" class="text-primary">raw</a>

diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "pste"
-version = "0.7.14"
+version = "0.8.0"
 description = "Just a simple file hosting application inspired by the likes of pomf.se and teknik.io."
 authors = ["Lee Watson <[email protected]>"]
 license = "GPL-3.0+"

diff --git a/yarn.lock b/yarn.lock
@@ -2,10 +2,15 @@
 # yarn lockfile v1
 
 
-bootstrap@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
-  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
 
 dropzone@^5.9.3:
   version "5.9.3"
@@ -16,8 +21,3 @@ jquery@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
   integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
-
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==