From 711352fd407dfed3721dc50699fe64d877f0034f Mon Sep 17 00:00:00 2001
From: Saurabh Mankar <mankar.saurabh@gmail.com>
Date: Sat, 19 Oct 2024 17:12:50 -0500
Subject: [PATCH 1/2] Fixes #18 Refactor - with _ for Ids

---
 cardie/main/templates/authentication.html     |  8 +--
 cardie/main/templates/editor.html             | 10 ++--
 cardie/main/templates/home.html               | 20 +++----
 cardie/static/main/authentication.css         | 14 ++---
 cardie/static/main/editor.css                 | 10 ++--
 cardie/static/main/home.css                   | 34 ++++++------
 .../scripts/authentication/authentication.js  | 50 +++++++++---------
 cardie/static/main/scripts/editor/icons.js    | 22 ++++----
 cardie/static/main/scripts/home/home.js       |  6 +--
 cardie/staticfiles/admin/css/base.css         | 52 +++++++++----------
 cardie/staticfiles/admin/css/changelists.css  | 44 ++++++++--------
 cardie/staticfiles/admin/css/nav_sidebar.css  | 48 ++++++++---------
 cardie/staticfiles/admin/css/responsive.css   | 36 ++++++-------
 .../staticfiles/admin/css/responsive_rtl.css  |  6 +--
 cardie/staticfiles/admin/css/rtl.css          | 10 ++--
 cardie/staticfiles/admin/js/actions.js        |  4 +-
 .../staticfiles/admin/js/prepopulate_init.js  |  2 +-
 cardie/staticfiles/main/authentication.css    | 14 ++---
 cardie/staticfiles/main/editor.css            | 10 ++--
 cardie/staticfiles/main/home.css              | 34 ++++++------
 .../scripts/authentication/authentication.js  | 50 +++++++++---------
 .../staticfiles/main/scripts/editor/icons.js  | 22 ++++----
 cardie/staticfiles/main/scripts/home/home.js  |  6 +--
 23 files changed, 256 insertions(+), 256 deletions(-)

diff --git a/cardie/main/templates/authentication.html b/cardie/main/templates/authentication.html
index c8468e0..3adc8e4 100644
--- a/cardie/main/templates/authentication.html
+++ b/cardie/main/templates/authentication.html
@@ -13,7 +13,7 @@
 {% endblock %}
 
 {% block body %}
-    <div id="authentication-box" x-data="box_param_check()">
+    <div id="authentication_box" x-data="box_param_check()">
         {% csrf_token %}
         <img id="authentication-box-image"
              @click="window.location.href = server_ip"
@@ -24,7 +24,7 @@
             <i class="ph-bold ph-warning-octagon ui_status_icon"></i>
             <p class="ui_status_text">Critical status box</p>
         </div>
-        <div id="signin-box" x-show="sign_in" x-transition:enter.delay.200ms>
+        <div id="signin_box" x-show="sign_in" x-transition:enter.delay.200ms>
             <p class="ui_text_header">
                 <i class="ph-bold ph-keyhole"></i> Sign In
             </p>
@@ -37,7 +37,7 @@
                    type="password"
                    class="ui_input_generic"
                    placeholder="Password">
-            <button id="signin-signin" class="ui_button_large">
+            <button id="signin_signin" class="ui_button_large">
                 <strong>Sign In</strong> <i class="ph-bold ph-sign-in"></i>
             </button>
             <button id="signin-createaccount"
@@ -65,7 +65,7 @@
                    type="text"
                    class="ui_input_generic"
                    placeholder="Email">
-            <button id="createaccount-createaccount" class="ui_button_large">
+            <button id="createaccount_createaccount" class="ui_button_large">
                 <strong>Create Account</strong> <i class="ph-bold ph-user-plus"></i>
             </button>
             <button id="createaccount-signin"
diff --git a/cardie/main/templates/editor.html b/cardie/main/templates/editor.html
index 89413db..fba7d25 100644
--- a/cardie/main/templates/editor.html
+++ b/cardie/main/templates/editor.html
@@ -143,17 +143,17 @@
             <div class="ui_separator_horizontal"></div>
         </div>
     </div>
-    <div id="editor-iconselector">
-        <div id="editor-iconselector-top">
+    <div id="editor_iconselector">
+        <div id="editor_iconselector_top">
             <input type="text"
                    class="ui_input_generic"
-                   id="editor-iconselector-top-search"
+                   id="editor_iconselector_top_search"
                    placeholder="Search for an icon">
-            <button class="ui_button_icon" id="editor-iconselector-top-close">
+            <button class="ui_button_icon" id="editor_iconselector_top_close">
                 <i class="ph-bold ph-x"></i>
             </button>
         </div>
-        <div id="editor-iconselector-icons"></div>
+        <div id="editor_iconselector_icons"></div>
     </div>
     <div id="editor_rename">
         <div id="editor_rename_top">
diff --git a/cardie/main/templates/home.html b/cardie/main/templates/home.html
index 01c30f3..5df3e43 100644
--- a/cardie/main/templates/home.html
+++ b/cardie/main/templates/home.html
@@ -8,16 +8,16 @@
     <link rel="stylesheet" type="text/css" href="{% static '/main/home.css' %}">
 {% endblock %}
 {% block body %}
-    <div id="home-top">
-        <div id="home-top-logo">
-            <img id="home-top-image" src="{% static '/main/images/logo_light.png' %}">
-            <p id="home-top-text" class="ui_text_subheader_left">Hello, {{ username }}</p>
+    <div id="home_top">
+        <div id="home_top_logo">
+            <img id="home_top_image" src="{% static '/main/images/logo_light.png' %}">
+            <p id="home_top_text" class="ui_text_subheader_left">Hello, {{ username }}</p>
         </div>
-        <div id="home-top-profile" x-data="{ open: false }" @click="open = !open">
-            <button id="home-top-username" class="ui_button_small">
+        <div id="home_top_profile" x-data="{ open: false }" @click="open = !open">
+            <button id="home_top_username" class="ui_button_small">
                 {{ username }} <i class="ph-bold ph-caret-down"></i>
             </button>
-            <div id="home-top-profile-dropdown" x-show="open" x-transition>
+            <div id="home_top_profile_dropdown" x-show="open" x-transition>
                 <button class="ui_button_small" @click="log_out()">
                     <i class="ph-bold ph-sign-out"></i> Log Out
                 </button>
@@ -25,7 +25,7 @@
         </div>
     </div>
     <div x-data="{ cards: true, cards_disabled: true, wallet_disabled: false }">
-        <div id="home-navigation">
+        <div id="home_navigation">
             <button id="home-navigation-wallet"
                     class="ui_button_grid"
                     @click="cards = false; cards_disabled = false; wallet_disabled = true;"
@@ -39,7 +39,7 @@
                 My Cards <i class="ph-bold ph-cards"></i>
             </button>
         </div>
-        <div id="home-wallet" x-show="!cards" x-transition>
+        <div id="home_wallet" x-show="!cards" x-transition>
             <p class="ui_text_subheader_left">
                 <i class="ph-bold ph-wallet"></i> My Wallet
             </p>
@@ -49,7 +49,7 @@
                 <p class="ui_status_text">You don't have any cards saved yet! Once you do, they will appear here for you to find later.</p>
             </div>
         </div>
-        <div id="home-cards" x-show="cards" x-transition>
+        <div id="home_cards" x-show="cards" x-transition>
             <p class="ui_text_subheader_left">
                 <i class="ph-bold ph-cards"></i> My Cards
             </p>
diff --git a/cardie/static/main/authentication.css b/cardie/static/main/authentication.css
index 165cb7d..2da02ab 100644
--- a/cardie/static/main/authentication.css
+++ b/cardie/static/main/authentication.css
@@ -2,7 +2,7 @@ html {
     background: rgb(37, 40, 49);
 }
 
-#authentication-box {
+#authentication_box {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -14,7 +14,7 @@ html {
     z-index: 1;
 }
 
-#authentication-box-image {
+#authentication_box_image {
     width: clamp(30vh, 300px, 30vw);
     height: auto;
 
@@ -25,31 +25,31 @@ html {
     transition: var(--default-transition);
 }
 
-#authentication-box-image:hover {
+#authentication_box_image:hover {
     scale: 1.05;
 }
 
-#signin-box {
+#signin_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#createaccount-box {
+#createaccount_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#authentication-error {
+#authentication_error {
     opacity: 0;
     scale: 0.8;
     transition: var(--default-transition);
 }
 
-#authentication-error.show {
+#authentication_error.show {
     opacity: 1;
     scale: 1;
 }
diff --git a/cardie/static/main/editor.css b/cardie/static/main/editor.css
index 77c6a6b..445d395 100644
--- a/cardie/static/main/editor.css
+++ b/cardie/static/main/editor.css
@@ -173,7 +173,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
@@ -207,7 +207,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         backdrop-filter: var(--default-glass-blur);
     
@@ -235,18 +235,18 @@ html {
     }
 }
 
-#editor-iconselector-top {
+#editor_iconselector_top {
     display: flex;
     flex-direction: row;
 }
 
-#editor-iconselector-top-search {
+#editor_iconselector_top_search {
     height: clamp(2vh, 20px, 2vw);
     max-height: clamp(2vh, 20px, 2vw);
     margin-bottom: clamp(1vh, 10px, 1vw);
 }
 
-#editor-iconselector-icons {
+#editor_iconselector_icons {
     display: flex;
     flex-wrap: wrap;
     overflow-y: auto;
