Skip to content
Snippets Groups Projects
Commit 7145112b authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by Rodrigo Nascimento
Browse files

Fix: Scroll on content page (#10300) 

* fix scroll on content page

* fix review
parent 9807ba2b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/rocketchat-theme/client/imports/components/contextual-bar.css
+ 29
− 18
View file @ 7145112b
......@@ -2,20 +2,20 @@
z-index: 1;
display: flex;
overflow: hidden;
flex-direction: column;
flex: 0 0 var(--flex-tab-width);
width: var(--flex-tab-width);
height: 100%;
background: var(--color-white);
box-shadow: 0 3px 1px 2px rgba(31, 35, 41, 0.08);
&-wrap {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 100%;
......@@ -29,6 +29,7 @@
&__content {
overflow: auto;
padding: var(--default-padding);
& .js-back {
......@@ -44,10 +45,11 @@
&__header {
display: flex;
flex: 0 0 auto;
justify-content: flex-end;
padding: var(--default-padding);
align-items: end;
justify-content: flex-end;
&-data {
display: flex;
......@@ -81,9 +83,8 @@
}
}
& .search-form .rc-input__icon-svg {
font-size: 1.2rem;
font-size: 1.2rem;
}
}
......@@ -116,9 +117,9 @@
.attachments {
&__item {
display: flex;
overflow: hidden;
flex: 1;
overflow: hidden;
transition: background-color 0.3s;
......@@ -234,20 +235,25 @@
.mail-messages__instructions {
display: flex;
margin-bottom: 3rem;
padding: 1.25rem;
color: var(--rc-color-alert-message-primary);
border-width: 1px;
border-color: var(--rc-color-alert-message-primary);
background: var(--rc-color-alert-message-primary-background);
border-radius: 2px;
color: var(--rc-color-alert-message-primary);
padding: 1.25rem;
margin-bottom: 3rem;
background: var(--rc-color-alert-message-primary-background);
&--selected {
background: var(--rc-color-alert-message-secondary-background);
border-color: var(--rc-color-alert-message-secondary);
color: var(--rc-color-alert-message-secondary);
cursor: pointer;
color: var(--rc-color-alert-message-secondary);
border-color: var(--rc-color-alert-message-secondary);
background: var(--rc-color-alert-message-secondary-background);
}
&--warning {
......@@ -258,26 +264,31 @@
&-wrapper {
display: flex;
margin: 0 -10px;
}
&-icon {
font-size: 2rem;
margin: 0 10px;
font-size: 2rem;
&--hand-pointer {
transform: rotate3d(0, 0, 1, -25deg);
margin: 0 15px;
transform: rotate3d(0, 0, 1, -25deg);
fill: currentColor;
}
}
&-text {
font-size: 0.875rem;
font-weight: 600;
margin: 0 10px;
display: flex;
flex-direction: column;
margin: 0 10px;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2rem;
&-selected {
......
packages/rocketchat-theme/client/imports/components/header.css
+ 22
− 17
View file @ 7145112b
.rc-header {
padding: 0 0.5rem;
&--height-fixed {
height: 78px;
}
&__wrap {
z-index: 2;
&__block {
display: flex;
margin: 0 0.5rem;
align-items: center;
}
margin: 0 -0.5rem;
align-items: center;
z-index: 2;
padding: var(--header-padding);
display: flex;
white-space: nowrap;
margin: 0 -0.5rem;
background-color: var(--header-background-color);
box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
padding: var(--header-padding);
font-size: var(--header-title-font-size);
white-space: nowrap;
align-items: center;
background-color: var(--header-background-color);
box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
justify-content: space-between;
}
&--height-fixed {
height: 78px;
}
font-size: var(--header-title-font-size);
&__block {
display: flex;
justify-content: space-between;
margin: 0 0.5rem;
align-items: center;
}
&__content {
display: flex;
......
packages/rocketchat-ui/client/components/header/header.html
+ 37
− 34
View file @ 7145112b
<template name="header">
<header class="rc-header{{#if fixedHeight}} rc-header--height-fixed{{/if}}" >
<div class="rc-header__block rc-header--burger">
{{> burger}}
</div>
{{#if showToggleFavorite}}
<div class="rc-header__wrap">
<div class="rc-header__block rc-header--burger">
{{> burger}}
</div>
{{#if showToggleFavorite}}
<div class="rc-header__block rc-header__favorite">
<a href="#favorite" class="rc-header__toggle-favorite {{state}}">{{> icon block="rc-header__icon" icon="star"}}</a>
</div>
{{/if}}
<!-- TODO: fix it style and helper -->
{{#if tokenAccessChannel}}
{{/if}}
<!-- TODO: fix it style and helper -->
{{#if tokenAccessChannel}}
<i class="icon-tokenpass" aria-label="{{_ "Tokenpass_Channel_Label"}}"></i>
{{/if}}
{{#if isChannel}}
{{/if}}
{{#if isChannel}}
<div class="rc-header__content rc-header__block">
{{#if isDirect}}
<div class="rc-header__image rc-header__block">
{{> avatar username=avatarBackground}}
</div>
<div class="rc-header__image rc-header__block">
{{> avatar username=avatarBackground}}
</div>
{{/if}}
<div class="rc-header__data">
{{#unless secondaryName}}
<div class="rc-header__name">{{> icon block="rc-header__icon" icon=channelIcon}}{{roomName}}</div>
<div class="rc-header__name">{{> icon block="rc-header__icon" icon=channelIcon}}{{roomName}}</div>
{{else}}
<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
{{/unless}}
{{#if isDirect}}
<span class="rc-header__status">
<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{userStatus}}"></div>
<div class="rc-header__visual-status">{{userStatus}}</div>
</span>
<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{userStatus}}"></div>
<div class="rc-header__visual-status">{{userStatus}}</div>
</span>
{{else}}
{{#if roomTopic}}<span class="rc-header__topic">{{{RocketChatMarkdown roomTopic}}}</span>{{/if}}
{{#if roomTopic}}<span class="rc-header__topic">{{{RocketChatMarkdown roomTopic}}}</span>{{/if}}
{{/if}}
</div>
{{#if sentimentSmile}}
<span class="sentiment">{{sentimentSmile}}</span>
<span class="sentiment">{{sentimentSmile}}</span>
{{/if}}
{{#if isTranslated}}
<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if isSection}}
{{#if isSection}}
<span class="rc-header__block">{{_ sectionName}}</span>
{{/if}}
{{/if}}
{{#if Template.contentBlock}}
{{#if Template.contentBlock}}
{{> Template.contentBlock}}
{{/if}}
{{/if}}
{{#unless isChannel}}
{{#unless isChannel}}
{{# unless hideHelp}}
<div class="rc-header__section-help"></div>
<div class="rc-header__section-help"></div>
{{/unless}}
{{/unless}}
{{/unless}}
{{#with toolbarButtons}}
{{#with toolbarButtons}}
<div class="iframe-toolbar">
{{#each buttons}}
<button class="{{id}}">
{{#if icon}}<i class="{{icon}}"></i>{{/if}}
{{label}}
</button>
<button class="{{id}}">
{{#if icon}}<i class="{{icon}}"></i>{{/if}}
{{label}}
</button>
{{/each}}
</div>
{{/with}}
{{/with}}
</div>
</header>
</template>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment