Commit 895eccf8 authored by onny's avatar onny
Browse files

split up css files, enhance entry css

parent 24c2c02d
......@@ -47,4 +47,4 @@ class EntryReadSerializer(serializers.ModelSerializer):
class MediaSerializer(serializers.ModelSerializer):
class Meta:
model = Media
fields = ('file', 'entry')
fields = ('id', 'file', 'entry')
......@@ -57,191 +57,6 @@ header > div {
align-items: center;
}
.menuItem {
height: 100%;
display:flex;
align-items: center;
border-left: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
cursor: pointer;
padding: 0px 30px;
font-size: 16px;
}
.menuItem > * {
pointer-events: none;
}
.menuItem:nth-child(n+2) {
margin-left:-1px;
}
.search {
justify-content: flex-end;
flex: 1;
}
.search .noBorder {
border-left: 0px;
}
.search .fa-times {
pointer-events: all;
}
.icon-search {
height: 100%;
border-left: 1px solid #d6d6d6;
padding-left: 30px;
}
.searchArea {
width: 100%;
border-bottom: 1px solid rgb(0, 99, 161);
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
display: flex;
align-items: center;
display: none;
}
.inputField {
width: 100%;
border: none;
outline: none;
font-size: 14px;
pointer-events: all;
}
.searchArea .fa-search {
font-size: 16px;
}
.loginOverlay {
pointer-events: all;
position: absolute;
width: 100%;
height: 100%;
background-color: #373737;
top: 0px;
left: 0px;
justify-content: center;
align-items: center;
display: none;
}
.loginBox {
max-width: 570px;
max-height: 570px;
background-color: white;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 0 15px;
}
.loginBox .header {
padding: 20px;
font-size: 25px;
font-weight: bold;
border-bottom: 1px solid #d6d6d6;
display: flex;
align-items: center;
}
.loginBox .header .title {
width: 100%;
}
.loginBox .header .fa {
font-size: 30px;
}
.loginBox .content {
display: flex;
align-items: center;
flex-direction: column;
}
.loginBox .content div, .loginBox .content button, .loginBox .content p {
padding-top: 30px;
max-width: 370px;
width: 100%;
}
.loginBox .content .inputArea {
width: 100%;
border-bottom: 1px solid;
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: bold;
}
.fa {
font-size: 20px;
}
.fa-margin {
margin-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
pointer-events: all;
display: none;
position: absolute;
font-size: 13px;
color: #d2cdcd;
background-color: white;
overflow: auto;
z-index: 1;
padding: 15px;
}
.dropdown-login {
margin-top: 24px;
left: -160px;
width: 200px;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 5px;
}
.dropdown-lang {
margin-top: 24px;
left: -25px;
width: 170px;
}
.dropdown-content a:hover {
color: white;
background-color: #0027af;
}
.active {
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
}
.show {display: block;}
.showFlex {display: flex;}
main {
grid-row-start: 2;
grid-row-end: 2;
......@@ -291,10 +106,16 @@ footer > div {
.flex-container > div {
width: 220px;
margin: 10px;
font-size: 20px;
overflow-wrap: break-word;
}
.flex-container .entryTitle {
font-size: 16px;
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.flex-container .imgbox {
background-color: #f1f1f1;
background-size: contain;
......
.menuItem {
height: 100%;
display:flex;
align-items: center;
border-left: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
cursor: pointer;
padding: 0px 30px;
font-size: 16px;
}
.menuItem > * {
pointer-events: none;
}
.menuItem:nth-child(n+2) {
margin-left:-1px;
}
.search {
justify-content: flex-end;
flex: 1;
}
.search .noBorder {
border-left: 0px;
}
.search .fa-times {
pointer-events: all;
}
.icon-search {
height: 100%;
border-left: 1px solid #d6d6d6;
padding-left: 30px;
}
.searchArea {
width: 100%;
border-bottom: 1px solid rgb(0, 99, 161);
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
display: flex;
align-items: center;
display: none;
}
.inputField {
width: 100%;
border: none;
outline: none;
font-size: 14px;
pointer-events: all;
}
.searchArea .fa-search {
font-size: 16px;
}
.loginOverlay {
pointer-events: all;
position: absolute;
width: 100%;
height: 100%;
background-color: #373737;
top: 0px;
left: 0px;
justify-content: center;
align-items: center;
display: none;
}
.loginBox {
max-width: 570px;
max-height: 570px;
background-color: white;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 0 15px;
}
.loginBox .header {
padding: 20px;
font-size: 25px;
font-weight: bold;
border-bottom: 1px solid #d6d6d6;
display: flex;
align-items: center;
}
.loginBox .header .title {
width: 100%;
}
.loginBox .header .fa {
font-size: 30px;
}
.loginBox .content {
display: flex;
align-items: center;
flex-direction: column;
}
.loginBox .content div, .loginBox .content button, .loginBox .content p {
padding-top: 30px;
max-width: 370px;
width: 100%;
}
.loginBox .content .inputArea {
width: 100%;
border-bottom: 1px solid;
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: bold;
}
.fa {
font-size: 20px;
}
.fa-margin {
margin-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
pointer-events: all;
display: none;
position: absolute;
font-size: 13px;
color: #d2cdcd;
background-color: white;
overflow: auto;
z-index: 1;
padding: 15px;
}
.dropdown-login {
margin-top: 24px;
left: -160px;
width: 200px;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 5px;
}
.dropdown-lang {
margin-top: 24px;
left: -25px;
width: 170px;
}
.dropdown-content a:hover {
color: white;
background-color: #0027af;
}
.active {
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
}
.show {display: block;}
.showFlex {display: flex;}
......@@ -3,7 +3,7 @@
{% block content %}
<h2>Artists</h2>
<div class="flex-container">
<p v-if="entries.length == 0">Sorry, no jobs currently available</p>
<p v-if="entries.length == 0">Sorry, no artist entries 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");'>
......
......@@ -7,6 +7,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="{% static 'css/menu.css' %}">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<title>openArt</title>
......
......@@ -6,9 +6,9 @@
<p v-if="entries.length == 0">Sorry, no entires 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");'>
:style="{ backgroundImage: 'url(' + entry.file + ')' }">
</div>
<b>[[ entry.file ]]</b><br>
<span class='entryTitle'>[[ entry.file ]]</span>
of [[ entry.id ]]<br>
{% if authenticated %}
<button v-on:click="removeEntry('media', [[ 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