This commit is contained in:
Anna Sudnitsina 2017-10-10 18:24:26 +03:00
parent e3aaa365b4
commit 845a956e17
8 changed files with 264 additions and 8 deletions

View File

@ -0,0 +1,38 @@
{% extends 'imagehosting/base.html' %}
{% load static %}
{% block content%}
<div class="images">
{% for image in all %}<a href="{% url 'image_detail' pk=image.pk %}" ><img src= "/media/images{{image.thumb_name }}"></a>{% endfor %}
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {resizer(); })
$(window).resize(function() { resizer(); })
function resizer() {
var imgs = $('img');
var row_width = $(window).width() - 50;
console.log(row_width);
//console.log(document.body.offsetWidth);
var prev = [];
var total_w = 0;
imgs.each(function (i, e) {
$(this).height(200);
prev[prev.length] = $(e);
total_w += $(e).width();
if (total_w > row_width) {
prev = $(prev);
prev.each(function (indx, element) {$(element).height(row_width*200/total_w);});
prev = [];
total_w = 0;
}
})
//$('img').css('display', 'inline');
}
</script>
{% endblock content %}

View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body {margin: 0}
.images {
margin-top: 10px;
margin-left: 25px;
}
.header {dispaly: block;
color: black ;
background: linear-gradient(#f3f3f3, #e0e0e0);
//height: 50px;
padding: 10px 25px;
font-size: 30px
}
ul.menu-icon {
display: none;
float: right;
color: black;
padding: 7px 0 20px ;
margin: 0;
}
.logo {
font-family: 'Open Sans', sans-serif;
color: #696969;
width: 50px;
text-decoration: none;
}
li {
list-style-type: none
}
.menu {
position: absolute;
font-size: 20px;
//background: linear-gradient(#f3f3f3, #e0e0e0);
//width: 300px;
right: 10px;
top: 60px;
display: none;
}
.menu a {
text-align: right;
display: inline-block;
padding: 10px;
background: #e0e0e0;
//background: linear-gradient(#f3f3f3, #e0e0e0);
width: 90%;
//border-top:1px solid #eee;
text-decoration: none;
}
.menu a:hover {
color:#181D2B ;}
//ul.menu-icon:hover ul.menu{display: block;}
i {float: right;}
.right-menu {float: right;
padding: 12px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
display: inline;
}
a.right-menu {
text-decoration: none;
color: #4368AD; padding: 9px;
//border-left: 1px solid rgb(43, 63, 101)
}
@media screen and (max-width: 450px) {
ul.menu-icon {display: block}
a.right-menu {display: none}
}
</style>
</head>
<body>
<div class='header'> <a href="{% url 'all_posts' %}" class='logo'>LOGO </a>
<a href="{% url 'image_new' %}" class='right-menu'>new image</a>
<a href="{% url 'all_posts' %}" class='right-menu'>all images</a>
<ul class='menu-icon'> <li> <i class="fa fa-bars"></i> </li>
<ul class="menu">
<li class="long"><a href="{% url 'image_new' %}">new image</a></li>
<li class="long"><a href="{% url 'all_posts' %}">all images</a></li>
</ul>
</ul>
</div>
{% block content %}
{% endblock%}
</body>
<script>
$('.menu-icon').click(function() {if ($('.menu').css('display') == 'block') {
$('.menu').css('display', 'none') } else {
$('.menu').css('display', 'block')
}})
</script>
</html>

View File

@ -0,0 +1,62 @@
{% load staticfiles %}
<html>
<head>
<title>Gallery</title>
</head>
<body>
<nav>
<div class="nav-wrapper teal lighten-2">
<a class="brand-logo" href="/">Gallery</a>
</div>
<div class="nav-wrapper teal lighten-2">
<ul class="right">
<li><a href="/pfm">PFM</a>
<li><a class="dropdown-button" href="#1" data-activates="dropdown1">Notes</a><ul id="dropdown1" class="dropdown-content"></li> <li> <a href="{% url 'blog.views.post_new' %}">new post</a></li> <li><a href="/blog/1">all notes</a></li></ul>
<li><a class="dropdown-button" href="#2" data-activates="dropdown2">Imagehost</a><ul id="dropdown2" class="dropdown-content"></li><li> <a href="{% url 'imagehost.views.image_new' %}">new image</a></li> <li> <a href="{% url 'imagehost.views.all_posts' %}"><span>all images</span></a></li></ul>
<li><a href="/admin">/admin</a></li>
</ul></div></nav>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({ shift: 20 });
$('.materialboxed').materialbox();
$(".dropdown-button").dropdown();
});
</script>
<!--Import Google Icon Font>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"-->
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="/css/materialize.min.css" media="screen,projection">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<div class="card-panel teal lighten-5">
<div class="carousel">
{% for image in all %}
<a href="{% url 'image_detail' pk=image.pk %}"--> <a class="carousel-item"><img width="650" src="/media/images{{ image.thumb_name }}" ></a>
{% endfor %}
</div>
</div>
<div class="card-panel teal lighten-5">
<div class="row" style="display: flex; flex-wrap: wrap;">
{% for image in all %}
<div class="col s12 m6 l3">
<div class="card blue-grey darken-1"> <div class="card-content"> <img class="thumbnail" src="/media/images{{ image.thumb_name }}" ></a> </div>
<div class="card-action white-text"><a href="{% url 'image_detail' pk=image.pk %}">{{ image.name }}</a></div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="card-panel s1 teal lighten-5">1</div>
</div>

