embed card, lines in the overview

marktplatz/forms.py

@@ -36,7 +36,7 @@ class textSearchForm(forms.Form):
     def __init__(self, *args, **kwargs):
         super(textSearchForm, self).__init__(*args, **kwargs)
         self.helper = FormHelper()
-        # self.helper.form_tag = False
+        self.helper.form_tag = False
         self.helper.layout = Layout(
 
            Div(
@@ -133,7 +133,7 @@ class ProductForm(forms.ModelForm):
 
 class WohnprojektForm(ProductForm):
 
-    terms = forms.BooleanField(required=True,  label= ('I accept and have read the Terms of Participation.'))
+    terms = forms.BooleanField(required=True,  label= ('Ich habe die Teilnahmebedingungen gelesen und akzeptiert.'))
 
     class Meta:
         model = Wohnprojekt
@@ -272,10 +272,10 @@ class MediaForm(FileFormMixin, forms.Form):
         super(MediaForm, self).__init__(*args, **kwargs)
         self.helper = FormHelper()
         self.helper.form_tag = False
-        self.fields['name_for'].label = 'Caption'
-        self.fields['copyright'].label = 'Copyright of'
-        self.fields['image'].label = 'Image or Video'
-        self.fields['image'].help_text = 'Please upload Images in PNG or JPEG format. Upload Video in MP4 format.'
+        self.fields['name_for'].label = 'Bildbeschriftung'
+        self.fields['copyright'].label = 'Copyright von'
+        self.fields['image'].label = 'Bild oder Video'
+        self.fields['image'].help_text = 'Bitte laden Sie Bilder im PNG- oder JPEG-Format hoch. Laden Sie Videos im MP4-Format hoch.'
         self.layout = Layout(
             Fieldset(
                 (''),

marktplatz/templates/marktplatz/product_detail_card.html

@@ -0,0 +1,185 @@
+{% extends "base_generic.html" %}
+{% load fullurl %}
+{% load tags %}
+{% load static %}
+{% block script %}
+<link href="{% static 'featherlight.min.css' %}" type="text/css" rel="stylesheet" />
+<script src="{% static 'featherlight.min.js' %}" type="text/javascript" charset="utf-8"></script>
+<link href="{% static 'featherlight.gallery.min.css' %}" type="text/css" rel="stylesheet" />
+<script src="{% static 'featherlight.gallery.min.js' %}" type="text/javascript" charset="utf-8"></script>
+
+<script>
+	$(document).ready(function(){
+
+	$('.gallery').featherlightGallery({
+			previousIcon: '«',
+			nextIcon: '»',
+			galleryFadeIn: 250,
+			openSpeed: 250,
+		});
+
+	});
+
+
+</script>
+
+
+
+{% endblock %}
+
+{% block content %}
+
+
+<style>
+
+
+.image-detail{
+
+	margin:40px 60px 40px 0px;
+
+}
+
+
+
+@media (min-width: 500px) {
+
+
+}
+
+
+</style>
+
+<!-- <hr style="color: black; background-color: black; margin-top: 0px; width: 130%; display: flex; margin-left: -20px; margin-right:20px "> -->
+
+<div class="container " style="">
+		<div class="row gemain-color">
+				<div class="col-sm-3">
+
+
+				</div>
+
+
+
+ 			<!-- *************************************************************** -->
+
+
+				<div class="col-sm-6">
+
+					<h2 class="titlepro" style="margin-top: 7px;color: font-weight: bold">{{ product.name }}
+					      <small class="text-muted">{% if product.year %} {{ product.year }}, {% endif %}  {% for country in product.country %} {{ country.name }}, {% endfor %} {% if product.city %} {{ product.city }} {% endif %}</small>
+					</h2>
+
+					<p class="lead kur"> {{ product.claim }}</p>
+
+
+					<div class="image-detail" style="">
+					<img href="{{product.media_set.first.image_big.url}}" align="middle" src="{{product.media_set.first.image_norm.url }}" class="gallery img-fluid img-responsive"  alt="" style="width: 100%;height: auto;vertical-align: middle;">
+
+					</div>
+
+
+					<br />
+					<h5 class=" mediumkur">Steckbrief</h5>
+					<br />
+
+					<p>{{ product.wohnprojekt.kind_of_product }}, gegründet {{ product.wohnprojekt.gruendungsjahr }}, in Betrieb genommen: {{ product.wohnprojekt.betriebgenommen }}.</p>
+					<p>Rechtsform: {{ product.wohnprojekt.rechtsform }}</p>
+					<p>{{ product.wohnprojekt.artmodell }}</p>
+					<p>{{ product.wohnprojekt.orga }}</p>
+					<p>{% if product.wohnprojekt.eigentum  %}{% field_name product.wohnprojekt 'eigentum' %}: {{ product.wohnprojekt.get_eigentum_display }}{% endif %}</p>
+					<p>Gemeinschaftliche Projekte: {{ product.wohnprojekt.gprojekte }}</p>
+					<p>Gemeinschaftsräume: {{ product.wohnprojekt.gemeinschaftr }}
+						{% if product.wohnprojekt.kgemeinschaftr  %} - {{ product.wohnprojekt.kgemeinschaftr }}{% endif %}
+					</p>
+
+					<p>{% if product.wohnprojekt.sonderwohnformen  %}{% field_name product.wohnprojekt 'sonderwohnformen' %}: {{ product.wohnprojekt.sonderwohnformen }}{% endif %}</p>
+					<p>Besondere Zielgruppen: {{ product.wohnprojekt.zielgruppen }}</p>
+					<p>Freiraumangebote: {{ product.wohnprojekt.freiraumangebote }}</p>
+					<p>{% if product.wohnprojekt.schwerpunkt  %}{% field_name product.wohnprojekt 'schwerpunkt' %}: {{ product.wohnprojekt.schwerpunkt }}{% endif %}</p>
+					<p>{{ product.wohnprojekt.oekologie }}</p>
+
+
+					<br />
+					<h5 class=" mediumkur">Kontakt</h5>
+					<br />
+
+					<p>{{ product.wohnprojekt.adresse }}, {{ product.wohnprojekt.get_ort_display }}</p>
+
+					{% if product.wohnprojekt.email  %}<p><a href="mailto:{{  product.wohnprojekt.email  }}"><i class="fas fa-envelope"></i> {{  product.wohnprojekt.email  }}</a></p>{% endif %}
+					<p><a href="{{  product.wohnprojekt.website }}">Webseite</a></p>
+
+
+
+			    <!-- <p>{% if product.wohnprojekt.altneu  %}{% field_name product.wohnprojekt 'altneu' %}: {{ product.wohnprojekt.altneu }}{% endif %}</p> -->
+
+			    <!-- <p>{% if product.wohnprojekt.artmodell  %}{% field_name product.wohnprojekt 'artmodell' %}: {{ product.wohnprojekt.artmodell }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.bautraeger  %}{% field_name product.wohnprojekt 'bautraeger' %}: {{ product.wohnprojekt.bautraeger }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.aerwachsene  %}{% field_name product.wohnprojekt 'aerwachsene' %}: {{ product.wohnprojekt.aerwachsene }}{% endif %}</p>
+			    <p>{% if product.wohnprojekt.akinder  %}{% field_name product.wohnprojekt 'akinder' %}: {{ product.wohnprojekt.akinder }}{% endif %}</p>
+			    <p>{% if product.wohnprojekt.amitglieder  %}Anzahl an Mitglieder: {{ product.wohnprojekt.amitglieder }}{% endif %}</p> -->
+
+			    <!-- <p>{% if product.wohnprojekt.awohnungen  %}{% field_name product.wohnprojekt 'awohnungen' %}: {{ product.wohnprojekt.awohnungen }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.wohnflaeche  %}{% field_name product.wohnprojekt 'wohnflaeche' %}: {{ product.wohnprojekt.wohnflaeche }}{% endif %}</p>
+			    <p>{% if product.wohnprojekt.gewerbeflaechen  %}{% field_name product.wohnprojekt 'gewerbeflaechen' %}: {{ product.wohnprojekt.gewerbeflaechen }}{% endif %}</p>
+			    <p>{% if product.wohnprojekt.gemeinschaftsflaeche  %}{% field_name product.wohnprojekt 'gemeinschaftsflaeche' %}: {{ product.wohnprojekt.gemeinschaftsflaeche }}{% endif %}</p>
+			    <p>{% if product.wohnprojekt.sonstige_flaechen  %}{% field_name product.wohnprojekt 'sonstige_flaechen' %}: {{ product.wohnprojekt.sonstige_flaechen }}{% endif %}</p>
+			    <p>{% if product.wohnprojekt.flaeche  %}Fläche: {{ product.wohnprojekt.flaeche }}{% endif %}</p> -->
+
+			    <!-- <p>{% if product.wohnprojekt.gemeinschaftr  %}{% field_name product.wohnprojekt 'gemeinschaftr' %}: {{ product.wohnprojekt.gemeinschaftr }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.kgemeinschaftr  %}{% field_name product.wohnprojekt 'kgemeinschaftr' %}: {{ product.wohnprojekt.kgemeinschaftr }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.sonderwohnformen  %}{% field_name product.wohnprojekt 'sonderwohnformen' %}: {{ product.wohnprojekt.sonderwohnformen }}{% endif %}</p> -->
+
+			    <!-- <p>{% if product.wohnprojekt.parbeiten  %}{% field_name product.wohnprojekt 'parbeiten' %}: {{ product.wohnprojekt.parbeiten }}{% endif %}</p> -->
+
+			    <!-- <p>{% if product.wohnprojekt.bauweise  %}{% field_name product.wohnprojekt 'bauweise' %}: {{ product.wohnprojekt.bauweise }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.zielgruppen  %}{% field_name product.wohnprojekt 'zielgruppen' %}: {{ product.wohnprojekt.zielgruppen }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.gprojekte  %}{% field_name product.wohnprojekt 'gprojekte' %}: {{ product.wohnprojekt.gprojekte }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.oekologie  %}{% field_name product.wohnprojekt 'oekologie' %}: {{ product.wohnprojekt.oekologie }}{% endif %}</p> -->
+			    <!-- <p>{% if product.wohnprojekt.freiraumangebote  %}{% field_name product.wohnprojekt 'freiraumangebote' %}: {{ product.wohnprojekt.freiraumangebote }}{% endif %}</p> -->
+
+
+
+
+				</div>
+
+				<div class="col-sm-3">
+
+
+				</div>
+
+
+		</div>
+
+</div>
+
+
+<div clas="container">
+
+	<div class="row" style="margin-top: 10px">
+
+		<div class="col-sm-6">
+
+
+
+
+
+
+		</div>
+		<div class="col-sm-4">
+
+			 				 {% for field, value in product.wohnprojekt %}
+			          {% if value and not field == "ID" %}
+			           <!-- <p class="fieldname"><strong class="mediumkur"> {{ field }} :</strong> {{ value }}</p> -->
+			          {% endif %}
+			          {% endfor %}
+
+		</div>
+
+	</div>
+
+</div>
+
+
+
+
+{% endblock %}

marktplatz/templates/marktplatz/product_overview.html

@@ -128,17 +128,17 @@ $(document).ready(function(){
 
 <style media="screen">
   .card-columns .mab-card{
-      width: 97%;
-      height: 95%;
-      display: inline-block;
-      margin-top:4px;
-      max-width: 100%;
+  width: 97%;
+  height: 95%;
+  display: inline-block;
+  margin-top:4px;
+  max-width: 100%;
   }
 
   .mab-card-body{
 
-    padding: 5px;
-    padding-left: 5px;
+  padding: 5px;
+  padding-left: 5px;
 
   }
 
@@ -146,69 +146,83 @@ $(document).ready(function(){
 
   .mab-product-title {
 
-    position: absolute;
-    bottom: 8px;
-    left: 16px;
-    color: #AB5120;
-    font-size: large;
-    font-weight: bold;
-    text-align: left;
-    background-color: rgba(0, 0, 0, 0);
-    text-shadow:  0 0 6px #444, 0 0 20px #888;
+  position: absolute;
+  bottom: 8px;
+  left: 16px;
+  color: #AB5120;
+  font-size: large;
+  font-weight: bold;
+  text-align: left;
+  background-color: rgba(0, 0, 0, 0);
+  text-shadow: 0 0 6px #444, 0 0 20px #888;
 
   }
 
 
   .mab-product-button-text {
-  	color: #000;
-  	font-size: large;
-  	font-weight: bold;
-  	text-align: left;
-  	/* background-color: rgba(0, 0, 0, 0); */
-  	/* text-shadow: 0 0 6px #444, 0 0 20px #888; */
-  	vertical-align: bottom;
-  	top: 50%;
-  	left: 50%;
-  	transform: translate(-50%, -50%);
-  	position: inherit;
+  color: #000;
+  font-size: large;
+  font-weight: bold;
+  text-align: left;
+  /* background-color: rgba(0, 0, 0, 0); */
+  /* text-shadow: 0 0 6px #444, 0 0 20px #888; */
+  vertical-align: bottom;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: inherit;
   }
 
-    .mab-product-button {
-
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      background-color: #FFF;
-      border: 2px solid #000;
-      border-radius: 50%;
-      width: 5em;
-      height: 5em;
-      text-align: center;
+  .mab-product-button {
+
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background-color: #FFF;
+  border: 2px solid #000;
+  border-radius: 50%;
+  width: 5em;
+  height: 5em;
+  text-align: center;
   }
 
   .mab-product-vote {
 
-    position: absolute;
-    top: 8px;
-    right: 16px;
-    color: white;
-    font-size: large
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  color: white;
+  font-size: large
   }
 
   .mab-card-text {
 
-    color: black;
-    margin-top: 0px;
-}
-  .card-columns   .mab-card-highlight {
+  color: black;
+  margin-top: 0px;
+  }
+  .card-columns .mab-card-highlight {
 
-  /*    background-color: #f0faf0; */
+  /* background-color: #f0faf0; */
 
   box-shadow: 0 4px 8px 0 rgba(157, 255, 137, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin-bottom: 40px;
-    }
+  }
+
+  .tag-container {
+
+  /* border-bottom: 1px solid #AB5120; */
+
+  }
 
 
+  .division-color{
+
+  border-bottom: 1px solid #AB5120;
+  margin-right: -15px;
+  margin-left: -15px;
+  margin-top: 0;
+  /* margin-bottom: 0; */
+  }
 
 </style>
 
@@ -221,6 +235,9 @@ $(document).ready(function(){
 
 {% block content %}
 
+<div class="container-fluid tag-container">
+
+
 <nav class="navbar-expand-sm tag" style="margin-left: 0px">
 
 
@@ -288,6 +305,9 @@ $(document).ready(function(){
 
 </nav>
 
+</div>
+
+<hr class="division-color" >
 
 <div id="how" style="margin-top: 5px;text-align: center;vertical-align: middle; max-height: 40px;" class="container-fluid">
 
@@ -296,7 +316,7 @@ $(document).ready(function(){
   </p>
 </div>
 
-<! -- Start Cards --><div class="card-columns" style="margin-top: 7px; orphans: 1; windows:1;">
+<!-- Start Cards --><div class="card-columns" style="margin-top: 7px; orphans: 1; windows:1;">
 
   {{main_card|safe}}
 
@@ -343,7 +363,7 @@ $(document).ready(function(){
   {{sponsor_cards|safe}}
 
 
-<! -- End Cards --></div>
+<!-- End Cards --></div>
 
 
 

marktplatz/urls.py

@@ -17,6 +17,8 @@ urlpatterns = [
     path('suchagent/<int:pk>/<slug:hash>/', views.SearchAgentDelete.as_view(), name='search-agent-delete'),
     path('product/<int:pk>', views.DetailView.as_view(), name='product-detail'),
     path('product/<int:pk>/embed', views.DetailView.as_view( embed=True, ), name='product-detail-embed'),
+    path('product-card/<int:pk>', views.CardDetailView.as_view(), name='product-detail-card'),
+    path('product-card/<int:pk>/embed', views.CardDetailView.as_view( embed=True, ), name='product-detail-card-embed'),
     path('admin_panel/', views.AdminView.as_view(), name='admin-panel'),
     path('light-box/', lightboximg.as_view(template_name="mab18/importold.html"),name='lightbox'),
     path('register/', views.registerView.as_view(), name='register-view'),

marktplatz/views.py

@@ -278,8 +278,9 @@ class DetailView(generic.DetailView):
 
         return HttpResponseRedirect(reverse('products'))
 
+class CardDetailView(DetailView):
 
-
+    template_name = 'marktplatz/product_detail_card.html'
 
 class AdminView(LoginRequiredMixin, generic.ListView):
     model = Product

project_base/templates/base_generic.html

@@ -14,7 +14,7 @@
 
     <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}" >
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
-    <link href="{% static '/fontawesome/css/all.css'' %}"rel="stylesheet">
+    <link href="{% static '/fontawesome/css/all.css'' %}" rel="stylesheet">
     <script src="{% static 'jquery-3.2.1.slim.min.js' %}" ></script>
     <script src="{% static 'popper.min.js' %}" ></script>
     <script src="{% static 'bootstrap.min.js' %}" ></script>