Few UI adjustments

course/forms.py

@@ -85,7 +85,6 @@ class UploadFormFile(forms.ModelForm):
         fields = (
             "title",
             "file",
-            "course",
         )
 
     def __init__(self, *args, **kwargs):
@@ -101,7 +100,6 @@ class UploadFormVideo(forms.ModelForm):
         fields = (
             "title",
             "video",
-            "course",
         )
 
     def __init__(self, *args, **kwargs):

course/migrations/0007_alter_upload_file_alter_uploadvideo_video.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.0.8 on 2024-01-16 20:14
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('course', '0006_courseoffer'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='upload',
+            name='file',
+            field=models.FileField(help_text='Valid Files: pdf, docx, doc, xls, xlsx, ppt, pptx, zip, rar, 7zip', upload_to='course_files/', validators=[django.core.validators.FileExtensionValidator(['pdf', 'docx', 'doc', 'xls', 'xlsx', 'ppt', 'pptx', 'zip', 'rar', '7zip'])]),
+        ),
+        migrations.AlterField(
+            model_name='uploadvideo',
+            name='video',
+            field=models.FileField(help_text='Valid video formats: mp4, mkv, wmv, 3gp, f4v, avi, mp3', upload_to='course_videos/', validators=[django.core.validators.FileExtensionValidator(['mp4', 'mkv', 'wmv', '3gp', 'f4v', 'avi', 'mp3'])]),
+        ),
+    ]

course/models.py

