Skip to content
Snippets Groups Projects
Verified Commit 29be204b authored by Robert Metcalf's avatar Robert Metcalf
Browse files

restructure and style workspace items on homepage

parent d9b76f3e
No related branches found
No related tags found
3 merge requests!8Allow working spaces to be added,!6Add interactive map,!5Add working spaces list
Hide whitespace changes
Inline Side-by-side
static/style.css
+ 75
− 0
View file @ 29be204b
@font-face {
font-family: CircularXX;
src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Book.6a347aa604467a4e6921af6f4fcb33d2.woff2) format("woff2");
src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Book.b553c88291144f54bb8f6505b7807fa6.woff) format("woff");
font-weight: 400;
font-style: normal
}
@font-face {
font-family: CircularXX;
src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Medium.37d42a8b2771863248874d4ac886b68b.woff2) format("woff2");
src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Medium.d21fa690d384f11a160d1b52328d8cda.woff) format("woff");
font-weight: 500;
font-style: normal
}
@font-face {
font-family: CircularXX;
src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Bold.074fd642e815669ff63e6600e9ea9e0d.woff2) format("woff2");
src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Bold.87b459306fb0caf65b83213687bb517f.woff) format("woff");
font-weight: 700;
font-style: normal
}
body {
margin: 0;
font-family: CircularXX,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #111;
text-align: left;
background-color: #f5f5f5
}
h1 h1
{ color: blue;} { color: blue;}
...@@ -50,3 +85,43 @@ nav li a:hover:last-child { ...@@ -50,3 +85,43 @@ nav li a:hover:last-child {
background-color: #111; background-color: #111;
} }
.workspace-item {
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 2px 0 rgb(17 17 17 / 5%);
padding: 1.5rem;
margin: 0.75rem;
display: flex;
}
.workspace-item .image-col {
width: 200px;
}
.workspace-item .image-col .image {
max-width: 100%;
}
.workspace-item .main-col {
flex: 1 0;
margin-left: 1rem;
}
.workspace-item .title {
color: inherit;
display: inline-block;
font-size: 1.25rem;
margin-bottom: 1rem;
font-weight: 600;
line-height: 1.2;
}
.workspace-item .meta {
color: #666;
}
.workspace-item .dot {
color: #666;
font-weight: 700;
}
templates/home.html
+ 16
− 10
View file @ 29be204b
...@@ -3,16 +3,22 @@ ...@@ -3,16 +3,22 @@
{% block mainBlock %} {% block mainBlock %}
<ul> <ul>
{% for workspace in workspaces %} {% for workspace in workspaces %}
<li><a href="{{ workspace.website }}">{{ workspace.name }}</a> <div class="workspace-item">
<img src="{{ workspace.main_photo }}"></li> <div class="image-col">
<ul> <a href="/workspace/{{ workspace.id }}"><img class="image" src="{{ workspace.main_photo }}"></a>
<li>{{ workspace.address }}</li> </div>
<li>{{ workspace.description }}</li> <div class="main-col">
<li>{{ workspace.email }}</li> <div><a href="/workspace/{{ workspace.id }}" class="title">{{ workspace.name }}</a></div>
<li>{{ workspace.phone_number }}</li> <div>
<li>{{ workspace.opening_hours }}</li> <span class="meta"><a href="mailto:{{ workspace.email }}">{{ workspace.email }}</a></li> <span class="dot">&middot;</span>
<li>{{ workspace.checkin_instructions }}</li> <span class="meta"><a href="tel:{{ workspace.phone_number }}">{{ workspace.phone_number }}</a></span>
</ul> </div>
<div>
<span class="meta">{{ workspace.address }}</span> <span class="dot">&middot;</span>
<span class="meta">{{ workspace.opening_hours }}</span>
</div>
</div>
</div>
{% endfor %} {% endfor %}
</ul> </ul>
{% endblock %} {% endblock %}
\ No newline at end of file
templates/main.html
+ 2
− 2
View file @ 29be204b
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="static/style.css">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href= <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
...@@ -11,6 +9,8 @@ ...@@ -11,6 +9,8 @@
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"> crossorigin="anonymous">
<link rel="stylesheet" href="static/style.css">
<title>{% block title %}{% endblock %} - Tramshed Workspaces</title> <title>{% block title %}{% endblock %} - Tramshed Workspaces</title>
</head> </head>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment