Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Benj fix without issues #851

Merged
merged 7 commits into from
Jan 5, 2020
Merged

Benj fix without issues #851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1668c21
change wording on draft button
BenGamma Jan 5, 2020
556c442
center bottom text in eventsList
BenGamma Jan 5, 2020
3958020
display posting guidelines on mobile for event - fix a few margin
BenGamma Jan 5, 2020
ec3868c
[create howto] display create button & posting guidelines on mobile -…
BenGamma Jan 5, 2020
0f50229
[event create] check location field before submit form - prevent subm…
BenGamma Jan 5, 2020
864906f
[event create] fix onBlur method on url
BenGamma Jan 5, 2020
728ad83
add social-media metadata and image
BenGamma Jan 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Binary file added public/precious-plastic-logo-official.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 34 additions & 4 deletions src/pages/Events/Content/EventsCreate/EventsCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 {
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 0 additions & 3 deletions src/pages/Events/Content/EventsCreate/PostingGuidelines.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
4 changes: 3 additions & 1 deletion src/pages/Events/Content/EventsList/EventsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}>
Expand Down
34 changes: 26 additions & 8 deletions src/pages/Howto/Content/Common/Howto.form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'};
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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={() => {
Expand All @@ -399,7 +409,7 @@ export class HowtoForm extends React.Component<IProps, IState> {
)}
</FieldArray>
</Flex>
</form>
</FormContainer>
</Flex>
{/* post guidelines container */}
<Flex
Expand All @@ -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>
Expand All @@ -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>
Expand Down