@@ -165,6 +165,7 @@ class Upload(models.Model):
     course = models.ForeignKey(Course, on_delete=models.CASCADE)
     file = models.FileField(
         upload_to="course_files/",
+        help_text="Valid Files: pdf, docx, doc, xls, xlsx, ppt, pptx, zip, rar, 7zip",
         validators=[
             FileExtensionValidator(
                 [
@@ -233,6 +234,7 @@ class UploadVideo(models.Model):
     course = models.ForeignKey(Course, on_delete=models.CASCADE)
     video = models.FileField(
         upload_to="course_videos/",
+        help_text="Valid video formats: mp4, mkv, wmv, 3gp, f4v, avi, mp3",
         validators=[
             FileExtensionValidator(["mp4", "mkv", "wmv", "3gp", "f4v", "avi", "mp3"])
         ],

course/views.py

@@ -311,10 +311,12 @@ def deallocate_course(request, pk):
 def handle_file_upload(request, slug):
     course = Course.objects.get(slug=slug)
     if request.method == "POST":
-        form = UploadFormFile(request.POST, request.FILES, {"course": course})
+        form = UploadFormFile(request.POST, request.FILES)
-        # file_name = request.POST.get('name')
         if form.is_valid():
-            form.save()
+            obj = form.save(commit=False)
+            obj.course = course
+            obj.save()
+
             messages.success(
                 request, (request.POST.get("title") + " has been uploaded.")
             )
@@ -369,9 +371,12 @@ def handle_file_delete(request, slug, file_id):
 def handle_video_upload(request, slug):
     course = Course.objects.get(slug=slug)
     if request.method == "POST":
-        form = UploadFormVideo(request.POST, request.FILES, {"course": course})
+        form = UploadFormVideo(request.POST, request.FILES)
         if form.is_valid():
-            form.save()
+            obj = form.save(commit=False)
+            obj.course = course
+            obj.save()
+
             messages.success(
                 request, (request.POST.get("title") + " has been uploaded.")
             )

static/scss/style.scss

@@ -135,8 +135,6 @@ body {
   z-index: 90;
   /*padding: 0.4rem 1rem;*/
   background: #f5f5f5;
-  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   transition: 0.3s;
 
@@ -213,12 +211,7 @@ body {
   font-size: 13px;
   color: #666;
   padding: 0 17px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
   border-radius: 3px;
-  -webkit-transition: all 0.2s ease;
-  -o-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
 .au-input:focus {

templates/course/course_single.html

@@ -41,21 +41,9 @@
 <div class="title-1">{{ course }}</div>
 <p class="small text-muted">{{ course.summary }}</p>
 
-<div class="container">
+{% include 'snippets/messages.html' %}
 
-    {% if messages %}
+<div class="container">
-    {% for message in messages %}
-    {% if message.tags == 'error' %}
-    <div class="alert alert-danger">
-        <i class="fas fa-exclamation-circle"></i>{{ message }}
-    </div>
-    {% else %}
-    <div class="alert alert-success">
-        <i class="fas fa-check-circle"></i>{{ message }}
-    </div>
-    {% endif %}
-    {% endfor %}
-    {% endif %}
 
     <div class="row mb-5">
         <div class="col-md-12 p-0">
@@ -77,9 +65,9 @@
                         {% for video in videos %}
                         <tr>
                             <td>{{ forloop.counter }}</td>
-                            <td><a href="{{ video.get_absolute_url }}" title="{{ video }}">
+                            <td>
-                                    <i style="font-size: 20px; padding-right: 10px;" class="fas fa-video"></i>
+                                <a href="{{ video.get_absolute_url }}" title="{{ video }}" class="d-flex align-items-center">
-                                    {{ video.title|title }}
+                                    <i class="fas fa-video me-1"></i> {{ video.title|title }}
                                 </a>
                             </td>
                             <td>{{ video.timestamp|date }}</td>
@@ -87,7 +75,7 @@
                                 <div>
                                     <a class="download-btn" href="{{ video.get_absolute_url }}"
                                         title="Download to your device">
-                                        <i class="fas fa-download"></i>Get Started</a>
+                                        <i class="fas fa-play me-1"></i>Play now</a>
                                 </div>
                             </th>
 
@@ -154,9 +142,8 @@
                         {% for file in files %}
                         <tr>
                             <td>{{ forloop.counter }}</td>
-                            <td><a href="{{ file.file.url }}" title="{{ file }}">
+                            <td><a href="{{ file.file.url }}" title="{{ file }}" class="d-flex align-items-center">
-                                    <i style="font-size: 20px; padding-right: 10px;"
+                                    <i class="fas fa-file-{{ file.get_extension_short }} me-1"></i>
-                                        class="fas fa-file-{{ file.get_extension_short }}"></i>
                                     {{ file.title|title }}
                                 </a>
                             </td>
@@ -165,7 +152,7 @@
                             <th>
                                 <div>
                                     <a class="download-btn" href="{{ file.file.url }}" title="Download to your device">
-                                        <i class="fas fa-download"></i>Download</a>
+                                        <i class="fas fa-download me-1"></i>Download</a>
                                 </div>
                             </th>
 

templates/upload/upload_file_form.html

@@ -14,54 +14,27 @@
     </ol>
 </nav>
     
-<p class="title-1">File upload for {{ course }}</p>
+<p class="title-1">File upload for {{ course|truncatechars:25 }}</p>
-<div class="title-line"></div><br>
+<br><br>
 
-{% if messages %}
+{% include 'snippets/messages.html' %}
-    {% for message in messages %}
-        {% if message.tags == 'error' %}
-            <div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
-        {% else %}
-            <div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
-        {% endif %}
-    {% endfor %}
-{% endif %}
 
 <div class="row">
-<div class="col-md-8 p-0 mx-auto">
+    <div class="col-md-8 p-0 mx-auto">
         <div class="card">
-    <p class="form-title">File Upload Form</p><br>
+            <p class="form-title">File Upload Form</p>
-    <form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
+
-        <div class="container">
+            <div class="card-body">
+                <form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
+                    {{ form|crispy }}
                     
-            <div class="form-group">
-                <b>File Name</b>{{ form.title }}
-                <span class="danger">{{ form.title.errors }}</span>
-            </div>
-            <div class="form-group">
-                <b>File</b><br>{{ form.file }}
-                <span class="danger">{{ form.file.errors }}</span>
-            </div>
-            <p class="text-orange"><b>Valid Files: </b>pdf, docx, doc, xls, xlsx, ppt, pptx, zip, rar, 7zip</p>
-            <div class="form-group">
-                <select hidden name="course" required="" id="id_course">
-                    <option value="{{ course.pk }}" selected>{{ course }}</option>
-                </select>
-            </div>
                     <div class="form-group">
                         <button class="btn btn-primary" type="submit">Upload</button>
                         <a class="btn btn-danger" href="{% url 'course_detail' course.slug %}" style="float: right;">Cancel</a>
                     </div>
-
-        </div>
-        <br>
-        <div class="card">
             </form>
-</div>
+        </div>
+    </div>
 </div>
 
 {% endblock content %}

templates/upload/upload_video_form.html

@@ -14,53 +14,25 @@
     </ol>
 </nav>
     
-<p class="title-1">Video upload for {{ course }}</p>
+<p class="title-1">Video upload for {{ course|truncatechars:25 }}</p>
 <div class="title-line"></div><br>
 
-{% if messages %}
+{% include 'snippets/messages.html' %}
-    {% for message in messages %}
-        {% if message.tags == 'error' %}
-            <div class="alert alert-danger">
-                <i class="fas fa-exclamation-circle"></i>{{ message }}
-            </div>
-        {% else %}
-            <div class="alert alert-success">
-                <i class="fas fa-check-circle"></i>{{ message }}
-            </div>
-        {% endif %}
-    {% endfor %}
-{% endif %}
 
 <div class="row">
-<div class="col-md-8 p-0 mx-auto">
+<div class="col-md-8 mx-auto">
     <div class="card">
-    <p class="form-title">Video Upload Form</p><br>
+    <p class="form-title">Video Upload Form</p>
+    <div class="card-body">
         <form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
-        <div class="container">
+            {{ form|crispy }}
             
-            <div class="form-group">
-                <b>Video Name</b>{{ form.title }}
-                <span class="danger">{{ form.title.errors }}</span>
-            </div>
-            <div class="form-group">
-                <b>Video</b><br>{{ form.video }}
-                <span class="danger">{{ form.video.errors }}</span>
-            </div>
-            <p class="text-orange"><b>Valid video formats: </b>'mp4', 'mkv', 'wmv', '3gp', 'f4v', 'avi', 'mp3'</p>
-            <div class="form-group">
-                <select hidden name="course" required="" id="id_course">
-                    <option value="{{ course.pk }}" selected>{{ course }}</option>
-                </select>
-            </div>
             <div class="form-group">
                 <button class="btn btn-primary" type="submit">Upload</button>
                 <a class="btn btn-danger" href="{% url 'course_detail' course.slug %}" style="float: right;">Cancel</a>
             </div>
-
-        </div>
-        <br>
-        <div class="card">
         </form>
+    </div>
 </div>
 </div>
 

templates/upload/video_single.html

@@ -15,9 +15,7 @@
 </nav>
     
 <p class="title-1">{{ video.title }}</p>
-<div class="title-line"></div><br>
+<br><br>
-
-<p class="text-orange text-center">Video tutorial for course {{ video.course }}</p>
 
 <style>
     video{
@@ -28,10 +26,13 @@
 </style>
 
 <div class="col-md-10 mx-auto d-block">
-    <p><i class="fas fa-calendar"></i> {{ video.timestamp|timesince }} ago</p>
     <div class=""><video src="{{ video.video.url }}" controls ></video></div>
+    <p><i class="fas fa-calendar"></i> {{ video.timestamp|timesince }} ago</p>
+    {% if video.summary %}
+    <p class="text-orange text-center">{{ video.summary }}</p>
+    {% else %}
+    No video description set.
+    {% endif %}
 </div>
 
-<p class="text-orange text-center">{{ video.summary }}</p>
-
 {% endblock content %}