diff --git a/cardie/static/main/home.css b/cardie/static/main/home.css
index 47fe569..f215595 100644
--- a/cardie/static/main/home.css
+++ b/cardie/static/main/home.css
@@ -5,7 +5,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -15,29 +15,29 @@ html {
         margin-top: clamp(5vh, 50px, 5vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(6vh, 60px, 6vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(12vh, 120px, 12vw);
         margin-bottom: clamp(2vh, 20px, 2vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(30vh, 300px, 30vw);
         height: auto;
         transition: var(--default-transition);
@@ -48,7 +48,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -58,29 +58,29 @@ html {
         margin-top: clamp(1vh, 10px, 1vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(2vh, 20px, 2vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(2vh, 20px, 2vw);
         margin-bottom: clamp(1vh, 10px, 1vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(20vh, 200px, 20vw);
         height: auto;
         transition: var(--default-transition);
@@ -88,7 +88,7 @@ html {
     }
 }
 
-#home-top-image:hover {
+#home_top_image:hover {
     scale: 1.05;
 }
 
@@ -137,15 +137,15 @@ html {
     width: fit-content;
 }
 
-#home-top-profile {
+#home_top_profile {
     position: relative;
 }
 
-#home-top-username {
+#home_top_username {
     height: fit-content;
 }
 
-#home-top-profile-dropdown {
+#home_top_profile_dropdown {
     position: absolute;
     top: 30%;
 
@@ -158,7 +158,7 @@ html {
     width: fit-content;
 }
 
-#home-top-profile-dropdown > button {
+#home_top_profile_dropdown > button {
     white-space: nowrap;
 }
 
diff --git a/cardie/static/main/scripts/authentication/authentication.js b/cardie/static/main/scripts/authentication/authentication.js
index f6656a4..a92a3b4 100644
--- a/cardie/static/main/scripts/authentication/authentication.js
+++ b/cardie/static/main/scripts/authentication/authentication.js
@@ -14,18 +14,18 @@ try {
 
 function show_warning(warning) {
     log("WARNING", warning)
-    document.querySelector("#authentication-error > p").innerText = warning;
-    document.querySelector("#authentication-error").style.display = "flex";
+    document.querySelector("#authentication_error > p").innerText = warning;
+    document.querySelector("#authentication_error").style.display = "flex";
 
     setTimeout(function() {
-        document.querySelector("#authentication-error").classList.add("show");
+        document.querySelector("#authentication_error").classList.add("show");
     }, 100);
 }
 
 async function sign_in() {
     log("INFO", "Signing the user in...");
-    var username = document.querySelector("#signin-username").value;
-    var password = document.querySelector("#signin-password").value;
+    var username = document.querySelector("#signin_username").value;
+    var password = document.querySelector("#signin_password").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/signin", {
@@ -90,9 +90,9 @@ async function sign_in() {
 
 async function create_account() {
     log("INFO", "Creating an account for the user...");
-    var username = document.querySelector("#createaccount-username").value;
-    var password = document.querySelector("#createaccount-password").value;
-    var email = document.querySelector("#createaccount-email").value;
+    var username = document.querySelector("#createaccount_username").value;
+    var password = document.querySelector("#createaccount_password").value;
+    var email = document.querySelector("#createaccount_email").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/createaccount", {
@@ -171,35 +171,35 @@ async function create_account() {
 }
 
 function check_sign_in() {
-    document.querySelector("#signin-signin").disabled = !(
-        document.querySelector("#signin-username").value != "" && 
-        document.querySelector("#signin-password").value != ""
+    document.querySelector("#signin_signin").disabled = !(
+        document.querySelector("#signin_username").value != "" && 
+        document.querySelector("#signin_password").value != ""
     );
 }
 
 function check_create_account() {
-    document.querySelector("#createaccount-createaccount").disabled = !(
-        document.querySelector("#createaccount-username").value != "" && 
-        document.querySelector("#createaccount-password").value != "" && 
-        document.querySelector("#createaccount-email").value != ""
+    document.querySelector("#createaccount_createaccount").disabled = !(
+        document.querySelector("#createaccount_username").value != "" && 
+        document.querySelector("#createaccount_password").value != "" && 
+        document.querySelector("#createaccount_email").value != ""
     );
 }
 
-document.querySelector("#signin-signin").addEventListener("click", sign_in);
-document.querySelector("#createaccount-createaccount").addEventListener("click", create_account);
+document.querySelector("#signin_signin").addEventListener("click", sign_in);
+document.querySelector("#createaccount_createaccount").addEventListener("click", create_account);
 
-document.querySelector("#signin-username").addEventListener("input", check_sign_in);
-document.querySelector("#signin-password").addEventListener("input", check_sign_in);
-document.querySelector("#createaccount-username").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-password").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-email").addEventListener("input", check_create_account);
+document.querySelector("#signin_username").addEventListener("input", check_sign_in);
+document.querySelector("#signin_password").addEventListener("input", check_sign_in);
+document.querySelector("#createaccount_username").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_password").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_email").addEventListener("input", check_create_account);
 
-document.querySelector("#signin-signin").disabled = true;
-document.querySelector("#createaccount-createaccount").disabled = true;
+document.querySelector("#signin_signin").disabled = true;
+document.querySelector("#createaccount_createaccount").disabled = true;
 
 document.addEventListener("keyup", (event) => {
     if (event.code === "Enter") {
-        if (document.querySelector("#signin-box").style.display != "none") {
+        if (document.querySelector("#signin_box").style.display != "none") {
             sign_in();
             
         } else {
diff --git a/cardie/static/main/scripts/editor/icons.js b/cardie/static/main/scripts/editor/icons.js
index acca6a9..7a75e26 100644
--- a/cardie/static/main/scripts/editor/icons.js
+++ b/cardie/static/main/scripts/editor/icons.js
@@ -22,7 +22,7 @@ function create_icon(icon) {
 
     itemsData.push(div_element);
 
-    document.querySelector("#editor-iconselector-icons").appendChild(div_element)
+    document.querySelector("#editor_iconselector_icons").appendChild(div_element)
 }
 
 function render_icons(icons) {
@@ -44,8 +44,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
 // Function to render items
 const renderItems = (filteredItems) => {
-    document.querySelector("#editor-iconselector-icons").innerHTML = '';
-    filteredItems.forEach(item => document.querySelector("#editor-iconselector-icons").appendChild(item));
+    document.querySelector("#editor_iconselector_icons").innerHTML = '';
+    filteredItems.forEach(item => document.querySelector("#editor_iconselector_icons").appendChild(item));
 };
 
 // Function to sort items alphabetically by the icon attribute
@@ -60,7 +60,7 @@ const filterItems = (query) => {
 };
 
 // Event listener for the search box
-document.querySelector("#editor-iconselector-top-search").addEventListener('input', (e) => {
+document.querySelector("#editor_iconselector_top_search").addEventListener('input', (e) => {
     const query = e.target.value;
     const filteredItems = filterItems(query);
     const sortedItems = sortItems(filteredItems);
@@ -71,17 +71,17 @@ function show_iconselector(item) {
     icon_selected_item = item;
     show_background_blur();
 
-    document.querySelector("#editor-iconselector").style.display = "flex";
-    document.querySelector("#editor-iconselector").classList.remove("hide-iconselector");
-    document.querySelector("#editor-iconselector").classList.add("show-iconselector");
+    document.querySelector("#editor_iconselector").style.display = "flex";
+    document.querySelector("#editor_iconselector").classList.remove("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("show-iconselector");
 }
 
 function hide_iconselector() {
-    document.querySelector("#editor-iconselector").classList.add("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("hide-iconselector");
 
     setTimeout(function() {
-        document.querySelector("#editor-iconselector").classList.remove("show-iconselector");
-        document.querySelector("#editor-iconselector").style.display = "none";
+        document.querySelector("#editor_iconselector").classList.remove("show-iconselector");
+        document.querySelector("#editor_iconselector").style.display = "none";
         hide_background_blur();
     }, 500);
 }
@@ -97,6 +97,6 @@ function icon_clicked(event) {
     hide_iconselector();
 }
 
-document.querySelector("#editor-iconselector-top-close").addEventListener("click", (event) => {
+document.querySelector("#editor_iconselector_top_close").addEventListener("click", (event) => {
     hide_iconselector();
 });
\ No newline at end of file
diff --git a/cardie/static/main/scripts/home/home.js b/cardie/static/main/scripts/home/home.js
index aaceeaf..f57d4f2 100644
--- a/cardie/static/main/scripts/home/home.js
+++ b/cardie/static/main/scripts/home/home.js
@@ -90,7 +90,7 @@ function create_home_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-cards").appendChild(div);
+    document.querySelector("#home_cards").appendChild(div);
 }
 
 function create_wallet_card(uuid, name) {
@@ -137,7 +137,7 @@ function create_wallet_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-wallet").appendChild(div);
+    document.querySelector("#home_wallet").appendChild(div);
 }
 
 function home_wallet_view(event) {
@@ -244,7 +244,7 @@ async function get_wallet() {
     });
 }
 
-document.querySelector("#home-top-image").addEventListener("click", (event) => {
+document.querySelector("#home_top_image").addEventListener("click", (event) => {
     window.location.href = server_ip;
 });
 
diff --git a/cardie/staticfiles/admin/css/base.css b/cardie/staticfiles/admin/css/base.css
index 44f2fc8..cfc25bb 100644
--- a/cardie/staticfiles/admin/css/base.css
+++ b/cardie/staticfiles/admin/css/base.css
@@ -807,15 +807,15 @@ a.deletelink:focus, a.deletelink:hover {
 
 /* OBJECT HISTORY */
 
-#change-history table {
+#change_history table {
     width: 100%;
 }
 
-#change-history table tbody th {
+#change_history table tbody th {
     width: 16em;
 }
 
-#change-history .paginator {
+#change_history .paginator {
     color: var(--body-quiet-color);
     border-bottom: 1px solid var(--hairline-color);
     background: var(--body-bg);
@@ -866,12 +866,12 @@ a.deletelink:focus, a.deletelink:hover {
     width: 600px;
 }
 
-#content-main {
+#content_main {
     float: left;
     width: 100%;
 }
 
-#content-related {
+#content_related {
     float: right;
     width: 260px;
     position: relative;
@@ -893,13 +893,13 @@ a.deletelink:focus, a.deletelink:hover {
     margin-left: 300px;
 }
 
-.colSM #content-related {
+.colSM #content_related {
     float: left;
     margin-right: 0;
     margin-left: -300px;
 }
 
-.colSM #content-main {
+.colSM #content_main {
     float: right;
 }
 
@@ -920,7 +920,7 @@ a.deletelink:focus, a.deletelink:hover {
     color: var(--header-color);
 }
 
-#header a:link, #header a:visited, #logout-form button {
+#header a:link, #header a:visited, #logout_form button {
     color: var(--header-link-color);
 }
 
@@ -932,7 +932,7 @@ a.deletelink:focus, a.deletelink:hover {
     display: flex;
 }
 
-#site-name {
+#site_name {
     padding: 0;
     margin: 0;
     margin-inline-end: 20px;
@@ -941,7 +941,7 @@ a.deletelink:focus, a.deletelink:hover {
     color: var(--header-branding-color);
 }
 
-#site-name a:link, #site-name a:visited {
+#site_name a:link, #site_name a:visited {
     color: var(--accent);
 }
 
@@ -957,24 +957,24 @@ a.deletelink:focus, a.deletelink:hover {
     text-decoration: none;
 }
 
-#logout-form {
+#logout_form {
     display: inline;
 }
 
-#logout-form button {
+#logout_form button {
     background: none;
     border: 0;
     cursor: pointer;
     font-family: var(--font-family-primary);
 }
 
-#user-tools {
+#user_tools {
     float: right;
     margin: 0 0 0 20px;
     text-align: right;
 }
 
-#user-tools, #logout-form button{
+#user_tools, #logout_form button{
     padding: 0;
     font-weight: 300;
     font-size: 0.6875rem;
@@ -982,57 +982,57 @@ a.deletelink:focus, a.deletelink:hover {
     text-transform: uppercase;
 }
 
-#user-tools a, #logout-form button {
+#user_tools a, #logout_form button {
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
 
-#user-tools a:focus, #user-tools a:hover,
-#logout-form button:active, #logout-form button:hover {
+#user_tools a:focus, #user_tools a:hover,
+#logout_form button:active, #logout_form button:hover {
     text-decoration: none;
     border-bottom: 0;
 }
 
-#logout-form button:active, #logout-form button:hover {
+#logout_form button:active, #logout_form button:hover {
     margin-bottom: 1px;
 }
 
 /* SIDEBAR */
 
-#content-related {
+#content_related {
     background: var(--darkened-bg);
 }
 
-#content-related .module {
+#content_related .module {
     background: none;
 }
 
-#content-related h3 {
+#content_related h3 {
     color: var(--body-quiet-color);
     padding: 0 16px;
     margin: 0 0 16px;
 }
 
-#content-related h4 {
+#content_related h4 {
     font-size: 0.8125rem;
 }
 
-#content-related p {
+#content_related p {
     padding-left: 16px;
     padding-right: 16px;
 }
 
-#content-related .actionlist {
+#content_related .actionlist {
     padding: 0;
     margin: 16px;
 }
 
-#content-related .actionlist li {
+#content_related .actionlist li {
     line-height: 1.2;
     margin-bottom: 10px;
     padding-left: 18px;
 }
 
-#content-related .module h2 {
+#content_related .module h2 {
     background: none;
     padding: 16px;
     margin-bottom: 16px;
diff --git a/cardie/staticfiles/admin/css/changelists.css b/cardie/staticfiles/admin/css/changelists.css
index 573c389..b6f70f8 100644
--- a/cardie/staticfiles/admin/css/changelists.css
+++ b/cardie/staticfiles/admin/css/changelists.css
@@ -34,7 +34,7 @@
     padding-right: 1em;
 }
 
-#changelist-form .results {
+#changelist_form .results {
     overflow-x: auto;
     width: 100%;
 }
@@ -120,18 +120,18 @@
     border-color: var(--body-quiet-color);
 }
 
