fix for modal

marktplatz/templates/marktplatz/modal-share.html

@@ -5,63 +5,86 @@
 
 
     <!-- Trigger/Open The Modal -->
-    <span id="ShareButton" onclick = "(function () { document.getElementById('ShareModal').style.display = 'block'; })(); return false;" class="cursor-pointer" ><i class="fas fa-share"></i> Teilen </span>
+    <span id="ShareButton" onclick="(function () { document.getElementById('ShareModal').style.display = 'block'; })(); return false;" class="cursor-pointer"><i class="fas fa-share"></i> Teilen </span>
 
     <!-- The Modal -->
-    <div id="ShareModal" class="modal" onclick="function hide(e){ e.style.display='None'; } hide(this);" >
-      <!-- Modal content -->
-      <div class="modal-content" onclick="event.stopPropagation(); return;">
-        <span id="ShareClose" onclick = "(function() { document.getElementById('ShareModal').style.display = 'none'; } )(); return false;" class="close">&times;</span>
-
-        <div class=""> &nbsp; </div>
-        <i class="fas fa-share"></i>
-        <h3>Teilen</h3>
-        <p>Informiere andere über dieses Projekt!</p>
-        <div class=""> &nbsp; </div>
-        <div class=""> &nbsp; </div>
-
-        <div class="row">
-          <div class="col-sm-4">
-            <div class="cursor-pointer" onclick="">
-              <a href="mailto:{{ object.email | obfuscate }}?subject={{  object.name  }}&body=Guten%20Tag!%0D%0A%0D%0AIch%20finde%20das%20folgende%20Projekt%20sehr%20interesant!%0D%0A%0D%0A{% fullurl 'product-detail-embed' pk=object.pk %}"><i class="fas fa-envelope"></i> <br>E-Mail versenden</a>
+    <div class="" id="modal-container">
+      <modal></modal>
+    </div>
+
+    {% compress js  %}
+    <script>
+        Vue.component('modal', {
+          props: ['title', 'link'],
+          delimiters: ['<%', '%>'],
+          template: `
+          <div id="ShareModal" class="modal" onclick="function hide(e){ e.style.display='None'; } hide(this);" >
+            <!-- Modal content -->
+            <div class="modal-content" onclick="event.stopPropagation(); return;">
+              <span id="ShareClose" onclick = "(function() { document.getElementById('ShareModal').style.display = 'none'; } )(); return false;" class="close">&times;</span>
+
+              <div class=""> &nbsp; </div>
+              <i class="fas fa-share"></i>
+              <h3>Teilen</h3>
+              <p>Informiere andere über dieses Projekt!</p>
+              <div class=""> &nbsp; </div>
+              <div class=""> &nbsp; </div>
+
+              <div class="row">
+                <div class="col-sm-4">
+                  <div class="cursor-pointer" onclick="">
+                    <a href="mailto:{{ object.email | obfuscate }}?subject={{  object.name  }}&body=Guten%20Tag!%0D%0A%0D%0AIch%20finde%20das%20folgende%20Projekt%20sehr%20interesant!%0D%0A%0D%0A{% fullurl 'product-detail-embed' pk=object.pk %}"><i class="fas fa-envelope"></i> <br>E-Mail versenden</a>
+                  </div>
+                </div>
+                <div class="col-sm-4">
+                </div>
+                <div class="col-sm-4">
+                </div>
+              </div>
+
+              <div class=""> &nbsp; </div>
+              <div class=""> &nbsp; </div>
+
+              <input type="text" value="&lt;iframe src=&quot;{% fullurl 'product-detail-embed' pk=object.pk %}&quot; style=&quot;border:0px #ffffff none;&quot; name=&quot;myiFrame&quot; scrolling=&quot;yes&quot; frameborder=&quot;0&quot; marginheight=&quot;0px&quot; marginwidth=&quot;0px&quot; height=&quot;400px&quot; width=&quot;600px&quot; allowfullscreen&gt;&lt;/iframe&gt;" id="iframecode">
+              <div class="cursor-pointer" onclick = "function copyiframecode() {
+                    var copyText = document.getElementById('iframecode');
+                    copyText.select();
+                    copyText.setSelectionRange(0, 99999)
+                    document.execCommand('copy');
+                    alert('Der Text wurde in der Zwischenablage kopiert: ' + copyText.value);
+                  }; copyiframecode();" >
+
+                <i class="fas fa-code"></i>
+                <span>Code Kopieren</span>
+              </div>
+              <div class=""> &nbsp; </div>
+              <div class=""> <span>Link</span> </div>
+
+              <input type="text" value="{% fullurl 'product-detail-embed' pk=object.pk %}" id="embedlink">
+              <div class="cursor-pointer"  onclick = "function copyembedlinkcode() {
+                    var copyText = document.getElementById('embedlink');
+                    copyText.select();
+                    copyText.setSelectionRange(0, 99999)
+                    document.execCommand('copy');
+                    alert('Der Text wurde in der Zwischenablage kopiert: ' + copyText.value);
+                  }; copyembedlinkcode();" >
+
+                <i class="fas fa-code"></i>
+                <span>Code Kopieren</span>
+              </div>
+              <div class=""> &nbsp; </div><div class=""> &nbsp; </div>
             </div>
           </div>
-          <div class="col-sm-4">
-          </div>
-          <div class="col-sm-4">
-          </div>
-        </div>
-
-        <div class=""> &nbsp; </div>
-        <div class=""> &nbsp; </div>
-
-        <input type="text" value="&lt;iframe src=&quot;{% fullurl 'product-detail-embed' pk=object.pk %}&quot; style=&quot;border:0px #ffffff none;&quot; name=&quot;myiFrame&quot; scrolling=&quot;yes&quot; frameborder=&quot;0&quot; marginheight=&quot;0px&quot; marginwidth=&quot;0px&quot; height=&quot;400px&quot; width=&quot;600px&quot; allowfullscreen&gt;&lt;/iframe&gt;" id="iframecode">
-        <div class="cursor-pointer" onclick = "function copyiframecode() {
-              var copyText = document.getElementById('iframecode');
-              copyText.select();
-              copyText.setSelectionRange(0, 99999)
-              document.execCommand('copy');
-              alert('Der Text wurde in der Zwischenablage kopiert: ' + copyText.value);
-            }; copyiframecode();" >
-
-          <i class="fas fa-code"></i>
-          <span>Code Kopieren</span>
-        </div>
-        <div class=""> &nbsp; </div>
-        <div class=""> <span>Link</span> </div>
-
-        <input type="text" value="{% fullurl 'product-detail-embed' pk=object.pk %}" id="embedlink">
-        <div class="cursor-pointer"  onclick = "function copyembedlinkcode() {
-              var copyText = document.getElementById('embedlink');
-              copyText.select();
-              copyText.setSelectionRange(0, 99999)
-              document.execCommand('copy');
-              alert('Der Text wurde in der Zwischenablage kopiert: ' + copyText.value);
-            }; copyembedlinkcode();" >
-
-          <i class="fas fa-code"></i>
-          <span>Code Kopieren</span>
-        </div>
-        <div class=""> &nbsp; </div><div class=""> &nbsp; </div>
-      </div>
-    </div>
+          `
+        })
+
+        new Vue({
+
+          el: '#modal-container',
+          delimiters: ['<%', '%>'],
+
+        })
+
+
+    </script>
+    {% endcompress %}

