style: Upgrade to Bootstrap v5.3.3

These changes upgrade the project's styling framework from Bootstrap v4 to Bootstrap v5.3.3. This upgrade also impacts the project's layout by: - Removing the Bootswatch `bootstrap-slate.min.css` file as the theme is now handled by the official Bootswatch node module. - Updating the `main.css` file to accommodate the new Bootstrap classes and make necessary adjustments for elements like badges and form check inputs. - Modifying the `browse_include.twig`, `device_info.twig`, `index.twig`, and `modals/app_start.twig` files to use the new Bootstrap v5 classes and styling. Notably, this involves replacing deprecated classes like "pull-left" and "pull-right" with "float-start" and "float-end" respectively, along with other changes to button styling and form element types. The `views/css/bootstrap.min.css` file is removed because the new Bootstrap CSS is now included through the official `bootstrap` node module. The `views/js/bootstrap.min.js` file is also removed as the Bootstrap v5 require includes its own JavaScript files for its features, no longer requiring a separate Bootstrap JavaScript file. These changes aim to improve the project's styling, responsiveness, and user experience by utilizing the latest version of the popular Bootstrap framework. It also removes redundancy in the project's CSS and JavaScript files, contributing to a more streamlined codebase.
VRPirates · Sep 30, 2024 · 780d7ce · 780d7ce
1 parent 3961e77
commit 780d7ce
Show file tree

Hide file tree

Showing 27 changed files with 380 additions and 376 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "@electron/remote": "2.1.2",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "adbkit-apkreader": "3.2.0",
+    "bootstrap": "^5.3.3",
+    "bootswatch": "^5.3.3",
     "command-exists": "1.2.9",
     "compare-versions": "6.1.1",
     "electron-find": "1.0.7",

diff --git a/views/browse_include.twig b/views/browse_include.twig
@@ -1,6 +1,6 @@
 <div class="card text-light bg-primary">
   <div class="card-header sticky" id="nav-panel">
-    <h4 class="float-left mb-0">
+    <h4 class="float-start mb-0">
       <a
         class="btn btn-md btn-primary"
         onclick="upDir()"
@@ -20,32 +20,33 @@
       </a>
       <span id="path"></span>
     </h4>
-    <h4 class="float-right mb-0">
+    <h4 class="float-end mb-0">
       <button
         class="btn btn-md btn-primary dropdown-toggle"
         type="button"
-        onclick="$id('bookmarksdropdown').toggle()"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
         <i class="fa fa-star" title="Bookmarks"></i>
       </button>
-      <div
+      <ul
         id="bookmarksdropdown"
         class="dropdown-menu"
         style="left: auto; top: auto"
       >
-        <div class="input-group">
+        <li class="input-group">
           <input
             id="bookmarkName"
-            class="ml-3"
+            class="ms-3"
             value=""
             placeholder="Bookmark name"
           >
-          <a class="btn btn-warning btn-sm mr-3" id="addBookmark">
+          <a class="btn btn-warning btn-sm me-3" id="addBookmark">
             <i class="fa fa-plus" title="Add current location"></i
           ></a>
-        </div>
+        </li>
         <hr>
-      </div>
+      </ul>
       <a
         class="btn btn-md btn-primary"
         onclick="refreshDir()"
@@ -63,28 +64,37 @@
       <button
         class="btn btn-md btn-primary dropdown-toggle"
         type="button"
-        onclick="$id('searchdropdownmenu').toggle()"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
         <i class="fa fa-sort"></i> Sort By
       </button>
-      <div
-        id="searchdropdownmenu"
+      <ul
+        id="sortdropdownmenu"
         class="dropdown-menu"
         style="right: 0; left: auto; top: auto"
       >
-        <a class="dropdown-item" onclick="sortFiles('name', 1)">
-          <i class="fa fa-sort-alpha-asc"></i> Name</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('name', 0)">
-          <i class="fa fa-sort-alpha-desc"></i> Name (decending)</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('modified', 1)">
-          <i class="fa fa-sort-amount-asc"></i> Last modified</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('modified', 0)">
-          <i class="fa fa-sort-amount-desc"></i> Last modified (decending)</a
-        >
-      </div>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('name', 1)">
+            <i class="fa fa-sort-alpha-asc"></i> Name</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('name', 0)">
+            <i class="fa fa-sort-alpha-desc"></i> Name (decending)</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('modified', 1)">
+            <i class="fa fa-sort-amount-asc"></i> Last modified</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('modified', 0)">
+            <i class="fa fa-sort-amount-desc"></i> Last modified (decending)</a
+          >
+        </li>
+      </ul>
     </h4>
   </div>
   <div class="card-body">

