andrew
/
Teaching_Assistant_Assistant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling upgrades!

This commit is contained in:
Andrew Lalis 2019-03-03 22:28:40 +01:00 committed by andrewlalis
parent d49419146a
commit fc38a2bf5c
6 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/resources/static/css/header.css
View File

@ -10,14 +10,15 @@ body {
color: whitesmoke; color: whitesmoke;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 20px; padding-top: 20px;
height: 30px;
} }
.header_title { .header_title {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
padding: 10px;
width: 25%; width: 25%;
display: inline; display: inline;
font-size: 30px;
} }
.header_link_list { .header_link_list {

27
src/main/resources/static/css/style.css Normal file
View File

@ -0,0 +1,27 @@
.content_container {
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
font-size: 16px;
color: black;
}
.sidebar_container {
width: 20%;
height: 100%;
position: fixed;
top: 70px;
right: 0;
}
.sidebar_block {
margin: 20px 0 20px 0;
padding: 20px;
background-color: green;
color: whitesmoke;
}
.sidebar_block:hover {
background-color: gray;
}

18
src/main/resources/templates/courses.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{layouts/basic_page :: layout (~{::title}, ~{::section})}"> <html xmlns:th="http://www.thymeleaf.org" th:replace="~{layouts/basic_page :: layout (~{::title}, ~{::#content}, ~{::#sidebar})}">
<head> <head>
<title>Courses</title> <title>Courses</title>
</head> </head>
<body> <body>
<section> <div id="content">
<table> <table>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -18,7 +18,19 @@
<td th:text="${course.getCode()}"></td> <td th:text="${course.getCode()}"></td>
</tr> </tr>
</table> </table>
</section> </div>
<div id="sidebar">
<div class="sidebar_block">
Create new course
</div>
<div class="sidebar_block">
Do something else
</div>
<div class="sidebar_block">
Click this link!
</div>
</div>
</body> </body>
</html> </html>

1
src/main/resources/templates/fragments/header.html
View File

@ -13,7 +13,6 @@
<ul class="header_link_list"> <ul class="header_link_list">
<li><a href="/" th:href="@{/}">Home</a> <li><a href="/" th:href="@{/}">Home</a>
<li><a href="/courses" th:href="@{/courses}">Courses</a> <li><a href="/courses" th:href="@{/courses}">Courses</a>
<li><a href="/students" th:href="@{/students}">Students</a>
</ul> </ul>
</nav> </nav>

16
src/main/resources/templates/index.html
View File

@ -1,17 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{layouts/basic_page :: layout (~{::title}, ~{::section})}"> <html xmlns:th="http://www.thymeleaf.org" th:replace="~{layouts/basic_page :: layout (~{::title}, ~{::#content}, ~{::#sidebar})}">
<head> <head>
<title>Homepage</title> <title>Homepage</title>
</head> </head>
<body> <body>
<div th:replace="~{fragments/header :: header}">&nbsp;</div> <div id="content">
<section>
<p> <p>
Welcome to the home page. Welcome to the home page. To find the courses in this application please follow the link to <a th:href="@{/courses}">courses</a>.
</p> </p>
</section> </div>
<div id="sidebar">
<div class="sidebar_block">
This is an example sidebar block.
</div>
</div>
</body> </body>
</html> </html>

21
src/main/resources/templates/layouts/basic_page.html
View File

@ -1,17 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:fragment="layout (title, content, sidebar_content)" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title th:replace="${title}">basic_page</title> <title th:replace="${title}">basic_page</title>
<link rel="stylesheet" href="../../../resources/static/css/style.css" th:href="@{/css/style.css}" />
</head> </head>
<body> <body>
<div th:replace="~{fragments/header :: header}">&nbsp;</div> <div th:replace="~{fragments/header :: header}">&nbsp;</div>
<div th:replace="${content}"> <div class="content_container">
<p> <div th:replace="${content}">
Basic page content block. <p>
</p> Basic page content block.
</p>
</div>
</div>
<div class="sidebar_container">
<div th:replace="${sidebar_content}">
<p>
Basic page sidebar block.
</p>
</div>
</div> </div>
</body> </body>