improved design and ui/ux of website

board/forms.py

-from django import forms
 from .models import Questboard, Quest
+from django import forms
 
 class QuestboardForm(forms.ModelForm):
     class Meta:
         model = Questboard
         fields = ['name', 'description', 'required_stars']
+        widgets = {
+            'description' : forms.Textarea(), 
+            'required_stars' : forms.NumberInput(attrs = {'min' : 0}),
+        }
 
 class QuestForm(forms.ModelForm):
     class Meta:
         model = Quest
         fields = ['board_id', 'name', 'description', 'stars', 'for_everyone','student1','student2', 'student3']
         widgets = {'board_id' : forms.HiddenInput(),
+                   'description' : forms.Textarea(),
+                   'stars' : forms.NumberInput(attrs = {'min' : 0}),
                    'student1' : forms.HiddenInput(),
                    'student2' : forms.HiddenInput(),
                    'student3' : forms.HiddenInput(),
@@ -36,6 +42,6 @@ class EditBoardDescForm(forms.Form):
 
 class EditBoardStarsForm(forms.Form):
     board_id = forms.IntegerField(widget = forms.HiddenInput())
-    required_stars = forms.IntegerField()
+    required_stars = forms.IntegerField(widget = forms.NumberInput(attrs = {'min' : 0}))
 
 

board/migrations/0003_auto_20210410_1446.py

+# Generated by Django 3.1.7 on 2021-04-10 06:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('board', '0002_auto_20210409_1815'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quest',
+            name='board_id',
+            field=models.PositiveIntegerField(default=0),
+        ),
+        migrations.AlterField(
+            model_name='quest',
+            name='stars',
+            field=models.PositiveIntegerField(default=0),
+        ),
+        migrations.AlterField(
+            model_name='questboard',
+            name='required_stars',
+            field=models.PositiveIntegerField(),
+        ),
+    ]

board/migrations/0004_auto_20210410_1452.py

+# Generated by Django 3.1.7 on 2021-04-10 06:52
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('board', '0003_auto_20210410_1446'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quest',
+            name='board_id',
+            field=models.PositiveIntegerField(default=0, validators=[django.core.validators.MinValueValidator(1)]),
+        ),
+        migrations.AlterField(
+            model_name='quest',
+            name='stars',
+            field=models.PositiveIntegerField(default=0, validators=[django.core.validators.MinValueValidator(0)]),
+        ),
+        migrations.AlterField(
+            model_name='questboard',
+            name='required_stars',
+            field=models.PositiveIntegerField(validators=[django.core.validators.MinValueValidator(1)]),
+        ),
+    ]

board/models.py

+from django.core.validators import MinValueValidator
 from django.db import models
 
 class Questboard(models.Model):
     name = models.CharField(max_length = 50)
     description = models.CharField(max_length = 300)
-    required_stars = models.IntegerField()
+    required_stars = models.PositiveIntegerField(validators=[MinValueValidator(0)])
     
 class Quest(models.Model):
-    board_id = models.IntegerField(default = 0)
+    board_id = models.PositiveIntegerField(default = 0, validators=[MinValueValidator(0)])
     name = models.CharField(max_length = 60, default = '')
     description = models.CharField(max_length = 300, default = '')
-    stars = models.IntegerField(default = 0)
+    stars = models.PositiveIntegerField(default = 0, validators=[MinValueValidator(0)])
     for_everyone = models.BooleanField(default = False)
     student1 = models.CharField(max_length = 60, default = '', blank = True)
     student2 = models.CharField(max_length = 60, default = '', blank = True)

board/views.py

 from django.shortcuts import redirect, render
+from django.http import HttpRequest
 from .models import Quest, Questboard
 from .forms import *
 
@@ -10,6 +11,7 @@ def edit_board_view(request, pk):
         {
             'questboard' : Questboard.objects.get(pk=pk),
             'quests' : Quest.objects.filter(board_id=pk),
+            'share_url' : get_share_url(request, pk),
             'edit_board_name_form' : EditBoardNameForm(initial={'board_id' : pk}),
             'edit_board_desc_form' : EditBoardDescForm(initial={'board_id' : pk}),
             'edit_board_stars_form' : EditBoardStarsForm(initial={'board_id' : pk}),
@@ -25,9 +27,12 @@ def view_board_view(request, pk):
         {   
             'questboard' : Questboard.objects.get(pk=pk),
             'quests' : Quest.objects.filter(board_id=pk),
+            'share_url' : get_share_url(request, pk),
             'signup_form' : StudentSignupForm(auto_id = 'signup_%s')
         }
     )
