Minor UI improvements and update README.md

.gitignore

@@ -148,4 +148,5 @@ media/result_sheet/*
 !media/result_sheet/README.txt
 
 # Custom
-dump.rdb
+dump.rdb
+*.DS_Store

README.md

@@ -96,10 +96,28 @@ celery -A config.celery worker -l INFO
 
 Last but not least, go to this address http://127.0.0.1:8000
 
-### References
+# References
 
 - Quiz part: https://github.com/tomwalker/django_quiz
 
+# Professional help
+
+<a href="https://adilmohak.github.io/dj-lms-starter/" style="display: flex; background-color: #ddd; border-radius: 8px; color: #000; padding: 20px;">
+    <div>
+        <h4 style="margin-top: 0; font-size: 32px;">Need professional help?</h4>
+        <div style="display: flex; text-align: center; justify-content: center; border-radius: 8px; padding: 14px; background-color: #FFC530; border: 1px solid #000; font-size: 18px;">Learn more</div>
+    </div>
+    <ul>
+        <li>Step-by-Step Guide</li>
+        <li>Installation and Setup</li>
+        <li>Custom Development</li>
+        <li>Support and Maintenance</li>
+        <li>Performance Optimization</li>
+        <li>...And much more</li>
+    </ul>
+</a>
+<br>
+
 # Connect with me
 
 <div>
@@ -119,6 +137,6 @@ Last but not least, go to this address http://127.0.0.1:8000
 
 ### Help me improve the project and upgrade my trusty old laptop
 
-<p><a href="https://www.buymeacoffee.com/adilmohak"> <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="adilmohak" /></a></p><br><br>
+<p><a href="https://www.buymeacoffee.com/adilmohak"> <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="36" width="160" alt="adilmohak" /></a></p><br><br>
 
 #### Show your support by ⭐️ this project!

static/scss/style.scss

@@ -973,3 +973,164 @@ a {
   background-color: initial;
   border-radius: initial;
 }
+.card-count {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .text-right {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+    gap: 5px;
+    h2 {
+      margin: 0;
+    }
+  }
+}
+@media (min-width: 800px) {
+  .card-count {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .text-right {
+      display: block;
+      text-align: end;
+      h2 {
+        margin: 0;
+      }
+    }
+  }
+  .card-count .fas,
+  .card-count .fa {
+    border-right: 1px solid #ddd;
+  }
+  .users-count .card-count h3 {
+    border-right: 1px solid rgb(230, 230, 230);
+  }
+}
+
+.chart-wrap {
+  position: relative;
+  padding: 1rem;
+  transition: 0.5s;
+  background-color: #fff;
+  border-radius: 10px;
+}
+
+.fa-expand-alt {
+  display: none;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.fa-expand-alt:hover {
+  background-color: #f1f1f1;
+}
+
+.chart-wrap:hover {
+  box-shadow: 0 0 0 1px inset #666;
+}
+
+.chart-wrap:hover .fa-expand-alt {
+  display: block;
+}
+
+.expand {
+  transform: translateY(100%);
+  position: fixed;
+  bottom: 0;
+  top: 3rem;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 999;
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%;
+  background-color: #fff;
+  /* For Internet Explorer */
+  box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5) !important;
+  /* For other browsers */
+  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
+  transform-origin: bottom left;
+  animation: popupAnim forwards alternate 0.5s ease-in-out;
+  overflow: auto;
+}
+
+.expand .fa-expand-alt {
+  display: block;
+}
+
+@keyframes popupAnim {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.users-count .card-count {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+}
+
+.users-count .card-count h2 {
+  font-weight: 1000;
+}
+
+.users-count .card-count h3 {
+  flex: 0 0 40%;
+}
+
+.users-count .card-count h3 i {
+  display: inline-flex;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.bg-light-aqua {
+  background-color: rgba(32, 177, 177, 0.8) !important;
+  box-shadow: 0 0 0 10px rgba(32, 177, 177, 0.2) !important;
+  color: #fff !important;
+}
+
+.bg-light-orange {
+  background-color: rgba(253, 174, 28, 0.8) !important;
+  box-shadow: 0 0 0 10px rgba(253, 174, 28, 0.2) !important;
+  color: #fff !important;
+}
+
+.bg-light-purple {
+  background-color: rgba(203, 31, 255, 0.8) !important;
+  box-shadow: 0 0 0 10px rgba(203, 31, 255, 0.2) !important;
+  color: #fff !important;
+}
+
+.bg-light-red {
+  background-color: rgba(255, 19, 157, 0.8) !important;
+  box-shadow: 0 0 0 10px rgba(255, 19, 157, 0.2) !important;
+  color: #fff !important;
+}
+
+.activities ul {
+  padding-left: 0.5rem;
+}
+
+.activities ul li {
+  list-style-type: disc;
+}

templates/core/dashboard.html

@@ -28,133 +28,6 @@
 {% endfor %}
 {% endif %}
 
-<style>
-	.chart-wrap {
-		position: relative;
-		padding: 1rem;
-		transition: .5s;
-		background-color: #fff;
-		border-radius: 10px;
-	}
-
-	.fa-expand-alt {
-		display: none;
-		position: absolute;
-		top: .5rem;
-		right: .5rem;
-		padding: .5rem;
-		cursor: pointer;
-		transition: .3s;
-	}
-
-	.fa-expand-alt:hover {
-		background-color: #f1f1f1;
-	}
-
-	.chart-wrap:hover {
-		box-shadow: 0 0 0 1px inset #666;
-	}
-
-	.chart-wrap:hover .fa-expand-alt {
-		display: block;
-	}
-
-	.expand {
-		transform: translateY(100%);
-		position: fixed;
-		bottom: 0;
-		top: 3rem;
-		left: 0;
-		right: 0;
-		width: 100%;
-		z-index: 999;
-		-ms-flex: 0 0 100%;
-		flex: 0 0 100%;
-		background-color: #fff;
-		/* For Internet Explorer */
-		box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5) !important;
-		/* For other browsers */
-		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
-		transform-origin: bottom left;
-		animation: popupAnim forwards alternate .5s ease-in-out;
-		overflow: auto;
-	}
-
-	.expand .fa-expand-alt {
-		display: block;
-	}
-
-	@keyframes popupAnim {
-		from {
-			transform: translateY(100%);
-		}
-
-		to {
-			transform: translateY(0);
-		}
-	}
-
-	.users-count .card-count {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background-color: #fff;
-	}
-
-	.users-count .card-count h2 {
-		font-weight: 1000;
-	}
-
-	.users-count .card-count h3 {
-		flex: 0 0 40%;
-		border-right: 1px solid rgb(230, 230, 230);
-	}
-
-	.users-count .card-count h3 i {
-		display: inline-flex;
-		width: 60px;
-		height: 60px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-	}
-
-	.bg-light-aqua {
-		background-color: rgba(32, 177, 177, 0.8) !important;
-		box-shadow: 0 0 0 10px rgba(32, 177, 177, 0.2) !important;
-		color: #fff !important;
-	}
-
-	.bg-light-orange {
-		background-color: rgba(253, 174, 28, 0.8) !important;
-		box-shadow: 0 0 0 10px rgba(253, 174, 28, 0.2) !important;
-		color: #fff !important;
-	}
-
-	.bg-light-purple {
-		background-color: rgba(203, 31, 255, 0.8) !important;
-		box-shadow: 0 0 0 10px rgba(203, 31, 255, 0.2) !important;
-		color: #fff !important;
-	}
-
-	.bg-light-red {
-		background-color: rgba(255, 19, 157, 0.8) !important;
-		box-shadow: 0 0 0 10px rgba(255, 19, 157, 0.2) !important;
-		color: #fff !important;
-	}
-
-	.activities ul {
-		padding-left: .5rem;
-	}
-
-	.activities ul li {
-		list-style-type: disc;
-	}
-</style>
-
 <div class="d-flex justify-content-between align-items-center mb-4">
 	<h1 class="title-1">Dashboard</h1>
 	<div class="dropdown">
@@ -173,7 +46,7 @@
 </div>
 
 <div class="row users-count px-3">
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-aqua"></i></h3>
 			<div class="text-right">
@@ -182,7 +55,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-orange"></i></h3>
 			<div class="text-right">
@@ -191,7 +64,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-red"></i></h3>
 			<div class="text-right">
@@ -200,7 +73,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-purple"></i></h3>
 			<div class="text-right">
@@ -209,7 +82,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-red"></i></h3>
 			<div class="text-right">
@@ -218,7 +91,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-purple"></i></h3>
 			<div class="text-right">
@@ -227,7 +100,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-orange"></i></h3>
 			<div class="text-right pl-2">
@@ -236,7 +109,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-3 mb-3 px-2">
+	<div class="col-6 col-md-3 mb-3 px-2">
 		<div class="card-count p-3">
 			<h3><i class="fas fa-users bg-light-aqua"></i></h3>
 			<div class="text-right">