-#changelist-search img {
+#changelist_search img {
     vertical-align: middle;
     margin-right: 4px;
 }
 
-#changelist-search .help {
+#changelist_search .help {
     word-break: break-word;
 }
 
 /* FILTER COLUMN */
 
-#changelist-filter {
+#changelist_filter {
     flex: 0 0 240px;
     order: 1;
     background: var(--darkened-bg);
@@ -139,7 +139,7 @@
     margin: 0 0 0 30px;
 }
 
-#changelist-filter h2 {
+#changelist_filter h2 {
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -148,75 +148,75 @@
     border-bottom: none;
 }
 
-#changelist-filter h3,
-#changelist-filter details summary {
+#changelist_filter h3,
+#changelist_filter details summary {
     font-weight: 400;
     padding: 0 15px;
     margin-bottom: 10px;
     cursor: pointer;
 }
 
-#changelist-filter details summary > * {
+#changelist_filter details summary > * {
     display: inline;
 }
 
-#changelist-filter details > summary {
+#changelist_filter details > summary {
     list-style-type: none;
 }
 
-#changelist-filter details > summary::-webkit-details-marker {
+#changelist_filter details > summary::-webkit-details-marker {
     display: none;
 }
 
-#changelist-filter details > summary::before {
+#changelist_filter details > summary::before {
     content: '→';
     font-weight: bold;
     color: var(--link-hover-color);
 }
 
-#changelist-filter details[open] > summary::before {
+#changelist_filter details[open] > summary::before {
     content: '↓';
 }
 
-#changelist-filter ul {
+#changelist_filter ul {
     margin: 5px 0;
     padding: 0 15px 15px;
     border-bottom: 1px solid var(--hairline-color);
 }
 
-#changelist-filter ul:last-child {
+#changelist_filter ul:last-child {
     border-bottom: none;
 }
 
-#changelist-filter li {
+#changelist_filter li {
     list-style-type: none;
     margin-left: 0;
     padding-left: 0;
 }
 
-#changelist-filter a {
+#changelist_filter a {
     display: block;
     color: var(--body-quiet-color);
     word-break: break-word;
 }
 
-#changelist-filter li.selected {
+#changelist_filter li.selected {
     border-left: 5px solid var(--hairline-color);
     padding-left: 10px;
     margin-left: -15px;
 }
 
-#changelist-filter li.selected a {
+#changelist_filter li.selected a {
     color: var(--link-selected-fg);
 }
 
-#changelist-filter a:focus, #changelist-filter a:hover,
-#changelist-filter li.selected a:focus,
-#changelist-filter li.selected a:hover {
+#changelist_filter a:focus, #changelist_filter a:hover,
+#changelist_filter li.selected a:focus,
+#changelist_filter li.selected a:hover {
     color: var(--link-hover-color);
 }
 
-#changelist-filter #changelist-filter-extra-actions {
+#changelist_filter #changelist_filter_extra_actions {
     font-size: 0.8125rem;
     margin-bottom: 10px;
     border-bottom: 1px solid var(--hairline-color);
diff --git a/cardie/staticfiles/admin/css/nav_sidebar.css b/cardie/staticfiles/admin/css/nav_sidebar.css
index 7eb0de9..02a23a0 100644
--- a/cardie/staticfiles/admin/css/nav_sidebar.css
+++ b/cardie/staticfiles/admin/css/nav_sidebar.css
@@ -31,7 +31,7 @@
     background-color: var(--darkened-bg);
 }
 
-#nav-sidebar {
+#nav_sidebar {
     z-index: 15;
     flex: 0 0 275px;
     left: -276px;
@@ -42,7 +42,7 @@
     overflow: auto;
 }
 
-[dir="rtl"] #nav-sidebar {
+[dir="rtl"] #nav_sidebar {
     border-left: 1px solid var(--hairline-color);
     border-right: 0;
     left: 0;
@@ -59,75 +59,75 @@
     content: '\00AB';
 }
 
-.main > #nav-sidebar {
+.main > #nav_sidebar {
     visibility: hidden;
 }
 
-.main.shifted > #nav-sidebar {
+.main.shifted > #nav_sidebar {
     margin-left: 0;
     visibility: visible;
 }
 
-[dir="rtl"] .main.shifted > #nav-sidebar {
+[dir="rtl"] .main.shifted > #nav_sidebar {
     margin-right: 0;
 }
 
-#nav-sidebar .module th {
+#nav_sidebar .module th {
     width: 100%;
     overflow-wrap: anywhere;
 }
 
-#nav-sidebar .module th,
-#nav-sidebar .module caption {
+#nav_sidebar .module th,
+#nav_sidebar .module caption {
     padding-left: 16px;
 }
 
-#nav-sidebar .module td {
+#nav_sidebar .module td {
     white-space: nowrap;
 }
 
-[dir="rtl"] #nav-sidebar .module th,
-[dir="rtl"] #nav-sidebar .module caption {
+[dir="rtl"] #nav_sidebar .module th,
+[dir="rtl"] #nav_sidebar .module caption {
     padding-left: 8px;
     padding-right: 16px;
 }
 
-#nav-sidebar .current-app .section:link,
-#nav-sidebar .current-app .section:visited {
+#nav_sidebar .current-app .section:link,
+#nav_sidebar .current-app .section:visited {
     color: var(--header-color);
     font-weight: bold;
 }
 
-#nav-sidebar .current-model {
+#nav_sidebar .current-model {
     background: var(--selected-row);
 }
 
 @media (forced-colors: active) {
-    #nav-sidebar .current-model {
+    #nav_sidebar .current-model {
         background-color: SelectedItem;
     }
 }
 
-.main > #nav-sidebar + .content {
+.main > #nav_sidebar + .content {
     max-width: calc(100% - 23px);
 }
 
-.main.shifted > #nav-sidebar + .content {
+.main.shifted > #nav_sidebar + .content {
     max-width: calc(100% - 299px);
 }
 
 @media (max-width: 767px) {
-    #nav-sidebar, #toggle-nav-sidebar {
+    #nav_sidebar, #toggle_nav_sidebar {
         display: none;
     }
 