+def get_share_url(request, pk):
+    return request.build_absolute_uri('/questboard/view/' + str(pk))
 
 def add_quest(request):
     if request.method == "POST":

static/board/board.css

+.dropdown{
+    position : relative;
+    display : inline-block;
+}
+.dropdown-content{
+    display : none;
+    position: absolute;
+    background-color: gainsboro;
+    min-width: 6vw;
+    box-shadow: 0vw 0.5vw 1vw 0vw rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content button{
+    padding-top: 0.2vw;
+    padding-bottom: 0.2vw;
+    width:100%;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+}
+.dropdown:hover .dropdown-content {display: block;}
+
+.infobox{
+    width: 70vw;
+    border : 1px solid black;
+    padding-left:1vw;
+}
+.questbox_wrapper{
+    display:inline;
+    float:left;
+    margin-left : 1vw;
+    margin-right : 1vw;
+    height: 70vh;
+    width: 320px;
+}
+.questbox{
+    border : 1px solid black;
+    padding:2vw;
+}
+.questbox_name{
+    font-size:large;
+    font-weight:bold;
+    text-align:center;
+}
+.questbox_description{
+    text-align:center;
+}
+.questbox_stars{
+    text-align:center;
+}
+.questbox_students{
+    display:block;
+    margin:auto;
+    padding-top:1vh;
+    padding-bottom:1vh;
+}
+.questbox_actions{
+    display:block;
+    margin:auto;
+    padding-top:1vh;
+    padding-bottom:1vh;
+}
\ No newline at end of file

static/styles.css

+*{
+    line-height : 1.5;
+    font-family : 'Roboto', sans-serif;
+}
+
+dialog{
+    width: 35vw;
+}
+dialog form input{
+    display:block;
+}
+dialog form label{
+    font-weight : bold;
+    display:block;
+}
+dialog form textarea{
+    display:block;
+}
+dialog form button{
+    font-weight : bold;
+    display:block;
+    margin-top:0.5vw;
+    padding: 0.2vw 1vw;
+    border-width:0.4vw;
+}
+
+table, table tr, table tr th, table tr td{
+    border : 1px solid black;
+}
+
+table{
+    border-collapse : collapse;
+}
+
+table tr td, table tr th{
+    padding-left : 1vw;
+    padding-right : 3vw;
+    padding-top : .5vw;
+    padding-bottom : .5vw;
+    text-align : left;
+    max-width : 30vw;
+}
+
+#contents{
+    float : left;
+    width : 70vw;
+    margin-left : 10vw;
+    margin-right : 10vw;
+    padding: 3vh 5vw;
+    background-color: white;
+}
+
+.menu{
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    list-style-type: none;
+    background-color: #333;
+}
+
+.menu li{
+    float: left;
+}
+
+.menu li a{
+    color: white;
+    display: block;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.menu li a:hover {
+    background-color: #111;
+}
+
+.homepage_link{
+    margin-top : 3vh;
+    margin-left : 3vw;
+}
+
+.website_header{
+    font-size:48px;
+    font-weight:bold;
+    font-style:italic;
+    color:darkslateblue;
+    line-height:0.0;
+}
+.website_author{
+    font-style: italic;
+}
+.page_header{
+    font-weight:bold;
+    font-size:x-large;
+}
+
+.large_header{
+    font-weight:bold;
+    text-align:center;
+    font-size:xx-large;
+}
+
+.sub_header{
+    font-size:large;
+    font-weight:bold;
+}
+
+.button{
+    padding: 0.2vw 1vw;
+    margin-top : 0.5vw;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+}
+

templates/base.html

@@ -20,9 +20,10 @@
     </head>
 
     <body>
-        <a href = "/home/"><p class = "website_header">QUESTBOARD</p></a>
-
+        <a href = "/home/"><p class = "homepage_link">Back to Homepage</p></a>
         <div id="contents">
+            <a href = "/home/"><p class = "website_header">Questboard!</p></a>
+            <p class = "website_author">Implemented by Aedin Clay</p>
             <p class = "page_header">{% block header %}{% endblock %}</p>
             {% block content %}{% endblock %}
         </div>

templates/board/board.html

@@ -11,16 +11,19 @@
 
 {% block content %}
 
-Required Stars: {{questboard.required_stars}}<br/>
-{{questboard.description}}<br/>
+<div class = "infobox">
+    <p><b>Description:</b> {{questboard.description}}</p>
+    <p><b>Required stars:</b> {{questboard.required_stars}}</p>
+</div>
+
 <!-- Copy questboard link -->
-<button onclick = "copyQuestboardLink()">Copy Questboard Link</button><br/>
+<button onclick = "copyQuestboardLink()" class = "button">Copy Questboard Link</button>
 
 <script>
 function copyQuestboardLink(){
     var link_area = document.createElement("textarea")
     document.body.appendChild(link_area);
-    link_area.value = window.location.href;
+    link_area.value = '{{ share_url }}';
     link_area.select();
     document.execCommand("copy");
     document.body.removeChild(link_area);
@@ -28,20 +31,20 @@ function copyQuestboardLink(){
 </script>
 
 {% block extra_content %}{% endblock %}
-
+<br/>
+<p class = "sub_header">Quests:</p>
 {% if quests %}
-    Quests in the Questboard:
     <div id = "quest_display">
 
         {% for quest in quests %}
+        <div class = "questbox_wrapper">
         <div class = "questbox">
             <p class = "questbox_name">{{ quest.name }}</p>
             <p class = "questbox_description">{{ quest.description }}</p>
             <p class = "questbox_stars">Stars : {{quest.stars}}</p>
             <div class = "questbox_students">
-
             {% if quest.for_everyone is True %}
-            <b> for everyone </b>
+                This Quest is for everyone.
             {% else %}
                 <ol>
                     <li>{{quest.student1}}</li>
@@ -54,8 +57,11 @@ function copyQuestboardLink(){
                 {% block questbox_actions %}{% endblock %}
             </span>
         </div>
+        </div>
         {% endfor %}
     </div>
+{% else %}
+<i>No Quests so Far</i>
 {% endif %}
 
 

templates/board/edit_board.html

@@ -2,10 +2,16 @@
 {% load static %}
 
 {% block extra_content %}
-<button onclick="showEditBoardName()">Edit Questboard Name</button>
-<button onclick="showEditBoardDesc()">Edit Questboard Description</button>
-<button onclick="showEditBoardStars()">Edit Questboard Required Stars</button>
-<button onclick="showAddQuest()">Add Quest</button>
+<div class = "dropdown">
+    <button class = "button">Edit Options</button>
+    <div class = "dropdown-content">
+        <button onclick="showEditBoardName()">Edit Name</button>
+        <button onclick="showEditBoardDesc()">Edit Description</button>
+        <button onclick="showEditBoardStars()">Edit Required Stars</button>
+    </div>
+</div>
+<button class = "button" onclick="showAddQuest()">Add Quest</button>
+
 <br/>
 <dialog id="edit_board_name">
     <form action = "/questboard/edit/edit_board_name/" method = "post">
@@ -66,10 +72,10 @@
 {% block questbox_actions %}
 <!-- If no student has signed up yet or the quest is for everyone, then the quest can be edited / deleted -->
 {% if quest.student1 == '' and quest.student2 == '' and quest.student3 == '' %}
-<button onclick="showEditQuest({{quest.pk}})">Edit Quest</button>
-<button onclick="showDeleteQuest({{quest.pk}})">Delete Quest</button>
+<button onclick="showEditQuest({{quest.pk}})" class = "button">Edit Quest</button>
+<button onclick="showDeleteQuest({{quest.pk}})" class = "button">Delete Quest</button>
 {% else %}
-<p>Cannot Edit Quest: students signed up alsready</p>
+<p>Cannot Edit Quest: students have already signed up.</p>
 {% endif %}
 {% endblock %}
 

templates/board/view_board.html

@@ -13,10 +13,6 @@
 {% endblock %}
 
 {% block extra_content %}
-<!-- Display current URL so it can be copied and sent to students -->
-<p>
-Share this course by copying this link! :
-</p>
 <dialog id = "quest_signup">
     Please enter your name to sign up for this quest.
     <form action = "/questboard/view/student_signup/" method = "post">

templates/homepage/homepage.html

@@ -23,10 +23,10 @@
         <td>{{ board.name }}</td>
         <td>
             <a href = "/questboard/edit/{{ board.pk }}">
-                <button class = "button">Edit Questboard as Teacher</button>
+                <button>Edit as Teacher</button>
             </a>
             <a href = "/questboard/view/{{ board.pk }}">
-                <button class = "button">View Questboard as Student</button>
+                <button>View as Student</button>
             </a>
         </td>
     </tr>