marktplatz/templates/marktplatz/product_detail.html

@@ -143,8 +143,8 @@
 			</div>
 
 
-			<div class="">{% if object.beschreibung %}<strong>{% field_name object 'beschreibung' %}</strong>:<br>{{ object.beschreibung | safe | linebreaks }}{% endif %}</div>
-			<div class="">{% if object.learning %}<strong>{% field_name object 'learning' %}</strong>:<br>{{ object.learning | safe | linebreaks }}{% endif %}</div>
+			<div class="">{% if object.beschreibung %}<strong>{% field_name object 'beschreibung' %}</strong>:<br>{{ object.beschreibung | safe | linebreaksbr }}{% endif %}</div>
+			<div class="">{% if object.learning %}<strong>{% field_name object 'learning' %}</strong>:<br>{{ object.learning | safe | linebreaksbr }}{% endif %}</div>
 
 
 			<div class="">
@@ -346,10 +346,10 @@
 
 </div>
 
-{% compress js  %}
 
+{% compress js  %}
 <script>
-	$(document).ready(function($) {
+
 
 		axios.get('https://blog.gemeinschaffen.com/wp-json/wp/v2/tags?per_page=100').then(resp => {
 
@@ -423,7 +423,9 @@
 
 		}
 
-	}); // document ready
+
+
+
 </script>
 {% endcompress %}
 

project_base/templates/base_generic.html

@@ -23,6 +23,17 @@
     <script src="{% static 'dist/main.js' %}"></script>
     {% endcompress %}
 
+
+    {% if settings.DEBUG %}
+
+    <script src="{% static 'js/vuejs/vue-dev.js' %}"></script>
+
+    {% else %}
+
+    <script src="{% static 'js/vuejs/vue2.js' %}"></script>
+
+    {% endif %}
+
     <link rel="preload" href="{% static 'css/NeuzeitGro-Reg/font.woff2' %}" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="{% static 'css/NeuzeitGro-Reg/font.woff' %}" as="font" type="font/woff" crossorigin>
     <link rel="preload" href="{% static 'css/NeuzeitGro-Bla/font.woff2' %}" as="font" type="font/woff2" crossorigin>
@@ -438,15 +449,7 @@
 {% endif %}
 
 
-{% if settings.DEBUG %}
-
-<script src="{% static 'js/vuejs/vue-dev.js' %}"></script>
 
-{% else %}
-
-<script src="{% static 'js/vuejs/vue2.js' %}"></script>
-
-{% endif %}