Skip to content
Snippets Groups Projects
Commit 17f9ca63 authored by Liam Driscoll's avatar Liam Driscoll
Browse files

Merge branch '25-adding-a-basic-locations-template-route' into 'development' 

Fixing conflicts.

Closes #25

See merge request !52
parents a17177bb 3e72d4a1
No related branches found
No related tags found
1 merge request!52Fixing conflicts.
Hide whitespace changes
Inline Side-by-side
static/CSS/Manage_Coworking_Spaces.css
+ 90
− 32
View file @ 17f9ca63
...@@ -125,9 +125,9 @@ header #pageHeader ...@@ -125,9 +125,9 @@ header #pageHeader
main #pageMain main #pageMain
form #recordForm form #recordForm
label .smallLabel label
input textarea .smallInput input .formTextInput
button button #addButton
*/ */
...@@ -136,38 +136,13 @@ main #pageMain ...@@ -136,38 +136,13 @@ main #pageMain
flex: 1; flex: 1;
} }
#recordForm label, #recordForm input, #recordForm textarea { #recordForm {
margin-left: 1.25px; margin-left: 5px;
margin-top: 5px;
} }
#recordForm label { #recordForm .formTextInput {
display: inline-block; margin-top: 5px;
min-width: 27.5%;
text-align: right;
font-weight: bold;
vertical-align: top;
}
#recordForm input {
width: 50%;
min-width: 550px;
}
#recordForm textarea {
width: 50%; width: 50%;
min-width: 550px;
font-size: 14.25px;
}
#recordForm .smallLabel {
width: 10%;
min-width: 125px;
}
#recordForm .smallInput {
width: 19.2%;
min-width: 200px;
} }
/* [#4] Page footer styling. Uses [#2]. /* [#4] Page footer styling. Uses [#2].
...@@ -183,3 +158,86 @@ footer #pageFooter ...@@ -183,3 +158,86 @@ footer #pageFooter
font-size: 15px; font-size: 15px;
padding: 5px 10px; padding: 5px 10px;
} }
div.contain {
text-align: center;
}
ul.list {
display: inline-block;
list-style-type: none;
margin: 0;
}
.container {
display: flex;
position: relative;
padding: 5px 660px 5px 5px;
width: 40%;
height: 50%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
border-radius: 10px;
margin-left: 20px;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
border-radius: 10px 10px 10px 10px;
float: left;
width: 300px;
height: 250px;
object-fit: cover;
}
h2 {
position: absolute;
margin-left: 320px;
margin-top: 30px;
}
p{
margin-top: 80px;
margin-left: 50px;
}
.checked{
color: orange;
}
.star{
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
margin-top: 80px;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 45%;
left: 10.5%;
transform: translate(-25%, -25%);
-ms-transform: translate(-25%, -25%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: black;
color: white;
font-size: 16px;
padding: 16px 32px;
}
static/CSS/locations.css
+ 45
− 18
View file @ 17f9ca63
...@@ -5,34 +5,63 @@ color: black; ...@@ -5,34 +5,63 @@ color: black;
.container { .container {
display: flex;
position: relative; position: relative;
padding: 5px; padding: 5px 640px 5px 5px;
width: 50%; width: 40%;
height: 70%; height: 50%;
background-color: white; background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px; margin-bottom: 25px;
border-radius: 10px;
} }
.image { .image {
opacity: 1; opacity: 1;
display: block; display: block;
width: 100%;
height: 75%;
transition: .5s ease; transition: .5s ease;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 10px 10px 10px 10px;
float: left;
width: 300px;
height: 250px;
object-fit: cover;
}
h2 {
position: absolute;
margin-left: 320px;
margin-top: 30px;
}
p{
margin-top: 80px;
margin-left: 50px;
}
.checked{
color: orange;
}
.star{
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
margin-top: 80px;
} }
.middle { .middle {
transition: .5s ease; transition: .5s ease;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 50%; top: 45%;
left: 50%; left: 10.5%;
transform: translate(-50%, -50%); transform: translate(-25%, -25%);
-ms-transform: translate(-50%, -50%) -ms-transform: translate(-25%, -25%)
} }
...@@ -51,17 +80,14 @@ font-size: 16px; ...@@ -51,17 +80,14 @@ font-size: 16px;
padding: 16px 32px; padding: 16px 32px;
} }
div.contain { div.contain {
text-align: center; text-align: center;
} }
ul.list { ul.list {
display: inline-block; display: inline-block;
text-align: center;
list-style-type: none; list-style-type: none;
margin-left: 350px; margin: 0;
} }
h1 { h1 {
...@@ -98,7 +124,7 @@ margin: 10px 10px; ...@@ -98,7 +124,7 @@ margin: 10px 10px;
outline: none; outline: none;
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
position: fixed; position: absolute;
top: 65px; top: 65px;
right: 20px; right: 20px;
cursor: pointer; cursor: pointer;
...@@ -124,13 +150,13 @@ margin: 10px 10px; ...@@ -124,13 +150,13 @@ margin: 10px 10px;
nav{ nav{
background-color: black; background-color: black;
padding: 15px; padding: 15px;
height: 100vh; height: 18.1vh;
position: fixed; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 200px; width: 200px;
transform: translateX(100%); transform: translateX(100%);
margin-top: 0.5em; margin-top: 2.25em;
border-radius: 10px; border-radius: 10px;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
} }
...@@ -153,7 +179,8 @@ margin: 10px 10px; ...@@ -153,7 +179,8 @@ margin: 10px 10px;
display: block; display: block;
} }
nav ul li a:hover { nav ul li a:hover {
color: white; color: #A9A9A9;
JScript/locations.js 0 → 100644 JScript/locations.js 0 → 100644
+ +
10 10
......
static/locations.html
+ 62
− 16
View file @ 17f9ca63
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href= "CSS/locations.css"> <link rel="stylesheet" href= "CSS/locations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Locations </title> <title> Locations </title>
</head> </head>
<body> <body>
<section> <section>
<h1><img src="https://www.4piproductions.com/wp-content/uploads/2017/04/tramshed_.png" class="logo"> Our Locations </h1> <h1><img src="Media/logo.png" class="logo"/> Our Locations </h1>
<button> <button>
<span></span> <span></span>
<span></span> <span></span>
...@@ -14,29 +15,44 @@ ...@@ -14,29 +15,44 @@
</button> </button>
<nav> <nav>
<ul> <ul>
<li><a href="#"> Home </a></li> <li><a href="landingpage.html"> Home </a></li>
<li><a href="#"> ### </a></li> <li><a href="#"> ### </a></li>
<li><a href="#"> ### </a></li> <li><a href="#"> ### </a></li>
</ul> </ul>
</nav> </nav>
<div class="contain"> <div class="contain">
<ul class= "list"> <ul class= "list">
<li> <li>
<div class="container"> <div class="container">
<img src="https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646867535415-4JI39H286BUMT26H4FHN/C36A1915.jpg?format=2500w" class="image" > <img src="https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646867535415-4JI39H286BUMT26H4FHN/C36A1915.jpg?format=2500w" class="image" >
<h2> Codebase </h2>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<div class= star>
<span class="fa fa-star fa-3x checked" ></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x" ></span>
<span class="fa fa-star fa-3x" ></span>
</div>
<div class="middle"> <div class="middle">
<div class="text"> Codebase </div> <div class="text"> Codebase </div>
</div>
</div> </div>
</div>
</li> </li>
<li> <li>
<div class="container"> <div class="container">
<img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image" > <img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image" >
<h2> Catalyst </h2>
<div class="middle"> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<div class= star>
<span class="fa fa-star fa-3x checked" ></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x" ></span>
<span class="fa fa-star fa-3x" ></span>
</div>
<div class="middle">
<div class="text"> Catalyst </div> <div class="text"> Catalyst </div>
</div> </div>
</div> </div>
...@@ -44,7 +60,15 @@ ...@@ -44,7 +60,15 @@
<li> <li>
<div class="container"> <div class="container">
<img src="https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w" Class="image" > <img src="https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w" Class="image" >
<h2> C4DI </h2>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<div class= star>
<span class="fa fa-star fa-3x checked" ></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x" ></span>
<span class="fa fa-star fa-3x" ></span>
</div>
<div class="middle"> <div class="middle">
<div class="text"> C4DI </div> <div class="text"> C4DI </div>
</div> </div>
...@@ -54,7 +78,15 @@ ...@@ -54,7 +78,15 @@
<li> <li>
<div class="container"> <div class="container">
<img src="https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg" class="image" > <img src="https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg" class="image" >
<h2> Dogpatch </h2>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<div class= star>
<span class="fa fa-star fa-3x checked" ></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x" ></span>
<span class="fa fa-star fa-3x" ></span>
</div>
<div class="middle"> <div class="middle">
<div class="text"> Dogpatch </div> <div class="text"> Dogpatch </div>
</div> </div>
...@@ -64,16 +96,30 @@ ...@@ -64,16 +96,30 @@
<li> <li>
<div class="container"> <div class="container">
<img src="https://stationf.co/img/misc/create-zone.jpg" class="image" > <img src="https://stationf.co/img/misc/create-zone.jpg" class="image" >
<h2>Station F </h2>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<div class= star>
<span class="fa fa-star fa-3x checked" ></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x" ></span>
<span class="fa fa-star fa-3x" ></span>
</div>
<div class="middle"> <div class="middle">
<div class="text"> Station F </div> <div class="text"> Station F </div>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<div>
{%if data%}
{{ data }}
{%endif%}
</div>
</div> </div>
</section> </section>
<footer>
</footer>
<script src="JS/locations.js"> </script> <script src="JS/locations.js"> </script>
</body> </body>
templates/ListLocations.html
+ 21
− 3
View file @ 17f9ca63
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
{%block headblock%} {%block headblock%}
<title> Locations </title> <title> Locations </title>
{%endblock%} {%endblock%}
{%block headerblock%} {%block headerblock%}
<a id="headerText" <a id="headerText"
href="ListLocations"> href="ListLocations">
...@@ -14,10 +13,29 @@ ...@@ -14,10 +13,29 @@
<br><br> <br><br>
{%if data%} {%if data%}
{%for x in range(data|length)%} {%for x in range(data|length)%}
{{data[x][0]}}
{{data[x][1]}}
<br><br> <br><br>
<div class="contain">
<ul class= "list">
<li>
<div class="container">
<img src= "{{data[x][1]}}" class="image" >
<h2> {{data[x][0]}} </h2>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<div class= star>
<span class="fa fa-star fa-3x checked" ></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x" ></span>
<span class="fa fa-star fa-3x" ></span>
</div>
<div class="middle">
<div class="text">{{data[x][0]}}</div>
</div>
</div>
</li>
{%endfor%} {%endfor%}
{%endif%} {%endif%}
{%endblock%} {%endblock%}
......
templates/Manage_Coworking_Spaces.html
+ 0
− 1
View file @ 17f9ca63
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
{%block headblock%} {%block headblock%}
<title> Manage Coworking Spaces </title> <title> Manage Coworking Spaces </title>
<link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
{%endblock%} {%endblock%}
{%block headerblock%} {%block headerblock%}
......
templates/base_template.html
+ 1
− 0
View file @ 17f9ca63
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html lang="EN" dir="ltr"> <html lang="EN" dir="ltr">
<head> <head>
<meta charSet="UTF-8"> <meta charSet="UTF-8">
<link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
{%block headblock%} {%block headblock%}
{%endblock%} {%endblock%}
</head> </head>
......
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