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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/app.less
View File

@ -58,11 +58,12 @@ img {line-height:0;}
# General Settings # General Settings
--------------------------------------------------------------*/ --------------------------------------------------------------*/
html,body { html,body {
font-family: 'Open Sans', sans-serif; position: relative;
font-size:15px; font-family: @font_family;
line-height:1.4; font-size: @font_size;
color:#000; line-height: @line_height;
background:#f5f3f4; color: @text_color;
background: #f5f3f4;
} }
.clear {clear:both;} .clear {clear:both;}
.section_padding {padding:100px 0px;} .section_padding {padding:100px 0px;}
@ -89,23 +90,21 @@ a:hover {color:#901624;}
.input_header {margin-bottom:10px;} .input_header {margin-bottom:10px;}
.input_description {font-size:13px; color:#666;} .input_description {font-size:13px; color:#666;}
input, textarea, select { input, textarea, select {
font-family: 'Open Sans', sans-serif; font-family: @font_family;
width:100%; width: 100%;
display:block; display: block;
height:35px; height: 35px;
padding:0px 10px; padding: 0px 10px;
color:#333; color: @text_color;
backrgound:#FFF; background: white;
border:solid 1px #CCC; border: solid 1px #CCC;
outline:none; outline: none;
font-size:13px; font-size: 14px;
transition:all 0.3s; transition: all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
} }
textarea {padding:10px; height:auto;} textarea {padding:10px; height:auto;}
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;} input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
label {font-weight:600; color:#333;} label {font-weight:600; color: @text_color;}
input[type="checkbox"] { input[type="checkbox"] {
position: absolute; position: absolute;
@ -186,8 +185,8 @@ button{
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Content Area # Content Area
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;} .content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;}
.content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;} .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;}
.content_open_sidebar {left:250px;} .content_open_sidebar {left:250px;}

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

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

3
src/components/sidebar.vue
View File

@ -38,7 +38,8 @@
height:100%; /*overflow-y:scroll;*/ height:100%; /*overflow-y:scroll;*/
&>.inner { &>.inner {
position:relative; width:auto; position:relative;
width:auto;
} }
} }

28
src/components/topbar.vue
View File

@ -74,11 +74,11 @@ export default {
} }
img { img {
width:32px; display: block;
height:auto; width: 30px;
margin:0 auto; height: auto;
padding-top:4px; margin: 0 auto;
display:block; padding-top: 4px;
} }
} }
@ -165,10 +165,11 @@ export default {
list-style-type: none; list-style-type: none;
li{ li{
.clearfix();
.icon { .icon {
float:left; float: left;
width: 45px; width: 45px;
line-height:45px; line-height: 45px;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
@ -178,16 +179,21 @@ export default {
line-height: 45px; line-height: 45px;
padding: 0 10px; padding: 0 10px;
} }
a {color:#FFF; display:block; height:45px;} a {
&:after {clear:both; content:""; display:block;} display: block;
&:hover {background:rgba(40,183,141,0.3);} color: white;
height: 45px;
}
&:hover {
background: darken(@cms_brand_primary, 5%);
}
} }
} }
} }
&.open { &.open {
.user_menu{display: block;} .user_menu{display: block;}
&>.trigger{background: rgba(40, 183, 141, 0.5);} &>.trigger{background: fade(@cms_brand_primary, 50%);}
.trigger_btn .icon:before{transform: rotate(180deg);} .trigger_btn .icon:before{transform: rotate(180deg);}
} }
} }

5
src/variables.less
View File

@ -3,7 +3,10 @@
@screen-md: 1024px; @screen-md: 1024px;
@screen-lg: 1200px; @screen-lg: 1200px;
@text_color: black; @font_family: "Open Sans", sans-serif;
@text_color: #666;
@font_size: 14px;
@line_height: 1.4;
@gray_dark: #152129; @gray_dark: #152129;