UI/UX improvement of badgeyay

[nanspro]

I'm submitting a ...

• [ ] bug report
• [x] feature request

Current behavior: Current UI is normal,it can be made better

[nanspro]

As Badgeyay is a small project i don't think there is anything left in it technically so final enhancements which we can do is improve it's UI

[nanspro]

@fossasia/badgeyay-admin What do you guys think about this?

[meets2tarun]

@nanspro Great! We would love to see the new UI/UX. Make a PR.

[gabru-md]

@nanspro great !

[meets2tarun]

@nanspro Please share your progress!

[vaibhavsingh97]

@nanspro If you finding any sort of problem than i am happy to collaborate

[nanspro]

@meets2tarun Due to Assignments i was not able to give time but i will work on this today and hopefully submit an PR by the end of the day.

[nanspro]

I am thinking about using "Vuejs" for UI improvements.

[nanspro]

@fossasia/badgeyay-admin you can suggest some particular things we can improve in current UI

[vaibhavsingh97]

@nanspro Can you use some prototype tool and show us some desings you are thinking of. Then only we can add some inputs 😄 And Why Vuejs? Any specific reason? We can use Angular v4

[nanspro]

@vaibhavsingh97 I am currently learning Vuejs as this will help me in My major project and i think it's cool

[jajodiaraghav]

Hi everyone. I would like to share my views on this issue:

1. I think integrating SPA packages such as Vue or Angular doesn't make any sense. SPAs are used when we have multiple components in a single frame, all interacting with one another (or external APIs) to make the application seamless. Badgeyay neither interacts with APIs. nor it has multiple components (It has just one : Upload)

2. We can instead integrate a nav-pills frame, which would separate the different functionalities of uploading files for easier navigation.

I would love to know what others think. Feel free to disagree (or correct me if I am wrong).

[vaibhavsingh97]

@jajodiaraghav ohh! Agreed with you, If we need UI enhancement we can make use of Bootstrap4 as it's genrally a UI refresh like cards, etc

[jajodiaraghav]

@vaibhavsingh97 Why do we need to switch to Bootstrap 4? Is there something that Bootstrap 3 doesn't have that we need?

I was thinking of separating the various upload options in bootstrap tabs. We can also you this (Optional) : https://github.com/kartik-v/bootstrap-tabs-x

[jajodiaraghav]

I would like to work on this if nobody is working on this.

[vaibhavsingh97]

We haven't finalized, I would like to propose prototype before development and after that we can go for Development. What are your opinion?

On 06-Oct-2017 15:20, "Raghav Jajodia" notifications@github.com wrote:

I would like to work on this if nobody is working on this.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fossasia/badgeyay/issues/210#issuecomment-334710575, or mute the thread https://github.com/notifications/unsubscribe-auth/AITVasklfO8Kf5lKoYO_b0MNeJLhrgjkks5spffygaJpZM4PoDwl .

[ParthS007]

Yes, It will great @vaibhavsingh97 if we have some prototype first and then develop which is best from them.

[jajodiaraghav]

I was thinking of separating the various upload options in bootstrap tabs. We can also you this (Optional) : https://github.com/kartik-v/bootstrap-tabs-x

[vaibhavsingh97]

Hi! i have exams so not able to design prototype but i will make for sure this weekend. If anybody wants to take this, you are free to take

[nanspro]

@vaibhavsingh97 i am having similar problems due to my major project and exams i won't be able to do anything till 12th

[jajodiaraghav]

I think we should finalize a prototype before proceeding with this one ✊

[vaibhavsingh97]

@jajodiaraghav I think me and @nanspro can collborate and submit prototype this saturday.

[vaibhavsingh97]

Initial Design Working link: https://pr.to/X3IYGF/ @jajodiaraghav @nanspro @S2606 Let me know your thoughts on this

[jajodiaraghav]

This looks really great! You did a lot of work there. Thanks @vaibhavsingh97 What are the fields that the "Enter Data" tab would contain? Or should the Enter data part be below the upload CSV section?

I think we should start working on this if others feel the same.

[vaibhavsingh97]

@jajodiaraghav I had designed this with reference to Material Design. We have two options either to use Materializecss or Angular. We can't use Angula as we use Angular when we have multiple components in a single frame, all interacting with one another (or external APIs) to make the application seamless. Badgeyay neither interacts with APIs. nor it has multiple components (It has just one : Upload). Only option left is Materializecss. I have choosen materiaizecss over bootstrap as its a front-end framework based on Material Design. What are your views?

[S2606]

Are we considering @djmgit point of decoupling the app for API creation of badgeyay?

[djmgit]

@jajodiaraghav @vaibhavsingh97 I too feel materializecss will do good for this work. Although we are not not presently interacting with external APIs, we may still use SPA frameworks like react or angular or vue but it will have a separate overhead, that is server side rendering. As of now since our project is server rendered (coupled), i guess materializecss is a simple and good option :)

[ParthS007]

@vaibhavsingh97 @jajodiaraghav materialize css is good option for this . We can start working on this and I also want to collaborate with you for this enhancement .

[jajodiaraghav]

I think it would be nice to assign a part of task to each and every contributor interested in working on this [Including me :)]. This way all will get a chance to contribute one by one. This should be done in a new branch and should only be merged when completed.

P1 can start with the basic layout, once P1 is done, P2 can integrate the dropdown. This will be followed by P3 doing something else. We should also add both frontend and backend for 'Custom Text'.

Thoughts?

[vaibhavsingh97]

@jajodiaraghav And you stole my words. Creating a new branch and working on one part is good idea. 👍

[ParthS007]

@jajodiaraghav agree with you :+1:

[djmgit]

@jajodiaraghav agreed with you, nice approach, would love to collaborate on this :)

[S2606]

@jajodiaraghav Ready to work...

[gabru-md]

@jajodiaraghav Great! Would love to work on this :)

[jajodiaraghav]

Can someone please break it into multiple sub tasks? I really want to integrate the drag-and-drop upload if others are okay with it.

Thanks :)

[vaibhavsingh97]

@jajodiaraghav I will open issues with the subtasks. Also, We need one new branch where we can work on 😄

[djmgit]

We also need to implement #284 as suggested bu @mariobehling

[mariobehling]

As a matter of fact the required features are not yet there and testing different options I get a bad request. This is not stable yet. Before a next version UI is tackled the app should be more stable. Please postpone.

[S2606]

@abishekvashok Since UI is now updated, can we close this??

[abishekvashok]

Sure I am closing this as this was meant for an old ui