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

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 (
<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>

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

@ -464,8 +464,10 @@ body {
.heightMin100VH { min-height: 100vh; }
.heightMin50VH { min-height: 50vh; }
.heightMin98PX { min-height: 98px; }
.heightMin80PX { min-height: 80px; }
.heightMin58PX { min-height: 58px; }
.heightMin53PX { min-height: 53px; }
.heightMin50PX { min-height: 50px; }
.heightMin28PX { min-height: 28px; }
@ -496,6 +498,8 @@ body {
.maxWidth180PX { max-width: 180px; }
.maxWidth100PC42PX { max-width: calc(100% - 42px); }
.minWidth330PX { min-width: 330px; }
.width100PC { width: 100%; }
.width50PC { width: 50%; }
.width25PC { width: 25%; }
@ -917,11 +921,30 @@ body {
-ms-overflow-style: none;
}
.footerChin {
padding-bottom: 0;
.saveAreaInsetPB {
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 {
background-color: var(--navigation_background);
}