Merge pull request #149 from anurag6569201/main

improved loader updated footer improved ui
SiddharthBahuguna · Jun 11, 2024 · d33bbe9 · d33bbe9
2 parents fa50c56 + 33f5fd8
commit d33bbe9
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 136 deletions.
diff --git a/newsaggregator/core/__pycache__/urls.cpython-312.pyc b/newsaggregator/core/__pycache__/urls.cpython-312.pyc
diff --git a/newsaggregator/core/__pycache__/views.cpython-312.pyc b/newsaggregator/core/__pycache__/views.cpython-312.pyc
diff --git a/newsaggregator/db.sqlite3 b/newsaggregator/db.sqlite3
diff --git a/newsaggregator/static/assets/css/preloader.css b/newsaggregator/static/assets/css/preloader.css
@@ -1,101 +1,74 @@
-/* Preloader CSS */
-#preloader {
+@keyframes loader_5191 {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+.loader{
+    height: 100vh;
+    width: 100%;
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #ffffff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
 }
-
-#preloader .container {
-    background-color: #0095f6;
-    height: 200px;
-    width: 200px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: inset 0 0 0 0.25rem #b4b1b1;
-    flex-direction: column;
-    animation: spin 5s ease-in-out infinite;
-    border-radius: 50%;
+.square {
+    background: var(--foreground-primary);
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -5px;
+    margin-left: -5px;
 }
 
-#preloader .cup {
-    background-color: #b6d5ea;
-    height: 30%;
-    width: 30%;
-    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
-    overflow: hidden;
+#sq1 {
+    margin-top: -25px;
+    margin-left: -25px;
+    animation: loader_5191 675ms ease-in-out 0s infinite alternate;
 }
 
-#preloader .top {
-    transform: rotate(180deg);
+#sq2 {
+    margin-top: -25px;
+    animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
 }
 
-#preloader .sand {
-    background-color: #e9a410;
-    height: 150%;
-    width: 150%;
-    transform-origin: 0% 0%;
-    animation: sandFall 5s linear infinite -2.5s;
+#sq3 {
+    margin-top: -25px;
+    margin-left: 15px;
+    animation: loader_5191 675ms ease-in-out 150ms infinite;
 }
 
-#preloader .bottom {
-    animation-delay: 0s;
+#sq4 {
+    margin-left: -25px;
+    animation: loader_5191 675ms ease-in-out 225ms infinite;
 }
 
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    25%,
-    50% {
-        transform: rotate(180deg);
-    }
+#sq5 {
+    animation: loader_5191 675ms ease-in-out 300ms infinite;
+}
 
-    75% {
-        transform: rotate(360deg);
-    }
+#sq6 {
+    margin-left: 15px;
+    animation: loader_5191 675ms ease-in-out 375ms infinite;
+}
 
-    100% {
-        transform: rotate(360deg);
-    }
+#sq7 {
+    margin-top: 15px;
+    margin-left: -25px;
+    animation: loader_5191 675ms ease-in-out 450ms infinite;
 }
 
-@keyframes sandFall {
-    0%, 100% {
-        border-radius: 5%;
-        transform: translate(35%, 20%) rotate(45deg);
-    }
-    15% {
-        border-radius: 40%;
-        transform: translate(0%, 35%) rotate(-65deg) scale(1.5, 1.5);
-    }
-    25% {
-        border-radius: 20%;
-        transform: translate(-15%, 35%) rotate(-90deg) scale(1.2, 1.2);
-    }
-    50% {
-        border-radius: 5%;
-        transform: translate(0%, 0%) rotate(-90deg) scale(1.1);
-        opacity: 1;
-    }
-    50.01%, 64.99% {
-        opacity: 0;
-    }
-    65% {
-        border-radius: 35%;
-        transform: translate(20%, 50%) rotate(30deg);
-        opacity: 1;
-    }
-    75% {
-        border-radius: 10%;
-        transform: translate(35%, 40%) rotate(45deg);
-    }
+#sq8 {
+    margin-top: 15px;
+    animation: loader_5191 675ms ease-in-out 525ms infinite;
 }
+
+#sq9 {
+    margin-top: 15px;
+    margin-left: 15px;
+    animation: loader_5191 675ms ease-in-out 600ms infinite;
+}
diff --git a/newsaggregator/static/assets/css/style.css b/newsaggregator/static/assets/css/style.css
@@ -60,7 +60,15 @@
 }
 
 
-
+.goog-te-combo{
+  border-radius: 5px;
+  padding: 4px;
+  color: var(--foreground-tertiary);
+}
+.VIpgJd-ZVi9od-l4eHX-hSRGPd img{
+  width: 90px;
+  height: 40px;
+}
 
 
 /*-----------------------------------*\ 
@@ -522,7 +530,7 @@ footer .footer-section {
 
 }
 
-footer .wrapper { text-align: center; }
+footer .wrapper { text-align: center;padding: 0; }
 
 .footer-logo { margin-bottom: 10px; }
 

diff --git a/newsaggregator/static/assets/js/preloader.js b/newsaggregator/static/assets/js/preloader.js
@@ -1,9 +1,13 @@
 window.addEventListener('load', function() {
-    const preloader = document.getElementById('preloader');
-    const mainContent = document.querySelector('.outer-align');
+    const preloader = document.querySelector('.loader');
+    const mainContentlight = document.querySelector('.light-theme');
+    const mainContentdark = document.querySelector('.dark-theme');
 
     setTimeout(() => {
         preloader.style.display = 'none';
-        mainContent.style.display = 'flex';
+        mainContentlight.style.pointerEvents = 'all';
+        mainContentlight.style.overflow = 'auto';
+        mainContentdark.style.pointerEvents = 'all';
+        mainContentdark.style.overflow = 'auto';
     }, 100);
 });
diff --git a/newsaggregator/templates/components/footer.html b/newsaggregator/templates/components/footer.html
@@ -1,7 +1,7 @@
 {% load static %}
-<footer>
-    <div class="footer-section">
-        <div class="wrapper">
+<footer class="container">
+    <div class="footer-section row" style="justify-content: space-between;">
+        <div class="wrapper col-md-3 col-12">
             <a href="#" class="footer-logo">
                 <span class="logo-light">
                     <span class="logo-container"><img src="{% static './assets/images/news.png' %}" alt="logo" width="70" />Onion News</span>
@@ -16,7 +16,7 @@
             </p>
         </div>
 
-        <div class="wrapper">
+        <div class="wrapper col-md-3 col-12" style="justify-content: center;display: flex;">
             <div id="google_element"></div>
             <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
             <script>
@@ -28,7 +28,7 @@
             </script>
         </div>
 
-        <div class="wrapper">
+        <div class="wrapper col-md-3 col-12" style="display: flex;justify-content: space-around;flex-direction: column;">
             <p class="footer-title">Legal Stuff</p>
             <ul>
                 <li>