Skip to content
Snippets Groups Projects
Commit db61bc92 authored by Zainab Almeshari's avatar Zainab Almeshari
Browse files

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

Removing old location files and renaming others.

Closes #25

See merge request !55
parents 39b11169 ad84640c
No related branches found
No related tags found
1 merge request!55Removing old location files and renaming others.
Hide whitespace changes
Inline Side-by-side
project_server.py
+ 1
− 1
View file @ db61bc92
......@@ -36,7 +36,7 @@ def returnListLocations():
cur.execute("SELECT Name, Main_Photo FROM coworking_spaces")
locationData = cur.fetchall()
conn.close()
return render_template("ListLocations.html", data = locationData)
return render_template("Locations.html", data = locationData)
@app.route("/Load/CodeBase")
def Load():
......
static/CSS/ListLocations.css deleted 100644 → 0
+ 0
− 243
View file @ 39b11169
/* #iD and .Class
font, color, text
padding, background, border, margin
width, height,
position, top/right/bottom/left
overflow, float, display
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
} */
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
/* Below styling used for footer position. */
display: flex;
min-height: 100vh;
flex-direction: column;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.Left {
margin-right: auto;
}
.Center {
margin-left: auto;
margin-right: auto;
}
.Right {
margin-left: auto;
}
/* [#1] Page header styling. Uses [#2].
header #pageHeader
div #headerDiv
a #headerText #headerImg
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerDiv {
text-align: center;
background-color: white;
padding: 20px 0px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#headerDiv a {
font-size: 30px;
font-weight: bold;
color: black;
}
#headerText {
width: 100%;
margin-left: -240px;
}
#headerImg {
width: 200px;
height: 65px;
margin-top: -10px;
margin-right: 20px;
margin-bottom: -17.5px;
margin-left: 20px;
}
#headerNav {
width: 100%;
position: absolute;
}
#headerNav a {
font-size: 20px;
padding: 7.5px 10px;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar {
background-color: #282A35;
display: flex;
justify-content: center;
align-items: center;
}
.navBar ul, .navBar li {
display: flex;
align-items: center;
}
.navBar a {
color: white;
}
.navBar a:hover {
background-color: #0B0C0F;
}
/* [#3] Page main styling.
main #pageMain
form #recordForm
label
input .formTextInput
button #addButton
*/
#pageMain {
/* Below styling used for footer position. */
flex: 1;
}
#recordForm {
margin-left: 5px;
}
#recordForm .formTextInput {
margin-top: 5px;
width: 50%;
}
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
nav #footerNav .navBar
ul .Center
li a
*/
#footerNav a {
font-size: 15px;
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
+ 168
− 125
View file @ db61bc92
body{
background-color: white;
color: black;
/* #iD and .Class
font, color, text
padding, background, border, margin
width, height,
position, top/right/bottom/left
overflow, float, display
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
} */
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
/* Below styling used for footer position. */
display: flex;
min-height: 100vh;
flex-direction: column;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.Left {
margin-right: auto;
}
.Center {
margin-left: auto;
margin-right: auto;
}
.Right {
margin-left: auto;
}
/* [#1] Page header styling. Uses [#2].
header #pageHeader
div #headerDiv
a #headerText #headerImg
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerDiv {
text-align: center;
background-color: white;
padding: 20px 0px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#headerDiv a {
font-size: 30px;
font-weight: bold;
color: black;
}
#headerText {
width: 100%;
margin-left: -240px;
}
#headerImg {
width: 200px;
height: 65px;
margin-top: -10px;
margin-right: 20px;
margin-bottom: -17.5px;
margin-left: 20px;
}
#headerNav {
width: 100%;
position: absolute;
}
#headerNav a {
font-size: 20px;
padding: 7.5px 10px;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar {
background-color: #282A35;
display: flex;
justify-content: center;
align-items: center;
}
.navBar ul, .navBar li {
display: flex;
align-items: center;
}
.navBar a {
color: white;
}
.navBar a:hover {
background-color: #0B0C0F;
}
/* [#3] Page main styling.
main #pageMain
form #recordForm
label
input .formTextInput
button #addButton
*/
#pageMain {
/* Below styling used for footer position. */
flex: 1;
}
#recordForm {
margin-left: 5px;
}
#recordForm .formTextInput {
margin-top: 5px;
width: 50%;
}
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
nav #footerNav .navBar
ul .Center
li a
*/
#footerNav a {
font-size: 15px;
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 640px 5px 5px;
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;
}
......@@ -51,9 +215,7 @@ p{
left: 40%;
transform: translate(-50%, -50%);
margin-top: 80px;
}
.middle {
transition: .5s ease;
opacity: 0;
......@@ -79,122 +241,3 @@ color: white;
font-size: 16px;
padding: 16px 32px;
}
div.contain {
text-align: center;
}
ul.list {
display: inline-block;
list-style-type: none;
margin: 0;
}
h1 {
color: white;
background-color: black;
font-weight: 600;
font-family: 'Monospace', Lucida-Console;
position: relative;
font-size: 36px;
display: flex;
margin-right: 650px;
margin: 1em 0 1em 0;
line-height: 110px;
padding: 15px 15px 15px 3%;
border-radius: 10px 10px 10px 10px;
}
.logo{
width: 8%;
height: 8%
border: 0;
float: left;
display: flex;
margin: 10px 10px;
}
button{
width: 40px;
height: 30px;
background-color: black;
border: none;
outline: none;
border-radius: 4px;
padding: 4px;
position: absolute;
top: 65px;
right: 20px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
button.active{
transform: translateX(-210px);
}
button span {
display: block;
width: 100%;
height: 4px;
background-color: white;
}
button span:nth-child(2) {
margin: 5px 0;
}
nav{
background-color: black;
padding: 15px;
height: 18.1vh;
position: absolute;
top: 0;
right: 0;
width: 200px;
transform: translateX(100%);
margin-top: 2.25em;
border-radius: 10px;
transition: 0.4s ease-in-out;
}
nav.active {
transform: translateX(0);
}
nav ul{
list-style: none;
margin: 0;
padding:0;
width: 60px;
}
nav ul li{
padding: 10px 0;
}
nav ul li a{
color: white;
text-decoration: none;
display: block;
}
nav ul li a:hover {
color: #A9A9A9;
JScript/locations.js 0 → 100644
+
10
-
0
Viewed
let btn = document.querySelector("button");
let nav = document.querySelector("nav");
btn.addEventListener("click", function() {
nav.classList.toggle("active");
btn.classList.toggle("active");
} );
static/locations.html deleted 100644 → 0
+ 0
− 125
View file @ 39b11169
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<section>
<h1><img src="Media/logo.png" class="logo"/> Our Locations </h1>
<button>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<ul>
<li><a href="landingpage.html"> Home </a></li>
<li><a href="#"> ### </a></li>
<li><a href="#"> ### </a></li>
</ul>
</nav>
<div class="contain">
<ul class= "list">
<li>
<div class="container">
<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="text"> Codebase </div>
</div>
</div>
</li>
<li>
<div class="container">
<img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image" >
<h2> Catalyst </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"> Catalyst </div>
</div>
</div>
</li>
<li>
<div class="container">
<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="text"> C4DI </div>
</div>
</div>
</li>
<li>
<div class="container">
<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="text"> Dogpatch </div>
</div>
</div>
</li>
<li>
<div class="container">
<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="text"> Station F </div>
</div>
</div>
</li>
</ul>
<div>
{%if data%}
{{ data }}
{%endif%}
</div>
</div>
</section>
<footer>
</footer>
<script src="JS/locations.js"> </script>
</body>
templates/ListLocations.html → templates/Locations.html
+ 1
− 1
View file @ db61bc92
......@@ -2,7 +2,7 @@
{%block headblock%}
<title> Locations </title>
<link rel="stylesheet" href="/static/CSS/ListLocations.css">
<link rel="stylesheet" href="/static/CSS/Locations.css">
{%endblock%}
{%block headerblock%}
<a id="headerText"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment