removed absolute positioning of items

soniasophia · Sep 21, 2017 · ef03195 · ef03195
1 parent cc564f6
commit ef03195
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/js/scenes/Event/Event.js b/js/scenes/Event/Event.js
@@ -4,18 +4,15 @@ import {
   Text,
   Image,
   TouchableOpacity,
-<<<<<<< HEAD
-  ScrollView
-=======
   ScrollView,
   StyleSheet
->>>>>>> changed events styling to be scrollable
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Moment from 'moment';
-import GradientWrapper from '../../components/GradientWrapper';
+import LinearGradient from 'react-native-linear-gradient';
 import { goToSpeaker } from '../../navigation/navHelpers';
 import OutlinedButton from '../../components/OutlinedButton/';
+import { colors } from '../../config/styles';
 import { styles } from './styles';
 
 const SingleEvent = ({ eventData, eventDataSet, attendEvent }) => {
@@ -35,14 +32,15 @@ const SingleEvent = ({ eventData, eventDataSet, attendEvent }) => {
           {eventDataSet.map((item) => (
             <View key={item.talk_id}>
               <TouchableOpacity onPress={() => goToSpeaker({ item })}>
-                <View style={styles.talkBorder} />
-                <View style={styles.talkContainer}>
-                  <Image style={styles.image} source={{ uri: item.speaker_id.imageUrl }} />
-                  <View style={styles.talkDetails}>
-                    <View style={styles.talkTitleContainer}>
-                      <Text style={styles.talkTitle}>{item.title}</Text>
+                <View style={styles.talkBorder}>
+                  <View style={styles.talkContainer}>
+                    <Image style={styles.image} source={{ uri: item.speaker_id.imageUrl }} />
+                    <View style={styles.talkDetails}>
+                      <View style={styles.talkTitleContainer}>
+                        <Text style={styles.talkTitle}>{item.title}</Text>
+                      </View>
+                      <Text style={styles.speaker}>{item.speaker_id.fullName}</Text>
                     </View>
-                    <Text style={styles.speaker}>{item.speaker_id.fullName}</Text>
                   </View>
                 </View>
               </TouchableOpacity>

diff --git a/js/scenes/Event/styles.js b/js/scenes/Event/styles.js
@@ -34,30 +34,37 @@ export const styles = StyleSheet.create({
 
   talkContainer: {
     flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
     marginBottom: 10,
-    width: '50%'
+    borderColor: 'red',
+    borderWidth: 2,
+    right: 30,
+    width: Dimensions.get('window').width,
   },
 
   talkBorder: {
     backgroundColor: colors.darkGrey,
     borderTopLeftRadius: 8,
     borderBottomLeftRadius: 8,
-    marginLeft: 30,
-    height: 90,
-    width: '100%'
+    minHeight: 50,
+    width: Dimensions.get('window').width / 1.1,
+    alignSelf: 'flex-end',
+    marginTop: 2.5,
+    marginBottom: 2.5,
+    borderColor: 'green',
+    borderWidth: 2
   },
 
   talkDetails: {
     flexDirection: 'column',
-    position: 'absolute',
-    alignSelf: 'center',
-    bottom: 25,
-    left: 90,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    borderColor: 'yellow',
+    borderWidth: 2,
+    maxWidth: Dimensions.get('window').width / 1.55
   },
 
   talkTitleContainer: {
-    width: Dimensions.get('window').width / 2,
     flexWrap: 'wrap'
   },
 
@@ -79,9 +86,7 @@ export const styles = StyleSheet.create({
     height: 70,
     width: 70,
     borderRadius: 10,
-    margin: 10,
-    position: 'absolute',
-    bottom: 0
+    margin: 10
   }
 
 });