Styled the pages.

README.txt

@@ -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

+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

 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

@@ -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

 {% 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

@@ -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

 {% 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