Browse Source

Fixed padding issues

Arnaud Vergnet 1 year ago
parent
commit
f8e53a8a72

+ 8
- 1
src/components/Custom/CustomModal.js View File

@@ -3,6 +3,8 @@
3 3
 import * as React from 'react';
4 4
 import {withTheme} from 'react-native-paper';
5 5
 import {Modalize} from "react-native-modalize";
6
+import {View} from "react-native-animatable";
7
+import CustomTabBar from "../Tabbar/CustomTabBar";
6 8
 
7 9
 /**
8 10
  * Abstraction layer for Modalize component, using custom configuration
@@ -20,7 +22,12 @@ function CustomModal(props) {
20 22
             modalStyle={{backgroundColor: colors.card}}
21 23
             handleStyle={{backgroundColor: colors.primary}}
22 24
         >
23
-            {props.children}
25
+            <View style={{
26
+                paddingBottom: CustomTabBar.TAB_BAR_HEIGHT
27
+            }}>
28
+                {props.children}
29
+            </View>
30
+
24 31
         </Modalize>
25 32
     );
26 33
 }

+ 3
- 0
src/components/Lists/WebSectionList.js View File

@@ -261,6 +261,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
261 261
                         },
262 262
                     }}
263 263
                     duration={4000}
264
+                    style={{
265
+                        bottom: CustomTabBar.TAB_BAR_HEIGHT
266
+                    }}
264 267
                 >
265 268
                     {i18n.t("homeScreen.listUpdateFail")}
266 269
                 </Snackbar>

+ 2
- 1
src/screens/Amicale/Clubs/ClubDisplayScreen.js View File

@@ -7,6 +7,7 @@ import ImageModal from 'react-native-image-modal';
7 7
 import i18n from "i18n-js";
8 8
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
9 9
 import CustomHTML from "../../../components/Custom/CustomHTML";
10
+import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
10 11
 
11 12
 type Props = {
12 13
     navigation: Object,
@@ -90,7 +91,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
90 91
         }
91 92
         const hasManagers = resp.length > 0;
92 93
         return (
93
-            <Card style={{marginTop: 10, marginBottom: 10}}>
94
+            <Card style={{marginTop: 10, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
94 95
                 <Card.Title
95 96
                     title={i18n.t('clubs.managers')}
96 97
                     subtitle={hasManagers ? i18n.t('clubs.managersSubtitle') : i18n.t('clubs.managersUnavailable')}

+ 3
- 2
src/screens/FeedItemScreen.js View File

@@ -7,6 +7,7 @@ import ImageModal from 'react-native-image-modal';
7 7
 import Autolink from "react-native-autolink";
8 8
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
9 9
 import {Linking} from "expo";
10
+import CustomTabBar from "../components/Tabbar/CustomTabBar";
10 11
 
11 12
 type Props = {
12 13
     navigation: Object,
@@ -58,7 +59,7 @@ class FeedItemScreen extends React.Component<Props> {
58 59
     getContent() {
59 60
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture !== undefined;
60 61
         return (
61
-            <ScrollView style={{margin: 5}}>
62
+            <ScrollView style={{margin: 5,}}>
62 63
                 <Card.Title
63 64
                     title={NAME_AMICALE}
64 65
                     subtitle={this.date}
@@ -77,7 +78,7 @@ class FeedItemScreen extends React.Component<Props> {
77 78
                                 uri: this.displayData.full_picture,
78 79
                             }}
79 80
                         /></View> : null}
80
-                <Card.Content>
81
+                <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
81 82
                     {this.displayData.message !== undefined ?
82 83
                         <Autolink
83 84
                             text={this.displayData.message}

+ 2
- 1
src/screens/Planning/PlanningDisplayScreen.js View File

@@ -10,6 +10,7 @@ import BasicLoadingScreen from "../../components/Custom/BasicLoadingScreen";
10 10
 import {apiRequest} from "../../utils/WebData";
11 11
 import ErrorView from "../../components/Custom/ErrorView";
12 12
 import CustomHTML from "../../components/Custom/CustomHTML";
13
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
13 14
 
14 15
 type Props = {
15 16
     navigation: Object,
@@ -104,7 +105,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
104 105
                     : <View/>}
105 106
 
106 107
                 {this.displayData.description !== null ?
107
-                    <Card.Content>
108
+                    <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
108 109
                         <CustomHTML html={this.displayData.description}/>
109 110
                     </Card.Content>
110 111
                     : <View/>}

+ 2
- 1
src/screens/Proximo/ProximoAboutScreen.js View File

@@ -4,6 +4,7 @@ import * as React from 'react';
4 4
 import {Image, ScrollView, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import {Card, List, Paragraph, Text} from 'react-native-paper';
7
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
7 8
 
8 9
 type Props = {
9 10
     navigation: Object,
@@ -40,7 +41,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
40 41
                         <Paragraph>18h30 - 19h30</Paragraph>
41 42
                     </Card.Content>
42 43
                 </Card>
43
-                <Card style={{margin: 5}}>
44
+                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
44 45
                     <Card.Title
45 46
                         title={i18n.t('proximoScreen.paymentMethods')}
46 47
                         left={props => <List.Icon {...props} icon={'cash'}/>}

+ 2
- 1
src/screens/Proxiwash/ProxiwashAboutScreen.js View File

@@ -4,6 +4,7 @@ import * as React from 'react';
4 4
 import {Image, ScrollView, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
7
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
7 8
 
8 9
 type Props = {
9 10
     navigation: Object,
@@ -67,7 +68,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
67 68
                         <Paragraph>{i18n.t('proxiwashScreen.dryersTariff')}</Paragraph>
68 69
                     </Card.Content>
69 70
                 </Card>
70
-                <Card style={{margin: 5}}>
71
+                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
71 72
                     <Card.Title
72 73
                         title={i18n.t('proxiwashScreen.paymentMethods')}
73 74
                         left={props => <List.Icon {...props} icon={'cash'}/>}

+ 19
- 15
src/screens/ScannerScreen.js View File

@@ -9,6 +9,7 @@ import URLHandler from "../utils/URLHandler";
9 9
 import {Linking} from "expo";
10 10
 import AlertDialog from "../components/Dialog/AlertDialog";
11 11
 import i18n from 'i18n-js';
12
+import CustomTabBar from "../components/Tabbar/CustomTabBar";
12 13
 
13 14
 type Props = {};
14 15
 type State = {
@@ -141,25 +142,30 @@ class ScannerScreen extends React.Component<Props, State> {
141 142
 
142 143
     render() {
143 144
         return (
144
-            <View style={styles.container}>
145
-                {this.state.hasPermission
146
-                    ? this.getScanner()
147
-                    : this.getPermissionScreen()
148
-                }
145
+            <View style={{
146
+                ...styles.container,
147
+                marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
148
+            }}>
149
+                    {this.state.hasPermission
150
+                        ? this.getScanner()
151
+                        : this.getPermissionScreen()
152
+                    }
153
+                <View style={{height: 50}}>
154
+                    <Button
155
+                        icon="information"
156
+                        mode="contained"
157
+                        onPress={this.showHelpDialog}
158
+                        style={styles.button}
159
+                    >
160
+                        {i18n.t("scannerScreen.helpButton")}
161
+                    </Button>
162
+                </View>
149 163
                 <AlertDialog
150 164
                     visible={this.state.dialogVisible}
151 165
                     onDismiss={this.onDialogDismiss}
152 166
                     title={this.state.dialogTitle}
153 167
                     message={this.state.dialogMessage}
154 168
                 />
155
-                <Button
156
-                    icon="information"
157
-                    mode="contained"
158
-                    onPress={this.showHelpDialog}
159
-                    style={styles.button}
160
-                >
161
-                    {i18n.t("scannerScreen.helpButton")}
162
-                </Button>
163 169
             </View>
164 170
         );
165 171
     }
@@ -200,8 +206,6 @@ const styles = StyleSheet.create({
200 206
     container: {
201 207
         flex: 1,
202 208
         justifyContent: 'center',
203
-        alignItems: 'center',
204
-        backgroundColor: '#000000' // the rock-solid workaround
205 209
     },
206 210
     cameraContainer: {
207 211
         marginTop: 'auto',

Loading…
Cancel
Save