Merge pull request #99 from aviolaris/1.12.x

Migrate from Bootstrap 4 to Bootstrap 5
aviolaris · Jun 22, 2024 · fda8cb5 · fda8cb5
2 parents 3c75d47 + d2eade1
commit fda8cb5
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 141 deletions.
diff --git a/app/app.py b/app/app.py
@@ -27,7 +27,7 @@
 # Upload folder
 UPLOAD_FOLDER = os.path.join(os.getcwd(), 'uploads')
 # Current version
-CURRENT_VERSION = 'v1.12.0'
+CURRENT_VERSION = 'v1.13.0'
 # Update needed
 UPDATE_NEEDED = bool(update_needed(CURRENT_VERSION, get_latest_version()))
 
@@ -165,7 +165,7 @@ def unfollowers():
     pagination = Pagination(page=page,
                             per_page=per_page,
                             total=total,
-                            css_framework='bootstrap4')
+                            css_framework='bootstrap5')
     return render_template('unfollowers.html',
                            unfollowers=pagination_unfollowers,
                            page=page,

diff --git a/app/static/css/bootstrap4.min.css b/app/static/css/bootstrap4.min.css
diff --git a/app/static/css/bootstrap5.min.css b/app/static/css/bootstrap5.min.css
diff --git a/app/static/css/index.css b/app/static/css/index.css
@@ -1,24 +1,19 @@
 .upload-form-dark {
-    height: 100vh;
     height: 100vh;
     background: black url(../images/background.jpg) no-repeat center;
     background-size: cover;
     position: relative;
+    padding: 20px;
 }
 
 .upload-form-dark form {
     max-width: 440px;
-    min-width: 440px;
     width: 90%;
-    padding: 40px;
+    padding: 40px 20px;
     border-radius: 4px;
-    transform: translate(-50%, -50%);
-    position: absolute;
-    top: 40%;
-    left: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
     color: #e5e5e5;
     box-shadow: 0px -1px 2px 2px #818181;
-    background-color: transparent;
 }
 
 .upload-form-dark form .form-control {
@@ -40,11 +35,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     margin: auto;
 }
 
@@ -103,4 +93,21 @@
 .blink:hover {
     text-decoration: none;
     color: red;
+}
+
+.github-buttons {
+    position: fixed;
+    top: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    z-index: 1000;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.upload-form-dark {
+    position: relative;
+    z-index: 1;
 }
diff --git a/app/static/css/unfollowers.css b/app/static/css/unfollowers.css
@@ -13,7 +13,6 @@ body {
     margin-left: auto;
     color: #dedede;
     background-color: #343434;
-
 }
 
 .page-item.disabled .page-link {
@@ -22,6 +21,10 @@ body {
     border-color: #ddd;
 }
 
+.active > .page-link, .page-link.active {
+    border-color: white;
+}
+
 .table td, .table th {
     padding: .75rem;
     vertical-align: top;
@@ -32,11 +35,29 @@ a {
     color: #fff;
 }
 
-a:hover {
-    color: #11ff00;
-}
-
 .btn-group-lg > .btn, .btn-lg:hover {
     color: black;
     cursor: pointer;
 }
+
+@media (max-width: 576px) {
+    .card {
+        margin: 0 10px;
+    }
+    .table-responsive {
+        overflow-x: auto;
+    }
+    .table th, .table td {
+        white-space: nowrap;
+    }
+    .card-footer {
+        flex-direction: column !important;
+        align-items: flex-start !important;
+    }
+    .pagination-container {
+        width: 100%;
+    }
+    .pagination-container .pagination {
+        justify-content: center;
+    }
+}
diff --git a/app/static/js/bootstrap.min.js b/app/static/js/bootstrap.min.js
diff --git a/app/static/js/bootstrap5.min.js b/app/static/js/bootstrap5.min.js
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -3,102 +3,106 @@
 <head>
     <meta charset="utf-8">
     <title>InstaUnFollowers</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Find out who is not following you back on Instagram.">
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/bootstrap4.min.css') }}">
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/index.css') }}">
-    <script src="{{ url_for('static', filename='js/jquery-3.6.4.slim.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap5.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
+    <script src="{{ url_for('static', filename='js/bootstrap5.min.js') }}"></script>
     <script async defer src="{{ url_for('static', filename='js/buttons.js') }}"></script>
     <script>
         function showNoFileModal() {
-            $('#noFileModal').modal('show');
+            const noFileModal = new bootstrap.Modal(document.getElementById('noFileModal'));
+            noFileModal.show();
         }
-
         function showErrorModal() {
-            $('#errorModal').modal('show');
+            const errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
+            errorModal.show();
         }
     </script>
     {% if request.args.get('invalid_file_structure') == '1' %}
         <script>
-            $(document).ready(function () {
-                showErrorModal()
+            document.addEventListener('DOMContentLoaded', function () {
+                showErrorModal();
             });
         </script>
     {% endif %}
 </head>
 <body>
-<div class="upload-form-dark">
-    <div class="mx-auto pt-5" style="width:280px; border: 2px white">
-        <a class="github-button" href="https://github.com/aviolaris"
-           data-color-scheme="dark_high_contrast"
-           data-size="large"
-           data-show-count="true"
-           aria-label="Follow @aviolaris on GitHub">Follow @aviolaris</a>
-        <a class="github-button" href="https://github.com/aviolaris/instaunfollowers"
-           data-color-scheme="dark_high_contrast"
-           data-icon="octicon-star"
-           data-size="large"
-           data-show-count="true"
-           aria-label="Star aviolaris/instaunfollowers on GitHub">Star</a>
-    </div>
-    <form class="d-flex justify-content-center form-inline my-2 my-lg-0" action="/" method="POST"
+<div class="github-buttons">
+    <a class="github-button" href="https://github.com/aviolaris"
+       data-color-scheme="dark_high_contrast"
+       data-size="large"
+       data-show-count="true"
+       aria-label="Follow Andreas Violaris on GitHub">Follow @aviolaris</a>
+    <a class="github-button" href="https://github.com/aviolaris/instaunfollowers"
+       data-color-scheme="dark_high_contrast"
+       data-icon="octicon-star"
+       data-size="large"
+       data-show-count="true"
+       aria-label="Star InstaUnFollowers on GitHub">Star</a>
+</div>
+<div class="upload-form-dark vh-100 d-flex flex-column justify-content-center align-items-center">
+    <form class="d-flex flex-column align-items-center w-100 px-3" action="/" method="POST"
           enctype="multipart/form-data">
-        <h5 style="padding-bottom: 20px;">Upload your instagram information file.</h5>
-        <input class="form-control form-control-lg" type="file" accept="application/zip" name="file"
-               placeholder="Search">
-        <input type="submit" class="btn-lg btn-outline-light mt-4"
-               onclick="document.querySelector('input[type=file]').files.length ?
-                               this.form.submit() : showNoFileModal(); return false;"
-               value="Upload">
+        <h5 class="pb-3 text-center" aria-live="polite">Upload your Instagram information file.</h5>
+        <input class="form-control form-control-lg mb-3" type="file" accept="application/zip" name="file"
+                placeholder="Search">
+        <button type="submit" class="btn btn-outline-light btn-lg w-50"
+                onclick="document.querySelector('input[type=file]').files.length ?
+                this.form.submit() : showNoFileModal(); return false;">
+            Upload
+        </button>
     </form>
-    {% if session['update_needed'] == True %}
-        <a href="https://github.com/aviolaris/instaunfollowers/releases" class="blink"><b>Update available!</b></a>
+    {% if session['update_needed'] %}
+        <div class="mt-3">
+            <a href="https://github.com/aviolaris/instaunfollowers/releases" class="blink">
+                <b>Update available!</b>
+            </a>
+        </div>
     {% endif %}
-    <div class="modal" tabindex="-1" role="dialog" id="errorModal">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">InstaUnFollowers</h5>
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                </div>
-                <div class="modal-body">
-                    <p style="text-align: justify;">It seems that the structure of this archive is invalid,
-                        which is likely due to periodic modifications made by Meta to Instagram's information
-                        file in order to prevent tools like the present one from operating.
-                        Please file an issue so that the problem can be addressed.</p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary modal-btn"
-                            onclick="window.location.href='https://github.com/aviolaris/instaunfollowers/issues'">
-                        <svg viewBox="0 0 16 16" width="17" height="17" class="align-middle d-inline-block">
-                            <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" fill="white"></path>
-                            <path fill-rule="evenodd"
-                                  d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
-                                  fill="white"></path>
-                        </svg>
-                        File an Issue
-                    </button>
-                    <button type="button" class="btn btn-primary modal-btn"
-                            onclick="window.location.href = '/';">OK
-                    </button>
-                </div>
+</div>
+<div class="modal fade" id="errorModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="errorModalLabel">InstaUnFollowers</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" role="alert">
+                <p style="text-align: justify;">It seems that the structure of this archive is invalid,
+                    which is likely due to periodic modifications made by Meta to Instagram's information
+                    file in order to prevent tools like the present one from operating.
+                    Please file an issue so that the problem can be addressed.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary"
+                        onclick="window.location.href='https://github.com/aviolaris/instaunfollowers/issues'">
+                    <svg viewBox="0 0 16 16" width="17" height="17" class="align-middle d-inline-block">
+                        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" fill="white"></path>
+                        <path fill-rule="evenodd"
+                              d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
+                              fill="white"></path>
+                    </svg>
+                    File an Issue
+                </button>
+                <button type="button" class="btn btn-primary" onclick="window.location.href = '/';">OK</button>
             </div>
         </div>
     </div>
-    <div class="modal" tabindex="-1" role="dialog" id="noFileModal">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">InstaUnFollowers</h5>
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                </div>
-                <div class="modal-body">
-                    <p style="text-align: justify;">You have not chosen a file to upload.</p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary modal-btn" data-dismiss="modal">OK</button>
-                </div>
+</div>
+<div class="modal fade" id="noFileModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="noFileModalLabel">InstaUnFollowers</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" role="alert">
+                <p>You have not chosen a file to upload.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
             </div>
         </div>
     </div>