Completed basic individual location/landmark page template

30186073 · Rhys Evans · e3656e57 · 30186073 · 30186073 · 30186073
Commit 30186073 authored 1 year ago by Rhys Evans
--- a/src/main/resources/static/css/locationPageFragsStyle.css
+++ b/src/main/resources/static/css/locationPageFragsStyle.css
+.locationFragment{
+    background-color: rgb(206, 153, 253);
+    color: black;
+    border-color: white;
+    align-content: center;
+    text-align: center;
+    border-radius: 25px;
+    max-width: 800px;
+    margin: 0 auto;
+
+}
+.locationPageFrag{
+    background:  rgb(41, 41, 41);
+    color: wheat;
+}
+
+iframe{
+    margin-top: 20px;
+    margin-bottom: 60px;
+    border: white 2px solid;
+}
+H1{
+    padding-top: 5px;
+    padding-bottom:3px ;
+    margin-bottom: 0;
+}
+#townHeader{
+    margin: 0;
+    padding: 0;
+
+}
\ No newline at end of file
--- a/src/main/resources/templates/fragments/locationPageFrags.html
+++ b/src/main/resources/templates/fragments/locationPageFrags.html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" th:fragment="locationSection" class="locationPageFrag">
+<!-- todo check if this is ok here-->
 <head>
    <meta charset="UTF-8">
    <title th:text="${location.getLocationName()}"></title>
+
+    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+    <link rel="stylesheet" th:href="@{/css/locationPageFragsStyle.css}">
 </head>
-<body>
+<body >
 <header th:insert="~{/fragments/Templating.html::header}"></header>
-    <main th:fragment="locationSection" class="locationPageFrag">
-        <div class="locationFragnment">
-        </div>
-
+    <main>

-        <div >
-            <p th:text="*{locCoord.getLocationID()}"></p>
-            <!--        <p th:text="${locations[indexValue.index]}"></p>-->
-            <H1 th:text="${location.getLocationName()}"> </H1>
-            <H4 th:text="${location.getLocationPlace()}"> </H4>
+        <hr style="height:40px; visibility:hidden;" />
+        <article class="locationFragment">
+            
+            <H1 th:text="${location.getLocationName()}" > </H1>
+            <H4 th:text="${location.getLocationPlace()}" id="townHeader"> </H4>
            <p th:text="${location.getLocationDescription()}"></p>


@@ -29,8 +30,8 @@
                    th:src="'https://maps.google.com/maps?q='+ ${locCoord.getLocationCoordsLat()} +','+ ${locCoord.getLocationCoordsLong()} +'&hl=en&z=20&amp;output=embed'">
            </iframe>

-        </div>
-
+        </article>
+        <hr style="height:40px; visibility:hidden;" />
    </main>

 <footer th:insert="~{/fragments/Templating.html::footer}"></footer>

--- a/src/main/resources/templates/landmarks/locationPage.html
+++ b/src/main/resources/templates/landmarks/locationPage.html
@@ -2,11 +2,13 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Checkpoint</title>
+    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
 </head>
 <body>

 <main>
+    <header th:insert="~{/fragments/Templating.html::header}"></header>
    <div th:each="coord, indexValue:${locationCoords}">
        <p th:text="*{coord.getLocationID()}"></p>
 <!--        <p th:text="${locations[indexValue.index]}"></p>-->
@@ -39,6 +41,6 @@


 </main>
-
+<footer th:insert="~{/fragments/Templating.html::footer}"></footer>
 </body>
 </html>
\ No newline at end of file