From d15fc32b0345a20cc5872e4673da53e08cc39e82 Mon Sep 17 00:00:00 2001 From: Anton Schubert Date: Wed, 30 Aug 2017 02:39:00 +0200 Subject: [PATCH] some mobile optimization --- src/app.less | 41 +++++----- src/components/my-table.vue | 159 ++++++++++++++++++++++++------------ src/components/sidebar.vue | 3 +- src/components/topbar.vue | 28 ++++--- src/variables.less | 5 +- 5 files changed, 148 insertions(+), 88 deletions(-) diff --git a/src/app.less b/src/app.less index 6d7dab5..e84264f 100644 --- a/src/app.less +++ b/src/app.less @@ -58,11 +58,12 @@ img {line-height:0;} # General Settings --------------------------------------------------------------*/ html,body { - font-family: 'Open Sans', sans-serif; - font-size:15px; - line-height:1.4; - color:#000; - background:#f5f3f4; + position: relative; + font-family: @font_family; + font-size: @font_size; + line-height: @line_height; + color: @text_color; + background: #f5f3f4; } .clear {clear:both;} .section_padding {padding:100px 0px;} @@ -89,23 +90,21 @@ a:hover {color:#901624;} .input_header {margin-bottom:10px;} .input_description {font-size:13px; color:#666;} input, textarea, select { - font-family: 'Open Sans', sans-serif; - width:100%; - display:block; - height:35px; - padding:0px 10px; - color:#333; - backrgound:#FFF; - border:solid 1px #CCC; - outline:none; - font-size:13px; - transition:all 0.3s; - -webkit-transition:all 0.3s; - -moz-transition:all 0.3s; + font-family: @font_family; + width: 100%; + display: block; + height: 35px; + padding: 0px 10px; + color: @text_color; + background: white; + border: solid 1px #CCC; + outline: none; + font-size: 14px; + transition: all 0.3s; } textarea {padding:10px; height:auto;} 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"] { position: absolute; @@ -186,8 +185,8 @@ button{ /*-------------------------------------------------------------- # Content Area --------------------------------------------------------------*/ -.content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;} -.content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;} +.content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;} +.content_main {position:relative; top:0px; padding:25px;} .cms_content_main_headline {margin-bottom:20px; position:relative;} .content_open_sidebar {left:250px;} diff --git a/src/components/my-table.vue b/src/components/my-table.vue index 02ea7e3..314cd8e 100644 --- a/src/components/my-table.vue +++ b/src/components/my-table.vue @@ -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 @@ } } } - } + } diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue index a98f129..7c7a413 100644 --- a/src/components/sidebar.vue +++ b/src/components/sidebar.vue @@ -38,7 +38,8 @@ height:100%; /*overflow-y:scroll;*/ &>.inner { - position:relative; width:auto; + position:relative; + width:auto; } } diff --git a/src/components/topbar.vue b/src/components/topbar.vue index 3dac660..499aa2d 100644 --- a/src/components/topbar.vue +++ b/src/components/topbar.vue @@ -74,11 +74,11 @@ export default { } img { - width:32px; - height:auto; - margin:0 auto; - padding-top:4px; - display:block; + display: block; + width: 30px; + height: auto; + margin: 0 auto; + padding-top: 4px; } } @@ -165,10 +165,11 @@ export default { list-style-type: none; li{ + .clearfix(); .icon { - float:left; + float: left; width: 45px; - line-height:45px; + line-height: 45px; text-align: center; font-size: 20px; } @@ -178,16 +179,21 @@ export default { line-height: 45px; padding: 0 10px; } - a {color:#FFF; display:block; height:45px;} - &:after {clear:both; content:""; display:block;} - &:hover {background:rgba(40,183,141,0.3);} + a { + display: block; + color: white; + height: 45px; + } + &:hover { + background: darken(@cms_brand_primary, 5%); + } } } } &.open { .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);} } } diff --git a/src/variables.less b/src/variables.less index 38261bb..8dd6e3f 100644 --- a/src/variables.less +++ b/src/variables.less @@ -3,7 +3,10 @@ @screen-md: 1024px; @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;