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

Compare commits

merge into: panel:master
Branches Tags
panel:master
panel:matdev
...
pull from: panel:matdev
Branches Tags
panel:master
panel:matdev

10 Commits
master ... matdev

Author SHA1 Message Date
Sebastian Frank
7da482fc97 no jquery 2017-09-25 13:22:42 +02:00
Sebastian Frank
8899a291fc Merge branch 'master' into matdev 2017-09-25 13:08:03 +02:00
Mathias Fritsche
b0a5376733 Overlay 2017-09-15 10:21:06 +02:00
Mathias Fritsche
f5ccb0403e Create Overlay (on click dont work) 2017-09-15 10:18:28 +02:00
Mathias Fritsche
837a9c734e Create Medialist (New Icons dont work) 2017-09-12 12:13:32 +02:00
Mathias Fritsche
fad181c65e Set Icon for Domainlist (dont work!!) 2017-09-12 10:13:04 +02:00
Mathias Fritsche
02d2fc1ad2 Try tranistion of trigger-button (not work) 2017-09-12 09:37:20 +02:00
Mathias Fritsche
c037fc6eac Change Topbar Height, Fixed Outline on a-click 2017-09-12 09:26:56 +02:00
Sebastian Frank
da7c230927 Merge branch 'master' into 'matdev' 
Master

See merge request !2
 2017-09-07 23:32:16 +02:00
Sebastian Frank
9a8e22230d Merge branch 'master' into 'matdev' 
Master

See merge request !1
 2017-09-06 11:03:34 +02:00
8 changed files with 562 additions and 7 deletions
Show Stats Expand all files Collapse all files

BIN
assets/images/placeholder_image.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 133 KiB

12
conf/init.json
View File