View File

@ -0,0 +1,17 @@
{% extends 'imagehosting/base.html' %}
{% block content %}
<div class="block" style="position: relative; width: 400px; width: padding: 50px; border: 1px solid #e0e0e0; margin: 100px auto;">
<a href="/media/{{post.file}}"><img src="/media/images{{ post.thumb_name }}" style="margin: auto; display: block; padding: 10px"></a>
<div style="margin: auto; display: block; padding: 10px 0 20px; width: 140px; text-align: center;">
{% if user.is_authenticated %}
<a href="{% url 'delete_post' pk=post.pk %}" onclick = "return confirm('Удалить?')" style="padding-right: 30px; color: #888787">удалить</a>
{% endif %}
<a href="/media/{{post.file}}" download style=" color: #888787; margin: auto; text-align: right"> {{ post.name }} скачать</a>
</div>
</div>
{% endblock %}

View File

@ -0,0 +1,10 @@
{% extends 'imagehosting/base.html' %}
{% block content %}
<div class="block" style="width: 500px; padding: 50px; margin: 100px auto; border: 1px solid #e0e0e0">
<form method="POST" class="post-form" enctype="multipart/form-data" action="" >{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="send" class="save btn btn-default"></button>
</form>
</div>
{% endblock %}

View File

@ -0,0 +1,15 @@
{% extends 'imagehosting/base.html' %}
{% block content %}
<form method="post" action="{% url 'login' %}" class="w3-container" style="padding: 20px">
<table>
{% csrf_token %}
{{form.as_table}}
<tr><td></td><td><input id="login" type="submit" class="w3-btn w3-right"value="login" /></td></tr>
</table>
<input type="hidden" name="next" value="{{ next }}" />
</form>
{% endblock %}

View File

@ -4,10 +4,19 @@ from django.conf.urls import url
from . import views from . import views
from django.conf import settings from django.conf import settings
from django.conf.urls.static import static from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.contrib import admin
from django.contrib.auth.views import login, logout
urlpatterns = [ urlpatterns = [
url(r'^$', views.image_new, name='image_new'), url(r'^$', views.image_new, name='image_new'),
url(r'^post/(?P<pk>[0-9]+)/$', views.image_detail, name='image_detail'), url(r'^post/(?P<pk>[0-9]+)/$', views.image_detail, name='image_detail'),
url(r'^all/$', views.all_posts, name='all_posts'), url(r'^all/$', views.all_posts, name='all_posts'),
url(r'^carousel/$', views.carousel, name='carousel'), url(r'^carousel/$', views.carousel, name='carousel'),
url(r'^delete/(?P<pk>[0-9]+)/$', views.delete_post, name='delete_post') url(r'^delete/(?P<pk>[0-9]+)/$', views.delete_post, name='delete_post'),
url(r'^admin/', admin.site.urls),
url(r'^login$', login, {'template_name':'imagehosting/login.html'}, name='login'),
url(r'^logout/$', logout)
] ]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()

View File

@ -5,7 +5,8 @@ from .models import Post
from .forms import PostForm, DeleteForm from .forms import PostForm, DeleteForm
from django.shortcuts import redirect from django.shortcuts import redirect
from ih import files, images from ih import files, images
from django.views.decorators.csrf import requires_csrf_token #from django.views.decorators.csrf import requires_csrf_token
from django.contrib.auth.decorators import login_required
'''def create_thumbnail(request): '''def create_thumbnail(request):
# Get file from <InMemoryUploadedFile> # Get file from <InMemoryUploadedFile>
@ -48,7 +49,7 @@ def create_thumb_from_file(filename):
return thumb_name return thumb_name
@login_required(login_url="/login")
def image_new(request): def image_new(request):
if request.method == "POST": if request.method == "POST":
form = PostForm(request.POST, request.FILES) form = PostForm(request.POST, request.FILES)
@ -79,17 +80,16 @@ def all_posts(request):
def carousel(request): def carousel(request):
return render(request, 'imagehosting/carousel.html', {'all': Post.objects.all()}) return render(request, 'imagehosting/carousel.html', {'all': Post.objects.all()})
@requires_csrf_token #@requires_csrf_token
@login_required(login_url="/login")
def delete_post(request, pk): def delete_post(request, pk):
post_to_delete = get_object_or_404(Post, pk=pk) post_to_delete = get_object_or_404(Post, pk=pk)
if request.method == 'POST': if request.method == 'GET':
form = DeleteForm(request.POST, instance=post_to_delete) form = DeleteForm(request.POST, instance=post_to_delete)
if form.is_valid(): # checks CSRF if form.is_valid(): # checks CSRF
if not request.user.is_authenticated(): if not request.user.is_authenticated():
return HttpResponseRedirect('/admin') return HttpResponseRedirect('/admin')
post_to_delete.delete() post_to_delete.delete()
return redirect('imagehosting.views.all_posts') return redirect('imagehosting.views.all_posts')
else:
form = DeleteForm(instance=post_to_delete)
return render(request, 'imagehosting/delete.html', {'form': form}) #return render(request, 'imagehosting/delete.html', {'form': form})