Create Medialist (New Icons dont work)
This commit is contained in:
parent
fad181c65e
commit
837a9c734e
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 133 KiB |
@ -21,6 +21,11 @@
|
||||
"to": "/domainlist",
|
||||
"icon": "icon-world"
|
||||
},
|
||||
{
|
||||
"name": "Medien",
|
||||
"to": "/medialist",
|
||||
"icon": "icon-images"
|
||||
},
|
||||
{
|
||||
"name": "Settings",
|
||||
"to": "/settings",
|
||||
@ -62,6 +67,11 @@
|
||||
"to": "/domainlist",
|
||||
"content": "<domainlist></domainlist>"
|
||||
},
|
||||
{
|
||||
"name": "Medialist",
|
||||
"to": "/medialist",
|
||||
"content": "<medialist></medialist>"
|
||||
},
|
||||
{
|
||||
"name": "Settings",
|
||||
"to": "/settings",
|
||||
|
||||
@ -51,4 +51,6 @@
|
||||
.icon-arrow-right:before { content: '\f3d3'; } /* '' */
|
||||
.icon-arrow-up:before { content: '\f3d8'; } /* '' */
|
||||
.icon-color-wand:before { content: '\f416'; } /* '' */
|
||||
.icon-navigate:before { content: '\f46e'; } /* '' */
|
||||
.icon-navigate:before { content: '\f46e'; } /* '' */
|
||||
.icon-videocamera:before { content: '\f256'; } /* '' */
|
||||
.icon-stats-bars:before { content: '\f2b5'; } /* '' */
|
||||
375
src/views/lists/medialist.vue
Normal file
375
src/views/lists/medialist.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<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>
|
||||
@ -3,6 +3,7 @@ import LoginForm from './forms/login.vue';
|
||||
import Logout from './forms/logout.vue';
|
||||
import Userlist from './lists/userlist.vue';
|
||||
import Domainlist from './lists/domainlist.vue';
|
||||
import Medialist from './lists/medialist.vue';
|
||||
import Settings from 'views/forms/settings.vue';
|
||||
|
||||
export default {
|
||||
@ -11,5 +12,6 @@ export default {
|
||||
Logout,
|
||||
Userlist,
|
||||
Domainlist,
|
||||
Medialist,
|
||||
Settings
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user