Commit bfa64534 authored by onny's avatar onny
Browse files

add project title, css masonry layout

parent a5c3795b
# Installation
```
sudo -u aur aur sync -c python-django-rest-framework python-django-easy-thumbnails
sudo -u aur aur sync -c python-django-rest-framework
pacman -Sy python-django python-django-rest-framework
git clone https://git.project-insanity.org/onny/openart.git
cd openart
......
......@@ -38,7 +38,6 @@ INSTALLED_APPS = [
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'easy_thumbnails',
'openart',
]
......
......@@ -2,9 +2,11 @@ from __future__ import unicode_literals
import re
import os
from io import BytesIO
from PIL import Image
from django.db import models
from django.core.validators import RegexValidator
from easy_thumbnails.files import get_thumbnailer
from django.core.files.uploadedfile import InMemoryUploadedFile
alphanum_regex = RegexValidator(
regex='^[A-Za-z-ÁÀȦÂÄǞǍĂĀÃÅǺǼǢĆĊĈČĎḌḐḒÉÈĖÊËĚĔĒẼE̊ẸǴĠĜǦĞG̃ĢĤḤáàȧâäǟǎăāãåǻǽǣćċĉčďḍḑḓéèėêëěĕēẽe̊ẹǵġĝǧğg̃ģĥḥÍÌİÎÏǏĬĪĨỊĴĶǨĹĻĽĿḼM̂M̄ʼNŃN̂ṄN̈ŇN̄ÑŅṊÓÒȮȰÔÖȪǑŎŌÕȬŐỌǾƠíìiîïǐĭīĩịĵķǩĺļľŀḽm̂m̄ʼnńn̂ṅn̈ňn̄ñņṋóòôȯȱöȫǒŏōõȭőọǿơP̄ŔŘŖŚŜṠŠȘṢŤȚṬṰÚÙÛÜǓŬŪŨŰŮỤẂẀŴẄÝỲŶŸȲỸŹŻŽẒǮp̄ŕřŗśŝṡšşṣťțṭṱúùûüǔŭūũűůụẃẁŵẅýỳŷÿȳỹźżžẓǯßœŒçÇ0-9\s]*$',
......@@ -102,19 +104,23 @@ class Media(models.Model):
blank=False
)
fileName = models.CharField(max_length=100)
fileThumb = models.FileField(
fileThumb = models.ImageField(
null=True,
blank=True
)
entry = models.ForeignKey(Entry, on_delete=models.CASCADE)
def save(self, *args, **kwargs):
self.fileName = os.path.splitext(str(self.file))[0]
thumbnailer = get_thumbnailer(self.file)
thumbnailer.get_thumbnail({'size': (100, 100)})
#self.fileThumb = # FIXME
image = Image.open(BytesIO(self.file.read()))
image.thumbnail((300,300))
output = BytesIO()
image.save(output, format='JPEG', quality=75)
output.seek(0)
self.fileThumb = InMemoryUploadedFile(output,'ImageField', "%s.jpg" %self.file.name, 'image/jpeg', output.getbuffer().nbytes, None)
super(Media, self).save(*args, **kwargs)
def __str__(self):
......
......@@ -52,4 +52,4 @@ class MediaSerializer(serializers.ModelSerializer):
class MediaReadSerializer(serializers.ModelSerializer):
class Meta:
model = Media
fields = ('id', 'file', 'fileName', 'entry')
fields = ('id', 'file', 'fileName', 'fileThumb', 'entry')
......@@ -47,7 +47,7 @@ def artists_page(request):
def artist_page(request, slug):
context = {}
context['artist'] = Artist.objects.get(slug=slug)
#context['artist'] = Artist.objects.get(slug=slug)
context['authenticated'] = request.user.is_authenticated
html = TemplateResponse(request, 'artist_page.html', context)
......
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
.imageItem {
width: 220px;
margin: 10px;
overflow-wrap: break-word;
margin: 7px;
cursor: pointer;
}
.flex-container > div:hover {
margin: -5px -5px;
.mediaItem:hover {
background-color: white;
margin: -8px -8px;
padding: 15px;
width: 250px;
z-index: 2;
......@@ -18,46 +15,61 @@
box-shadow: 0 0 5px #bebaba;
}
.flex-container .entryTitle {
font-size: 16px;
font-weight: 600;
display: block;
margin-bottom: 4px;
.imageItem .imgbox {
background-color: #f1f1f1;
width: 100%;
margin-bottom: 10px;
position: relative;
height: 170px;
justify-content: center;
display: flex;
}
.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;
.mediaItem .imgbox {
height: auto;
}
.controlBoxes {
.imageItem img {
height: 100%;
}
.mediaItem img {
height: auto;
width: 100%;
}
.imageItem .controlBoxes {
display: none;
justify-content: center;
padding-bottom: 10px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
padding-bottom: 10px;
}
.controlBoxes .fa {
.imageItem .controlBoxes .fa {
font-size: 27px;
padding: 5px;
border-radius: 5px;
background-color: white;
opacity: 0.5;
align-self: flex-end; /* DOKU */
align-self: flex-end;
margin: 0px 4px;
}
.controlBoxes .fa:hover {
.mediaItem .controlBoxes .fa:hover {
opacity: 1;
}
.flex-container > div:hover .imgbox .controlBoxes {
.mediaItem:hover .imgbox .controlBoxes {
display: flex;
}
.imageItem .entryTitle {
font-size: 16px;
font-weight: 600;
display: block;
margin-bottom: 4px;
}
......@@ -17,6 +17,17 @@
margin-left:-1px;
}
.logo {
font-weight: bold;
font-size: 25px;
}
.logo > div > div {
display: inline-block;
font-stretch: ultra-condensed;
color: #f08b00;
}
.search {
justify-content: flex-end;
flex: 1;
......
......@@ -24,6 +24,9 @@ function post_data(url, data, target_class) {
});
}
var VueMasonryPlugin = window["vue-masonry-plugin"].VueMasonryPlugin
Vue.use(VueMasonryPlugin)
var demo = new Vue({
el: '#app',
data: {
......
......@@ -2,17 +2,22 @@
{% block content %}
<h2>Artists</h2>
<div class="flex-container">
<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");'>
<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'><a :href="'/en/' + entry.slug">[[ entry.name ]]</a></span>
<span class='entryTitle'>[[ entry.name ]]</span>
<span>German, 1552 - 1615<br>
41 projects</span><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>
......
......@@ -11,6 +11,8 @@
<link rel="stylesheet" href="{% static 'css/entry.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'>
<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>
</head>
<body>
......@@ -20,9 +22,7 @@
<div>
<div class='logo menuItem'>
<div>
<b><a href="/">[[ apptitle ]]</a></b>
<br>
<small>Tech demo 0.1</small>
open<div>saai</div>
</div>
</div>
<div class='search menuItem'>
......
......@@ -2,11 +2,11 @@
{% block content %}
<h2>Media</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="{ backgroundImage: 'url(' + entry.file + ')' }">
<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 mediaItem' v-for="(entry, index) in entries">
<div class='imgbox'>
<img :src='entry.fileThumb'>
<div class='controlBoxes'>
<i class="fa fa-heart"></i>
<i class="fa fa-search-plus"></i>
......
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