Merge 728ad83 into fe1d8db

ONEARMY · Jan 5, 2020 · d83f591 · d83f591
2 parents fe1d8db + 728ad83
commit d83f591
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,33 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="UTF-8"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+    />
     <meta name="theme-color" content="#000000" />
+    <meta property="og:title" content="Precious Plastic Community Platform" />
+    <meta
+      property="og:description"
+      content="A series of tools for the Precious Plastic community to collaborate around the world. Connect, share and meet each other to tackle plastic waste."
+    />
+    <meta
+      property="og:image"
+      content="%PUBLIC_URL%/precious-plastic-logo-official.jpg'"
+    />
+    <meta property="og:url" content="https://community.preciousplastic.com" />
+    <meta name="twitter:title" content="Precious Plastic Community Platform" />
+    <meta
+      name="twitter:description"
+      content="A series of tools for the Precious Plastic community to collaborate around the world. Connect, share and meet each other to tackle plastic waste."
+    />
+    <meta
+      name="twitter:image"
+      content="%PUBLIC_URL%/precious-plastic-logo-official.jpg'"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
     <!--
       manifest.json provides metadata used when your web app is added to the
 

diff --git a/public/precious-plastic-logo-official.jpg b/public/precious-plastic-logo-official.jpg
diff --git a/src/pages/Events/Content/EventsCreate/EventsCreate.tsx b/src/pages/Events/Content/EventsCreate/EventsCreate.tsx
@@ -8,6 +8,7 @@ import { InputField, DatePickerField } from 'src/components/Form/Fields'
 import { Button } from 'src/components/Button'
 import { EventStore } from 'src/stores/Events/events.store'
 import Heading from 'src/components/Heading'
+import Text from 'src/components/Text'
 import Flex from 'src/components/Flex'
 import { TagsSelectField } from 'src/components/Form/TagsSelect.field'
 import { inject } from 'mobx-react'
@@ -17,12 +18,14 @@ import { LocationSearchField } from 'src/components/Form/LocationSearch.field'
 import styled from 'styled-components'
 import theme from 'src/themes/styled.theme'
 import { validateUrl, addProtocol, required } from 'src/utils/validators'
