Skip to content

M
midterm_vincentdjango
Commit 0f382c45 authored by Almira Redoble's avatar Almira Redoble
Browse files
Options

Styled the pages.

parent 7c70087e
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 39 deletions
README.txt
View file @ 0f382c45
......@@ -19,6 +19,9 @@ https://www.w3schools.com/html/html_styles.asp
https://github.com/github/gitignore/blob/main/Python.gitignore;
https://www.onespacemedia.com/news/getting-started-generic-class-based-views-django/
https://www.w3docs.com/snippets/html/how-to-create-an-html-button-that-acts-like-a-link.html
https://stackoverflow.com/questions/44492393/how-to-add-custom-styling-to-forms-created-with-django-createview
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
(sgd) Joaquin Crisologo, 28 February, 2023
(sgd) Andrew Idquival, 28 February, 2023
......
widget_vincentdjango/dashboard/static/dashboard/formStyle.css 0 → 100644
View file @ 0f382c45
body {
min-height: 100vh;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 0.15fr 1fr;
font-family: 'Segoe UI', sans-serif;
background-image: linear-gradient(0deg, #C1C9DD, #F6F8F3);
}
.heading {
grid-area: 1 / 1 / 2 / 3;
padding: 20px;
padding-left: 4%;
font-weight: 650;
font-size: 265%;
display: flex;
align-items:flex-end;
color: #E7F4FC;
background: #3b5998;
}
img {
max-width: 100%;
max-height: 100%;
}
.content {
grid-area: 2 / 1 / 3 / 3;
width: 100%;
}
#main {
padding-top: 8%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.content p {
text-align: end;
}
p label {
margin-right: 4px;
color: #1B3155;
}
.form-design {
width: 61%;
color: #646874;
}
#btn {
text-align: center;
}
#btn input {
color: #E7F4FC;
background-color: #80A271;
border-color: #436E44;
font-weight: bold;
padding: 8px 12px;
}
hr {
width: 80%;
margin-bottom: 5%;
}
.navigation {
margin-top: 12%;
padding: 0 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navigation ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
}
.navigation li:not(:last-child)::after {
margin: 0 .5rem;
display: inline-block;
content: "/";
}
a {
color: #1B3155;
}
\ No newline at end of file
widget_vincentdjango/dashboard/static/dashboard/style.css
View file @ 0f382c45
body {
background-color:rgb(167, 36, 75)
min-height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 0.15fr 0.15fr 1fr;
font-family: 'Segoe UI', sans-serif;
}
.heading {
grid-area: 1 / 1 / 2 / 4;
margin: 0;
padding-left: 126px;
font-weight: 650;
font-size: 265%;
color: #3b5998;
background-image: linear-gradient(0deg, #18366F, #274E97);
}
.heading p {
display: flex;
align-items: center;
}
#white {
color: #FFFEFE;
}
#yellow {
color: #E1BC3D;
padding-left: 12px;
}
#uppercase {
text-transform: uppercase;
}
.content {
grid-area: 3 / 2 / 4 / 3;
display: grid;
grid-template-rows: 1fr 2fr;
}
#main {
grid-area: 1 / 1 / 2 / 2;
background-color: #F6F8F3;
}
.navigation {
grid-area: 2 / 1 / 3 / 2;
display: grid;
grid-template-rows: 0.1fr 0.5fr 0.2fr;
}
#btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 12px;
background-color: #F6F8F3;
}
button {
color: #E7F4FC;
background-color: #818081;
border-color: #313031;
font-weight: bold;
padding: 4px 8px;
}
#footer {
grid-area: 3 / 1 / 4 / 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.navigation ul {
grid-area: 3 / 1 / 4 / 2;
margin: 0;
padding: 0;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
list-style: none;
justify-content: center;
}
.navigation li:not(:last-child)::after {
display: inline-block;
content: "/";
margin: 0 .5rem;
}
.content ul {
list-style: none;
}
.content p {
padding-left: 48px;
}
#subheading {
margin: 0;
padding: 8px 12px;
background-color: #A8BCDF;
}
a {
color: #1B3155;
}
\ No newline at end of file
widget_vincentdjango/dashboard/templates/dashboard/dashboard.html
View file @ 0f382c45
......@@ -3,22 +3,31 @@
{% block style %}{% static 'dashboard/style.css' %}{% endblock %}
{% block title %}Widget v2{% endblock %}
{% block heading %}Welcome to Widget!{% endblock %}
{% block heading %}
<p>
<span id="white">Welcome to</span>
<span id="yellow">Widget!</span>
</p>
{% endblock %}
{% block content %}
<p id="subheading">Widget Users:</p>
<ul>
{% for user in users %}
<li>
<a href="{{ user.get_absolute_url }}">
{{ user.last_name }}, {{ user.first_name }}</a>
</li>
{% endfor %}
</ul>
<button onclick="window.location.href='{% url 'dashboard:user-add' %}';">
Add Widget User
</button>
<div id="main">
<p id="subheading">Widget Users:</p>
<ul>
{% for user in users %}
<li>
<a href="{{ user.get_absolute_url }}">
{{ user.last_name }}, {{ user.first_name }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% block navigation %}
<div id="btn">
<button onclick="window.location.href='{% url 'dashboard:user-add' %}';">
Add Widget User
</button>
</div>
<div id="footer">
<a href="{% url 'announcementBoard:index' %}">Announcement Board</a>
<a href="{% url 'forum:index' %}">Forum</a>
......
widget_vincentdjango/dashboard/templates/dashboard/widgetuser-add.html
View file @ 0f382c45
{% extends 'base.html' %}
{% load static %}
{% block style %}{% static 'dashboard/style.css' %}{% endblock %}
{% block style %}{% static 'dashboard/formStyle.css' %}{% endblock %}
{% block title %}Add Widget User{% endblock %}
{% block heading %}Add a new Widget User:{% endblock %}
{% block content %}
{{ form.non_field_errors }}
<form action="{% url 'dashboard:user-add' %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Add Widget User" class="btn">
</form>
<div id="main">
<img src="{% static 'dashboard/login.png' %}"
alt="Facebook login image" width="644" height="234">
{{ form.non_field_errors }}
<form action="{% url 'dashboard:user-add' %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<div id="btn">
<input type="submit" value="Add Widget User">
</div>
</form>
</div>
{% endblock %}
{% block navigation %}
<hr>
<ul>
<li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
<li>Add Widget User</li>
</ul>
{% endblock %}
\ No newline at end of file
widget_vincentdjango/dashboard/templates/dashboard/widgetuser-details.html
View file @ 0f382c45
......@@ -5,16 +5,29 @@
{% block title %}{{ object.last_name }}, {{ object.first_name }}{% endblock %}
{% block heading %}
<p id="uppercase">
{{ object.first_name }}
{{ object.middle_name }}
{{ object.last_name }}
<span id="white">
{{ object.first_name }}
{{ object.middle_name }}
</span>
<span id="yellow">
{{ object.last_name }}
</span>
</p>
{% endblock %}
{% block content %}
<p> {{ object.department.dept_name }} </p>
<p> {{ object.department.home_unit }} </p>
<button onclick="window.location.href='{% url 'dashboard:user-edit' pk=object.pk%}';">
Edit Widget User
</button>
<div id="main">
<p id="subheading"> {{ object.department.dept_name }} </p>
<p> {{ object.department.home_unit }} </p>
</div>
{% endblock %}
{% block navigation %}
<div id="btn">
<button onclick="window.location.href='{% url 'dashboard:user-edit' pk=object.pk%}';">
Edit Widget User
</button>
</div>
<ul>
<li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
<li>{{ object.last_name }}, {{ object.first_name }}</li>
</ul>
{% endblock %}
\ No newline at end of file
widget_vincentdjango/dashboard/templates/dashboard/widgetuser-edit.html
View file @ 0f382c45
{% extends 'base.html' %}
{% load static %}
{% block style %}{% static 'dashboard/style.css' %}{% endblock %}
{% block style %}{% static 'dashboard/formStyle.css' %}{% endblock %}
{% block title %}Edit Widget User{% endblock %}
{% block heading %}Edit Widget User:{% endblock %}
{% block content %}
{{ form.non_field_errors }}
<form action="{% url 'dashboard:user-edit' pk=object.pk %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save Changes to Widget User" class="btn">
</form>
<div id="main">
<img src="{% static 'dashboard/login.png' %}"
alt="Facebook login image" width="644" height="234">
{{ form.non_field_errors }}
<form action="{% url 'dashboard:user-edit' pk=object.pk %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<div id="btn">
<input type="submit" value="Save Changes to Widget User">
</div>
</form>
</div>
{% endblock %}
{% block navigation %}
<hr>
<ul>
<li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
<li>Edit Widget User</li>
</ul>
{% endblock %}
\ No newline at end of file
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