Create Medialist (New Icons dont work)

conf/init.json

@@ -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",

src/icons.less

@@ -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'; } /* '' */

src/views/lists/medialist.vue

@@ -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>

src/views/views.js

@@ -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
 }