Browse Source

修改了评论预览的结构和显示方式(增加了wrapper)

pull/4/head
欧醚 4 years ago
parent
commit
7a02ce51be
4 changed files with 19 additions and 14 deletions
  1. +1
    -1
      app/javascript/mastodon/components/status.js
  2. +13
    -12
      app/javascript/styles/closed-social/timeline_comments.scss
  3. +3
    -0
      app/javascript/styles/mastodon/variables.scss
  4. +2
    -1
      app/javascript/styles/thu/variables.scss

+ 1
- 1
app/javascript/mastodon/components/status.js View File

@ -472,7 +472,7 @@ class Status extends ImmutablePureComponent {
} }
if(sonsIds && sonsIds.size > 0) { if(sonsIds && sonsIds.size > 0) {
sons = <div className='comments_timeline'>{this.renderChildren(sonsIds)}</div>;
sons = <div className='comments-timeline__wrapper'><div className='comments-timeline'>{this.renderChildren(sonsIds)}</div></div>;
} }
let deepRec; let deepRec;

+ 13
- 12
app/javascript/styles/closed-social/timeline_comments.scss View File

@ -1,28 +1,29 @@
.comments_timeline {
height: 160px;
.comments-timeline {
max-height: 160px;
min-width: 60%;
overflow: hidden; overflow: hidden;
-webkit-mask-image: linear-gradient(#1a1a1a,transparent); -webkit-mask-image: linear-gradient(#1a1a1a,transparent);
mask-image: linear-gradient(#1a1a1a,transparent); mask-image: linear-gradient(#1a1a1a,transparent);
transform: scale(0.85); transform: scale(0.85);
transform-origin: 100% 0%; transform-origin: 100% 0%;
margin-bottom: -32px; margin-bottom: -32px;
position: relative;
z-index:99;
position: absolute;
z-index:9;
&:hover { &:hover {
overflow: visible;
max-height: none;
-webkit-mask-image: none; -webkit-mask-image: none;
mask-image: none; mask-image: none;
> div {
background: lighten($ui-base-color, 5%);
}
z-index:99;
background: $tc-background;
} }
&:active { &:active {
overflow: visible;
max-height: none;
-webkit-mask-image: none; -webkit-mask-image: none;
mask-image: none; mask-image: none;
> div {
background: lighten($ui-base-color, 5%);
}
background: $tc-background;
} }
} }
.comments-timeline__wrapper {
height: 135px;
}

+ 3
- 0
app/javascript/styles/mastodon/variables.scss View File

@ -39,6 +39,9 @@ $inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default; $lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default; $light-text-color: $ui-primary-color !default;
//timeline comeents
$tc-background: lighten($ui-base-color, 8%) !default;
// Language codes that uses CJK fonts // Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;

+ 2
- 1
app/javascript/styles/thu/variables.scss View File

@ -1,7 +1,8 @@
// Dependent colors // Dependent colors
$classic-base-color: rgba(48,43,56,0.85);
$classic-base-color: rgba(40,44,55,0.8);
// Differences // Differences
$ui-base-color: $classic-base-color !default; $ui-base-color: $classic-base-color !default;
$tc-background: rgba(50,41,64,0.9) !default;

Loading…
Cancel
Save