added CSS styling

parent 3249206e
h1
{
color: pink;
font-family: 'Poppins';
position: relative;
}
h2
{
color: whitesmoke;
font-family: 'Poppins';
position: relative;
}
p
{
font-family: 'Lato';
position: relative;
}
li
{
font-family: 'lato';
position: relative;
}
.indexMegaphoneIcon
{
top: -40px;
left: -60px;
display: block;
width: 60px;
height: 60px;
position: relative;
border-radius: 50px;
}
.indexRectangularShadow
{
position: absolute;
left: 0px;
top: 0px;
height: 75px;
width: 100%;
background-color: gray;
}
.detailsTitleRectangularShadow
{
position: absolute;
left: 0px;
top: 0px;
height: 75px;
width: 100%;
background-color: gray;
}
.detailsSubtitleRectangularShadow
{
position: absolute;
left: 0px;
top: 0px;
height: 150px;
width: 100%;
border-radius: 30px;
background-color: black;
}
.detailsProfilePicture
{
width: 60px;
height: 60px;
border-radius: 50px;
position: relative;
top: -65px;
left: 0px;
}
.detailsReactions
{
width: 40px;
height: 40px;
border-radius: 50px;
position: relative;
top: -60px;
}
.detailsRelatedPicture
{
width: 455px;
height: 530px;
border-radius: 20px;
position: relative;
top: -380px;
left: 50% ;
}
\ No newline at end of file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'announcements/announcementsstyle.css' %}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@500&display=swap" rel="stylesheet">
<title>Announcement</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
\ No newline at end of file
{% if Announcement %} {% extends "announcements/base.html" %}
<h2>{{Announcement.announcement_title}}</h2> {% block content %}
<h3>by {{Announcement.author.first_name}} {{Announcement.author.last_name}}, {{Announcement.pub_date}}</h3> {% if Announcement %}
<h4>{{Announcement.announcement_body}}</h4> <div class="detailsSubtitleRectangularShadow"></div>
{% for reaction in reactions %} <div class="detailsTitleRectangularShadow"></div>
<h4>{{reaction.reaction_name}}: {{reaction.tally}}</h4> <h1>{{Announcement.announcement_title}}</h1>
{% endfor %} <h2 style="position: relative; left: 70px;">by {{Announcement.author.first_name}} {{Announcement.author.last_name}}, {{Announcement.pub_date}}</h2>
{% else %} <img src="/static/announcements/{{Announcement.author.last_name}}.jpg" class="detailsProfilePicture">
<p>Announcement not found.</p> <p style="margin-right: 50%; position: relative; top: -60px;">{{Announcement.announcement_body}}</p>
{% endif %} {% for reaction in reactions %}
\ No newline at end of file <img src="/static/announcements/{{reaction.reaction_name}}.jpg" class="detailsReactions">
<p style="position: relative; top: -110px; left: 50px;">{{reaction.reaction_name}}: {{reaction.tally}}</p>
{% endfor %}
<img src="/static/announcements/{{Announcement.announcement_title}}.jpg" class="detailsRelatedPicture">
{% else %}
<p>Announcement not found.</p>
{% endif %}
{% endblock %}
\ No newline at end of file
{% if announcement_list %} {% extends "announcements/base.html" %}
<h1>Announcement Board</h1> {% block content %}
<h2>Important Announcements:</h2> <div class="indexRectangularShadow"></div>
<ul> <h1 style="text-align: center">Announcement Board</h1>
{% for Announcement in announcement_list %} <h2 style="color: black;">Important Announcements:</h2>
<li><a href="/announcements/{{Announcement.id}}/details">{{Announcement.announcement_title}}, by {{Announcement.author.last_name}}, {{Announcement.author.first_name}}, dated {{Announcement.pub_date}}</a></li> {% if announcement_list %}
{% endfor %} <ul>
</ul> {% for Announcement in announcement_list %}
{% else %} <li><a href="/announcements/{{Announcement.id}}/details">{{Announcement.announcement_title}}, by {{Announcement.author.last_name}}, {{Announcement.author.first_name}}, dated {{Announcement.pub_date}}</a></li>
<p>No Announcements are available</p> <img src="/static/announcements/indexMegaphoneIcon.jpg" class="indexMegaphoneIcon">
{% endif %} {% endfor %}
\ No newline at end of file </ul>
{% else %}
<p>No Announcements are available</p>
{% endif %}
{% endblock %}
\ No newline at end of file
...@@ -6,14 +6,6 @@ from django.template import loader ...@@ -6,14 +6,6 @@ from django.template import loader
# Create your views here. # Create your views here.
def index(request): def index(request):
# announcementEntries = Announcement.objects.all().count()
# n = 1
# announcement = "ANNOUNCEMENTS:<br/>"
# while(n<=announcementEntries):
# announcement += getAnnouncementHeader(n)
# announcement += getReactions(n)
# n += 1
# return HttpResponse(announcement)
announcement_list = Announcement.objects.order_by("pub_date") announcement_list = Announcement.objects.order_by("pub_date")
context = { context = {
"announcement_list": announcement_list, "announcement_list": announcement_list,
...@@ -22,36 +14,11 @@ def index(request): ...@@ -22,36 +14,11 @@ def index(request):
# helper function that iterates through every reaction of an announcement, adds it to an array, then returns it # helper function that iterates through every reaction of an announcement, adds it to an array, then returns it
def getReactions(pk): def getReactions(pk):
# announcementReactions = ""
# for reaction in Announcement.objects.get(pk=pk).announcements.all():
# announcementReactions += "{}: {}<br/>" .format(reaction.reaction_name, reaction.tally)
# announcementReactions += "<br/> "
# return announcementReactions
# announcementReactions = ""
announcementReactions = [] announcementReactions = []
for reaction in Announcement.objects.get(pk=pk).announcements.all(): for reaction in Announcement.objects.get(pk=pk).announcements.all():
announcementReactions.append(reaction) announcementReactions.append(reaction)
return announcementReactions return announcementReactions
# helper function that takes the data in an announcement and creates the header of the announcement
# (First and Second lines)
# def getAnnouncementHeader(pk):
# announcementFirstLine = ""
# announcementSecondLine = ""
# announcementHeader = ""
# announcementTitle = Announcement.objects.get(pk=pk).announcement_title
# authorFirstName = Announcement.objects.get(pk=pk).author.first_name
# authorLastName = Announcement.objects.get(pk=pk).author.last_name
# publicationDate = Announcement.objects.get(pk=pk).pub_date
# announcementBody = Announcement.objects.get(pk=pk).announcement_body
# announcementFirstLine = "{} by {} {} dated {}:<br/>" .format(announcementTitle, authorFirstName, authorLastName, publicationDate)
# announcementSecondLine = "{}<br/>" .format(announcementBody)
# announcementHeader += announcementFirstLine + announcementSecondLine
# return announcementHeader
def details(request, announcement_id): def details(request, announcement_id):
try: try:
announcement = Announcement.objects.get(pk=announcement_id) announcement = Announcement.objects.get(pk=announcement_id)
...@@ -60,7 +27,7 @@ def details(request, announcement_id): ...@@ -60,7 +27,7 @@ def details(request, announcement_id):
try: try:
reactions = getReactions(pk=announcement_id) reactions = getReactions(pk=announcement_id)
except Reaction.DoesNotExist: except Reaction.DoesNotExist:
raise Http404("Reaction does not exist") raise Http404("Reaction does not exist!")
context = { context = {
"Announcement": announcement, "Announcement": announcement,
"reactions": reactions "reactions": reactions
......
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