Skip to content

Feat: made cards and developed event section (anitab-org#123) - #171

Merged
annabauza merged 6 commits into
anitab-org:developfrom
Bucky25:develop
Feb 7, 2021
Merged

Feat: made cards and developed event section (anitab-org#123)#171
annabauza merged 6 commits into
anitab-org:developfrom
Bucky25:develop

Conversation

@Bucky25

@Bucky25 Bucky25 commented Dec 2, 2020

Copy link
Copy Markdown
Contributor

Description

I have implemented the Events card Component ,taking the data from events_and_highlights.js which will reflected on the events page of the web-app.

Fixes #123

Type of Change:

Delete irrelevant options.

  • Code

Code/Quality Assurance Only

  • Bug fix (non-breaking change which fixes an issue)

  • New feature (non-breaking change which adds functionality pre-approved by mentors)

How Has This Been Tested?

I have tested the implementation and responsiveness.
here is the deployed link.
https://bucky25.github.io/anitab-org.github.io/

Checklist:

Delete irrelevant options.

  • My PR follows the style guidelines of this project
  • I have performed a self-review of my own code or materials
  • I have attached link of deployed site.
  • Any dependent changes have been merged

Code/Quality Assurance Only

  • My changes generate no new warnings

@Bucky25 Bucky25 changed the title Eeat: made cards and developed event section (anitab-org#123) Feat: made cards and developed event section (anitab-org#123) Dec 2, 2020
@nandini45
nandini45 requested review from annabauza and removed request for annabauza December 4, 2020 11:48
@nandini45

Copy link
Copy Markdown
Member

@tichnas can you review this one?

Comment thread src/Components/Events/Cards/index.js Outdated
import { withCard } from './../../../Decorators/Card';
import Badge from './CardBadge';

const EventCard = ({ props, isOver }) => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isOver is not being used anywhere. Please remove it if not required

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isOver is required

<Badge text={props.location} link={require('./../../../assets/events_and_highlights/location.png')} />
<Badge text={props.timings} link={require('./../../../assets/events_and_highlights/time.png')} />
<View style={{marginTop: 32}}>
{props.description.map((detail,index) => (

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use index as a key to the child when using map (refer the warnings in the console)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call with index as key.

}}
onPress={() => {Linking.openURL(props.know_more.link)}}
>
{props.know_more.par}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's just the words Know More > and not a full paragraph

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

know more has to substituted by para given in content i have asked it in issue

Comment thread src/Components/Events/index.js Outdated

const events_highlight = getevents_highlights();

class Events extends React.Component {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use Functional components

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please tell me what difference it will make as class component are better as for further usage of states

Comment thread src/Components/Events/Cards/index.js Outdated
<ScaledImage width={286} source={props.highlights.source} />
<Text style={styles.title}>{props.title}</Text>
<Badge text={props.date} link={require('./../../../assets/events_and_highlights/calendar.png')} />
<Badge text={props.location} link={require('./../../../assets/events_and_highlights/location.png')} />

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest using Icons instead of images (in Badge component)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for this we have to to install a dependency can i can do that like material or others

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please move it to content js so each card have one source of truth regards the content. Thanks.

Comment thread src/Components/Events/Cards/index.js Outdated
color: '#103B81',
fontWeight: '400',
fontSize: 16,
marginTop: 12,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be 16 instead of 12

Comment thread src/Components/Events/Cards/index.js Outdated
borderRadius: 4,
overflow: 'hidden',
},
cardContent: {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not used anywhere

Comment thread src/Components/Events/index.js Outdated
style={{
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: 30,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make this a power of 2, maybe 32

Comment thread src/Components/Events/index.js Outdated
key={event_detail.title}
props={event_detail}
backgroundColor="#e7edfd"
padding={12}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make this a power of 2, maybe 16

@tichnas tichnas left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Bucky25 Thanks for the PR. I've requested some changes which I think you should do before an admin review.

@Bucky25

Bucky25 commented Dec 7, 2020

Copy link
Copy Markdown
Contributor Author

@tichnas i have made all changes suggested by you and only one thing should i install any dependency to to make present icons but same type icons are in projects card so i did same as there and and about the functional component is is working fine
thanks for suggesting changes and pointing out some mistakes that i have made

@Bucky25

Bucky25 commented Dec 10, 2020

Copy link
Copy Markdown
Contributor Author

@nandini45 do i have to use another dependency to add icons of calendar , location or images that i have done is fine
as project cards also uses images to do that

@nandini45

Copy link
Copy Markdown
Member

@Bucky25 the project card one is fine

@Bucky25

Bucky25 commented Dec 12, 2020

Copy link
Copy Markdown
Contributor Author

@Bucky25 the project card one is fine

so do i have to change any thing else in this or its fine


const events_highlight = getevents_highlights();

function Events () {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use arrow function here for consistency as it's being used everywhere else.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is no arrow function in other component index.js so i have also made the same .

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, leave it like this only then. Sorry for this.

@tichnas tichnas left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete package-lock.json file as it isn't required for yarn package manager (which we are using).

@tichnas

tichnas commented Dec 16, 2020

Copy link
Copy Markdown
Contributor

@nandini45 To be honest, the cards look weird to me. Can you please take a look at the deployed website (https://bucky25.github.io/anitab-org.github.io/ > Events) to make sure that this was the design that was thought initially?
Also, if the implemented design is correct, can we please have another issue for redesigning the cards 😅

@annabauza annabauza left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icons are too big and in wrong colors, apart from that I left several comments. Thanks

Comment thread src/Components/Events/Cards/index.js Outdated
<View style={{marginTop: 32}}>
{props.description.map((detail,index) => (
<Text
style={{

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please keep styles separately

<Badge text={props.location} link={require('./../../../assets/events_and_highlights/location.png')} />
<Badge text={props.timings} link={require('./../../../assets/events_and_highlights/time.png')} />
<View style={{marginTop: 32}}>
{props.description.map((detail,index) => (

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call with index as key.

Comment thread src/Components/Events/Cards/index.js Outdated
<ScaledImage width={286} source={props.highlights.source} />
<Text style={styles.title}>{props.title}</Text>
<Badge text={props.date} link={require('./../../../assets/events_and_highlights/calendar.png')} />
<Badge text={props.location} link={require('./../../../assets/events_and_highlights/location.png')} />

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please move it to content js so each card have one source of truth regards the content. Thanks.

@annabauza

Copy link
Copy Markdown
Contributor

is this the same PR as #173 ?

@annabauza annabauza added the Status: Changes Requested Changes are required to be done by the PR author. label Dec 23, 2020
@Bucky25

Bucky25 commented Dec 23, 2020

Copy link
Copy Markdown
Contributor Author

is this the same PR as #173 ?

no both are different issues and thanks for reviewing it

@annabauza

Copy link
Copy Markdown
Contributor

Thanks @Bucky25 please change the label whenever it's ready to review :)

@Bucky25

Bucky25 commented Jan 23, 2021

Copy link
Copy Markdown
Contributor Author

@annabauza please review it once .

@Vishal-raj-1

Copy link
Copy Markdown

@Bucky25 Please resolve conflicts and squash your commits !!

Comment thread src/Components/Events/index.js Outdated
@annabauza
annabauza merged commit 99d0c40 into anitab-org:develop Feb 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Status: Changes Requested Changes are required to be done by the PR author.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

coding: make cards and develop the event section in event page

5 participants