diff --git a/views/css/bootstrap-slate.min.css b/views/css/bootstrap-slate.min.css
diff --git a/views/css/bootstrap.min.css b/views/css/bootstrap.min.css
diff --git a/views/css/main.css b/views/css/main.css
@@ -40,7 +40,7 @@ a {
 .badge {
   text-shadow: none;
 }
-.badge-success {
+.bg-success {
   background: #5a4;
 }
 .alert-warning {
@@ -250,6 +250,16 @@ html {
   overflow-y: scroll;
 }
 
+.small,
+small {
+  font-size: 0.75em;
+}
+
+.form-check-input:checked {
+  background-color: #bfbfbf;
+  border-color: #bfbfbf;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 6pt;
@@ -366,3 +376,11 @@ html {
 #installedmodaldiv .modal-content {
   min-height: 700px;
 }
+
+#bookmarksdropdown a {
+  text-decoration: none;
+}
+
+#bookmarksdropdown a:hover {
+  text-decoration: underline;
+}
diff --git a/views/device_info.twig b/views/device_info.twig
@@ -20,8 +20,8 @@
       const danger = Math.min(5, Math.max(0, percent - 95));
 
       id('storageDiv').innerHTML = `
-      <small class="pull-left">Used: ${storage.used} of ${storage.size}(${storage.percent})</small>
-      <small class="pull-right">Free: ${storage.free}</small><br/>
+      <small class="float-start">Used: ${storage.used} of ${storage.size}(${storage.percent})</small>
+      <small class="float-end">Free: ${storage.free}</small><br/>
       <div class="progress">
         <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: ${success}%" aria-valuenow="${success}" aria-valuemin="0" aria-valuemax="100"></div>
         <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: ${warning}%" aria-valuenow="${warning}" aria-valuemin="0" aria-valuemax="100"></div>

diff --git a/views/index.twig b/views/index.twig
@@ -22,22 +22,22 @@
           Sidenoder Dir: {{ sidenoderHome }}
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="adbCheckIndicator">
+          <div class="badge bg-warning text-start" id="adbCheckIndicator">
             Android Debug Bridge - checking..
           </div>
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="rcloneCheckIndicator">
+          <div class="badge bg-warning text-start" id="rcloneCheckIndicator">
             RCLONE - checking..
           </div>
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="zipCheckIndicator">
+          <div class="badge bg-warning text-start" id="zipCheckIndicator">
             7zip Archiver - checking..
           </div>
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="scrcpyCheckIndicator">
+          <div class="badge bg-warning text-start" id="scrcpyCheckIndicator">
             SCRCPY - checking..
           </div>
         </h4>
@@ -61,12 +61,12 @@
       if (adb) {
         const el = $id('adbCheckIndicator');
         if (adb.version) {
-          el.removeClass('badge-warning').addClass('badge-success')
+          el.removeClass('bg-warning').addClass('bg-success')
             .html(`<i class="fa fa-check-circle-o"></i> ADB Instaled (${adb.cmd})
             <br/><pre style="font-size: x-small;">${adb.version}</pre>`);
         } else {
-          el.removeClass('badge-warning')
-            .addClass('badge-danger')
+          el.removeClass('bg-warning')
+            .addClass('bg-danger')
             .html(
               `<i class="fa fa-times-circle"></i> ADB Failed. Maybe global installation will be fixed this issue`,
             );
@@ -80,12 +80,12 @@
       if (rclone) {
         const el = $id('rcloneCheckIndicator');
         if (rclone.version) {
-          el.removeClass('badge-warning').addClass('badge-success')
+          el.removeClass('bg-warning').addClass('bg-success')
             .html(`<i class="fa fa-check-circle-o"></i> RCLONE Installed (${rclone.cmd})
             <br/><pre style="font-size: x-small;">${rclone.version}</pre>`);
           if (remote.getGlobal('currentConfiguration').autoMount) checkMount();
         } else {
-          el.removeClass('badge-warning').addClass('badge-danger')
+          el.removeClass('bg-warning').addClass('bg-danger')
             .html(`<i class="fa fa-times-circle-o"></i>
           Can't find RCLONE - try to manualy download latest <a class="btn btn-sm btn-info" onclick="shell.openExternal('https://downloads.rclone.org/')">RClone</a> and set custom location at settings`);
           if (rclone.error)
@@ -98,11 +98,11 @@
       if (zip) {
         const el = $id('zipCheckIndicator');
         if (zip.version) {
-          el.removeClass('badge-warning').addClass('badge-success')
+          el.removeClass('bg-warning').addClass('bg-success')
             .html(`<i class="fa fa-check-circle-o"></i> 7zip Archiver installed (${zip.cmd})
             <br/><pre style="font-size: x-small;">${zip.version}</pre>`);
         } else {
-          el.removeClass('badge-warning').addClass('badge-danger')
+          el.removeClass('bg-warning').addClass('bg-danger')
             .html(`<i class="fa fa-times-circle-o"></i>
           Can't find 7zip Archiver - try to manualy download latest <a class="btn btn-sm btn-info" onclick="shell.openExternal('https://www.7-zip.org/download.html')">7ZIP</a> and set custom location at settings`);
           if (zip.error)
@@ -115,8 +115,8 @@
       if (scrcpy) {
         const el = $id('scrcpyCheckIndicator');
         if (scrcpy.version) {
-          el.removeClass('badge-warning')
-            .addClass('badge-success')
+          el.removeClass('bg-warning')
+            .addClass('bg-success')
             .html(
               `<i class="fa fa-check-circle-o"></i> SCRCPY Installed (${scrcpy.cmd})<br/><pre style="font-size: x-small;">${scrcpy.version}</pre>`,
             );
@@ -125,7 +125,7 @@
             .getGlobal('platform')
             .replace('win', 'windows')
             .replace('mac', 'macos');
-          el.removeClass('badge-warning').addClass('badge-danger')
+          el.removeClass('bg-warning').addClass('bg-danger')
             .html(`<i class="fa fa-times-circle-o"></i>
           SCRCPY global installation not found, please read the <a class="btn btn-sm btn-info" onclick="shell.openExternal('https://github.com/Genymobile/scrcpy#${tag}')">MANUAL</a>`);
           if (scrcpy.error)

diff --git a/views/js/bootstrap.min.js b/views/js/bootstrap.min.js
diff --git a/views/js/bootstrap.min.js.map b/views/js/bootstrap.min.js.map
diff --git a/views/js/browse.js b/views/js/browse.js
@@ -33,11 +33,11 @@ function addBookmark(name, path, write_cfg = true) {
     return alert("Bookmark name can`t be empty");
   }
   const i = $(".dir-bookmark").length;
-  id("bookmarksdropdown").innerHTML += `<div class="dropdown-item">
-    <a class="dir-bookmark" onclick="getDir('${path}');$id('bookmarksdropdown').toggle()">
+  id("bookmarksdropdown").innerHTML += `<li class="dropdown-item">
+    <a class="dir-bookmark link-underline link-underline-opacity-0 link-underline-opacity-100-hover" onclick="getDir('${path}');">
     <i class="fa fa-star-o"></i> ${name}</a>
-    <a class="float-right text-danger" data-i="${i}" onclick="delBookmark(this)"> x</a>
-  </div>`;
+    <a class="float-end text-danger link-underline link-underline-opacity-0" data-i="${i}" onclick="delBookmark(this)"> x</a>
+  </li>`;
   if (write_cfg) {
     const bookmarks = remote.getGlobal("currentConfiguration").dirBookmarks;
     bookmarks.push({ name, path });
@@ -198,7 +198,7 @@ function loadDir(list) {
     // console.log(item);
     if (!item.createdAt) {
       cards_first.unshift(
-        `<div class="listitem badge badge-danger"><i class="fa fa-times-circle-o"></i> ${item.name}</div>`,
+        `<div class="listitem badge bg-danger"><i class="fa fa-times-circle-o"></i> ${item.name}</div>`,
       );
       continue;
     }
@@ -337,7 +337,6 @@ function sortFiles(key, asc) {
 
   sortElements($id("browseCardBody"), key, asc);
   sortFileElements($id("listTable"), key, asc);
-  $id("searchdropdownmenu").hide();
 
   ipcRenderer.send("change_config", { key: "sortFiles", val: key + suffix });
 }

diff --git a/views/js/search.js b/views/js/search.js
@@ -358,7 +358,6 @@ function sortBy(key, asc) {
 function sortItems(key, asc) {
   sortElements($("#browseCardBody"), key, asc);
   sortElements($("#listTable"), key, asc);
-  $("#searchdropdownmenu").hide();
 }
 
 /**