Skip to content

P
project_questboard
Commit 24351d19 authored by Aedin Hunter A. Clay's avatar Aedin Hunter A. Clay
Browse files
Options

improved design and ui/ux of website

parent 69976415
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 47 deletions
board/forms.py
View file @ 24351d19
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 0 → 100644
View file @ 24351d19
# 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 0 → 100644
View file @ 24351d19
# 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
View file @ 24351d19
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
View file @ 24351d19
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 0 → 100644
View file @ 24351d19
.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 0 → 100644
View file @ 24351d19
*{
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
View file @ 24351d19
......@@ -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
View file @ 24351d19
......@@ -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,34 +31,37 @@ 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">
<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>
{% else %}
<ol>
<li>{{quest.student1}}</li>
<li>{{quest.student2}}</li>
<li>{{quest.student3}}</li>
</ol>
{% endif %}
{% 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 %}
This Quest is for everyone.
{% else %}
<ol>
<li>{{quest.student1}}</li>
<li>{{quest.student2}}</li>
<li>{{quest.student3}}</li>
</ol>
{% endif %}
</div>
<span class = "questbox_actions">
{% block questbox_actions %}{% endblock %}
</span>
</div>
<span class = "questbox_actions">
{% block questbox_actions %}{% endblock %}
</span>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% else %}
<i>No Quests so Far</i>
{% endif %}
......
templates/board/edit_board.html
View file @ 24351d19
......@@ -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
View file @ 24351d19
......@@ -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
View file @ 24351d19
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment