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
Show Stats 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 ( return (
<div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <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.heightMin53PX, _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.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.flexRow].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 ( return (
<div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <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.heightMin53PX, _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.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s.default, _s.flexRow].join(' ')}>

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

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

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

@ -52,7 +52,7 @@ class FooterBar extends PureComponent {
return ( return (
<div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}> <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.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) => { buttons.map((props) => {
const classes = CX({ 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 Block from './block'
import ScrollableList from './scrollable_list' import ScrollableList from './scrollable_list'
import ListItem from './list_item' import ListItem from './list_item'
import Dummy from './dummy'
export default class List extends ImmutablePureComponent { export default class List extends ImmutablePureComponent {
@ -32,9 +33,11 @@ export default class List extends ImmutablePureComponent {
onLoadMore onLoadMore
} = this.props } = this.props
const Wrapper = !!scrollKey ? ScrollableList : Dummy
return ( return (
<Block> <Block>
<ScrollableList <Wrapper
onLoadMore={onLoadMore} onLoadMore={onLoadMore}
hasMore={hasMore} hasMore={hasMore}
scrollKey={scrollKey} scrollKey={scrollKey}
@ -50,7 +53,7 @@ export default class List extends ImmutablePureComponent {
/> />
)) ))
} }
</ScrollableList> </Wrapper>
</Block> </Block>
) )
} }

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

@ -13,17 +13,17 @@ export default class LoggedOutNavigationBar extends PureComponent {
render() { render() {
return ( return (
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')} classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
classNamesXS={[_s.default, _s.z4, _s.height98PX, _s.width100PC].join(' ')} classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')}
> >
<ResponsiveClassesComponent <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(' ')} 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.height98PX, _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 <ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.width330PX].join(' ')} classNames={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width330PX].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.width100PC].join(' ')} classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}
> >
<Button <Button

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

@ -54,10 +54,10 @@ class NavigationBar extends ImmutablePureComponent {
return ( return (
<div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}> <div className={[_s.default, _s.z4, _s.heightMin53PX, _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.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 */} { /** Default */}
<Responsive min={BREAKPOINT_EXTRA_SMALL}> <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 const { title } = this.props
return ( return (
<div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}> <div className={[_s.default, _s.z4, _s.heightMin53PX, _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.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 <BackButton
className={[_s.height53PX, _s.pl10, _s.pr10].join(' ')} className={[_s.heightMin53PX, _s.pl10, _s.pr10].join(' ')}
iconSize='18px' iconSize='18px'
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')} 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'> <Heading size='h1'>
<span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}> <span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
{title} {title}

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

@ -211,7 +211,7 @@ class SidebarXS extends ImmutablePureComponent {
return ( return (
<div className={containerClasses}> <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.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(' ')}> <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> <Heading size='h2'>Account Info</Heading>
@ -270,7 +270,10 @@ class SidebarXS extends ImmutablePureComponent {
</div> </div>
<div className={[_s.default, _s.mb15, _s.boxShadowNone].join(' ')}> <div className={[_s.default, _s.mb15, _s.boxShadowNone].join(' ')}>
<List items={mainItems} /> <List
items={mainItems}
size='large'
/>
</div> </div>
</div> </div>

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

@ -464,8 +464,10 @@ body {
.heightMin100VH { min-height: 100vh; } .heightMin100VH { min-height: 100vh; }
.heightMin50VH { min-height: 50vh; } .heightMin50VH { min-height: 50vh; }
.heightMin98PX { min-height: 98px; }
.heightMin80PX { min-height: 80px; } .heightMin80PX { min-height: 80px; }
.heightMin58PX { min-height: 58px; } .heightMin58PX { min-height: 58px; }
.heightMin53PX { min-height: 53px; }
.heightMin50PX { min-height: 50px; } .heightMin50PX { min-height: 50px; }
.heightMin28PX { min-height: 28px; } .heightMin28PX { min-height: 28px; }
@ -496,6 +498,8 @@ body {
.maxWidth180PX { max-width: 180px; } .maxWidth180PX { max-width: 180px; }
.maxWidth100PC42PX { max-width: calc(100% - 42px); } .maxWidth100PC42PX { max-width: calc(100% - 42px); }
.minWidth330PX { min-width: 330px; }
.width100PC { width: 100%; } .width100PC { width: 100%; }
.width50PC { width: 50%; } .width50PC { width: 50%; }
.width25PC { width: 25%; } .width25PC { width: 25%; }
@ -917,11 +921,30 @@ body {
-ms-overflow-style: none; -ms-overflow-style: none;
} }
.footerChin { .saveAreaInsetPB {
padding-bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0); padding-bottom: env(safe-area-inset-bottom, 0);
} }
.saveAreaInsetPT {
padding-top: env(safe-area-inset-top, 0);
}
.saveAreaInsetPL {
padding-left: env(safe-area-inset-left, 0);
}
.saveAreaInsetPR {
padding-right: env(safe-area-inset-right, 0);
}
.saveAreaInsetMR {
margin-right: env(safe-area-inset-right, 0);
}
.saveAreaInsetMB {
margin-bottom: env(safe-area-inset-bottom, 0);
}
.bgNavigation { .bgNavigation {
background-color: var(--navigation_background); background-color: var(--navigation_background);
} }