-    .main > #nav-sidebar + .content,
-    .main.shifted > #nav-sidebar + .content {
+    .main > #nav_sidebar + .content,
+    .main.shifted > #nav_sidebar + .content {
         max-width: 100%;
     }
 }
 
-#nav-filter {
+#nav_filter {
     width: 100%;
     box-sizing: border-box;
     padding: 2px 5px;
@@ -137,14 +137,14 @@
     color: var(--body-fg);
 }
 
-#nav-filter:focus {
+#nav_filter:focus {
     border-color: var(--body-quiet-color);
 }
 
-#nav-filter.no-results {
+#nav_filter.no-results {
     background: var(--message-error-bg);
 }
 
-#nav-sidebar table {
+#nav_sidebar table {
     width: 100%;
 }
diff --git a/cardie/staticfiles/admin/css/responsive.css b/cardie/staticfiles/admin/css/responsive.css
index bb53945..3db92f2 100644
--- a/cardie/staticfiles/admin/css/responsive.css
+++ b/cardie/staticfiles/admin/css/responsive.css
@@ -43,19 +43,19 @@ input[type="submit"], button {
         justify-content: flex-start;
     }
 
-    #site-name {
+    #site_name {
         margin: 0 0 8px;
         line-height: 1.2;
     }
 
-    #user-tools {
+    #user_tools {
         margin: 0;
         font-weight: 400;
         line-height: 1.85;
         text-align: left;
     }
 
-    #user-tools a {
+    #user_tools a {
         display: inline-block;
         line-height: 1.4;
     }
@@ -66,11 +66,11 @@ input[type="submit"], button {
         width: auto;
     }
 
-    #content-related {
+    #content_related {
         margin-right: -290px;
     }
 
-    .colSM #content-related {
+    .colSM #content_related {
         margin-left: -290px;
     }
 
@@ -97,13 +97,13 @@ input[type="submit"], button {
         padding: 15px;
     }
 
-    #changelist-search > div {
+    #changelist_search > div {
         display: flex;
         flex-wrap: nowrap;
         max-width: 480px;
     }
 
-    #changelist-search label {
+    #changelist_search label {
         line-height: 1.375rem;
     }
 
@@ -118,7 +118,7 @@ input[type="submit"], button {
         flex: 0 1 auto;
     }
 
-    #changelist-search .quiet {
+    #changelist_search .quiet {
         width: 0;
         flex: 1 0 auto;
         margin: 5px 0 0 25px;
@@ -151,7 +151,7 @@ input[type="submit"], button {
         margin: 0 10px 0 0;
     }
 
-    #changelist-filter {
+    #changelist_filter {
         flex-basis: 200px;
     }
 
@@ -414,7 +414,7 @@ input[type="submit"], button {
         padding: 15px 20px;
     }
 
-    .login #site-name {
+    .login #site_name {
         margin: 0;
     }
 
@@ -464,16 +464,16 @@ input[type="submit"], button {
         margin: 0;
     }
 
-    #content-related, .colSM #content-related {
+    #content_related, .colSM #content_related {
         width: 100%;
         margin: 0;
     }
 
-    #content-related .module {
+    #content_related .module {
         margin-bottom: 0;
     }
 
-    #content-related .module h2 {
+    #content_related .module h2 {
         padding: 10px 15px;
         font-size: 1rem;
     }
@@ -489,7 +489,7 @@ input[type="submit"], button {
         padding: 10px;
     }
 
-    #changelist-filter {
+    #changelist_filter {
         margin-left: 0;
     }
 
@@ -506,7 +506,7 @@ input[type="submit"], button {
         flex: 1 0 100%;
     }
 
-    #changelist-filter {
+    #changelist_filter {
         position: static;
         width: auto;
         margin-top: 30px;
@@ -840,7 +840,7 @@ input[type="submit"], button {
         padding: 15px;
     }
 
-    .login #content-main {
+    .login #content_main {
         float: none;
     }
 
@@ -952,12 +952,12 @@ input[type="submit"], button {
 
     /* History */
 
-    table#change-history tbody th, table#change-history tbody td {
+    table#change_history tbody th, table#change_history tbody td {
         font-size: 0.8125rem;
         word-break: break-word;
     }
 
-    table#change-history tbody th {
+    table#change_history tbody th {
         width: auto;
     }
 
diff --git a/cardie/staticfiles/admin/css/responsive_rtl.css b/cardie/staticfiles/admin/css/responsive_rtl.css
index 31dc8ff..a1c6f1d 100644
--- a/cardie/staticfiles/admin/css/responsive_rtl.css
+++ b/cardie/staticfiles/admin/css/responsive_rtl.css
@@ -5,7 +5,7 @@
         margin-right: 0;
     }
 
-    [dir="rtl"] #user-tools {
+    [dir="rtl"] #user_tools {
         text-align: right;
     }
 
@@ -24,7 +24,7 @@
     [dir="rtl"] .filtered #toolbar,
     [dir="rtl"] .filtered div.xfull,
     [dir="rtl"] .filtered .actions,
-    [dir="rtl"] #changelist-filter {
+    [dir="rtl"] #changelist_filter {
         margin-left: 0;
     }
 
@@ -74,7 +74,7 @@
         margin-right: 0;
     }
 
-    [dir="rtl"] #changelist-filter {
+    [dir="rtl"] #changelist_filter {
         margin-left: 0;
         margin-right: 0;
     }
diff --git a/cardie/staticfiles/admin/css/rtl.css b/cardie/staticfiles/admin/css/rtl.css
index 9027c7e..d104db1 100644
--- a/cardie/staticfiles/admin/css/rtl.css
+++ b/cardie/staticfiles/admin/css/rtl.css
@@ -36,7 +36,7 @@ tfoot td:first-child {
 
 /* LAYOUT */
 
-#user-tools {
+#user_tools {
     right: auto;
     left: 0;
     text-align: left;
@@ -46,11 +46,11 @@ div.breadcrumbs {
     text-align: right;
 }
 
-#content-main {
+#content_main {
     float: right;
 }
 
-#content-related {
+#content_related {
     float: left;
     margin-left: -300px;
     margin-right: auto;
@@ -86,14 +86,14 @@ thead th.sorted .text {
     border-right: 0px none;
 }
 
-#changelist-filter {
+#changelist_filter {
     border-left: none;
     border-right: none;
     margin-left: 0;
     margin-right: 30px;
 }
 
-#changelist-filter li.selected {
+#changelist_filter li.selected {
     border-left: none;
     padding-left: 10px;
     margin-left: 0;
diff --git a/cardie/staticfiles/admin/js/actions.js b/cardie/staticfiles/admin/js/actions.js
index 6a2ae91..66b83bb 100644
--- a/cardie/staticfiles/admin/js/actions.js
+++ b/cardie/staticfiles/admin/js/actions.js
@@ -156,7 +156,7 @@
             });
         });
 
