From f7c59f8a0da8dbd137722e8d48ad5f6d212efaa7 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 21 Dec 2018 22:49:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=8D=E5=90=8C=E5=B0=BA?= =?UTF-8?q?=E5=AF=B8=E5=B1=8F=E5=B9=95=E7=9A=84=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/less/_base.less | 2 +- source/less/_header.less | 3 +++ source/less/_layout.less | 11 +++++---- source/less/_links.less | 52 ++++++++++++++++++++++++++++++++++++---- source/less/_main.less | 8 ++++++- source/less/_side.less | 5 +++- source/less/_widget.less | 23 ++++++++++++------ 7 files changed, 85 insertions(+), 19 deletions(-) diff --git a/source/less/_base.less b/source/less/_base.less index dd3406e..27c0ce9 100755 --- a/source/less/_base.less +++ b/source/less/_base.less @@ -199,7 +199,7 @@ img { } .container.clearfix{ display: flex; - @media(max-width: @on_phone) { + @media(max-width: @on_pad) { display: inherit; } } diff --git a/source/less/_header.less b/source/less/_header.less index 5d413b8..dc19155 100755 --- a/source/less/_header.less +++ b/source/less/_header.less @@ -138,6 +138,9 @@ position: relative; height: @height_navbar - @gap; width: @width_sidebar; + @media(max-width: @on_laptop){ + width: @width_sidebar_m; + } line-height: @height_navbar - @gap; margin-top: @gap/2; margin-bottom: @gap/2; diff --git a/source/less/_layout.less b/source/less/_layout.less index 2ba0fc0..982261b 100755 --- a/source/less/_layout.less +++ b/source/less/_layout.less @@ -4,18 +4,19 @@ // start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -@on_modal_threshold: 680px; -@on_phone: 820px; -@on_laptop: 990px; +@on_phone: 580px; +@on_pad: 768px; +@on_laptop: 1024px; // 1024 + 285 @on_desktop: 1200px; // container @width_container: 1200px; -// post -@width_post_max: 980px; +@on_modal_threshold: 680px; // 侧边栏宽度 @width_sidebar: 285px; +@width_sidebar_m: 240px; // 搜索框的宽度，建议和侧边栏宽度保持一致 @width_searchbar: @width_sidebar; +@width_searchbar_m: @width_sidebar_m; // 一个cell的高度 @height_cell: 36px; // end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< diff --git a/source/less/_links.less b/source/less/_links.less index 8fac7a6..8ab95c3 100755 --- a/source/less/_links.less +++ b/source/less/_links.less @@ -7,6 +7,7 @@ display: flex; flex-wrap: wrap; margin: -@gap/2; + border-radius: @border_radius; .friend-card{ display: flex; border-radius: @border_radius; @@ -15,13 +16,38 @@ margin: @gap/2; color: fade(@color_text_main, 80%); justify-content: flex-start; + align-content: flex-start; + flex-direction: column; + width:~"calc(100%/3 - @{gap})"; + @media(max-width: @on_laptop){ + width:~"calc(100%/3 - @{gap})"; + } + @media(max-width: @on_pad){ + width:~"calc(100%/2 - @{gap})"; + } @media(max-width: @on_phone){ width: 100%; + margin: 0 @gap/4; + border-radius: 0; + flex-direction: row; + &:first-child{ + border-top-left-radius: @border_radius; + border-top-right-radius: @border_radius; + } + &:last-child{ + border-bottom-left-radius: @border_radius; + border-bottom-right-radius: @border_radius; + } } &:hover{ text-decoration: none; box-shadow: @boxshadow_card_raised, 0 32px 64px 0px rgba(0, 0, 0, 0.1); transform: scale(1.05); + border-radius: @border_radius; + @media(max-width: @on_phone){ + transform: scale(1.02); + margin: @gap/2 0; + } .friend-left{ .avatar{ transform: scale(1.1) rotate(12deg); @@ -31,36 +57,54 @@ } .friend-left{ + align-self: center; .avatar{ width: 64px; height: 64px; min-width: 64px; min-height: 64px; - margin: @gap; + margin: @gap @gap/2 @gap/2 @gap/2; border-radius: 100%; border: 1px solid white; box-shadow: @boxshadow_card_normal; + @media(max-width: @on_phone){ + margin: @gap; + } } } .friend-right{ flex: 1; - margin: @gap @gap @gap 0; + margin: 0 @gap/2 @gap/2 @gap/2; display: flex; flex-direction: column; - justify-content: space-around; + text-align: center; + p{ + text-align: center; + } + @media(max-width: @on_phone){ + margin: @gap @gap @gap 0; + text-align: left; + p{ + text-align: left; + } + } .friend-tags-wrapper{ .enable-trans(); margin-left: -2px; word-spacing: 4px; word-break:break-all; + margin-bottom: @gap/2; + @media(max-width: @on_phone){ + margin-bottom: 0; + } } p{ margin: 0; - padding: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); &.friend-name{ font-size: @fontsize_base; font-weight: bold; + padding-top: 4px; } &.tags{ font-size: @fontsize_small * 0.85; diff --git a/source/less/_main.less b/source/less/_main.less index 0d02293..8588e68 100755 --- a/source/less/_main.less +++ b/source/less/_main.less @@ -1,5 +1,11 @@ .l_main { width: ~"calc(100% - 1 * @{width_sidebar})"; + @media(max-width: @on_laptop) { + width: ~"calc(100% - 1 * @{width_sidebar_m})"; + } + @media(max-width: @on_pad) { + width: 100%; + } padding-right: @gap; float: left; .post-list { @@ -376,7 +382,7 @@ border-radius: 4px; } } - @media(max-width:@on_phone) { + @media(max-width:@on_pad) { padding-right: 0; @media(max-width: @on_phone) { width: 100%; diff --git a/source/less/_side.less b/source/less/_side.less index 0ba7b7f..ca2c293 100755 --- a/source/less/_side.less +++ b/source/less/_side.less @@ -4,7 +4,10 @@ position: relative; display: flex; flex-direction: column; - @media(max-width: @on_phone) { + @media(max-width: @on_laptop) { + width: @width_sidebar_m; + } + @media(max-width: @on_pad) { margin: @gap 0 0; width: 100%; } diff --git a/source/less/_widget.less b/source/less/_widget.less index ff2145c..898a475 100755 --- a/source/less/_widget.less +++ b/source/less/_widget.less @@ -17,15 +17,20 @@ &:active { box-shadow: @boxshadow_card_normal; } - // height: 100%; + + width: @width_sidebar; + @media(max-width: @on_laptop) { + width: @width_sidebar_m; + } + @media(max-width: @on_pad) { + width: 100%; + } @media(max-width: @on_phone) { border-radius: 0; - width: 100%; &:hover { box-shadow: @boxshadow_card_normal; } } - width: @width_sidebar; max-height: ~"calc(100% - @{height_navbar} - 4 * @{gap})"; .header{ display: flex; @@ -105,14 +110,18 @@ display: flex; justify-content: center; background-color: transparent; - @media(max-width: @on_phone){ + @media(max-width: @on_pad){ padding: @gap/2; } } img{ width: @width_sidebar; height: @width_sidebar; - @media(max-width: @on_phone){ + @media(max-width: @on_laptop) { + width: @width_sidebar_m; + height: @width_sidebar_m; + } + @media(max-width: @on_pad){ width: 80px; height: 80px; border-radius: 100%; @@ -130,7 +139,7 @@ font-weight: bold; padding-bottom: 0; padding: @gap/2 @gap 0 @gap; - @media(max-width: @on_phone){ + @media(max-width: @on_pad){ padding: @gap/2 @gap; } } @@ -160,7 +169,7 @@ } } } - @media(max-width: @on_phone){ + @media(max-width: @on_pad){ box-shadow: none; background: @theme_background; .social-wrapper{