add table styles
This commit is contained in:
89
src/app.less
89
src/app.less
@@ -253,95 +253,6 @@ button{
|
||||
.content_table_headline {margin-bottom:10px;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.cms_table_row_content, .cms_table_row_header {margin:0px -25px;}
|
||||
.cms_table_row {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
background:#FFF;
|
||||
padding:10px 15px;
|
||||
position:relative;
|
||||
}
|
||||
.cms_table_row:nth-child(even) {background:#f5f3f4;}
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding:0px 10px;
|
||||
}
|
||||
|
||||
.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}
|
||||
|
||||
.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
.cell_status {position:relative; padding-left:20px;}
|
||||
|
||||
.cell_status:before {
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px; top:50%;
|
||||
margin-top:-5px;
|
||||
width:12px; height:12px;
|
||||
border-radius:100%;
|
||||
background:#88c87a;
|
||||
}
|
||||
|
||||
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
||||
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
||||
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
||||
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
||||
|
||||
.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
|
||||
.cell_settings a {color:#000; list-style-type:none;}
|
||||
.cell_settings .fa-cog {font-size:20px;}
|
||||
.cell_settings_inner {
|
||||
position:absolute;
|
||||
width:205px; height:40px;
|
||||
top:50%;
|
||||
right:-3px;
|
||||
margin-top:-21px;
|
||||
border-radius:20px;
|
||||
background:#e0e0e0;
|
||||
padding:0px 10px;
|
||||
z-index:-1;
|
||||
overflow:hidden;
|
||||
opacity:0;
|
||||
-webkit-opacity:0;
|
||||
-moz-opacity:0;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
.cell_settings_inner_container {float:right;}
|
||||
.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
|
||||
.cell_settings_inner_section_last {border:none; padding-right:3px;}
|
||||
.cell_settings_inner_section ul {list-style-type:none;}
|
||||
.cell_settings_inner_section ul li {float:left; padding-right:7px;}
|
||||
.cell_settings_inner_section_last ul li {padding:0px;}
|
||||
.cell_settings_inner_section ul li a {color:#000;}
|
||||
.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}
|
||||
|
||||
.cell_settings_click, .cell_settings_close {/*z-index:700;*/ cursor:pointer;}
|
||||
.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}
|
||||
|
||||
.cms_table_row_header .cms_table_row {background:none; font-size:13px; padding:10px 15px;}
|
||||
.cms_table_row_header .fa {font-size:12px;}
|
||||
|
||||
.cell_settings_inner_open {
|
||||
opacity:1;
|
||||
-webkit-opacity:1;
|
||||
-moz-opacity:1;
|
||||
width:205px;
|
||||
z-index:600;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Table Footer
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
@@ -1,81 +1,193 @@
|
||||
<template>
|
||||
|
||||
<div class="My-Table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(c, i) in columns" :key="i">
|
||||
<span @click="orderBy(c.orderBy)" v-if="c.orderBy">{{ c.heading }} V</span>
|
||||
<span v-else>{{ c.heading }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody is="transition-group" name="list">
|
||||
<tr v-for="(r, ri) in rows" :key="ri">
|
||||
<td v-for="(c, ci) in columns" :key="ci + 'c'">
|
||||
<span v-if="c.prop">{{ getProp(r, c.prop) }}</span>
|
||||
<span v-else-if="c.render">{{ c.render(r) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="cms_table">
|
||||
<div class="table_header">
|
||||
<div class="table_row">
|
||||
<div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i">
|
||||
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
|
||||
{{ col.heading }}
|
||||
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
|
||||
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
|
||||
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
|
||||
</div>
|
||||
<div v-else>{{ col.heading }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table_content" is="transition-group" name="list">
|
||||
<div class="table_row" v-for="(row, ri) in rows" :key="ri">
|
||||
<div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
|
||||
<div v-if="col.prop">{{ getProp(row, col.prop) }}</div>
|
||||
<div v-else-if="col.render">{{ col.render(row) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'My-Table',
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
orderBy(col) {
|
||||
console.log(col);
|
||||
this.$emit('sort', {
|
||||
orderBy: col,
|
||||
orderDesc: false
|
||||
});
|
||||
},
|
||||
getProp(row, prop) {
|
||||
let props = prop.split('.');
|
||||
let val = row;
|
||||
props.forEach((p) => {
|
||||
if (typeof val == 'object') {
|
||||
val = val[p];
|
||||
}
|
||||
});
|
||||
return val;
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'My-Table',
|
||||
props: {
|
||||
currentOrderBy: {
|
||||
type: String
|
||||
},
|
||||
currentOrderDesc: {
|
||||
type: Boolean
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
orderBy(col) {
|
||||
console.log(col);
|
||||
this.$emit('sort', {
|
||||
orderBy: col,
|
||||
orderDesc: false
|
||||
});
|
||||
},
|
||||
getProp(row, prop) {
|
||||
let props = prop.split('.');
|
||||
let val = row;
|
||||
props.forEach((p) => {
|
||||
if (typeof val == 'object') {
|
||||
val = val[p];
|
||||
}
|
||||
});
|
||||
return val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.list-enter-active, .list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
<style lang="less">
|
||||
@import "../mixins";
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.list-enter-active, .list-leave-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.cms_table{
|
||||
&>.table_header, &>.table_content{margin: 0px -25px;}
|
||||
&>.table_header{
|
||||
.table_row {background:none; font-size:13px; padding:10px 15px;}
|
||||
.icon {font-size:14px;}
|
||||
}
|
||||
.table_row{
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
background: white;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:nth-child(even) {
|
||||
background:#f5f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding:0px 10px;
|
||||
|
||||
&.sortable{
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
.cell_status {position:relative; padding-left:20px;}
|
||||
|
||||
.cell_status:before {
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px; top:50%;
|
||||
margin-top:-5px;
|
||||
width:12px; height:12px;
|
||||
border-radius:100%;
|
||||
background:#88c87a;
|
||||
}
|
||||
|
||||
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
||||
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
||||
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
||||
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
||||
*/
|
||||
|
||||
/* === Cell settings === */
|
||||
/*.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
|
||||
.cell_settings a {color:#000; list-style-type:none;}
|
||||
.cell_settings .fa-cog {font-size:20px;}
|
||||
.cell_settings_inner {
|
||||
position:absolute;
|
||||
width:205px; height:40px;
|
||||
top:50%;
|
||||
right:-3px;
|
||||
margin-top:-21px;
|
||||
border-radius:20px;
|
||||
background:#e0e0e0;
|
||||
padding:0px 10px;
|
||||
z-index:-1;
|
||||
overflow:hidden;
|
||||
opacity:0;
|
||||
-webkit-opacity:0;
|
||||
-moz-opacity:0;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
.cell_settings_inner_container {float:right;}
|
||||
.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
|
||||
.cell_settings_inner_section_last {border:none; padding-right:3px;}
|
||||
.cell_settings_inner_section ul {list-style-type:none;}
|
||||
.cell_settings_inner_section ul li {float:left; padding-right:7px;}
|
||||
.cell_settings_inner_section_last ul li {padding:0px;}
|
||||
.cell_settings_inner_section ul li a {color:#000;}
|
||||
.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}
|
||||
|
||||
.cell_settings_click, .cell_settings_close {cursor:pointer;}
|
||||
.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}
|
||||
|
||||
.cell_settings_inner_open {
|
||||
opacity:1;
|
||||
-webkit-opacity:1;
|
||||
-moz-opacity:1;
|
||||
width:205px;
|
||||
z-index:600;
|
||||
transition:all 0.3s;
|
||||
}*/
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="Scroll-Table">
|
||||
<my-input label="Suche:" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
|
||||
<my-table :columns="columns" :rows="rows" @sort="sort"></my-table>
|
||||
<my-table :columns="columns" :rows="rows"
|
||||
:currentOrderBy="currentOrderBy"
|
||||
:currentOrderDesc="currentOrderDesc"
|
||||
@sort="sort">
|
||||
</my-table>
|
||||
<div v-if="loadingDelayed">loading...</div>
|
||||
<div style="padding-left: 30%; padding-bottom: 100px;">
|
||||
<span v-show="hasMore || reloadTriggered" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
|
||||
@@ -113,7 +117,7 @@ export default {
|
||||
this.rows.push(row);
|
||||
setTimeout(() => {
|
||||
this.pushRows();
|
||||
}, 50);
|
||||
}, 20);
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "mixins";
|
||||
|
||||
@iconfont_path: "~/assets/fonts/";
|
||||
@iconfont_version: 2;
|
||||
@iconfont_version: 3;
|
||||
|
||||
|
||||
@font-face {
|
||||
@@ -20,8 +20,16 @@
|
||||
.icon-user:before { content: '\e801'; } /* '' */
|
||||
.icon-key:before { content: '\e802'; } /* '' */
|
||||
.icon-menu:before { content: '\f0c9'; } /* '' */
|
||||
.icon-angle-left:before { content: '\f104'; } /* '' */
|
||||
.icon-angle-right:before { content: '\f105'; } /* '' */
|
||||
.icon-angle-up:before { content: '\f106'; } /* '' */
|
||||
.icon-angle-down:before { content: '\f107'; } /* '' */
|
||||
.icon-chatbox:before { content: '\f11b'; } /* '' */
|
||||
.icon-document-text:before { content: '\f12e'; } /* '' */
|
||||
.icon-angle-circled-left:before { content: '\f137'; } /* '' */
|
||||
.icon-angle-circled-right:before { content: '\f138'; } /* '' */
|
||||
.icon-angle-circled-up:before { content: '\f139'; } /* '' */
|
||||
.icon-angle-circled-down:before { content: '\f13a'; } /* '' */
|
||||
.icon-gear:before { content: '\f13d'; } /* '' */
|
||||
.icon-images:before { content: '\f148'; } /* '' */
|
||||
.icon-log-out:before { content: '\f29f'; } /* '' */
|
||||
|
||||
Reference in New Issue
Block a user