-        document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) {
+        document.querySelector('#changelist_form button[name=index]').addEventListener('click', function(event) {
             if (list_editable_changed) {
                 const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
                 if (!confirmed) {
@@ -165,7 +165,7 @@
             }
         });
 
-        const el = document.querySelector('#changelist-form input[name=_save]');
+        const el = document.querySelector('#changelist_form input[name=_save]');
         // The button does not exist if no fields are editable.
         if (el) {
             el.addEventListener('click', function(event) {
diff --git a/cardie/staticfiles/admin/js/prepopulate_init.js b/cardie/staticfiles/admin/js/prepopulate_init.js
index a58841f..aeca450 100644
--- a/cardie/staticfiles/admin/js/prepopulate_init.js
+++ b/cardie/staticfiles/admin/js/prepopulate_init.js
@@ -1,7 +1,7 @@
 'use strict';
 {
     const $ = django.jQuery;
-    const fields = $('#django-admin-prepopulated-fields-constants').data('prepopulatedFields');
+    const fields = $('/<[^>]*id="[^"]*-[^"]*"[^>]*>/gadmin-prepopulated-fields-constants').data('prepopulatedFields');
     $.each(fields, function(index, field) {
         $(
             '.empty-form .form-row .field-' + field.name +
diff --git a/cardie/staticfiles/main/authentication.css b/cardie/staticfiles/main/authentication.css
index 165cb7d..2da02ab 100644
--- a/cardie/staticfiles/main/authentication.css
+++ b/cardie/staticfiles/main/authentication.css
@@ -2,7 +2,7 @@ html {
     background: rgb(37, 40, 49);
 }
 
-#authentication-box {
+#authentication_box {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -14,7 +14,7 @@ html {
     z-index: 1;
 }
 
-#authentication-box-image {
+#authentication_box_image {
     width: clamp(30vh, 300px, 30vw);
     height: auto;
 
@@ -25,31 +25,31 @@ html {
     transition: var(--default-transition);
 }
 
-#authentication-box-image:hover {
+#authentication_box_image:hover {
     scale: 1.05;
 }
 
-#signin-box {
+#signin_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#createaccount-box {
+#createaccount_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#authentication-error {
+#authentication_error {
     opacity: 0;
     scale: 0.8;
     transition: var(--default-transition);
 }
 
-#authentication-error.show {
+#authentication_error.show {
     opacity: 1;
     scale: 1;
 }
diff --git a/cardie/staticfiles/main/editor.css b/cardie/staticfiles/main/editor.css
index 77c6a6b..445d395 100644
--- a/cardie/staticfiles/main/editor.css
+++ b/cardie/staticfiles/main/editor.css
@@ -173,7 +173,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
@@ -207,7 +207,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         backdrop-filter: var(--default-glass-blur);
     
@@ -235,18 +235,18 @@ html {
     }
 }
 
-#editor-iconselector-top {
+#editor_iconselector_top {
     display: flex;
     flex-direction: row;
 }
 
-#editor-iconselector-top-search {
+#editor_iconselector_top_search {
     height: clamp(2vh, 20px, 2vw);
     max-height: clamp(2vh, 20px, 2vw);
     margin-bottom: clamp(1vh, 10px, 1vw);
 }
 
-#editor-iconselector-icons {
+#editor_iconselector_icons {
     display: flex;
     flex-wrap: wrap;
     overflow-y: auto;
diff --git a/cardie/staticfiles/main/home.css b/cardie/staticfiles/main/home.css
index 47fe569..f215595 100644
--- a/cardie/staticfiles/main/home.css
+++ b/cardie/staticfiles/main/home.css
@@ -5,7 +5,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -15,29 +15,29 @@ html {
         margin-top: clamp(5vh, 50px, 5vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(6vh, 60px, 6vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(12vh, 120px, 12vw);
         margin-bottom: clamp(2vh, 20px, 2vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(30vh, 300px, 30vw);
         height: auto;
         transition: var(--default-transition);
@@ -48,7 +48,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -58,29 +58,29 @@ html {
         margin-top: clamp(1vh, 10px, 1vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(2vh, 20px, 2vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(2vh, 20px, 2vw);
         margin-bottom: clamp(1vh, 10px, 1vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(20vh, 200px, 20vw);
         height: auto;
         transition: var(--default-transition);
@@ -88,7 +88,7 @@ html {
     }
 }
 
-#home-top-image:hover {
+#home_top_image:hover {
     scale: 1.05;
 }
 
@@ -137,15 +137,15 @@ html {
     width: fit-content;
 }
 
-#home-top-profile {
+#home_top_profile {
     position: relative;
 }
 
-#home-top-username {
+#home_top_username {
     height: fit-content;
 }
 
-#home-top-profile-dropdown {
+#home_top_profile_dropdown {
     position: absolute;
     top: 30%;
 
@@ -158,7 +158,7 @@ html {
     width: fit-content;
 }
 
-#home-top-profile-dropdown > button {
+#home_top_profile_dropdown > button {
     white-space: nowrap;
 }
 
diff --git a/cardie/staticfiles/main/scripts/authentication/authentication.js b/cardie/staticfiles/main/scripts/authentication/authentication.js
index f6656a4..a92a3b4 100644
--- a/cardie/staticfiles/main/scripts/authentication/authentication.js
+++ b/cardie/staticfiles/main/scripts/authentication/authentication.js
@@ -14,18 +14,18 @@ try {
 
 function show_warning(warning) {
     log("WARNING", warning)
-    document.querySelector("#authentication-error > p").innerText = warning;
-    document.querySelector("#authentication-error").style.display = "flex";
+    document.querySelector("#authentication_error > p").innerText = warning;
+    document.querySelector("#authentication_error").style.display = "flex";
 
     setTimeout(function() {
-        document.querySelector("#authentication-error").classList.add("show");
+        document.querySelector("#authentication_error").classList.add("show");
     }, 100);
 }
 
 async function sign_in() {
     log("INFO", "Signing the user in...");
-    var username = document.querySelector("#signin-username").value;
-    var password = document.querySelector("#signin-password").value;
+    var username = document.querySelector("#signin_username").value;
+    var password = document.querySelector("#signin_password").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/signin", {
@@ -90,9 +90,9 @@ async function sign_in() {
 
 async function create_account() {
     log("INFO", "Creating an account for the user...");
-    var username = document.querySelector("#createaccount-username").value;
-    var password = document.querySelector("#createaccount-password").value;
-    var email = document.querySelector("#createaccount-email").value;
+    var username = document.querySelector("#createaccount_username").value;
+    var password = document.querySelector("#createaccount_password").value;
+    var email = document.querySelector("#createaccount_email").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/createaccount", {
@@ -171,35 +171,35 @@ async function create_account() {
 }
 
 function check_sign_in() {
-    document.querySelector("#signin-signin").disabled = !(
-        document.querySelector("#signin-username").value != "" && 
-        document.querySelector("#signin-password").value != ""
+    document.querySelector("#signin_signin").disabled = !(
+        document.querySelector("#signin_username").value != "" && 
+        document.querySelector("#signin_password").value != ""
     );
 }
 
 function check_create_account() {
-    document.querySelector("#createaccount-createaccount").disabled = !(
-        document.querySelector("#createaccount-username").value != "" && 
-        document.querySelector("#createaccount-password").value != "" && 
-        document.querySelector("#createaccount-email").value != ""
+    document.querySelector("#createaccount_createaccount").disabled = !(
+        document.querySelector("#createaccount_username").value != "" && 
+        document.querySelector("#createaccount_password").value != "" && 
+        document.querySelector("#createaccount_email").value != ""
     );
 }
 
-document.querySelector("#signin-signin").addEventListener("click", sign_in);
-document.querySelector("#createaccount-createaccount").addEventListener("click", create_account);
+document.querySelector("#signin_signin").addEventListener("click", sign_in);
+document.querySelector("#createaccount_createaccount").addEventListener("click", create_account);
 
-document.querySelector("#signin-username").addEventListener("input", check_sign_in);
-document.querySelector("#signin-password").addEventListener("input", check_sign_in);
-document.querySelector("#createaccount-username").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-password").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-email").addEventListener("input", check_create_account);
+document.querySelector("#signin_username").addEventListener("input", check_sign_in);
+document.querySelector("#signin_password").addEventListener("input", check_sign_in);
+document.querySelector("#createaccount_username").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_password").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_email").addEventListener("input", check_create_account);
 
-document.querySelector("#signin-signin").disabled = true;
-document.querySelector("#createaccount-createaccount").disabled = true;
+document.querySelector("#signin_signin").disabled = true;
+document.querySelector("#createaccount_createaccount").disabled = true;
 
 document.addEventListener("keyup", (event) => {
     if (event.code === "Enter") {
-        if (document.querySelector("#signin-box").style.display != "none") {
+        if (document.querySelector("#signin_box").style.display != "none") {
             sign_in();
             
         } else {
diff --git a/cardie/staticfiles/main/scripts/editor/icons.js b/cardie/staticfiles/main/scripts/editor/icons.js
index acca6a9..7a75e26 100644
--- a/cardie/staticfiles/main/scripts/editor/icons.js
+++ b/cardie/staticfiles/main/scripts/editor/icons.js
@@ -22,7 +22,7 @@ function create_icon(icon) {
 
     itemsData.push(div_element);
 
-    document.querySelector("#editor-iconselector-icons").appendChild(div_element)
+    document.querySelector("#editor_iconselector_icons").appendChild(div_element)
 }
 
 function render_icons(icons) {
@@ -44,8 +44,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
 // Function to render items
 const renderItems = (filteredItems) => {
-    document.querySelector("#editor-iconselector-icons").innerHTML = '';
-    filteredItems.forEach(item => document.querySelector("#editor-iconselector-icons").appendChild(item));
+    document.querySelector("#editor_iconselector_icons").innerHTML = '';
+    filteredItems.forEach(item => document.querySelector("#editor_iconselector_icons").appendChild(item));
 };
 
 // Function to sort items alphabetically by the icon attribute
@@ -60,7 +60,7 @@ const filterItems = (query) => {
 };
 
 // Event listener for the search box
-document.querySelector("#editor-iconselector-top-search").addEventListener('input', (e) => {
+document.querySelector("#editor_iconselector_top_search").addEventListener('input', (e) => {
     const query = e.target.value;
     const filteredItems = filterItems(query);
     const sortedItems = sortItems(filteredItems);
@@ -71,17 +71,17 @@ function show_iconselector(item) {
     icon_selected_item = item;
     show_background_blur();
 
-    document.querySelector("#editor-iconselector").style.display = "flex";
-    document.querySelector("#editor-iconselector").classList.remove("hide-iconselector");
-    document.querySelector("#editor-iconselector").classList.add("show-iconselector");
+    document.querySelector("#editor_iconselector").style.display = "flex";
+    document.querySelector("#editor_iconselector").classList.remove("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("show-iconselector");
 }
 
 function hide_iconselector() {
-    document.querySelector("#editor-iconselector").classList.add("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("hide-iconselector");
 
     setTimeout(function() {
-        document.querySelector("#editor-iconselector").classList.remove("show-iconselector");
-        document.querySelector("#editor-iconselector").style.display = "none";
+        document.querySelector("#editor_iconselector").classList.remove("show-iconselector");
+        document.querySelector("#editor_iconselector").style.display = "none";
         hide_background_blur();
     }, 500);
 }
@@ -97,6 +97,6 @@ function icon_clicked(event) {
     hide_iconselector();
 }
 
-document.querySelector("#editor-iconselector-top-close").addEventListener("click", (event) => {
+document.querySelector("#editor_iconselector_top_close").addEventListener("click", (event) => {
     hide_iconselector();
 });
\ No newline at end of file
diff --git a/cardie/staticfiles/main/scripts/home/home.js b/cardie/staticfiles/main/scripts/home/home.js
index aaceeaf..f57d4f2 100644
--- a/cardie/staticfiles/main/scripts/home/home.js
+++ b/cardie/staticfiles/main/scripts/home/home.js
@@ -90,7 +90,7 @@ function create_home_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-cards").appendChild(div);
+    document.querySelector("#home_cards").appendChild(div);
 }
 
 function create_wallet_card(uuid, name) {
@@ -137,7 +137,7 @@ function create_wallet_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-wallet").appendChild(div);
+    document.querySelector("#home_wallet").appendChild(div);
 }
 
 function home_wallet_view(event) {
@@ -244,7 +244,7 @@ async function get_wallet() {
     });
 }
 
-document.querySelector("#home-top-image").addEventListener("click", (event) => {
+document.querySelector("#home_top_image").addEventListener("click", (event) => {
     window.location.href = server_ip;
 });
 

From 1343d414eec87b92062bc0e9f4e1fa4998ac7d28 Mon Sep 17 00:00:00 2001
From: nfoert <nofoert@gmail.com>
Date: Sat, 19 Oct 2024 20:14:34 -0400
Subject: [PATCH 2/2] Fix a few more id names and collect static files

---
 cardie/main/templates/authentication.html     | 20 +++----
 cardie/main/templates/home.html               |  4 +-
 cardie/static/main/editor.css                 | 20 +++----
 cardie/static/main/scripts/editor/rename.js   |  8 +--
 cardie/staticfiles/admin/css/base.css         | 52 +++++++++----------
 cardie/staticfiles/admin/css/changelists.css  | 44 ++++++++--------
 cardie/staticfiles/admin/css/nav_sidebar.css  | 48 ++++++++---------
 cardie/staticfiles/admin/css/responsive.css   | 36 ++++++-------
 .../staticfiles/admin/css/responsive_rtl.css  |  6 +--
 cardie/staticfiles/admin/css/rtl.css          | 10 ++--
 cardie/staticfiles/admin/js/actions.js        |  4 +-
 .../staticfiles/admin/js/prepopulate_init.js  |  2 +-
 cardie/staticfiles/main/editor.css            | 20 +++----
 .../staticfiles/main/scripts/editor/rename.js |  8 +--
 14 files changed, 141 insertions(+), 141 deletions(-)

diff --git a/cardie/main/templates/authentication.html b/cardie/main/templates/authentication.html
index 3adc8e4..9b546ca 100644
--- a/cardie/main/templates/authentication.html
+++ b/cardie/main/templates/authentication.html
@@ -15,11 +15,11 @@
 {% block body %}
     <div id="authentication_box" x-data="box_param_check()">
         {% csrf_token %}
-        <img id="authentication-box-image"
+        <img id="authentication_box_image"
              @click="window.location.href = server_ip"
              src="{% static '/main/images/logo_light.png' %}">
         <div class="ui_status_critical"
-             id="authentication-error"
+             id="authentication_error"
              style="display: none">
             <i class="ph-bold ph-warning-octagon ui_status_icon"></i>
             <p class="ui_status_text">Critical status box</p>
@@ -29,46 +29,46 @@
                 <i class="ph-bold ph-keyhole"></i> Sign In
             </p>
             <div class="ui_separator_horizontal"></div>
-            <input id="signin-username"
+            <input id="signin_username"
                    type="text"
                    class="ui_input_generic"
                    placeholder="Username">
-            <input id="signin-password"
+            <input id="signin_password"
                    type="password"
                    class="ui_input_generic"
                    placeholder="Password">
             <button id="signin_signin" class="ui_button_large">
                 <strong>Sign In</strong> <i class="ph-bold ph-sign-in"></i>
             </button>
-            <button id="signin-createaccount"
+            <button id="signin_createaccount"
                     class="ui_button_small"
                     @click="sign_in = !sign_in">
                 Create an Account <i class="ph-bold ph-arrow-right"></i>
             </button>
         </div>
-        <div id="createaccount-box"
+        <div id="createaccount_box"
              x-show="!sign_in"
              x-transition:enter.delay.200ms>
             <p class="ui_text_header">
                 <i class="ph-bold ph-key"></i> Create Account
             </p>
             <div class="ui_separator_horizontal"></div>
-            <input id="createaccount-username"
+            <input id="createaccount_username"
                    type="text"
                    class="ui_input_generic"
                    placeholder="Username">
-            <input id="createaccount-password"
+            <input id="createaccount_password"
                    type="password"
                    class="ui_input_generic"
                    placeholder="Password">
-            <input id="createaccount-email"
+            <input id="createaccount_email"
                    type="text"
                    class="ui_input_generic"
                    placeholder="Email">
             <button id="createaccount_createaccount" class="ui_button_large">
                 <strong>Create Account</strong> <i class="ph-bold ph-user-plus"></i>
             </button>
-            <button id="createaccount-signin"
+            <button id="createaccount_signin"
                     class="ui_button_small"
                     @click="sign_in = !sign_in">
                 Sign In <i class="ph-bold ph-arrow-right"></i>
diff --git a/cardie/main/templates/home.html b/cardie/main/templates/home.html
index 5df3e43..e4fd9c6 100644
--- a/cardie/main/templates/home.html
+++ b/cardie/main/templates/home.html
@@ -26,13 +26,13 @@
     </div>
     <div x-data="{ cards: true, cards_disabled: true, wallet_disabled: false }">
         <div id="home_navigation">
-            <button id="home-navigation-wallet"
+            <button id="home_navigation_wallet"
                     class="ui_button_grid"
                     @click="cards = false; cards_disabled = false; wallet_disabled = true;"
                     x-bind:disabled="wallet_disabled">
                 Wallet <i class="ph-bold ph-wallet"></i>
             </button>
-            <button id="home-navigation-cards"
+            <button id="home_navigation_cards"
                     class="ui_button_grid"
                     @click="cards = true; wallet_disabled = false; cards_disabled = true;"
                     x-bind:disabled="cards_disabled">
diff --git a/cardie/static/main/editor.css b/cardie/static/main/editor.css
index 445d395..4980055 100644
--- a/cardie/static/main/editor.css
+++ b/cardie/static/main/editor.css
@@ -276,22 +276,22 @@ html {
     box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
 }
 
-.editor-iconselector-icon:hover {
+.editor_iconselector_icon:hover {
     scale: 1.05;
 }
 
-.editor-iconselector-icon:active {
+.editor_iconselector_icon:active {
     scale: 0.95;
 }
 
-.editor-iconselector-icon-icon {
+.editor_iconselector_icon_icon {
     color: white;
     font-size: clamp(3vh, 30px, 3vw);
     text-align: center;
     margin-top: clamp(0.3vh, 3px, 0.3vw);
 }
 
-.editor-iconselector-icon-text {
+.editor_iconselector_icon_text {
     color: white;
     font-family: "Noto Sans Mono", "Courier New", monospace;
     font-size: clamp(1vh, 10px, 1vw);
@@ -299,7 +299,7 @@ html {
     user-select: none;
 }
 
-@keyframes show-rename {
+@keyframes show_rename {
     from {
         opacity: 0;
         scale: 0.8;
@@ -311,7 +311,7 @@ html {
     }
 }
 
-@keyframes hide-rename {
+@keyframes hide_rename {
     from {
         opacity: 1;
         scale: 1;
@@ -323,12 +323,12 @@ html {
     }
 }
 
-.show-rename {
-    animation: show-rename 0.2s ease-in-out forwards;
+.show_rename {
+    animation: show_rename 0.2s ease-in-out forwards;
 }
 
-.hide-rename {
-    animation: hide-rename 0.2s ease-in-out forwards;
+.hide_rename {
+    animation: hide_rename 0.2s ease-in-out forwards;
 }
 
 @media (min-width: 1000px) {
diff --git a/cardie/static/main/scripts/editor/rename.js b/cardie/static/main/scripts/editor/rename.js
index 90536c0..a3c9b23 100644
--- a/cardie/static/main/scripts/editor/rename.js
+++ b/cardie/static/main/scripts/editor/rename.js
@@ -2,15 +2,15 @@ function show_rename() {
     show_background_blur();
 
     document.querySelector("#editor_rename").style.display = "flex";
-    document.querySelector("#editor_rename").classList.remove("hide-rename");
-    document.querySelector("#editor_rename").classList.add("show-rename");
+    document.querySelector("#editor_rename").classList.remove("hide_rename");
+    document.querySelector("#editor_rename").classList.add("show_rename");
 }
 
 function hide_rename() {
-    document.querySelector("#editor_rename").classList.add("hide-rename");
+    document.querySelector("#editor_rename").classList.add("hide_rename");
 
     setTimeout(function() {
-        document.querySelector("#editor_rename").classList.remove("show-rename");
+        document.querySelector("#editor_rename").classList.remove("show_rename");
         document.querySelector("#editor_rename").style.display = "none";
 
         hide_background_blur();
diff --git a/cardie/staticfiles/admin/css/base.css b/cardie/staticfiles/admin/css/base.css
index cfc25bb..44f2fc8 100644
--- a/cardie/staticfiles/admin/css/base.css
+++ b/cardie/staticfiles/admin/css/base.css
@@ -807,15 +807,15 @@ a.deletelink:focus, a.deletelink:hover {
 
 /* OBJECT HISTORY */
 
-#change_history table {
+#change-history table {
     width: 100%;
 }
 
-#change_history table tbody th {
+#change-history table tbody th {
     width: 16em;
 }
 
-#change_history .paginator {
+#change-history .paginator {
     color: var(--body-quiet-color);
     border-bottom: 1px solid var(--hairline-color);
     background: var(--body-bg);
@@ -866,12 +866,12 @@ a.deletelink:focus, a.deletelink:hover {
     width: 600px;
 }
 
-#content_main {
+#content-main {
     float: left;
     width: 100%;
 }
 
-#content_related {
+#content-related {
     float: right;
     width: 260px;
     position: relative;
@@ -893,13 +893,13 @@ a.deletelink:focus, a.deletelink:hover {
     margin-left: 300px;
 }
 
-.colSM #content_related {
+.colSM #content-related {
     float: left;
     margin-right: 0;
     margin-left: -300px;
 }
 
-.colSM #content_main {
+.colSM #content-main {
     float: right;
 }
 
@@ -920,7 +920,7 @@ a.deletelink:focus, a.deletelink:hover {
     color: var(--header-color);
 }
 
-#header a:link, #header a:visited, #logout_form button {
+#header a:link, #header a:visited, #logout-form button {
     color: var(--header-link-color);
 }
 
@@ -932,7 +932,7 @@ a.deletelink:focus, a.deletelink:hover {
     display: flex;
 }
 
-#site_name {
+#site-name {
     padding: 0;
     margin: 0;
     margin-inline-end: 20px;
@@ -941,7 +941,7 @@ a.deletelink:focus, a.deletelink:hover {
     color: var(--header-branding-color);
 }
 
-#site_name a:link, #site_name a:visited {
+#site-name a:link, #site-name a:visited {
     color: var(--accent);
 }
 
@@ -957,24 +957,24 @@ a.deletelink:focus, a.deletelink:hover {
     text-decoration: none;
 }
 
-#logout_form {
+#logout-form {
     display: inline;
 }
 
-#logout_form button {
+#logout-form button {
     background: none;
     border: 0;
     cursor: pointer;
     font-family: var(--font-family-primary);
 }
 
-#user_tools {
+#user-tools {
     float: right;
     margin: 0 0 0 20px;
     text-align: right;
 }
 
-#user_tools, #logout_form button{
+#user-tools, #logout-form button{
     padding: 0;
     font-weight: 300;
     font-size: 0.6875rem;
@@ -982,57 +982,57 @@ a.deletelink:focus, a.deletelink:hover {
     text-transform: uppercase;
 }
 
-#user_tools a, #logout_form button {
+#user-tools a, #logout-form button {
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
 
-#user_tools a:focus, #user_tools a:hover,
-#logout_form button:active, #logout_form button:hover {
+#user-tools a:focus, #user-tools a:hover,
+#logout-form button:active, #logout-form button:hover {
     text-decoration: none;
     border-bottom: 0;
 }
 
-#logout_form button:active, #logout_form button:hover {
+#logout-form button:active, #logout-form button:hover {
     margin-bottom: 1px;
 }
 
 /* SIDEBAR */
 
-#content_related {
+#content-related {
     background: var(--darkened-bg);
 }
 
-#content_related .module {
+#content-related .module {
     background: none;
 }
 
-#content_related h3 {
+#content-related h3 {
     color: var(--body-quiet-color);
     padding: 0 16px;
     margin: 0 0 16px;
 }
 
-#content_related h4 {
+#content-related h4 {
     font-size: 0.8125rem;
 }
 
-#content_related p {
+#content-related p {
     padding-left: 16px;
     padding-right: 16px;
 }
 
-#content_related .actionlist {
+#content-related .actionlist {
     padding: 0;
     margin: 16px;
 }
 
-#content_related .actionlist li {
+#content-related .actionlist li {
     line-height: 1.2;
     margin-bottom: 10px;
     padding-left: 18px;
 }
 
-#content_related .module h2 {
+#content-related .module h2 {
     background: none;
     padding: 16px;
     margin-bottom: 16px;
diff --git a/cardie/staticfiles/admin/css/changelists.css b/cardie/staticfiles/admin/css/changelists.css
index b6f70f8..573c389 100644
--- a/cardie/staticfiles/admin/css/changelists.css
+++ b/cardie/staticfiles/admin/css/changelists.css
@@ -34,7 +34,7 @@
     padding-right: 1em;
 }
 
-#changelist_form .results {
+#changelist-form .results {
     overflow-x: auto;
     width: 100%;
 }
@@ -120,18 +120,18 @@
     border-color: var(--body-quiet-color);
 }
 
-#changelist_search img {
+#changelist-search img {
     vertical-align: middle;
     margin-right: 4px;
 }
 
-#changelist_search .help {
+#changelist-search .help {
     word-break: break-word;
 }
 
 /* FILTER COLUMN */
 
-#changelist_filter {
+#changelist-filter {
     flex: 0 0 240px;
     order: 1;
     background: var(--darkened-bg);
@@ -139,7 +139,7 @@
     margin: 0 0 0 30px;
 }
 
-#changelist_filter h2 {
+#changelist-filter h2 {
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -148,75 +148,75 @@
     border-bottom: none;
 }
 
-#changelist_filter h3,
-#changelist_filter details summary {
+#changelist-filter h3,
+#changelist-filter details summary {
     font-weight: 400;
     padding: 0 15px;
     margin-bottom: 10px;
     cursor: pointer;
 }
 
-#changelist_filter details summary > * {
+#changelist-filter details summary > * {
     display: inline;
 }
 
-#changelist_filter details > summary {
+#changelist-filter details > summary {
     list-style-type: none;
 }
 
-#changelist_filter details > summary::-webkit-details-marker {
+#changelist-filter details > summary::-webkit-details-marker {
     display: none;
 }
 
-#changelist_filter details > summary::before {
+#changelist-filter details > summary::before {
     content: '→';
     font-weight: bold;
     color: var(--link-hover-color);
 }
 
-#changelist_filter details[open] > summary::before {
+#changelist-filter details[open] > summary::before {
     content: '↓';
 }
 
-#changelist_filter ul {
+#changelist-filter ul {
     margin: 5px 0;
     padding: 0 15px 15px;
     border-bottom: 1px solid var(--hairline-color);
 }
 
-#changelist_filter ul:last-child {
+#changelist-filter ul:last-child {
     border-bottom: none;
 }
 
-#changelist_filter li {
+#changelist-filter li {
     list-style-type: none;
     margin-left: 0;
     padding-left: 0;
 }
 
-#changelist_filter a {
+#changelist-filter a {
     display: block;
     color: var(--body-quiet-color);
     word-break: break-word;
 }
 
-#changelist_filter li.selected {
+#changelist-filter li.selected {
     border-left: 5px solid var(--hairline-color);
     padding-left: 10px;
     margin-left: -15px;
 }
 
-#changelist_filter li.selected a {
+#changelist-filter li.selected a {
     color: var(--link-selected-fg);
 }
 
-#changelist_filter a:focus, #changelist_filter a:hover,
-#changelist_filter li.selected a:focus,
-#changelist_filter li.selected a:hover {
+#changelist-filter a:focus, #changelist-filter a:hover,
+#changelist-filter li.selected a:focus,
+#changelist-filter li.selected a:hover {
     color: var(--link-hover-color);
 }
 
