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

Updating safe-area-inset css for effected elements

Browse Source
This commit is contained in:
mgabdev
2020-05-14 17:47:33 -04:00
parent 913905d7a7
commit 0cef1f71e1
10 changed files with 67 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/gabsocial/components/bundle_column_error.js
View File

@@ -36,8 +36,8 @@ class BundleColumnError extends PureComponent {
return (
<div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>

4
app/javascript/gabsocial/components/error_boundary.js
View File

@@ -64,8 +64,8 @@ export default class ErrorBoundary extends PureComponent {
return (
<div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>

20
app/javascript/gabsocial/components/floating_action_button.js
View File

@@ -33,14 +33,18 @@ class FloatingActionButton extends PureComponent {
const message = intl.formatMessage(messages.gab)
return (
<Button
onClick={onOpenCompose}
className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom55PX, _s.height60PX, _s.width60PX, _s.right0, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
title={message}
aria-label={message}
icon='pencil'
iconSize='20px'
/>
<div
className={[_s.posFixed, _s.z4, _s.mb15, _s.mr15, _s.bottom55PX, _s.right0].join(' ')}
>
<Button
onClick={onOpenCompose}
className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
title={message}
aria-label={message}
icon='pencil'
iconSize='20px'
/>
</div>
)
}

2
app/javascript/gabsocial/components/footer_bar.js
View File

@@ -52,7 +52,7 @@ class FooterBar extends PureComponent {
return (
<div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.heightMin58PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.footerChin, _s.justifyContentSpaceAround].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
{
buttons.map((props) => {
const classes = CX({

7
app/javascript/gabsocial/components/list.js
View File

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
import Block from './block'
import ScrollableList from './scrollable_list'
import ListItem from './list_item'
import Dummy from './dummy'
export default class List extends ImmutablePureComponent {
@@ -32,9 +33,11 @@ export default class List extends ImmutablePureComponent {
onLoadMore
} = this.props
const Wrapper = !!scrollKey ? ScrollableList : Dummy
return (
<Block>
<ScrollableList
<Wrapper
onLoadMore={onLoadMore}
hasMore={hasMore}
scrollKey={scrollKey}
@@ -50,7 +53,7 @@ export default class List extends ImmutablePureComponent {
/>
))
}
</ScrollableList>
</Wrapper>
</Block>
)
}

14
app/javascript/gabsocial/components/logged_out_navigation_bar.js
View File

@@ -9,21 +9,21 @@ export default class LoggedOutNavigationBar extends PureComponent {
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
return (
<ResponsiveClassesComponent
classNames={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}
classNamesXS={[_s.default, _s.z4, _s.height98PX, _s.width100PC].join(' ')}
classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')}
>
<ResponsiveClassesComponent
classNames={[_s.default, _s.height53PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
classNamesXS={[_s.default, _s.height98PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
classNames={[_s.default, _s.heightMin53PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
classNamesXS={[_s.default, _s.heightMin98PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
>
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.width330PX].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
classNames={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width330PX].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}
>
<Button

6
app/javascript/gabsocial/components/navigation_bar.js
View File

@@ -54,10 +54,10 @@ class NavigationBar extends ImmutablePureComponent {
return (
<div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}>
{ /** Default */}
<Responsive min={BREAKPOINT_EXTRA_SMALL}>

10
app/javascript/gabsocial/components/profile_navigation_bar.js
View File

@@ -12,18 +12,18 @@ export default class ProfileNavigationBar extends PureComponent {
const { title } = this.props
return (
<div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}>
<BackButton
className={[_s.height53PX, _s.pl10, _s.pr10].join(' ')}
className={[_s.heightMin53PX, _s.pl10, _s.pr10].join(' ')}
iconSize='18px'
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
/>
<div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
<Heading size='h1'>
<span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
{title}

7
app/javascript/gabsocial/components/sidebar_xs.js
View File

@@ -211,7 +211,7 @@ class SidebarXS extends ImmutablePureComponent {
return (
<div className={containerClasses}>
<div className={[_s.default, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
<div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.width330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
<div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPL, _s.minWidth330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px15, _s.height53PX, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<Heading size='h2'>Account Info</Heading>
@@ -270,7 +270,10 @@ class SidebarXS extends ImmutablePureComponent {
</div>
<div className={[_s.default, _s.mb15, _s.boxShadowNone].join(' ')}>
<List items={mainItems} />
<List
items={mainItems}
size='large'
/>
</div>
</div>