+import { Box } from 'rebass'
 
 interface IState {
   formValues: IEventFormInput
   formSaved: boolean
   showSubmitModal?: boolean
   selectedDate: any
+  isLocationSelected?: boolean
 }
 interface IProps extends RouteComponentProps<any> {}
 interface IInjectedProps extends IProps {
@@ -75,7 +78,7 @@ export class EventsCreate extends React.Component<IProps, IState> {
   }
 
   public render() {
-    const { formValues } = this.state
+    const { formValues, isLocationSelected } = this.state
     return (
       <Form
         onSubmit={v => {
@@ -120,6 +123,11 @@ export class EventsCreate extends React.Component<IProps, IState> {
                     >
                       <Heading medium>Create an event</Heading>
                     </Flex>
+                    <Box
+                      sx={{ mt: '20px', display: ['block', 'block', 'none'] }}
+                    >
+                      <PostingGuidelines />
+                    </Box>
                     <Flex
                       card
                       mediumRadius
@@ -182,8 +190,19 @@ export class EventsCreate extends React.Component<IProps, IState> {
                             className="location-search-create"
                             validateFields={[]}
                             validate={required}
+                            customChange={v => {
+                              this.setState({
+                                isLocationSelected: true,
+                              })
+                            }}
                             component={LocationSearchField}
                           />
+                          {isLocationSelected !== undefined &&
+                            !isLocationSelected && (
+                              <Text small color={theme.colors.red} mb="5px">
+                                Select a location for your event
+                              </Text>
+                            )}
                         </Flex>
                       </Flex>
                       <Flex
@@ -210,7 +229,9 @@ export class EventsCreate extends React.Component<IProps, IState> {
                             validate={value => validateUrl(value)}
                             component={InputField}
                             placeholder="URL to offsite link (Facebook, Meetup, etc)"
-                            onBlur={e => mutators.addProtocol(e.target.name)}
+                            customOnBlur={e =>
+                              mutators.addProtocol(e.target.name)
+                            }
                           />
                         </Flex>
                       </Flex>
@@ -228,14 +249,23 @@ export class EventsCreate extends React.Component<IProps, IState> {
                 px={2}
                 mt={4}
               >
-                <PostingGuidelines />
+                <Box sx={{ display: ['none', 'none', 'block'] }}>
+                  <PostingGuidelines />
+                </Box>
                 <Button
-                  onClick={() => handleSubmit()}
+                  onClick={() => {
+                    if (isLocationSelected) {
+                      handleSubmit()
+                    } else {
+                      this.setState({ isLocationSelected: false })
+                    }
+                  }}
                   width={1}
                   mt={3}
                   variant={'primary'}
                   disabled={submitting}
                   data-cy="submit"
+                  sx={{ mb: ['40px', '40px', 0] }}
                 >
                   Publish
                 </Button>

diff --git a/src/pages/Events/Content/EventsCreate/PostingGuidelines.tsx b/src/pages/Events/Content/EventsCreate/PostingGuidelines.tsx
@@ -22,8 +22,5 @@ export const PostingGuidelines = () => (
     <Text auxiliary mb={1}>
       4. Reach an army of likeminded people :)
     </Text>
-    <Text auxiliary mb={1}>
-      5. For each steps try to use an image.
-    </Text>
   </Flex>
 )
diff --git a/src/pages/Events/Content/EventsList/EventsList.tsx b/src/pages/Events/Content/EventsList/EventsList.tsx
@@ -123,7 +123,9 @@ export class EventsList extends React.Component<any> {
               </Flex>
               <MoreContainer m={'0 auto'} pt={60} pb={90}>
                 <Flex alignItems={'center'} flexDirection={'column'} mt={5}>
-                  <Heading medium>Connect with a likeminded community.</Heading>
+                  <Heading medium sx={{ textAlign: 'center' }}>
+                    Connect with a likeminded community.
+                  </Heading>
                   <Heading medium>All around the planet.</Heading>
                   <AuthWrapper>
                     <Link to={'/events/create'}>

diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -69,6 +69,10 @@ const AnimationContainer = posed.div({
   },
 })
 
+const FormContainer = styled.form`
+  width: 100%;
+`
+
 const Label = styled.label`
   font-size: ${theme.fontSizes[2] + 'px'};
   margin-bottom: ${theme.space[2] + 'px'};
@@ -159,7 +163,7 @@ export class HowtoForm extends React.Component<IProps, IState> {
             return (
               <Flex mx={-2} bg={'inherit'} flexWrap="wrap">
                 <Flex bg="inherit" px={2} width={[1, 1, 2 / 3]} mt={4}>
-                  <form id="howtoForm" onSubmit={handleSubmit}>
+                  <FormContainer id="howtoForm" onSubmit={handleSubmit}>
                     {/* How To Info */}
                     <Flex flexDirection={'column'}>
                       <Flex
@@ -178,6 +182,11 @@ export class HowtoForm extends React.Component<IProps, IState> {
                           your How-To
                         </Heading>
                       </Flex>
+                      <Box
+                        sx={{ mt: '20px', display: ['block', 'block', 'none'] }}
+                      >
+                        <PostingGuidelines />
+                      </Box>
                       <Flex
                         card
                         mediumRadius
@@ -377,7 +386,8 @@ export class HowtoForm extends React.Component<IProps, IState> {
                                 icon={'add'}
                                 data-cy={'add-step'}
                                 mx="auto"
-                                my={20}
+                                mt={[10, 10, 20]}
+                                mb={[5, 5, 20]}
                                 variant="secondary"
                                 medium
                                 onClick={() => {
@@ -399,7 +409,7 @@ export class HowtoForm extends React.Component<IProps, IState> {
                         )}
                       </FieldArray>
                     </Flex>
-                  </form>
+                  </FormContainer>
                 </Flex>
                 {/* post guidelines container */}
                 <Flex
@@ -408,21 +418,28 @@ export class HowtoForm extends React.Component<IProps, IState> {
                   height={'100%'}
                   bg="inherit"
                   px={2}
-                  mt={4}
+                  mt={[0, 0, 4]}
                 >
-                  <Box sx={{ position: 'fixed', maxWidth: '400px' }}>
-                    <PostingGuidelines />
+                  <Box
+                    sx={{
+                      position: ['relative', 'relative', 'fixed'],
+                      maxWidth: ['inherit', 'inherit', '400px'],
+                    }}
+                  >
+                    <Box sx={{ display: ['none', 'none', 'block'] }}>
+                      <PostingGuidelines />
+                    </Box>
                     <Button
                       data-cy={'draft'}
                       onClick={() => this.trySubmitForm(true)}
                       width={1}
-                      mt={3}
+                      mt={[0, 0, 3]}
                       variant={disabled ? 'secondary' : 'secondary'}
                       type="submit"
                       disabled={submitting}
                       sx={{ display: 'block' }}
                     >
-                      {formValues.moderation === 'draft' ? (
+                      {formValues.moderation !== 'draft' ? (
                         <span>Save to draft</span>
                       ) : (
                         <span>Revert to draft</span>
@@ -436,6 +453,7 @@ export class HowtoForm extends React.Component<IProps, IState> {
                       variant={disabled ? 'primary' : 'primary'}
                       type="submit"
                       disabled={submitting}
+                      sx={{ mb: ['40px', '40px', 0] }}
                     >
                       <span>Publish</span>
                     </Button>