Applied CSS styling to announcement board via bootstrap

parent b67bd6cc
from django import forms
from .models import Announcement
class AnnouncementForm(forms.ModelForm):
class Meta:
model = Announcement
fields = ['title', 'body', 'author']
\ No newline at end of file
......@@ -28,24 +28,24 @@ class Announcement(models.Model):
def getLikeReactions(self):
try:
return 'Like: {}'.format(Reaction.objects.get(name="Like", announcement=self).tally)
return '{}'.format(Reaction.objects.get(name="Like", announcement=self).tally)
except:
return 'Like: 0'
return '0'
def getLoveReactions(self):
try:
return 'Love: {}'.format(Reaction.objects.get(name="Love", announcement=self).tally)
return '{}'.format(Reaction.objects.get(name="Love", announcement=self).tally)
except:
return 'Love: 0'
return '0'
def getAngryReactions(self):
try:
return 'Angry: {}'.format(Reaction.objects.get(name="Angry", announcement=self).tally)
return '{}'.format(Reaction.objects.get(name="Angry", announcement=self).tally)
except:
return 'Angry: 0'
return '0'
def get_absolute_url(self):
return reverse('announcement_board:announcement-details', kwargs={'pk': self.pk})
......
......@@ -3,13 +3,40 @@
{% block title %}Add Announcement{% endblock %}
{% block content %}
<h2>Add a new announcement:</h2>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'announcements_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Announcements</h2>
<h4 class="display-6" style="font-size:20px">Add New Announcement</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3" style="font-size:50px; color:#052c65">Add a new announcement:</h1>
</div>
<br>
<div class="row"></div>
<form method="post">
{% csrf_token %}
{% for field in form %}
{{field.label}}:{{field}} <br><br>
<div class="row">
<div class="col-5" style="text-align:right">
<h5 class="display-3" style="font-size:25px">{{field.label}}:</h4>
</div>
<div class="col-7" style="text-align:left">
{{field}}
</div>
</div>
<br>
{% endfor %}
<input type="submit" value="Add Announcement">
<input type="submit" class="btn btn-dark" value="Save New Announcement" style="background-color:#052c65">
</form>
<br><br>
</div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -3,18 +3,57 @@
{% block title %}{{ object.title }}{% endblock %}
{% block content %}
<h1>{{ object.title }}</h1>
<h2>by {{ object.author.first_name }} {{ object.author.last_name }}</h2>
<h2>{{ object.formatted_date }}, {{ object.formatted_time }}</h2>
<p>
{{ object.body }}
<br><br>
{{ object.getLikeReactions }}
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'announcements_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Announcements</h2>
<h4 class="display-6" style="font-size:20px">Announcement Details</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3" style="font-size:55px; color:#052c65">{{ object.title }}</h1>
</div>
<br>
<div class="row">
<div class="col-5" style="text-align:right">
<h4 style="font-size:25px">Author:</h4>
<h4 style="font-size:25px">Date and Time:</h4>
</div>
<div class="col-7" style="text-align:left">
<h5 class="display-3" style="font-size:25px">{{ object.author.first_name }} {{ object.author.last_name }}</h5>
<h5 class="display-3" style="font-size:25px">{{ object.formatted_date }}, {{ object.formatted_time }}</h5>
</div>
</div>
<br>
{{ object.getLoveReactions }}
<div class="row p-2" style="background-color:#e3e4e6">
<h5 class="display-3" style="font-size:25px">{{ object.body }}</h5>
</div>
<br>
{{ object.getAngryReactions }}
<div class="row">
<div class="col-5" style="text-align:right">
<h4 style="font-size:25px">Like:</h4>
<h4 style="font-size:25px">Love:</h4>
<h4 style="font-size:25px">Angry:</h4>
</div>
<div class="col-7" style="text-align:left">
<h5 class="display-3" style="font-size:25px">{{ object.getLikeReactions }}</h5>
<h5 class="display-3" style="font-size:25px">{{ object.getLoveReactions }}</h5>
<h5 class="display-3" style="font-size:25px">{{ object.getAngryReactions }}</h5>
</div>
</div>
<br><br>
<button class="button"><a href="/announcements/{{ object.pk }}/edit">Edit Announcement</a></button>
</p>
<button type="button" class="btn" style="background-color:#e3e4e6">
<a href="/announcements/{{object.pk}}/edit" class="link-dark">Edit Announcement</a>
</button> &nbsp; &nbsp;
<button type="button" class="btn" style="background-color:#052c65">
<a href="/announcements/" class="link-light">Back to Announcement Board</a>
</button>
</div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -3,13 +3,40 @@
{% block title %}Edit Announcement{% endblock %}
{% block content %}
<h2>Edit announcement:</h2>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'announcements_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Announcements</h2>
<h4 class="display-6" style="font-size:20px">Edit Announcement</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3" style="font-size:50px; color:#052c65">Edit announcement:</h1>
</div>
<br>
<div class="row"></div>
<form method="post">
{% csrf_token %}
{% for field in form %}
{{field.label}}:{{field}} <br><br>
<div class="row">
<div class="col-5" style="text-align:right">
<h5 class="display-3" style="font-size:25px">{{field.label}}:</h4>
</div>
<div class="col-7" style="text-align:left">
{{field}}
</div>
</div>
<br>
{% endfor %}
<input type="submit" value="Save Changes">
<input type="submit" class="btn btn-dark" value="Save Changes" style="background-color:#052c65">
</form>
<br><br>
</div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -3,15 +3,49 @@
{% block title %}Widget's Announcement Board{% endblock %}
{% block content %}
<h1>Welcome to Widget's Announcement Board!</h1>
<h2>Announcements:</h2>
<p>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'announcements_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Announcements</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3"style="font-size:55px; color:#052c65">Wecome to Widget's Announcement Board!</h1>
</div>
<br>
<br>
<h5 class="display-3"style="font-size:40px; color:#052c65">Announcements:</h5>
<br>
{% for object in announcements %}
<li>
<a href="{{ object.get_absolute_url }}">{{ object.title }} by {{ object.author.first_name }} {{ object.author.last_name }}</a>
</li>
<a href="{{ object.get_absolute_url }}" class="link-dark; display-3" style="font-size:18px; color:#052c65">
{{ object.title }} by {{ object.author.first_name }} {{ object.author.last_name }}</a>
<br>
{% endfor %}
<br><br>
<button type="button" class="btn btn-dark" style="background-color:#e3e4e6">
<a href="/announcements/add" class="link-dark">New Announcement</a>
</button>
<br>
<br>
<br>
<button class="button"><a href="/announcements/add">New Announcement</a></button>
</p>
<button type="button" class="btn btn-dark" style="background-color:#052c65">
<a href="/dashboard/" class="link-light">Dashboard</a>
</button> &nbsp;
<button type="button" class="btn btn-dark" style="background-color:#334277">
<a href="/forum/" class="link-light">Forum</a>
</button> &nbsp;
<button type="button" class="btn btn-dark" style="background-color:#425086">
<a href="/assignments/" class="link-light">Assignments</a>
</button> &nbsp;
<button type="button" class="btn btn-dark" style="background-color:#515e96">
<a href="/calendar/" class="link-light">Calendar</a>
</button>
</div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -4,57 +4,10 @@ from django.views.generic.edit import CreateView, UpdateView
from django.http import HttpResponse
from .models import Announcement, Reaction
from .forms import AnnouncementForm
def announcements(request):
'''
return_string = "<p>Widget's Announcement Board</p> <p>Announcements:<br>"
for announcements in Announcement.objects.all():
announcement_string = '{} by {} {} published {}, {}:<br>{}<br>'.format(
announcements.title,
announcements.author.first_name,
announcements.author.last_name,
announcements.pub_datetime.strftime("%m/%d/%Y"),
announcements.pub_datetime.strftime("%I:%M %p"),
announcements.body
)
return_string += announcement_string
reactionList = announcements.reactions.all()
sortedReactionList = sortReactions(reactionList)
for reaction in sortedReactionList:
reactions_string = '{}: {}<br>'.format(
reaction.name,
reaction.tally
)
return_string += reactions_string
return_string += '</p>'
html_string = '<html><body>{}</body></html>'.format(return_string)
return HttpResponse(return_string)
'''
return render(request, 'announcement_board/announcements.html', {'announcements':Announcement.objects.order_by('-pub_datetime')})
'''
# Sorting the reactions to Like, Love, and Angry order.
def sortReactions(list):
sortedReactionList = ['']*3
for reaction in list:
if reaction.name=="Like":
sortedReactionList[0] = reaction
elif reaction.name=="Love":
sortedReactionList[1] = reaction
elif reaction.name=="Angry":
sortedReactionList[2] = reaction
return sortedReactionList
'''
class AnnouncementDetailView(DetailView):
model = Announcement
template_name = 'announcement_board/announcement-details.html'
......@@ -68,15 +21,3 @@ class AnnouncementUpdateView(UpdateView):
model = Announcement
fields = 'title', 'body', 'author'
template_name = 'announcement_board/announcement-edit.html'
\ No newline at end of file
def announcement_view(request):
if request.method == 'POST':
form = AnnouncementForm(request.POST)
if form.is_valid():
new_announcement = form.save()
return redirect('announcement-detail', pk=new_announcement.pk)
else:
form = AnnouncementForm()
return render(request, 'announcement_board/announcement-detail.html', {'form': form})
\ No newline at end of file
......@@ -14,4 +14,4 @@ class WidgetUser(models.Model):
department = models.ForeignKey(Department, on_delete=models.CASCADE)
def __str__(self):
return 'Name: {}, {} {}'.format(self.last_name, self.first_name, self.middle_name)
\ No newline at end of file
return '{}, {} {}'.format(self.last_name, self.first_name, self.middle_name)
\ No newline at end of file
......@@ -125,7 +125,8 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/
STATIC_URL = 'static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
......
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