Commit 1e4714cb authored by onny's avatar onny
Browse files

enhanced page styling

parent c4efdcbf
......@@ -3,11 +3,24 @@ body {
padding: 0 !important;
}
*{
box-sizing:border-box;
}
a {
text-decoration: none;
color: black;
cursor: pointer;
}
content {
min-height: 100vh;
display: grid;
grid-gap: 10px;
grid-template-rows: auto 1fr auto;
grid-template-columns: auto 150px 1fr auto;
grid-template-columns: auto;
}
header {
......@@ -15,78 +28,101 @@ header {
border-color: #d6d6d6;
grid-column-start: 1;
grid-column-end: 4;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
}
header > div {
margin: 0 auto 0 auto;
margin: -1px auto -1px auto;
width: 80%;
height: 70px;
display: flex;
justify-content: left;
align-items: center;
border-left: 1px solid;
border-right: 1px solid;
border: 1px solid;
border-color: #d6d6d6;
}
.logo {
float: left;
height:100%;
display:flex;
justify-content:center;
align-items: center;
padding: 10px 30px;
border-right: 1px solid;
border-color: #d6d6d6;
cursor: pointer;
}
.search {
height:100%;
display:flex;
justify-content:center;
align-items: center;
padding: 10px 30px;
border-right: 1px solid;
border-color: #d6d6d6;
flex: 1;
cursor: pointer;
}
.lang {
height:100%;
display:flex;
justify-content:center;
align-items: center;
padding: 10px 30px;
border-right: 1px solid;
border-color: #d6d6d6;
cursor: pointer;
}
.login {
padding: 10px 30px;
cursor: pointer;
}
input {
width: 100%;
.icon {
text-transform: uppercase;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
#sidebar {
padding: 1rem;
.fa {
font-size: 20px;
margin-right: 15px;
}
margin-left: 140px;
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
input {
width: 100%;
}
main {
padding: 1rem;
padding-left: 150px;
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 2;
}
main > div {
margin: 0 auto 0 auto;
width: 80%;
}
footer {
background: black;
color: white;
padding: 1rem;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
......@@ -102,15 +138,22 @@ footer > div {
}
.flex-container > div {
background-color: #f1f1f1;
width: 180px;
width: 220px;
margin: 10px;
padding: 10px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
.flex-container .imgbox {
background-color: #f1f1f1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 220px;
height: 175px;
margin-bottom: 15px;
cursor: pointer;
}
.msg {
background-color: green;
display: inline-block;
......
{% extends 'base.html' %}
{% block jobs %}
{% block content %}
<div class="main">
<h2>Create an artist</h2>
<form class="artist" v-on:submit.prevent='addArtist'>
......
{% extends 'base.html' %}
{% block jobs %}
{% block content %}
<h2>Artists</h2>
<div class="flex-container">
<p v-if="entries.length == 0">Sorry, no jobs currently available</p>
<div v-for="(entry, index) in entries" class="artist">
<img src="https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg" width=100px>
<br><b><a :href="'/en/' + entry.slug">[[ entry.name ]]</a></b><br>
{% if authenticated %}
<button v-on:click="removeEntry('artist', [[ index ]])">Delete</button>
<button v-on:click="editEntry([[ index ]])">Edit</button>
{% endif %}
<p v-if="entries.length == 0">Sorry, no jobs currently available</p>
<div v-for="(entry, index) in entries">
<div class='imgbox'
style='background-image: url("https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg");'>
</div>
<b><a :href="'/en/' + entry.slug">[[ entry.name ]]</a></b><br>
<span>German, 1552 - 1615<br>
41 artworks</span><br>
{% if authenticated %}
<button v-on:click="removeEntry('artist', [[ index ]])">Delete</button>
<button v-on:click="editEntry([[ index ]])">Edit</button>
{% endif %}
</div>
</div>
{% endblock %}
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon" />
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<title>openArt</title>
</head>
<body>
......@@ -14,33 +15,47 @@
<header>
<div>
<div class='logo'>
<b><a href="/">[[ apptitle ]]</a></b>
<br>
<small>Tech demo 0.1</small>
<div>
<b><a href="/">[[ apptitle ]]</a></b>
<br>
<small>Tech demo 0.1</small>
</div>
</div>
<div class='search'>
<input type='text'>
<span class='icon'>
<i class="fa fa-search"></i>
<input type='text'>
</span>
</div>
<div class='lang'>
<b>EN</b>
<span class='icon'>
<i class="fa fa-chevron-down"></i>
<span>En</span>
</span>
</div>
<div class='login'>
<b><a href='/login'>SIGN IN</a></b>
<span class='icon'>
<i class="fa fa-lock"></i>
<span>Sign In</span>
</span>
</div>
</div>
</header>
<div id="sidebar">
<a href="/artists">Artists</a><br>
<a href="/projects">Projects</a><br>
<a href="/entries">Entries</a><br>
<a href="/media">Media</a><br><br>
{% if authenticated %}
<a href="/add">Add</a><br>
{% endif %}
</div>
<main>
{% block jobs %}
<div id="sidebar">
<a href="/artists">Artists</a><br>
<a href="/projects">Projects</a><br>
<a href="/entries">Entries</a><br>
<a href="/media">Media</a><br><br>
{% if authenticated %}
<a href="/add">Add</a><br>
{% endif %}
</div>
<div>
{% block content %}
{% endblock %}
</div>
</main>
<footer>
<div>
......
{% extends 'base.html' %}
{% block jobs %}
{% block content %}
<h2>Entries</h2>
<div class="flex-container">
<p v-if="entries.length == 0">Sorry, no entires currently available</p>
<div v-for="(entry, index) in entries" class="artist">
<img src="https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg" width=100px>
<br><b>[[ entry.signatory ]]</b><br>
<div v-for="(entry, index) in entries">
<div class='imgbox'
style='background-image: url("https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg");'>
</div>
<b>[[ entry.signatory ]]</b><br>
of [[ entry.project.name ]]<br>
{% if authenticated %}
<button v-on:click="removeEntry('entry', [[ index ]])">Delete</button>
......
{% extends 'base.html' %}
{% block jobs %}
{% block content %}
<h2>Hallo</h2>
Herzlich Willkommen beim Saasilord
......
{% extends 'base.html' %}
{% block jobs %}
{% block content %}
<h2>Projects</h2>
<div class="flex-container">
<p v-if="entries.length == 0">Sorry, no jobs currently available</p>
<div v-for="(entry, index) in entries" class="project">
<img src="https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg" width=100px>
<br><b>[[ entry.name ]]</b><br>
<div v-for="(entry, index) in entries">
<div class='imgbox'
style='background-image: url("https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg");'>
</div>
<b>[[ entry.name ]]</b><br>
by [[ entry.artist.name ]]<br>
{% if authenticated %}
<button v-on:click="removeEntry('artist', [[ index ]])">Delete</button>
......
Markdown is supported
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