From f5ccb0403ea75503965f147767a5a32a128b0a02 Mon Sep 17 00:00:00 2001
From: Mathias Fritsche <mathias@webmakers.de>
Date: Fri, 15 Sep 2017 10:18:28 +0200
Subject: [PATCH] Create Overlay (on click dont work)

---
 src/views/lists/medialist.vue | 194 ++++++++++++++++++++++++++++------
 1 file changed, 163 insertions(+), 31 deletions(-)

diff --git a/src/views/lists/medialist.vue b/src/views/lists/medialist.vue
index 129e94c..e4abc18 100644
--- a/src/views/lists/medialist.vue
+++ b/src/views/lists/medialist.vue
@@ -1,5 +1,43 @@
 <template>
     <div class="Medialist">
+
+        <!-- Overlay -->
+        <div id="overlay">
+            <div class="overlay_inner">
+                <div class="overlay_container">
+                    <div class="overlay_top">
+                        <ul>
+                            <li>< <i class="ion-chevron-left"></i></li>
+                            <li> > <i class="ion-chevron-right"></i></li>
+                            <li class="close"><i class="ion-android-close"></i>x</li>
+                        </ul>
+                    </div>
+                    <div class="overlay_content">
+                        <div class="overlay_left">
+                            <div class="overlay_img"><img src="assets/images/placeholder_image.jpg" alt=""></div>
+                        </div>
+                        <div class="overlay_right">
+                            Dateiname: 210_21.jpg<br>
+                            Dateityp: image/jpeg<br>
+                            Hochgeladen am: 14. September 2017<br>
+                            Dateigröße: 64 KB<br>
+                            Abmessungen: 600 × 600
+                            <section class="overlay_form">
+                                <form action="">
+                                    <input type="text" placeholder="URL">
+                                    <input type="text" placeholder="Titel">
+                                    <input type="text" placeholder="Beschriftung">
+                                    <input type="text" placeholder="Alternativtext">
+                                </form>
+                            </section>
+                                
+                        </div>
+                    </div>
+                        
+                </div>
+            </div>
+        </div>
+
         <h1>Medien</h1>
         <div class="medialist_container">
             <!-- Media-File -->
@@ -7,7 +45,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -16,7 +54,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -25,7 +63,7 @@
                 <div class="media_inner">
                     <div class="text">Das-Dokument.pdf</div>
                     <i class="icon icon-document-text"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -34,7 +72,7 @@
                 <div class="media_inner">
                     <div class="text">Das-Dokument.pdf</div>
                     <i class="icon icon-document-text"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -43,7 +81,7 @@
                 <div class="media_inner">
                     <div class="text">Das-Dokument.pdf</div>
                     <i class="icon icon-document-text"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -52,7 +90,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -61,7 +99,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -70,7 +108,7 @@
                 <div class="media_inner">
                     <div class="text">Das-Dokument.pdf</div>
                     <i class="icon icon-document-text"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -79,7 +117,7 @@
                 <div class="media_inner">
                     <div class="text">Audiofile.mp3</div>
                     <i class="icon icon-stats-bars"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -88,7 +126,7 @@
                 <div class="media_inner">
                     <div class="text">Videofile.avi</div>
                     <i class="icon icon-videocamera"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -97,7 +135,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -106,7 +144,7 @@
                 <div class="media_inner">
                     <div class="text">Videofile.avi</div>
                     <i class="icon icon-videocamera"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -115,7 +153,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -124,7 +162,7 @@
                 <div class="media_inner">
                     <div class="text">Audiofile.mp3</div>
                     <i class="icon icon-stats-bars"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -133,7 +171,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -142,7 +180,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -151,7 +189,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -160,7 +198,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -169,7 +207,7 @@
                 <div class="media_inner">
                     <div class="text">Dokument.pdf</div>
                     <i class="icon icon-videocamera"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -178,7 +216,7 @@
                 <div class="media_inner">
                     <div class="text">Dokument.pdf</div>
                     <i class="icon icon-document-text"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -187,7 +225,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -196,7 +234,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -205,7 +243,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -214,7 +252,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -223,7 +261,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -232,7 +270,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -241,7 +279,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -250,7 +288,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -259,7 +297,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -268,7 +306,7 @@
                 <div class="media_inner">
                     <img src="assets/images/placeholder_image.jpg" alt="">
                     <i class="icon icon-images"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -277,7 +315,7 @@
                 <div class="media_inner">
                     <div class="text">Videofile.avi</div>
                     <i class="icon icon-videocamera"></i>
-                    <a href="#overlay"></a>
+                    <a href=""></a>
                 </div>
             </div>
 
@@ -290,6 +328,14 @@
     </div>
 </template>
 
+<script>
+    $(document).ready(function() {
+        $('.media a').on('click', function(e) {
+            $('#overlay').show();
+        });
+    });
+</script>
+
 <style lang="less">
     @import "~mixins";
     .medialist_container {margin:-6px;}
@@ -364,6 +410,92 @@
     @media(max-width:600px) {
         .media {width:50%;}
     }
+
+    /* Overlay */
+    #overlay {
+        position:fixed;
+        top:0;
+        bottom:0;
+        right:0;
+        left:0;
+        z-index:2000;
+        background:rgba(0,0,0,0.8);
+        /*display:none;*/
+    }
+    .overlay_inner {
+        position:absolute;
+        top:0px;
+        left:0px;
+        right:0px;
+        bottom:0px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        text-align:center;
+        line-height:1.2;
+    }
+    .overlay_container {
+        background: #FFF;
+        height: auto;
+        width: 50%;
+        margin-top: -50px;
+        /*border: solid 5px #CCC;*/
+        /*align-items: center;
+        justify-content: center;
+        text-align:center;*/
+        font-weight: 600;
+    }
+
+    .overlay_top {
+        height:40px;
+        width:100%;
+        background:#FFF;
+        border-bottom:solid 1px #CCC;
+    }
+    .overlay_top ul {list-style-type: none; float:right;}
+    .overlay_top ul li {float:left; height:40px; line-height:40px; width:40px; text-align:center; color:#666; border-left:solid 1px #CCC;}
+    .overlay_top ul li i:before {margin:0px;}
+
+    .overlay_content {
+        text-align: center;
+        display:flex;
+    }
+
+    .overlay_left {
+        float:left;
+        width:60%;
+        padding: 25px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        text-align:center;
+        flex: 1;
+    }
+    .overlay_right {
+        float:left;
+        width:40%;
+        padding: 25px;
+        border-left:solid 1px #CCC;
+        background:#eeeeee;
+        /*display:flex;
+        align-items: center;
+        justify-content: center;*/
+        text-align:left;
+        flex: 1;
+        font-weight:400;
+    }
+    .overlay_img {
+        width:80%;
+    }
+    .overlay_img img {width:100%;}
+    .overlay_form {
+        border-top:solid 1px #CCC;
+        padding-top:30px;
+        margin-top:30px;
+    }
+    .overlay_form input {
+        margin-bottom:10px;
+    }
 </style>
 
 <script>