[GSoC'18 Web App]: Query regarding current design approach

[Abhay Chawla <ab...@gmail.com>]

Hello Everyone,

This is regarding the current design implementation in the web app.
Currently, wherever we have forms it was decided that we follow a single
column approach along with the implementation of angular-archwizard.
According to me, we have a lot of space on larger screens like desktops
where due to this a lot of space remains vacant on the left and right side.
Therefore I think we should follow a two column approach for larger screens
and single column for smaller screens only.
Also, we should use the angular material stepper instead of angular
archwizard as although the angular archwizard supports the case to disable
the wizard view if its not required, it has only been updated to support
Angular 5 till now. Instead material stepper can be used where wizard view
is required and simple material card design approach be used where it isn't.

@Gaurav @Pranjal @Maulik @Santosh @Ed please let us know your opinion
regarding the same.
I have attached screenshots for the single column and two column approaches
for your reference.

Thanks
Abhay.

Re: [GSoC'18 Web App]: Query regarding current design approach

[Anwesh Krishna Nayak <an...@gmail.com>]

Also regarding the module I am using I have tested it end to end for
angular 6 for every test cases required as it was in previous version of
community app. No issues for me yet.

Apart from that I have stuck to Material angular so far only. Just only
this exception to suit the UI.

Material stepper has huge disadvantages:

   - two columns looks quite huge
   - not adhering to material design guidelines for forms

Below I am sharing quick links of UI screens. I did experiment and
researched a lot before coming up with this.


   1. https://codepen.io/mildrenben/pen/raqJvy
   2. https://codepen.io/jonnitto/pen/OVmvPB
   3. https://codepen.io/sevilayha/pen/IdGKH
   4. https://codepen.io/creativetim/pen/EgVBXa



On Fri, Jul 20, 2018 at 9:21 PM, Abhay Chawla <ab...@gmail.com>
wrote:

> Hello Everyone,
>
> This is regarding the current design implementation in the web app.
> Currently, wherever we have forms it was decided that we follow a single
> column approach along with the implementation of angular-archwizard.
> According to me, we have a lot of space on larger screens like desktops
> where due to this a lot of space remains vacant on the left and right side.
> Therefore I think we should follow a two column approach for larger screens
> and single column for smaller screens only.
> Also, we should use the angular material stepper instead of angular
> archwizard as although the angular archwizard supports the case to disable
> the wizard view if its not required, it has only been updated to support
> Angular 5 till now. Instead material stepper can be used where wizard view
> is required and simple material card design approach be used where it isn't.
>
> @Gaurav @Pranjal @Maulik @Santosh @Ed please let us know your opinion
> regarding the same.
> I have attached screenshots for the single column and two column
> approaches for your reference.
>
> Thanks
> Abhay.
>

Re: [GSoC'18 Web App]: Query regarding current design approach

[Gaurav Saini <ga...@gmail.com>]

Hello Anwesh and Abhay,

I would say it is good to use as much space as possible, otherwise use have
to scroll down when we have a lot many fields in forms. For Stepper I would
say stick to what angular material officially provides.

Also, One thing to note is that you both should work in parallel and follow
same approach otherwise there will be re-work either way. One of the reason
to select strictly angular material is there is symmetry in code and no one
applies hacks or custom components/libraries. Please try to co-originate
and work in a team :)

Thanks
Gaurav

On Fri, Jul 20, 2018 at 10:28 PM Anwesh Krishna Nayak <
anweshknayak@gmail.com> wrote:

> It can't be done later. It will be quite tedious to change things over and
> over as we have gone through it already. It takes a lot of time for UI and
> also for responsiveness.
>
> So if we could quickly finalized which one to be used. Just to be clear
> the current angular wizard is purely material and has no issues.
>
> On Fri, Jul 20, 2018 at 10:10 PM, Abhay Chawla <ab...@gmail.com>
> wrote:
>
>> I understand it is time-consuming. It has been the same for me.
>>
>> Although it might not be possible to change where it has been implemented
>> right now due to time constraints, it would be helpful if there could be
>> some clarity regarding which approach to be followed so that it can be
>> implemented for the components that are left to be implemented.
>>
>> Anwesh and I have used different approaches and later in time one of us
>> will have to update but it can be done later so that we can progress
>> further right now.
>>
>> For now, if I could have some clarity the new components can be
>> implemented accordingly.
>>
>> Abhay.
>>
>> On Fri, Jul 20, 2018 at 9:52 PM Anwesh Krishna Nayak <
>> anweshknayak@gmail.com> wrote:
>>
>>> I think we should stick to the former with single column.
>>>
>>>  Also I have done most of the work based on on already. It will be time
>>> talking to change things again. As few weeks are left and thing needs to be
>>> moving rapid. Also I discussed the same with Santosh.
>>>
>>> We have already changed from ng bootstrap to material. It was time
>>> consuming. I say let's not waste more time.
>>>
>>> Moreover the purpose of single column is that we could divide it into
>>> various wizards. So that it will be easy to fill up. Previous form design
>>> in community app was similar to the two column which had many
>>> inconsistencies I faced during fixing it and making it responsive was more
>>> tedious.
>>>
>>> Thanks
>>>
>>> On Fri, 20 Jul 2018, 21:22 Abhay Chawla, <ab...@gmail.com>
>>> wrote:
>>>
>>>> Hello Everyone,
>>>>
>>>> This is regarding the current design implementation in the web app.
>>>> Currently, wherever we have forms it was decided that we follow a single
>>>> column approach along with the implementation of angular-archwizard.
>>>> According to me, we have a lot of space on larger screens like desktops
>>>> where due to this a lot of space remains vacant on the left and right side.
>>>> Therefore I think we should follow a two column approach for larger screens
>>>> and single column for smaller screens only.
>>>> Also, we should use the angular material stepper instead of angular
>>>> archwizard as although the angular archwizard supports the case to disable
>>>> the wizard view if its not required, it has only been updated to support
>>>> Angular 5 till now. Instead material stepper can be used where wizard view
>>>> is required and simple material card design approach be used where it isn't.
>>>>
>>>> @Gaurav @Pranjal @Maulik @Santosh @Ed please let us know your opinion
>>>> regarding the same.
>>>> I have attached screenshots for the single column and two column
>>>> approaches for your reference.
>>>>
>>>> Thanks
>>>> Abhay.
>>>>
>>>
>

-- 
Regards,
*Gaurav Saini*

Re: [GSoC'18 Web App]: Query regarding current design approach

[Anwesh Krishna Nayak <an...@gmail.com>]

It can't be done later. It will be quite tedious to change things over and
over as we have gone through it already. It takes a lot of time for UI and
also for responsiveness.

So if we could quickly finalized which one to be used. Just to be clear the
current angular wizard is purely material and has no issues.

On Fri, Jul 20, 2018 at 10:10 PM, Abhay Chawla <ab...@gmail.com>
wrote:

> I understand it is time-consuming. It has been the same for me.
>
> Although it might not be possible to change where it has been implemented
> right now due to time constraints, it would be helpful if there could be
> some clarity regarding which approach to be followed so that it can be
> implemented for the components that are left to be implemented.
>
> Anwesh and I have used different approaches and later in time one of us
> will have to update but it can be done later so that we can progress
> further right now.
>
> For now, if I could have some clarity the new components can be
> implemented accordingly.
>
> Abhay.
>
> On Fri, Jul 20, 2018 at 9:52 PM Anwesh Krishna Nayak <
> anweshknayak@gmail.com> wrote:
>
>> I think we should stick to the former with single column.
>>
>>  Also I have done most of the work based on on already. It will be time
>> talking to change things again. As few weeks are left and thing needs to be
>> moving rapid. Also I discussed the same with Santosh.
>>
>> We have already changed from ng bootstrap to material. It was time
>> consuming. I say let's not waste more time.
>>
>> Moreover the purpose of single column is that we could divide it into
>> various wizards. So that it will be easy to fill up. Previous form design
>> in community app was similar to the two column which had many
>> inconsistencies I faced during fixing it and making it responsive was more
>> tedious.
>>
>> Thanks
>>
>> On Fri, 20 Jul 2018, 21:22 Abhay Chawla, <ab...@gmail.com>
>> wrote:
>>
>>> Hello Everyone,
>>>
>>> This is regarding the current design implementation in the web app.
>>> Currently, wherever we have forms it was decided that we follow a single
>>> column approach along with the implementation of angular-archwizard.
>>> According to me, we have a lot of space on larger screens like desktops
>>> where due to this a lot of space remains vacant on the left and right side.
>>> Therefore I think we should follow a two column approach for larger screens
>>> and single column for smaller screens only.
>>> Also, we should use the angular material stepper instead of angular
>>> archwizard as although the angular archwizard supports the case to disable
>>> the wizard view if its not required, it has only been updated to support
>>> Angular 5 till now. Instead material stepper can be used where wizard view
>>> is required and simple material card design approach be used where it isn't.
>>>
>>> @Gaurav @Pranjal @Maulik @Santosh @Ed please let us know your opinion
>>> regarding the same.
>>> I have attached screenshots for the single column and two column
>>> approaches for your reference.
>>>
>>> Thanks
>>> Abhay.
>>>
>>

Re: [GSoC'18 Web App]: Query regarding current design approach

[Abhay Chawla <ab...@gmail.com>]

I understand it is time-consuming. It has been the same for me.

Although it might not be possible to change where it has been implemented
right now due to time constraints, it would be helpful if there could be
some clarity regarding which approach to be followed so that it can be
implemented for the components that are left to be implemented.

Anwesh and I have used different approaches and later in time one of us
will have to update but it can be done later so that we can progress
further right now.

For now, if I could have some clarity the new components can be implemented
accordingly.

Abhay.

On Fri, Jul 20, 2018 at 9:52 PM Anwesh Krishna Nayak <an...@gmail.com>
wrote:

> I think we should stick to the former with single column.
>
>  Also I have done most of the work based on on already. It will be time
> talking to change things again. As few weeks are left and thing needs to be
> moving rapid. Also I discussed the same with Santosh.
>
> We have already changed from ng bootstrap to material. It was time
> consuming. I say let's not waste more time.
>
> Moreover the purpose of single column is that we could divide it into
> various wizards. So that it will be easy to fill up. Previous form design
> in community app was similar to the two column which had many
> inconsistencies I faced during fixing it and making it responsive was more
> tedious.
>
> Thanks
>
> On Fri, 20 Jul 2018, 21:22 Abhay Chawla, <ab...@gmail.com> wrote:
>
>> Hello Everyone,
>>
>> This is regarding the current design implementation in the web app.
>> Currently, wherever we have forms it was decided that we follow a single
>> column approach along with the implementation of angular-archwizard.
>> According to me, we have a lot of space on larger screens like desktops
>> where due to this a lot of space remains vacant on the left and right side.
>> Therefore I think we should follow a two column approach for larger screens
>> and single column for smaller screens only.
>> Also, we should use the angular material stepper instead of angular
>> archwizard as although the angular archwizard supports the case to disable
>> the wizard view if its not required, it has only been updated to support
>> Angular 5 till now. Instead material stepper can be used where wizard view
>> is required and simple material card design approach be used where it isn't.
>>
>> @Gaurav @Pranjal @Maulik @Santosh @Ed please let us know your opinion
>> regarding the same.
>> I have attached screenshots for the single column and two column
>> approaches for your reference.
>>
>> Thanks
>> Abhay.
>>
>

Re: [GSoC'18 Web App]: Query regarding current design approach

[Anwesh Krishna Nayak <an...@gmail.com>]

I think we should stick to the former with single column.

 Also I have done most of the work based on on already. It will be time
talking to change things again. As few weeks are left and thing needs to be
moving rapid. Also I discussed the same with Santosh.

We have already changed from ng bootstrap to material. It was time
consuming. I say let's not waste more time.

Moreover the purpose of single column is that we could divide it into
various wizards. So that it will be easy to fill up. Previous form design
in community app was similar to the two column which had many
inconsistencies I faced during fixing it and making it responsive was more
tedious.

Thanks

On Fri, 20 Jul 2018, 21:22 Abhay Chawla, <ab...@gmail.com> wrote:

> Hello Everyone,
>
> This is regarding the current design implementation in the web app.
> Currently, wherever we have forms it was decided that we follow a single
> column approach along with the implementation of angular-archwizard.
> According to me, we have a lot of space on larger screens like desktops
> where due to this a lot of space remains vacant on the left and right side.
> Therefore I think we should follow a two column approach for larger screens
> and single column for smaller screens only.
> Also, we should use the angular material stepper instead of angular
> archwizard as although the angular archwizard supports the case to disable
> the wizard view if its not required, it has only been updated to support
> Angular 5 till now. Instead material stepper can be used where wizard view
> is required and simple material card design approach be used where it isn't.
>
> @Gaurav @Pranjal @Maulik @Santosh @Ed please let us know your opinion
> regarding the same.
> I have attached screenshots for the single column and two column
> approaches for your reference.
>
> Thanks
> Abhay.
>