-#changelist_filter #changelist_filter_extra_actions {
+#changelist-filter #changelist-filter-extra-actions {
     font-size: 0.8125rem;
     margin-bottom: 10px;
     border-bottom: 1px solid var(--hairline-color);
diff --git a/cardie/staticfiles/admin/css/nav_sidebar.css b/cardie/staticfiles/admin/css/nav_sidebar.css
index 02a23a0..7eb0de9 100644
--- a/cardie/staticfiles/admin/css/nav_sidebar.css
+++ b/cardie/staticfiles/admin/css/nav_sidebar.css
@@ -31,7 +31,7 @@
     background-color: var(--darkened-bg);
 }
 
-#nav_sidebar {
+#nav-sidebar {
     z-index: 15;
     flex: 0 0 275px;
     left: -276px;
@@ -42,7 +42,7 @@
     overflow: auto;
 }
 
-[dir="rtl"] #nav_sidebar {
+[dir="rtl"] #nav-sidebar {
     border-left: 1px solid var(--hairline-color);
     border-right: 0;
     left: 0;
@@ -59,75 +59,75 @@
     content: '\00AB';
 }
 
-.main > #nav_sidebar {
+.main > #nav-sidebar {
     visibility: hidden;
 }
 
-.main.shifted > #nav_sidebar {
+.main.shifted > #nav-sidebar {
     margin-left: 0;
     visibility: visible;
 }
 