@ -19,7 +19,12 @@
{ {
"name": "Domainlist", "name": "Domainlist",
"to": "/domainlist", "to": "/domainlist",
"icon": "icon-contacts" "icon": "icon-world"
},
{
"name": "Medien",
"to": "/medialist",
"icon": "icon-images"
}, },
{ {
"name": "Settings", "name": "Settings",
@ -62,6 +67,11 @@
"to": "/domainlist", "to": "/domainlist",
"content": "<domainlist></domainlist>" "content": "<domainlist></domainlist>"
}, },
{
"name": "Medialist",
"to": "/medialist",
"content": "<medialist></medialist>"
},
{ {
"name": "Settings", "name": "Settings",
"to": "/settings", "to": "/settings",

5
src/app.less
View File

@ -82,6 +82,9 @@ strong {font-weight:700;}
mark {color: @cms_brand_secondary;} mark {color: @cms_brand_secondary;}
a {text-decoration:none; color: @cms_brand_secondary;} a {text-decoration:none; color: @cms_brand_secondary;}
a:hover {color:#901624;} a:hover {color:#901624;}
a:focus {
outline: none;
}
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -204,7 +207,7 @@ button{
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Content Area # Content Area
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;} .content_area {position:absolute; left:70px; top:50px; right:0px; height: 100%;}
.content_main {position:relative; top:0px; padding:25px;} .content_main {position:relative; top:0px; padding:25px;}
.cms_content_main_headline {margin-bottom:20px; position:relative;} .cms_content_main_headline {margin-bottom:20px; position:relative;}

3
src/components/sidebar.vue
View File

@ -19,6 +19,7 @@
<style lang="less"> <style lang="less">
@import "../mixins"; @import "../mixins";
@bar_height: 50px;
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Left Sidebar (Main Navigation) # Left Sidebar (Main Navigation)
@ -26,7 +27,7 @@
.sidebar { .sidebar {
position: fixed; position: fixed;
left: 0px; left: 0px;
top: 40px; top: @bar_height;
bottom: 0px; bottom: 0px;
background: @ui_bg; background: @ui_bg;
color: white; color: white;

20
src/components/topbar.vue
View File

@ -81,7 +81,7 @@ export default {
<style lang="less"> <style lang="less">
@import "../mixins.less"; @import "../mixins.less";
@bar_height: 40px; @bar_height: 50px;
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Topbar (Sitename) # Topbar (Sitename)
@ -119,7 +119,7 @@ export default {
width: 30px; width: 30px;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
padding-top: 4px; padding-top: 8px;
} }
} }
@ -159,7 +159,7 @@ export default {
&>.trigger { &>.trigger {
.clearfix(); .clearfix();
display: block; display: block;
padding: 4px 10px; padding: 9px 10px;
font-size: 0; font-size: 0;
color: white; color: white;
user-select: none; user-select: none;
@ -196,6 +196,8 @@ export default {
font-size: 11px; font-size: 11px;
color: fade(white, 50%); color: fade(white, 50%);
} }
} }
} }
@ -215,6 +217,7 @@ export default {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
/*.trigger_btn .icon:before {transition:all 0.3s;}*/
.title { .title {
float: left; float: left;
font-size: 14px; font-size: 14px;
@ -239,4 +242,15 @@ export default {
.trigger_btn .icon:before{transform: rotate(180deg);} .trigger_btn .icon:before{transform: rotate(180deg);}
} }
} }
/*@media(max-width: @screen-md-max) {
.user_profile {
&>.trigger {
.text {
display:none;
}
}
}
}*/
</style> </style>

5
src/icons.less
View File

@ -43,6 +43,7 @@
.icon-pie-graph:before { content: '\f2a5'; } /* '' */ .icon-pie-graph:before { content: '\f2a5'; } /* '' */
.icon-paper-airplane:before { content: '\f2c3'; } /* '' */ .icon-paper-airplane:before { content: '\f2c3'; } /* '' */
.icon-contacts:before { content: '\f2d9'; } /* '' */ .icon-contacts:before { content: '\f2d9'; } /* '' */
.icon-world:before { content: '\f4d3'; } /* '' */
.icon-cube:before { content: '\f318'; } /* '' */ .icon-cube:before { content: '\f318'; } /* '' */
.icon-compass:before { content: '\f37c'; } /* '' */ .icon-compass:before { content: '\f37c'; } /* '' */
.icon-arrow-down:before { content: '\f3d0'; } /* '' */ .icon-arrow-down:before { content: '\f3d0'; } /* '' */
@ -50,4 +51,6 @@
.icon-arrow-right:before { content: '\f3d3'; } /* '' */ .icon-arrow-right:before { content: '\f3d3'; } /* '' */
.icon-arrow-up:before { content: '\f3d8'; } /* '' */ .icon-arrow-up:before { content: '\f3d8'; } /* '' */
.icon-color-wand:before { content: '\f416'; } /* '' */ .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'; } /* '' */

522
src/views/lists/medialist.vue Normal file
View File

@ -0,0 +1,522 @@
<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">
<table>
<tr>
<td width="150"><strong>Dateiname:</strong></td>
<td>210_21.jpg</td>
</tr>
<tr>
<td><strong>Hochgeladen am:</strong></td>
<td>14. September 2017</td>
</tr>
<tr>
<td><strong>Dateigröße:</strong></td>
<td>64 KB</td>
</tr>
<tr>
<td><strong>Abmessungen:</strong></td>
<td>600 × 600</td>
</tr>
</table>
<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 -->
<div class="media image">
<div class="media_inner">
<img src="assets/images/placeholder_image.jpg" alt="">
<i class="icon icon-images"></i>
<a href=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></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=""></a>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</template>
<script>
/*
WIR HABEN KEIN JQUERY
$(document).ready(function() {
$('.media a').on('click', function(e) {
$('#overlay').show();
});
});
*/
</script>
<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%;}
}
/* 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>
export default {
name: "Medialist"
}
</script>

2
src/views/views.js
View File

@ -3,6 +3,7 @@ import LoginForm from './forms/login.vue';
import Logout from './forms/logout.vue'; import Logout from './forms/logout.vue';
import Userlist from './lists/userlist.vue'; import Userlist from './lists/userlist.vue';
import Domainlist from './lists/domainlist.vue'; import Domainlist from './lists/domainlist.vue';
import Medialist from './lists/medialist.vue';
import Settings from 'views/forms/settings.vue'; import Settings from 'views/forms/settings.vue';
export default { export default {
@ -11,5 +12,6 @@ export default {
Logout, Logout,
Userlist, Userlist,
Domainlist, Domainlist,
Medialist,
Settings Settings
} }