376 lines
12 KiB
Vue
376 lines
12 KiB
Vue
<template>
|
|
<div class="Medialist">
|
|
<h1>Medien</h1>
|
|
<div class="medialist_container">
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media file">
|
|
<div class="media_inner">
|
|
<div class="text">Das-Dokument.pdf</div>
|
|
<i class="icon icon-document-text"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media file">
|
|
<div class="media_inner">
|
|
<div class="text">Das-Dokument.pdf</div>
|
|
<i class="icon icon-document-text"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media file">
|
|
<div class="media_inner">
|
|
<div class="text">Das-Dokument.pdf</div>
|
|
<i class="icon icon-document-text"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media file">
|
|
<div class="media_inner">
|
|
<div class="text">Das-Dokument.pdf</div>
|
|
<i class="icon icon-document-text"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media audio">
|
|
<div class="media_inner">
|
|
<div class="text">Audiofile.mp3</div>
|
|
<i class="icon icon-stats-bars"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media video">
|
|
<div class="media_inner">
|
|
<div class="text">Videofile.avi</div>
|
|
<i class="icon icon-videocamera"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media video">
|
|
<div class="media_inner">
|
|
<div class="text">Videofile.avi</div>
|
|
<i class="icon icon-videocamera"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media audio">
|
|
<div class="media_inner">
|
|
<div class="text">Audiofile.mp3</div>
|
|
<i class="icon icon-stats-bars"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media file">
|
|
<div class="media_inner">
|
|
<div class="text">Dokument.pdf</div>
|
|
<i class="icon icon-videocamera"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media file">
|
|
<div class="media_inner">
|
|
<div class="text">Dokument.pdf</div>
|
|
<i class="icon icon-document-text"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media image">
|
|
<div class="media_inner">
|
|
<img src="assets/images/placeholder_image.jpg" alt="">
|
|
<i class="icon icon-images"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media-File -->
|
|
<div class="media video">
|
|
<div class="media_inner">
|
|
<div class="text">Videofile.avi</div>
|
|
<i class="icon icon-videocamera"></i>
|
|
<a href="#overlay"></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div style="clear:both;"></div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
@import "~mixins";
|
|
.medialist_container {margin:-6px;}
|
|
.media {display:block; position:relative; width:10%; height:auto; line-height:0; float:left; padding:3px;}
|
|
.media_inner {transition:all ease 0.2s; border:solid 5px transparent; width:100%; height:0; padding-bottom:100%; position:relative;}
|
|
.media_inner a {position:absolute; top:0px; bottom:0px; left:0px; right:0px;}
|
|
.media:hover .media_inner {border:solid 5px #28b78d;}
|
|
|
|
.media img {
|
|
position:absolute;
|
|
height:100%;
|
|
width:100%;
|
|
object-fit: cover;
|
|
}
|
|
.media i {
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
width:30px;
|
|
height:30px;
|
|
background:#28b78d;
|
|
color:#FFF;
|
|
text-align:center;
|
|
font-size:20px;
|
|
padding-top:5px;
|
|
}
|
|
.file i {background:#2868b7;}
|
|
.video i {background:#ac1a0b;}
|
|
.audio i {background:#c95c14;}
|
|
|
|
.media .text {
|
|
position:absolute;
|
|
top:0px; bottom:0px; left:0px; right:0px;
|
|
background:#CCC;
|
|
color:#FFF;
|
|
font-weight:600;
|
|
padding:20px;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align:center;
|
|
line-height:1.2;
|
|
}
|
|
.media .text i {
|
|
line-height:1;
|
|
}
|
|
.file .text {background:#2868b7;}
|
|
.video .text {background:#ac1a0b;}
|
|
.audio .text {background:#c95c14;}
|
|
/*.media .text i {
|
|
position:relative;
|
|
top:inherit; bottom:inherit; left:inherit; right:inherit;
|
|
display:block;
|
|
text-align:center;
|
|
margin:0 auto 5px auto;
|
|
background:none;
|
|
font-size:30px;
|
|
height:35px;
|
|
line-height:1;
|
|
}
|
|
.media .text i:before {
|
|
margin-left:0px!important;
|
|
}*/
|
|
|
|
@media(max-width:1600px) {
|
|
.media {width:20%;}
|
|
}
|
|
@media(max-width:1000px) {
|
|
.media {width:33.33333%;}
|
|
}
|
|
@media(max-width:600px) {
|
|
.media {width:50%;}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// import ScrollTable from 'components/scroll-table.vue';
|
|
|
|
export default {
|
|
name: "Medialist"
|
|
}
|
|
</script>
|