Commit 47b8a7b3 authored by onny's avatar onny
Browse files

start implementing responsive media layout

parent bfa64534
......@@ -34,9 +34,7 @@ a {
content {
min-height: 100vh;
display: grid;
grid-gap: 10px;
grid-template-rows: auto 1fr auto;
grid-template-columns: auto;
}
......@@ -51,7 +49,7 @@ header {
header > div {
margin: -1px auto -1px auto;
width: 80%;
max-width: 1240px;
height: 70px;
display: flex;
align-items: center;
......@@ -64,12 +62,10 @@ main {
main > div {
margin: 0 auto 0 auto;
width: 80%;
max-width: 1240px;
display: flex;
flex-direction: row;
justify-content: left;
margin-bottom: 30px;
}
......@@ -88,14 +84,13 @@ footer {
background: black;
color: white;
padding: 1rem;
grid-row-start: 3;
grid-row-end: 4;
}
footer > div {
margin: 0 auto 0 auto;
width: 80%;
max-width: 1240px;
}
.msg {
......@@ -114,3 +109,22 @@ table th {
text-align: left;
min-width: 120px;
}
@media (max-width: 1240px) {
header > div, main > div, footer > div {
max-width: 1000px;
}
}
@media (max-width: 1000px) {
header > div, main > div, footer > div {
max-width: 750px;
/* hide sidebar */
}
.login span > span {
display: none;
}
.login .fa-margin {
margin-right: 0px;
}
}
......@@ -13,7 +13,7 @@
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/vue-masonry@0.11.3/dist/vue-masonry-plugin-window.js"></script>
<title>openArt</title>
<title>opensaai</title>
</head>
<body>
......
......@@ -2,18 +2,23 @@
{% 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">
<div class='imgbox'
style='background-image: url("https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg");'>
<p v-if="entries.length == 0">Sorry, no entires currently available</p>
<div class='imageGrid' v-masonry transition-duration="0.3s" item-selector=".imageItem" :origin-top="true" :horizontal-order="false">
<div v-masonry-tile class='imageItem' v-for="(entry, index) in entries">
<div class='imgbox'>
<img src='https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg'>
<div class='controlBoxes'>
<i class="fa fa-heart"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
<span class='entryTitle'>[[ entry.signatory ]]</span>
of [[ entry.project.name ]]<br>
{% if authenticated %}
<button v-on:click="removeEntry('entry', [[ index ]])">Delete</button>
<button v-on:click="removeEntry('media', [[ index ]])">Delete</button>
<button v-on:click="editEntry([[ index ]])">Edit</button>
{% endif %}
</div>
</div>
{% endblock %}
......@@ -2,16 +2,20 @@
{% 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">
<div class='imgbox'
style='background-image: url("https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg");'>
<p v-if="entries.length == 0">Sorry, no entires currently available</p>
<div class='imageGrid' v-masonry transition-duration="0.3s" item-selector=".imageItem" :origin-top="true" :horizontal-order="false">
<div v-masonry-tile class='imageItem' v-for="(entry, index) in entries">
<div class='imgbox'>
<img src='https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg'>
<div class='controlBoxes'>
<i class="fa fa-heart"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
<span class='entryTitle'>[[ entry.name ]]</span>
by [[ entry.artist.name ]]<br>
{% if authenticated %}
<button v-on:click="removeEntry('artist', [[ index ]])">Delete</button>
<button v-on:click="removeEntry('media', [[ index ]])">Delete</button>
<button v-on:click="editEntry([[ index ]])">Edit</button>
{% endif %}
</div>
......
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