-[dir="rtl"] .main.shifted > #nav_sidebar {
+[dir="rtl"] .main.shifted > #nav-sidebar {
     margin-right: 0;
 }
 
-#nav_sidebar .module th {
+#nav-sidebar .module th {
     width: 100%;
     overflow-wrap: anywhere;
 }
 
-#nav_sidebar .module th,
-#nav_sidebar .module caption {
+#nav-sidebar .module th,
+#nav-sidebar .module caption {
     padding-left: 16px;
 }
 
-#nav_sidebar .module td {
+#nav-sidebar .module td {
     white-space: nowrap;
 }
 
-[dir="rtl"] #nav_sidebar .module th,
-[dir="rtl"] #nav_sidebar .module caption {
+[dir="rtl"] #nav-sidebar .module th,
+[dir="rtl"] #nav-sidebar .module caption {
     padding-left: 8px;
     padding-right: 16px;
 }
 
-#nav_sidebar .current-app .section:link,
-#nav_sidebar .current-app .section:visited {
+#nav-sidebar .current-app .section:link,
+#nav-sidebar .current-app .section:visited {
     color: var(--header-color);
     font-weight: bold;
 }
 
-#nav_sidebar .current-model {
+#nav-sidebar .current-model {
     background: var(--selected-row);
 }
 
 @media (forced-colors: active) {
-    #nav_sidebar .current-model {
+    #nav-sidebar .current-model {
         background-color: SelectedItem;
     }
 }
 
-.main > #nav_sidebar + .content {
+.main > #nav-sidebar + .content {
     max-width: calc(100% - 23px);
 }
 
-.main.shifted > #nav_sidebar + .content {
+.main.shifted > #nav-sidebar + .content {
     max-width: calc(100% - 299px);
 }
 
 @media (max-width: 767px) {
-    #nav_sidebar, #toggle_nav_sidebar {
+    #nav-sidebar, #toggle-nav-sidebar {
         display: none;
     }
 
-    .main > #nav_sidebar + .content,
-    .main.shifted > #nav_sidebar + .content {
+    .main > #nav-sidebar + .content,
+    .main.shifted > #nav-sidebar + .content {
         max-width: 100%;
     }
 }
 
-#nav_filter {
+#nav-filter {
     width: 100%;
     box-sizing: border-box;
     padding: 2px 5px;
@@ -137,14 +137,14 @@
     color: var(--body-fg);
 }
 
-#nav_filter:focus {
+#nav-filter:focus {
     border-color: var(--body-quiet-color);
 }
 
-#nav_filter.no-results {
+#nav-filter.no-results {
     background: var(--message-error-bg);
 }
 
-#nav_sidebar table {
+#nav-sidebar table {
     width: 100%;
 }
diff --git a/cardie/staticfiles/admin/css/responsive.css b/cardie/staticfiles/admin/css/responsive.css
index 3db92f2..bb53945 100644
--- a/cardie/staticfiles/admin/css/responsive.css
+++ b/cardie/staticfiles/admin/css/responsive.css
@@ -43,19 +43,19 @@ input[type="submit"], button {
         justify-content: flex-start;
     }
 
