Replace Thumbnail engine
This commit is contained in:
@@ -4,13 +4,45 @@
|
||||
# {% block title %}Place erstellen{% endblock %}
|
||||
|
||||
{% block maincontent %}
|
||||
<form class="LP-Form" method="POST" enctype="multipart/form-data">
|
||||
<fieldset class="LP-Form__Fieldset">
|
||||
<legend class="LP-Form__Legend">Place erstellen</legend>
|
||||
{% csrf_token %}
|
||||
<div class="LP-Form__Composition LP-Form__Composition--breakable">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=place_form.name %}
|
||||
</div>
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=place_form.location %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition LP-Form__Composition--breakable">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=place_form.latitude %}
|
||||
</div>
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=place_form.longitude %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=place_form.description %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=place_image_form.filename %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<input type="submit" class="LP-Button" value="Abschicken"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h2>Place erstellen</h2>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{{ place_form.as_p }}
|
||||
{{ place_image_form.as_p }}
|
||||
<button type="submit">Abschicken</button>
|
||||
</form>
|
||||
|
||||
{% endblock maincontent %}
|
||||
54
lostplaces/lostplaces_app/templates/home.html
Normal file
54
lostplaces/lostplaces_app/templates/home.html
Normal file
@@ -0,0 +1,54 @@
|
||||
{% extends 'global.html'%}
|
||||
{% load static %}
|
||||
|
||||
# {% block title %}Start{% endblock %}
|
||||
|
||||
{% block maincontent %}
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
Hi {{ user.username }}!
|
||||
<p><a href="{% url 'logout' %}">logout</a></p>
|
||||
{% else %}
|
||||
<p>Du bist nicht eingeloggt.</p>
|
||||
<a href="{% url 'login' %}">login</a> |
|
||||
<a href="{% url 'signup' %}">signup</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="LP-PlaceGrid">
|
||||
<h1 class="LP-Headline LP-Headline">Explorere the latest locations</h1>
|
||||
<ul class="LP-PlaceGrid__Grid">
|
||||
{% for place in place_list %}
|
||||
<li class="LP-PlaceGrid__Item">
|
||||
<a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
|
||||
<article class="LP-PlaceTeaser">
|
||||
<div class="LP-PlaceTeaser__Image">
|
||||
<img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url}}" />
|
||||
</div>
|
||||
<div class="LP-PlaceTeaser__Meta">
|
||||
<div class="LP-PlaceTeaser__Info">
|
||||
<span class="LP-PlaceTeaser__Title">
|
||||
<h1 class="LP-Headline LP-Headline--teaser">{{place.name}}</h1>
|
||||
</span>
|
||||
<span class="LP-PlaceTeaser__Detail">
|
||||
<p class="LP-Paragraph">{{place.location}}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="LP-PlaceTeaser__Description">
|
||||
<p class="LP-Paragraph">{{place.description}}</p>
|
||||
</div>
|
||||
<div class="LP-PlaceTeaser__Icons">
|
||||
<ul class="LP-Icon__List">
|
||||
<li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/favourite.svg' %}" /></li>
|
||||
<li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/location.svg' %}" /></li>
|
||||
<li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/flag.svg' %}" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% endblock maincontent %}
|
||||
@@ -10,7 +10,7 @@
|
||||
<a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
|
||||
<article class="LP-Place">
|
||||
<div class="LP-Place__ImageContainer">
|
||||
<img class="LP-Place__Image" src="{{ place.images.first.filename.url_thumbnail }}" />
|
||||
<img class="LP-Place__Image" src="{{ place.images.first.filename.thumbnail.url }}" />
|
||||
</div>
|
||||
<div class="LP-Place__Assets">
|
||||
<div class="LP-Place__Info">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{% extends 'global.html'%}
|
||||
{% load static %}
|
||||
{% load thumbnail %}
|
||||
|
||||
{% block title %}{{place.name}}{% endblock %}
|
||||
|
||||
@@ -9,66 +10,71 @@
|
||||
|
||||
<article class="LP-PlaceOverview">
|
||||
<div class="LP-PlaceOverview__Info">
|
||||
<img class="LP-PlaceOveriew__Image" src="{{ place.images.first.filename.url_hero }}">
|
||||
<div class="LP-PlaceOveriew__Image">
|
||||
<img src="{{ place.images.first.filename.hero.url }}" class="LP-Image" />
|
||||
</div>
|
||||
<article class="LP-PlaceOverView__Description">
|
||||
<div class="LP-TextSection">
|
||||
<h1 class="LP-Headline LP-Headline--main">{{place.name}}</h1>
|
||||
<p class="LP-Text LP-Content">{{place.description}}</p>
|
||||
<h1 class="LP-Headline LP-Headline">{{place.name}}</h1>
|
||||
<p class="LP-Paragraph LP-Paragraph">{{place.description}}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<article style="clear:both;">
|
||||
<h2 class="LP-Headline LP-Headline">Sicherheitsmaßnahmen</h2>
|
||||
<div class="LP-Content">
|
||||
<ul class="LP-SecurityMeasure__List">
|
||||
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
|
||||
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
|
||||
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Wachhund</span></li>
|
||||
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
|
||||
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
|
||||
</ul>
|
||||
<article class="LP-Section">
|
||||
<h1 class="LP-Headline LP-Headline">Sicherheitsmaßnahmen</h1>
|
||||
<div class="LP-Content__Wrapper">
|
||||
<div class="LP-Content">
|
||||
<div class="LP-TagList">
|
||||
<ul class="LP-TagList__List">
|
||||
<li class="LP-TagList__Item">
|
||||
<div class="LP-Tag">
|
||||
<p class="LP-Paragraph LP-Paragraph">Kamera</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="LP-TagList__Item">
|
||||
<div class="LP-Tag">
|
||||
<p class="LP-Paragraph LP-Paragraph">Wachhund</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="LP-TagList__Item">
|
||||
<div class="LP-Tag">
|
||||
<p class="LP-Paragraph LP-Paragraph">Zaun</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="LP-TagList__Item">
|
||||
<div class="LP-Tag">
|
||||
<p class="LP-Paragraph LP-Paragraph">Security</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2 class="LP-Headline LP-Headline">Karten</h2>
|
||||
<div class="LP-Content">
|
||||
<ul class="LP-LinkList__List">
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="https://www.google.com/maps?q={{place.latitude}},{{place.longitude}}" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="https://www.tim-online.nrw.de/tim-online2/?center={{place.latitude}},{{place.longitude}}&icon=true&bg=dop" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="http://www.openstreetmap.org/?mlat={{place.latitude}}&mlon={{place.longitude}}&zoom=16" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
|
||||
</ul>
|
||||
<article class="LP-Section">
|
||||
<h1 class="LP-Headline LP-Headline">Links</h1>
|
||||
<div class="LP-Content__Wrapper">
|
||||
<div class="LP-Content">
|
||||
<ul class="LP-LinkList__List">
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="https://www.google.com/maps?q={{place.latitude}},{{place.longitude}}" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="https://www.tim-online.nrw.de/tim-online2/?center={{place.latitude}},{{place.longitude}}&icon=true&bg=dop" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="http://www.openstreetmap.org/?mlat={{place.latitude}}&mlon={{place.longitude}}&zoom=16" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2 class="LP-Headline LP-Headline">Fotoalben</h2>
|
||||
<div class="LP-Content">
|
||||
<ul class="LP-LinkList__List">
|
||||
<li class="LP-LinkList__Item"><a target="_blank" href="https://gallery.commander1024.de/index.php?/category/verlassenes-wohnhaus-mesum" class="LP-Link"><span class="LP-Text">Commander1024</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
|
||||
<div class="LP-Link__IconWrapper">
|
||||
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="LP-Text">Album hinzufügen</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class="">
|
||||
<h2 class="LP-Headline LP-Headline">Bilder</h2>
|
||||
<div class=" LP-Content">
|
||||
<ul class="LP-PlaceOverView__ImageList">
|
||||
{% for place_image in place.images.all %}
|
||||
<li class="LP-PlaceOverView__ImageItem">
|
||||
<a href="{{ place_image.filename.url_large }}"> <img src="{{ place_image.filename.url_thumbnail }}"></a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</article>
|
||||
<article class="LP-Section">
|
||||
<h1 class="LP-Headline LP-Headline">Bilder</h1>
|
||||
<div class="LP-Content__Wrapper">
|
||||
<div class=" LP-Content">
|
||||
<ul class="LP-PlaceOverView__ImageList">
|
||||
{% for place_image in place.images.all %}
|
||||
<li class="LP-PlaceOverView__ImageItem">
|
||||
<a href="{{ place_image.filename.large.url }}" class="LP-Link"><img class="LP-Image" src="{{ place_image.filename.thumbnail.url }}"></a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
@@ -1,15 +1,48 @@
|
||||
{% extends 'global.html'%}
|
||||
{% load static %}
|
||||
|
||||
# {% block title %}Place erstellen{% endblock %}
|
||||
# {% block title %}Place aktualisieren{% endblock %}
|
||||
|
||||
{% block maincontent %}
|
||||
<form class="LP-Form" method="POST" enctype="multipart/form-data">
|
||||
<fieldset class="LP-Form__Fieldset">
|
||||
<legend class="LP-Form__Legend">Place aktualisieren</legend>
|
||||
{% csrf_token %}
|
||||
<div class="LP-Form__Composition LP-Form__Composition--breakable">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=form.name %}
|
||||
</div>
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=form.location %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition LP-Form__Composition--breakable">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=form.latitude %}
|
||||
</div>
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=form.longitude %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=form.description %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<div class="LP-Form__Field">
|
||||
{% include 'partials/form/inputField.html' with field=form.filename %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<input type="submit" class="LP-Button" value="Abschicken"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h2>Place aktualisieren</h2>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
<button type="submit">Abschicken</button>
|
||||
</form>
|
||||
|
||||
{% endblock maincontent %}
|
||||
Reference in New Issue
Block a user