panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

Create Overlay (on click dont work)

Browse Source
This commit is contained in:
Mathias Fritsche 2017-09-15 10:18:28 +02:00
parent 837a9c734e
commit f5ccb0403e
1 changed files with 163 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/lists/medialist.vue
View File

@ -1,5 +1,43 @@
<template> <template>
<div class="Medialist"> <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> <h1>Medien</h1>
<div class="medialist_container"> <div class="medialist_container">
<!-- Media-File --> <!-- Media-File -->
@ -7,7 +45,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -16,7 +54,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -25,7 +63,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Das-Dokument.pdf</div> <div class="text">Das-Dokument.pdf</div>
<i class="icon icon-document-text"></i> <i class="icon icon-document-text"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -34,7 +72,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Das-Dokument.pdf</div> <div class="text">Das-Dokument.pdf</div>
<i class="icon icon-document-text"></i> <i class="icon icon-document-text"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -43,7 +81,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Das-Dokument.pdf</div> <div class="text">Das-Dokument.pdf</div>
<i class="icon icon-document-text"></i> <i class="icon icon-document-text"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -52,7 +90,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -61,7 +99,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -70,7 +108,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Das-Dokument.pdf</div> <div class="text">Das-Dokument.pdf</div>
<i class="icon icon-document-text"></i> <i class="icon icon-document-text"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -79,7 +117,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Audiofile.mp3</div> <div class="text">Audiofile.mp3</div>
<i class="icon icon-stats-bars"></i> <i class="icon icon-stats-bars"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -88,7 +126,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Videofile.avi</div> <div class="text">Videofile.avi</div>
<i class="icon icon-videocamera"></i> <i class="icon icon-videocamera"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -97,7 +135,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -106,7 +144,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Videofile.avi</div> <div class="text">Videofile.avi</div>
<i class="icon icon-videocamera"></i> <i class="icon icon-videocamera"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -115,7 +153,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -124,7 +162,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Audiofile.mp3</div> <div class="text">Audiofile.mp3</div>
<i class="icon icon-stats-bars"></i> <i class="icon icon-stats-bars"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -133,7 +171,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -142,7 +180,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -151,7 +189,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -160,7 +198,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -169,7 +207,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Dokument.pdf</div> <div class="text">Dokument.pdf</div>
<i class="icon icon-videocamera"></i> <i class="icon icon-videocamera"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -178,7 +216,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Dokument.pdf</div> <div class="text">Dokument.pdf</div>
<i class="icon icon-document-text"></i> <i class="icon icon-document-text"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -187,7 +225,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -196,7 +234,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -205,7 +243,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -214,7 +252,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -223,7 +261,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -232,7 +270,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -241,7 +279,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -250,7 +288,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -259,7 +297,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -268,7 +306,7 @@
<div class="media_inner"> <div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt=""> <img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i> <i class="icon icon-images"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -277,7 +315,7 @@
<div class="media_inner"> <div class="media_inner">
<div class="text">Videofile.avi</div> <div class="text">Videofile.avi</div>
<i class="icon icon-videocamera"></i> <i class="icon icon-videocamera"></i>
<a href="#overlay"></a> <a href=""></a>
</div> </div>
</div> </div>
@ -290,6 +328,14 @@
</div> </div>
</template> </template>
<script>
$(document).ready(function() {
$('.media a').on('click', function(e) {
$('#overlay').show();
});
});
</script>
<style lang="less"> <style lang="less">
@import "~mixins"; @import "~mixins";
.medialist_container {margin:-6px;} .medialist_container {margin:-6px;}
@ -364,6 +410,92 @@
@media(max-width:600px) { @media(max-width:600px) {
.media {width:50%;} .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> </style>
<script> <script>