random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed TimelineQueueButtonHeader center position

Browse Source 
• Added:
- New classes to position center fixed element

• Removed:
- Unused classes from TimelineQueueButtonHeader component
This commit is contained in:
mgabdev 2020-05-15 16:29:13 -04:00
parent 09db3e2509
commit 1021467a5a
2 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/gabsocial/components/timeline_queue_button_header.js
View File

@ -27,35 +27,34 @@ export default class TimelineQueueButtonHeader extends PureComponent {
const classes = cx({
default: 1,
posFixed: 1,
displayNone: !hasItems,
top80PX: 1,
z4: 1,
center160PX: 1,
mtNeg26PX: 1,
})
return (
<div className={classes}>
<Button
isNarrow
color='white'
backgroundColor='brand'
onClick={onClick}
>
{
hasItems &&
<Text color='inherit' size='small'>
<FormattedMessage
id='timeline_queue.label'
defaultMessage='{count} new {type}'
values={{
count: shortNumberFormat(count),
type: count === 1 ? itemType : `${itemType}s`,
}}
/>
</Text>
}
</Button>
<div className={[_s.default, _s.pb5, _s.posSticky, _s.top120PX, _s.alignItemsCenter, _s.z4].join(' ')}>
<div className={classes}>
<Button
isNarrow
color='white'
backgroundColor='brand'
onClick={onClick}
>
{
hasItems &&
<Text color='inherit' size='small'>
<FormattedMessage
id='timeline_queue.label'
defaultMessage='{count} new {type}'
values={{
count: shortNumberFormat(count),
type: count === 1 ? itemType : `${itemType}s`,
}}
/>
</Text>
}
</Button>
</div>
</div>
)
}

8
app/javascript/styles/global.css
View File

@ -420,7 +420,7 @@ body {
.topNeg80PX { top: -80px; }
.top0 { top: 0; }
.top80PX { top: 80px; }
.top120PX { top: 120px; }
.top60PC { top: 60%; }
.top50PC { top: 50%; }
@ -449,10 +449,6 @@ body {
.resizeVertical { resize: vertical; }
.center160PX {
left: calc(100vw / 2 - 80px);
}
.heightMax100VH { max-height: 100vh; }
.heightMax100PC { max-height: 100%; }
.heightMax80VH { max-height: 80vh; }
@ -508,7 +504,6 @@ body {
.width330PX { width: 330px; }
.width250PX { width: 240px; }
.width240PX { width: 240px; }
.width160PX { width: 160px; }
.width84PX { width: 84px; }
.width72PX { width: 72px; }
.width60PX { width: 60px; }
@ -722,6 +717,7 @@ body {
.mt5 { margin-top: 5px; }
.mt2 { margin-top: 2px; }
.mtAuto { margin-top: auto; }
.mtNeg26PX { margin-top: -26px; }
.mtNeg32PX { margin-top: -32px; }
.mtNeg50PX { margin-top: -50px; }
.mtNeg75PX { margin-top: -75px; }