-    #site_name {
+    #site-name {
         margin: 0 0 8px;
         line-height: 1.2;
     }
 
-    #user_tools {
+    #user-tools {
         margin: 0;
         font-weight: 400;
         line-height: 1.85;
         text-align: left;
     }
 
-    #user_tools a {
+    #user-tools a {
         display: inline-block;
         line-height: 1.4;
     }
@@ -66,11 +66,11 @@ input[type="submit"], button {
         width: auto;
     }
 
-    #content_related {
+    #content-related {
         margin-right: -290px;
     }
 
-    .colSM #content_related {
+    .colSM #content-related {
         margin-left: -290px;
     }
 
@@ -97,13 +97,13 @@ input[type="submit"], button {
         padding: 15px;
     }
 
-    #changelist_search > div {
+    #changelist-search > div {
         display: flex;
         flex-wrap: nowrap;
         max-width: 480px;
     }
 
-    #changelist_search label {
+    #changelist-search label {
         line-height: 1.375rem;
     }
 
@@ -118,7 +118,7 @@ input[type="submit"], button {
         flex: 0 1 auto;
     }
 
-    #changelist_search .quiet {
+    #changelist-search .quiet {
         width: 0;
         flex: 1 0 auto;
         margin: 5px 0 0 25px;
@@ -151,7 +151,7 @@ input[type="submit"], button {
         margin: 0 10px 0 0;
     }
 
-    #changelist_filter {
+    #changelist-filter {
         flex-basis: 200px;
     }
 
@@ -414,7 +414,7 @@ input[type="submit"], button {
         padding: 15px 20px;
     }
 
-    .login #site_name {
+    .login #site-name {
         margin: 0;
     }
 
@@ -464,16 +464,16 @@ input[type="submit"], button {
         margin: 0;
     }
 
-    #content_related, .colSM #content_related {
+    #content-related, .colSM #content-related {
         width: 100%;
         margin: 0;
     }
 
-    #content_related .module {
+    #content-related .module {
         margin-bottom: 0;
     }
 
-    #content_related .module h2 {
+    #content-related .module h2 {
         padding: 10px 15px;
         font-size: 1rem;
     }
@@ -489,7 +489,7 @@ input[type="submit"], button {
         padding: 10px;
     }
 
-    #changelist_filter {
+    #changelist-filter {
         margin-left: 0;
     }
 
@@ -506,7 +506,7 @@ input[type="submit"], button {
         flex: 1 0 100%;
     }
 
-    #changelist_filter {
+    #changelist-filter {
         position: static;
         width: auto;
         margin-top: 30px;
@@ -840,7 +840,7 @@ input[type="submit"], button {
         padding: 15px;
     }
 
-    .login #content_main {
+    .login #content-main {
         float: none;
     }
 
@@ -952,12 +952,12 @@ input[type="submit"], button {
 
     /* History */
 
-    table#change_history tbody th, table#change_history tbody td {
+    table#change-history tbody th, table#change-history tbody td {
         font-size: 0.8125rem;
         word-break: break-word;
     }
 
-    table#change_history tbody th {
+    table#change-history tbody th {
         width: auto;
     }
 
diff --git a/cardie/staticfiles/admin/css/responsive_rtl.css b/cardie/staticfiles/admin/css/responsive_rtl.css
index a1c6f1d..31dc8ff 100644
--- a/cardie/staticfiles/admin/css/responsive_rtl.css
+++ b/cardie/staticfiles/admin/css/responsive_rtl.css
@@ -5,7 +5,7 @@
         margin-right: 0;
     }
 
-    [dir="rtl"] #user_tools {
+    [dir="rtl"] #user-tools {
         text-align: right;
     }
 
@@ -24,7 +24,7 @@
     [dir="rtl"] .filtered #toolbar,
     [dir="rtl"] .filtered div.xfull,
     [dir="rtl"] .filtered .actions,
-    [dir="rtl"] #changelist_filter {
+    [dir="rtl"] #changelist-filter {
         margin-left: 0;
     }
 
@@ -74,7 +74,7 @@
         margin-right: 0;
     }
 
-    [dir="rtl"] #changelist_filter {
+    [dir="rtl"] #changelist-filter {
         margin-left: 0;
         margin-right: 0;
     }
diff --git a/cardie/staticfiles/admin/css/rtl.css b/cardie/staticfiles/admin/css/rtl.css
index d104db1..9027c7e 100644
--- a/cardie/staticfiles/admin/css/rtl.css
+++ b/cardie/staticfiles/admin/css/rtl.css
@@ -36,7 +36,7 @@ tfoot td:first-child {
 
 /* LAYOUT */
 
-#user_tools {
+#user-tools {
     right: auto;
     left: 0;
     text-align: left;
@@ -46,11 +46,11 @@ div.breadcrumbs {
     text-align: right;
 }
 
-#content_main {
+#content-main {
     float: right;
 }
 
-#content_related {
+#content-related {
     float: left;
     margin-left: -300px;
     margin-right: auto;
@@ -86,14 +86,14 @@ thead th.sorted .text {
     border-right: 0px none;
 }
 
-#changelist_filter {
+#changelist-filter {
     border-left: none;
     border-right: none;
     margin-left: 0;
     margin-right: 30px;
 }
 
-#changelist_filter li.selected {
+#changelist-filter li.selected {
     border-left: none;
     padding-left: 10px;
     margin-left: 0;
diff --git a/cardie/staticfiles/admin/js/actions.js b/cardie/staticfiles/admin/js/actions.js
index 66b83bb..6a2ae91 100644
--- a/cardie/staticfiles/admin/js/actions.js
+++ b/cardie/staticfiles/admin/js/actions.js
@@ -156,7 +156,7 @@
             });
         });
 
-        document.querySelector('#changelist_form button[name=index]').addEventListener('click', function(event) {
+        document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) {
             if (list_editable_changed) {
                 const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
                 if (!confirmed) {
@@ -165,7 +165,7 @@
             }
         });
 
-        const el = document.querySelector('#changelist_form input[name=_save]');
+        const el = document.querySelector('#changelist-form input[name=_save]');
         // The button does not exist if no fields are editable.
         if (el) {
             el.addEventListener('click', function(event) {
diff --git a/cardie/staticfiles/admin/js/prepopulate_init.js b/cardie/staticfiles/admin/js/prepopulate_init.js
index aeca450..a58841f 100644
--- a/cardie/staticfiles/admin/js/prepopulate_init.js
+++ b/cardie/staticfiles/admin/js/prepopulate_init.js
@@ -1,7 +1,7 @@
 'use strict';
 {
     const $ = django.jQuery;
-    const fields = $('/<[^>]*id="[^"]*-[^"]*"[^>]*>/gadmin-prepopulated-fields-constants').data('prepopulatedFields');
+    const fields = $('#django-admin-prepopulated-fields-constants').data('prepopulatedFields');
     $.each(fields, function(index, field) {
         $(
             '.empty-form .form-row .field-' + field.name +
diff --git a/cardie/staticfiles/main/editor.css b/cardie/staticfiles/main/editor.css
index 445d395..4980055 100644
--- a/cardie/staticfiles/main/editor.css
+++ b/cardie/staticfiles/main/editor.css
@@ -276,22 +276,22 @@ html {
     box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
 }
 
-.editor-iconselector-icon:hover {
+.editor_iconselector_icon:hover {
     scale: 1.05;
 }
 
-.editor-iconselector-icon:active {
+.editor_iconselector_icon:active {
     scale: 0.95;
 }
 
-.editor-iconselector-icon-icon {
+.editor_iconselector_icon_icon {
     color: white;
     font-size: clamp(3vh, 30px, 3vw);
     text-align: center;
     margin-top: clamp(0.3vh, 3px, 0.3vw);
 }
 
-.editor-iconselector-icon-text {
+.editor_iconselector_icon_text {
     color: white;
     font-family: "Noto Sans Mono", "Courier New", monospace;
     font-size: clamp(1vh, 10px, 1vw);
@@ -299,7 +299,7 @@ html {
     user-select: none;
 }
 
-@keyframes show-rename {
+@keyframes show_rename {
     from {
         opacity: 0;
         scale: 0.8;
@@ -311,7 +311,7 @@ html {
     }
 }
 
-@keyframes hide-rename {
+@keyframes hide_rename {
     from {
         opacity: 1;
         scale: 1;
@@ -323,12 +323,12 @@ html {
     }
 }
 
-.show-rename {
-    animation: show-rename 0.2s ease-in-out forwards;
+.show_rename {
+    animation: show_rename 0.2s ease-in-out forwards;
 }
 
-.hide-rename {
-    animation: hide-rename 0.2s ease-in-out forwards;
+.hide_rename {
+    animation: hide_rename 0.2s ease-in-out forwards;
 }
 
 @media (min-width: 1000px) {
diff --git a/cardie/staticfiles/main/scripts/editor/rename.js b/cardie/staticfiles/main/scripts/editor/rename.js
index 90536c0..a3c9b23 100644
--- a/cardie/staticfiles/main/scripts/editor/rename.js
+++ b/cardie/staticfiles/main/scripts/editor/rename.js
@@ -2,15 +2,15 @@ function show_rename() {
     show_background_blur();
 
     document.querySelector("#editor_rename").style.display = "flex";
-    document.querySelector("#editor_rename").classList.remove("hide-rename");
-    document.querySelector("#editor_rename").classList.add("show-rename");
+    document.querySelector("#editor_rename").classList.remove("hide_rename");
+    document.querySelector("#editor_rename").classList.add("show_rename");
 }
 
 function hide_rename() {
-    document.querySelector("#editor_rename").classList.add("hide-rename");
+    document.querySelector("#editor_rename").classList.add("hide_rename");
 
     setTimeout(function() {
-        document.querySelector("#editor_rename").classList.remove("show-rename");
+        document.querySelector("#editor_rename").classList.remove("show_rename");
         document.querySelector("#editor_rename").style.display = "none";
 
         hide_background_blur();