Merge pull request #290 from leepeuker/improve-login-page-in-dark-mode

Some minor cleanup and js bug fixes
leepeuker · Mar 2, 2023 · a536125 · a536125
2 parents 1ec9e65 + 9c7b174
commit a536125
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 82 deletions.
diff --git a/public/css/login.css b/public/css/login.css
@@ -31,54 +31,3 @@ body {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
-
-.bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-}
-
-@media (min-width: 768px) {
-    .bd-placeholder-img-lg {
-        font-size: 3.5rem;
-    }
-}
-
-.b-example-divider {
-    height: 3rem;
-    background-color: rgba(0, 0, 0, .1);
-    border: solid rgba(0, 0, 0, .15);
-    border-width: 1px 0;
-    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.b-example-vr {
-    flex-shrink: 0;
-    width: 1.5rem;
-    height: 100vh;
-}
-
-.bi {
-    vertical-align: -.125em;
-    fill: currentColor;
-}
-
-.nav-scroller {
-    position: relative;
-    z-index: 2;
-    height: 2.75rem;
-    overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-    display: flex;
-    flex-wrap: nowrap;
-    padding-bottom: 1rem;
-    margin-top: -1px;
-    overflow-x: auto;
-    text-align: center;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-}
diff --git a/public/js/app.js b/public/js/app.js
@@ -11,13 +11,16 @@ let ratingEditMode = false
 
 document.addEventListener('DOMContentLoaded', function () {
     const theme = document.cookie.split('; ').find((row) => row.startsWith('theme='))?.split('=')[1] ?? 'light';
-    document.getElementById('darkModeInput').checked = theme !== 'light'
+    const darkModeInput = document.getElementById('darkModeInput');
+    if (darkModeInput != null) {
+        darkModeInput.checked = theme !== 'light'
+    }
 
     const logPlayModalSearchInput = document.getElementById('logPlayModalSearchInput');
     if (logPlayModalSearchInput != null) {
         logPlayModalSearchInput.addEventListener('change', updateLogPlayModalButtonState);
-        document.getElementById('logPlayModalSearchInput').addEventListener('input', updateLogPlayModalButtonState);
-        document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);
+        logPlayModalSearchInput.addEventListener('input', updateLogPlayModalButtonState);
+        logPlayModalSearchInput.addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);
 
         new Datepicker(document.getElementById('logPlayModalWatchDateInput'), {
             format: document.getElementById('dateFormatJavascript').value,
@@ -29,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function () {
         })
 
         document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () {
-            document.getElementById('logPlayModalSearchInput').value = ''
+            logPlayModalSearchInput.value = ''
             resetLogModalLogInputs()
             resetLogModalSearchResults()
             backToLogModalSearchResults()
@@ -153,7 +156,6 @@ function loadLogModalSearchResults(data) {
 
         let releaseYear = '?'
         if (item.release_date != null && item.release_date.length > 4) {
-            console.log(item.release_date)
             releaseYear = item.release_date.substring(0, 4)
         }
 
@@ -211,9 +213,6 @@ async function selectLogModalTmdbItemForLogging(event) {
     document.getElementById('logPlayModalFooter').classList.remove('d-none')
 }
 
-document.getElementById('logPlayModalSearchInput').addEventListener('change', updateLogPlayModalButtonState);
-document.getElementById('logPlayModalSearchInput').addEventListener('input', updateLogPlayModalButtonState);
-
 function updateLogPlayModalButtonState() {
     if (document.getElementById('logPlayModalSearchInput').value !== '') {
         document.getElementById('logPlayModalSearchButton').disabled = false;
@@ -224,8 +223,6 @@ function updateLogPlayModalButtonState() {
     document.getElementById('logPlayModalSearchButton').disabled = true;
 }
 
-document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);
-
 function loadLogModalSearchResultsOnEnterPress(event) {
     // 13=enter, works better to check the key code because the key is named differently on mobile
     if (event.keyCode === 13) {
@@ -316,7 +313,6 @@ function validateWatchDate(context, watchDate) {
         return false
     }
 
-    console.log(context + 'watchDateInput')
     document.getElementById(context + 'WatchDateInput').style.borderStyle = ''
     document.getElementById(context + 'WatchDateInput').style.borderColor = ''
     document.getElementById(context + 'RatingStars').style.marginTop = '0.5rem'
@@ -419,11 +415,6 @@ function updateRatingStars(context, e) {
     setRatingStars(context, e.dataset.value)
 }
 
-new Datepicker(document.getElementById('logPlayModalWatchDateInput'), {
-    format: document.getElementById('dateFormatJavascript').value,
-    title: 'Watch date',
-})
-
 function toggleThemeSwitch() {
     if (document.getElementById('darkModeInput').checked === true) {
         setTheme('dark')

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
@@ -2,7 +2,6 @@ var staticDevCoffee = 'movary';
 var assets = [
   '/',
   '/index.php',
-  '/css/app.css',
   '/js/style.js'
 ];
 

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -10,7 +10,6 @@
     <meta name="theme-color" content="white">
     <link rel="stylesheet" href="/css/bootstrap-icons-1.10.2.css">
     <link rel="stylesheet" href="/css/datepicker-1.2.0.min.css">
-    <link rel="stylesheet" href="/css/app.css">
     {% block stylesheets %}{% endblock %}
 </head>
 <body>

diff --git a/templates/page/directors.html.twig b/templates/page/directors.html.twig
@@ -4,10 +4,6 @@
     Watched Directors
 {% endblock %}
 
-{% block stylesheets %}
-    <link href="/css/app.css" rel="stylesheet">
-{% endblock %}
-
 {% block scripts %}
     <script src="/js/userSelect.js"></script>
     <script src="/js/searchOptions.js"></script>

diff --git a/templates/page/history.html.twig b/templates/page/history.html.twig
@@ -4,10 +4,6 @@
     History
 {% endblock %}
 
-{% block stylesheets %}
-    <link href="/css/app.css" rel="stylesheet">
-{% endblock %}
-
 {% block scripts %}
     <script src="/js/userSelect.js"></script>
 {% endblock %}

diff --git a/templates/page/login.html.twig b/templates/page/login.html.twig
@@ -9,21 +9,23 @@
 {% endblock %}
 
 {% block body %}
+    <script>
+        if ("{{ theme }}" === 'dark') document.getElementsByTagName('body')[0].classList.add('bg-dark')
+    </script>
     <main role="main" class="form-signin w-100 m-auto text-center">
         <form action="/login" method="post" enctype="multipart/form-data">
-            <h1 class="">Movary</h1>
-            <br>
+            <h1 id="header" class="text-{{ theme == 'dark' ? 'light' : 'dark' }}" style="margin-bottom: 1rem">Movary</h1>
             <div class="form-floating">
-                <input type="email" name="email" class="form-control" id="floatingInput" placeholder="name@example.com" required>
+                <input type="email" name="email" class="form-control text-{{ theme == 'dark' ? 'light' : 'dark' }}" id="floatingInput" placeholder="name@example.com" required>
                 <label for="floatingInput">Email address</label>
             </div>
             <div class="form-floating">
-                <input type="password" name="password" class="form-control" id="floatingPassword" placeholder="Password" required>
+                <input type="password" name="password" class="form-control text-{{ theme == 'dark' ? 'light' : 'dark' }}" id="floatingPassword" placeholder="Password" required>
                 <label for="floatingPassword">Password</label>
             </div>
 
             <div class="checkbox mb-3" style="margin-bottom: 0.7rem!important;">
-                <label>
+                <label class="text-{{ theme == 'dark' ? 'light' : 'dark' }}">
                     <input type="checkbox" name="rememberMe" value="true"> Remember me
                 </label>
             </div>