cards flipping

marktplatz/templates/marktplatz/product_overview.html

@@ -90,7 +90,6 @@ $(document).ready(function(){
     $(".btn-toggle").click (function(elem){
 
        let toggler = this.getAttribute("toggler");
-       console.log(toggler);
        $(".card").show();
        $("button").removeClass("mark");
 
@@ -107,37 +106,37 @@ $(document).ready(function(){
 
 
 });
+
+
+
+
+
+
 </script>
 
 
 <style media="screen">
+
   .card-columns .mab-card {
     width: 97%;
     height: 95%;
-    display: inline-block;
+    display: block;
     margin-top: 4px;
     max-width: 100%;
     border-color: #469CA8;
     border-radius: 20px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .mab-card-body {
-
     padding: 10px 10px 10px 10px;
-
   }
 
   .mab-card img {
-
     border-radius: 20px 20px 0 0;
-
   }
 
-
-
-
-
-
   .mab-product-title {
 
     padding: .15em .75em .15em 0.75em;
@@ -157,10 +156,8 @@ $(document).ready(function(){
     bottom: 16px;
     left: 16px;
 
-
   }
 
-
   .mab-product-button-text {
     color: #EA4814;
     font-size: large;
@@ -200,35 +197,108 @@ $(document).ready(function(){
   }
 
   .mab-card-text {
-
     color: black;
     margin-top: 0px;
     line-height: 2.25em;
   }
 
   .card-columns .mab-card-highlight {
-
     box-shadow: 0 4px 8px 0 rgba(70, 156, 168, 0.2), 0 6px 20px 0 rgba(70, 156, 168, 0.19);
     margin-bottom: 40px;
   }
 
-  .tag-line {
+  .card-columns .mab-card-container-highlight {
+    margin-bottom: 40px;
+  }
 
+
+  .tag-line {
     line-height: 2.25em;
+  }
+
+  .tag-container {}
 
+  .mab-search-bar {
+    padding-top: 4px;
   }
 
-  .tag-container {
 
+  /* ------------------------------------------------------------------------------- */
 
+  .scene {
+    width: 200px;
+    height: 260px;
+    border: 1px solid #CCC;
+    margin: 40px 0;
+    perspective: 600px;
   }
 
-  .mab-search-bar {
+  .flipcard {
+    position: relative;
+    transform-style: preserve-3d;
+
+    transition: transform 1s;
+  }
+
+  .flipcard.is-flipped {
+    /*  transform: translateX(-100%) rotateY(-180deg);  */
+    transform: rotateY(180deg);
+  }
+
+  .mab-card-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  }
+
+  .mab-card-face--front {
+  position: relative;
+  background-color: #FFF;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  }
+
+  .mab-card-face--front .mab-card,
+  .mab-card-face--back .mab-card,
+  .mab-card-face--front .mab-card div,
+  .mab-card-face--back .mab-card div,
+  .mab-card-face--front .mab-card a,
+  .mab-card-face--back .mab-card a
+   {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 
-    padding-top: 4px;
   }
 
 
+
+.mab-card-face--back {
+	background: #FFF;
+	transform: rotateY(180deg);
+	top: 0;
+	position: absolute;
+	left: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+  .card {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: none;
+    border-radius: 0rem;
+  }
 </style>
 
 {% endblock %}
@@ -330,37 +400,87 @@ $(document).ready(function(){
   {% for product in wohnprojekt_list %}
 
   <!-- rounded-0 border-0 -->
-  <div class="mab-card  {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}} card  {% if product.frei == 'JAJA' %} mab-card-highlight {% endif %}" style="">
-    <a href="{% url 'product-detail' product.pk %}">
-      <div style="position: relative;text-align: center;">
-        <img class="{% if user.is_authenticated %}{% get_vote_class product user %} {% endif %} {% for category in product.category.all %} {{category.short_name}} {% endfor %} card-img-top" otherclass="rounded-0"  src="{{product.media_set.first.image_norm.url}}" alt="image">
-        <div class="mab-product-title" style=""><span>{{product.name }}</span></div>
-
-        {% if product.frei == 'JAJA' %} <div class="mab-product-button" style="">  <div class="mab-product-button-text">
-            Platz Frei!
-        </div>
-      </div> {% endif %}
-        {% if user.is_authenticated %}
-        <div class="mab-product-vote" style="">{% get_vote product user %}</div>
-        {% endif %}
-      </div>
-    </a>
-    <div class="card-body mab-card-body" style="">
-      <!--<div class="border-0 d-flex justify-content">
+  <div class="card  {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}}   {% if product.frei == 'JAJA' %} mab-card-container-highlight {% endif %}   ">
+  <div id="product_{{product.pk}}_card" class="flipcard">
+    <div class="mab-card-face mab-card-face--front ">
+      <!--  -->
+      <div class="mab-card {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}}   {% if product.frei == 'JAJA' %} mab-card-highlight {% endif %}" style="">
+        <a href="{% url 'product-detail' product.pk %}">
+          <div style="position: relative;text-align: center;">
+            <img class="{% if user.is_authenticated %}{% get_vote_class product user %} {% endif %} {% for category in product.category.all %} {{category.short_name}} {% endfor %} card-img-top" otherclass="rounded-0"
+              src="{{product.media_set.first.image_norm.url}}" alt="image">
+            <div class="mab-product-title" style=""><span>{{product.name }}</span></div>
+
+            {% if product.frei == 'JAJA' %} <div class="mab-product-button" style="">
+              <div class="mab-product-button-text">
+                Platz Frei!
+              </div>
+            </div>
+            {% endif %}
+
+          </div>
+        </a>
+        <div class="card-body mab-card-body " style="">
+          <!--<div class="border-0 d-flex justify-content">
         <p class="card-title" style="margin-bottom: 3px"><a href="{% url 'product-detail' product.pk %}"> {{product.header }} </a></p>
 
       </div>-->
 
-      <p class="mab-card-text card-text" style="">
+          <p class="mab-card-text card-text" style="">
+
+            <button id='product_{{product.pk}}_{{product.frei}}' toggler='{{product.frei}}' class="border-thin mybtn btn-toggle {{product.frei}}" style="">#{{product.get_frei_display}}</button>
+            <button id='product_{{product.pk}}_{{product.status}}' toggler='{{product.status}}' class="border-thin mybtn btn-toggle {{product.status}}" style="">#{{product.get_status_display}}</button>
+            <button id='product_{{product.pk}}_{{product.ort}}' toggler='{{product.ort}}' class="border-thin mybtn btn-toggle {{product.ort}}" style="">#{{product.get_ort_display}}</button>
+            <button id='product_{{product.pk}}_{{product.altneu}}' toggler='{{product.altneu}}' class="border-thin mybtn btn-toggle {{product.altneu}}" style="">#{{product.get_altneu_display}}</button>
+            <button id='product_{{product.pk}}_teilen' onclick="location.href = '{% url 'product-detail-card-embed' pk=product.pk %}'" class="border-thin mybtn" style="">#<i class="fas fa-share"></i> Teilen</button>
+            <button id='product_{{product.pk}}_flipper' onclick="" class="border-thin mybtn flipper" flip-card="product_{{product.pk}}_card" style="">#<i class="fas fa-sync-alt"></i> Steckbrief</button>
+            <!-- <span id="ShareButton" class="cursor-pointer" > Teilen</span>  -->
+          </p>
+        </div>
+      </div>
+    </div>
+
+     <!-- BACKFACE BACKFACE BACKFACE BACKFACE BACKFACE BACKFACE BACKFACE -->
+
+
+    <div class="mab-card-face mab-card-face--back ">
+      <div class="mab-card  {% if product.frei == 'JAJA' %} {% endif %}">
+
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12">
+                  <br>
+                  <button id='product_{{product.pk}}_flipper' onclick="" class="border-thin mybtn flipper" flip-card="product_{{product.pk}}_card" style="">#<i class="fas fa-sync-alt"></i> Steckbrief</button>
+                  <div class="" style=""><h3>  {{ product.name }}</h3></div>
+                  <div class="" style=""><span>{{ product.beschreibung }}</span></div>
+                  <div class="" style=""><strong>Wohnungen:</strong> <span>{{ product.awohnungen }}</span></div>
+                  <div class="" style=""><span>{{ product.gemeinschaftr }}</span></div>
+                  <div class="" style=""><span>{{ product.kgemeinschaftr }}</span></div>
+                  <div class="" style=""><span>{{ product.claim }}</span></div>
+                  <span></span>
+
+                </div>
+            </div>
+        </div>
+
+
+        <a href="{% url 'product-detail' product.pk %}">
+          <div style="position: relative;text-align: center;">
+
+            &nbsp;
 
-        <button id='product_{{product.pk}}_{{product.frei}}' toggler='{{product.frei}}' class="border-thin mybtn btn-toggle {{product.frei}}" style="">#{{product.get_frei_display}}</button>
-        <button id='product_{{product.pk}}_{{product.status}}' toggler='{{product.status}}' class="border-thin mybtn btn-toggle {{product.status}}" style="">#{{product.get_status_display}}</button>
-        <button id='product_{{product.pk}}_{{product.ort}}' toggler='{{product.ort}}' class="border-thin mybtn btn-toggle {{product.ort}}" style="">#{{product.get_ort_display}}</button>
-        <button id='product_{{product.pk}}_{{product.altneu}}' toggler='{{product.altneu}}' class="border-thin mybtn btn-toggle {{product.altneu}}" style="">#{{product.get_altneu_display}}</button>
-        <button id='product_{{product.pk}}_{{product.altneu}}' onclick="location.href = '{% url 'product-detail-card-embed' pk=product.pk %}'" class="border-thin mybtn" style="">#<i class="fas fa-share"></i> Teilen</button>
-        <!-- <span id="ShareButton" class="cursor-pointer" > Teilen</span>  -->
-      </p>
+          </div>
+        </a>
+        <div class="card-body mab-card-body " style="">
+          &nbsp;
+        </div>
+
+
+
+
+      </div>
     </div>
+  </div>
   </div>
 
     {% endfor %}
@@ -370,6 +490,31 @@ $(document).ready(function(){
 
   {{sponsor_cards|safe}}
 
+
+<script>
+
+/*
+  var card = document.querySelector('.card');
+  card.addEventListener( 'click', function() {
+    card.classList.toggle('is-flipped');
+  });
+*/
+/*
+  cards = $(".flipcard");
+  cards.on( 'click', function(e) {
+    $(this).toggleClass('is-flipped');
+  });
+*/
+
+  $(".flipper").click (function(elem){
+
+     let toggler = this.getAttribute("flip-card");
+     $("#" + toggler ).toggleClass('is-flipped');
+
+  });
+
+</script>
+
 </div>
 
 <!-- End Cards -->