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

some mobile optimization

Browse Source
This commit is contained in:
Anton Schubert
2017-08-30 02:39:00 +02:00
parent a74707ba6d
commit d15fc32b03
5 changed files with 148 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/components/my-table.vue
View File

@@ -132,24 +132,13 @@
/*--------------------------------------------------------------
# Content Tables
--------------------------------------------------------------*/
.cms_table{
display: table;
width: 100%;
overflow: hidden;
border-collapse: collapse;
table-layout: fixed;
.table_header, .table_content{margin: 0px -25px;}
.table_header{
display: table-header-group;
}
.table_content{
display: table-row-group;
.cms_table {
.table_header{
display: none;
}
.table_row{
display: table-row;
position: relative;
background: white;
@@ -159,64 +148,129 @@
}
.table_cell {
display: table-cell;
vertical-align: middle;
// display: table-cell;
/* vertical-align: middle; */
font-size: 13px;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.sortable:hover{cursor: pointer;}
@media (min-width: @screen-sm-min) {
.cms_table{
display: table;
table-layout: fixed;
width: 100%;
overflow: hidden;
border-collapse: collapse;
&.align-center{text-align: center;}
&.align-left{text-align: left;}
&.align-right{text-align: right;}
.table_header, .table_content{margin: 0px -25px;}
.table_header{
display: table-header-group;
}
.table_content{
display: table-row-group;
}
.table_row{
display: table-row;
position: relative;
background: white;
&:nth-child(even) {
background: #f5f3f4;
}
}
.table_cell {
display: table-cell;
vertical-align: middle;
font-size: 13px;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.sortable:hover{cursor: pointer;}
&.align-center{text-align: center;}
&.align-left{text-align: left;}
&.align-right{text-align: right;}
}
}
}
/* === Other cell types === */
/*.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 === */
.cell_settings {
.clearfix();
.actions_btn{
display: none;
}
/* === Other cell types === */
/*.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;}*/
.icon {
font-size: 16px;
}
/*.cell_date {}
.cell_author {}
.cell_category {}
.cell_status {position:relative; padding-left:20px;}
.actions_container{
list-style-type: none;
.cell_status:before {
content:"";
display:block;
position:absolute;
left:0px; top:50%;
margin-top:-5px;
width:12px; height:12px;
border-radius:100%;
background:#88c87a;
}
.icon:hover{
cursor: pointer;
color: @cms_brand_primary;
}
}
.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;}
*/
li {
display: inline-block;
padding-right: 5px;
}
}
/* === Cell settings === */
.cell_settings {
.clearfix();
@media (min-width: @screen-sm-min) {
.cell_settings {
position: relative;
width: 22.4px + 2*15px;
text-align: right;
overflow: visible;
.icon {
font-size: 16px;
}
.actions_btn{
position: relative;
display: block;
z-index: 20;
&:hover{
cursor: pointer;
@@ -239,9 +293,6 @@
border-radius: 20px;
li {
display: inline-block;
padding-right: 5px;
&:last-child{
border-right: 1px solid white;
padding-right: 10px;
@@ -266,5 +317,5 @@
}
}
}
}
}
</style>