Added a footer, and spruced up the styling.

This commit is contained in:
Andrew Lalis 2019-03-03 22:52:49 +01:00 committed by andrewlalis
parent fc38a2bf5c
commit 7da626fb9b
6 changed files with 58 additions and 6 deletions

View File

@ -0,0 +1,17 @@
.footer_bar {
background-color: darkslategray;
color: whitesmoke;
height: 30px;
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
bottom: 0;
z-index: -1; /* Make this footer appear above all other things. */
}
.third {
width: 33%;
display: inline-block;
text-align: center;
}

View File

@ -1,3 +1,8 @@
/* Set the font for the whole website here. */
body {
font-family: sans-serif;
}
.content_container {
width: 50%;
margin-left: auto;

View File

@ -1,17 +1,21 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{layouts/basic_page :: layout (~{::title}, ~{::section})}">
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{layouts/basic_page :: layout (~{::title}, ~{::#content}, ~{::#sidebar})}">
<head>
<meta charset="UTF-8">
<title th:text="${course.getName()}"></title>
</head>
<body>
<section>
<div id="content">
<h1 th:text="${course.getName()}"></h1>
<h3 th:text="${course.getCode()}"></h3>
<h3>Created on: <span th:text="${course.getCreatedOn()}"></span></h3>
<h3>Id: <span th:text="${course.getId()}"></span></h3>
</section>
</div>
<div id="sidebar">
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<title>footer</title>
</head>
<body>
<footer th:fragment="footer" class="footer_bar">
<link rel="stylesheet" href="../../../resources/static/css/footer.css" th:href="@{/css/footer.css}"/>
<div class="third">
First third of footer
</div>
<div class="third">
Middle of footer
</div>
<div class="third">
Right side of footer.
</div>
</footer>
</body>
</html>

View File

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Teaching Assistant Assistant</title>
<title>header</title>
</head>
<body>

View File

@ -7,7 +7,7 @@
</head>
<body>
<div th:replace="~{fragments/header :: header}">&nbsp;</div>
<div th:replace="~{fragments/header :: header}"></div>
<div class="content_container">
<div th:replace="${content}">
@ -25,5 +25,7 @@
</div>
</div>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>