Hi, @Gopavasanth
I would like to work on this task.

Hi @Sandyabhi, Welcome! Thanks for showing interest to work on this task, Please feel free to claim this task by clicking on Edit Task -> Add your name in the Assignee section and save it! Looking forward to hearing your updates :))

@Sandyabhi, Do you have progress on this task? Can you share your update on this task? If you are facing any issue or still confused please feel free to reach us :)

@Gopavasanth I had fixed the issue. There is difficulty in understanding how to push the code in wikimedia.

Hi, That's AWESOME! Please see https://m.mediawiki.org/wiki/Gerrit/Tutorial#Submit_a_patch

Let me know if you still have any issue :)

Change 658900 had a related patch set uploaded (by Sandyabhi; owner: Sandyabhi):
[labs/tools/VideoCutTool@master] T272401

https://gerrit.wikimedia.org/r/658900

@Sandyabhi , Thanks for your first commit!!! After testing your patch-set (Image displayed below), I have a couple of suggestions:

• You can try to have a menu icon on the right top so you can push Login/Logout in the mobile view into the menu.
• You can also move the language drop-down menu to the menu list in the mobile view.
• Also try to check if the logo creating any issue i.e enlarging the header if so you can avoid displaying the logo in the mobile view.

Please let us know if any of the above points are not clear to you :)

Hi @Sandyabhi !

Thanks for your patches!! You created two patches [1] and [2]. Please have a look at https://www.mediawiki.org/wiki/Gerrit/Tutorial#Amending_a_change_(your_own_or_someone_else's) for amending your commits to avoid duplicate patches. Also see https://www.mediawiki.org/wiki/Gerrit/Commit_message_guidelines for writing the proper commit message :)

I'm confused about which patch to review, Can you please let us know which to review and which to abandon?

[1] https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/658900
[2] https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/659287

HI @Gopavasanth , I have abandoned [2] https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/659287

@Gopavasanth , after refreshing the page in mobile view it adjust the header for mobile

In T272401#6781184, @Gopavasanth wrote:

@Sandyabhi , Thanks for your first commit!!! After testing your patch-set (Image displayed below), I have a couple of suggestions:

• You can try to have a menu icon on the right top so you can push Login/Logout in the mobile view into the menu.

Hi @Sandyabhi, Thanks for your patch!! Sorry if this point is unclear to you, So I designed mockups for better understanding, As shown in the below images, I was imagining all the options (language dropdown, login, and logout) in the tool's header goes into this menu, so how does that sounds for you?

Before clicking the menu in the header	After clicking the menu in the header

Hi @Gopavasanth, I make the mobile view (Images shown below). Can you tell whether it is fine or not.

Before clicking the menu		After clicking the menu

Hey @Sandyabhi Good work!! I have a couple of thoughts, and lemme share the feedback here:

• "Register/Login" is aligned towards the center and "English" is aligned towards the left, let us follow the one alignment, maybe to left?
• Two elements (Register/Login and English) seem like not in a single panel, so try to push them to a single panel menu options
• I would think three dots in the header doesn't look like a good idea so would still advise changing to three bards menu icon (As per T272401#6794919)

Hi @Gopavasanth , I made some changes in

>menu icon 
>"Register/Login" and "English" text is aligned towards the left
>buttons are aligned in a single panel

Before clicking the menu	After clicking the menu

Is it fine or need other changes.

Two elements (Register/Login and English) seem like not in a single panel, so try to push them to a single panel menu options

I think that bullet point from T272401#6803007 still stands: Visually speaking there is no menu panel. Also, on a screen with limited width and unknown width of each element, personally I wouldn't order a list of elements horizontally instead of ordering vertically. Could you elaborate on the UX idea behind that?

Hi @Aklapper , I order the list vertically.

Is it fine now.

@Aklapper, Ah I wasn't mean to advise the elements to change the horizontal way, As per T272401#6794919 image the elements are vertically aligned but those two doesn't stay in a single div as shown in T272401#6809056, So the recent changes div with background dark color Look's good to me :)

Change 659824 had a related patch set uploaded (by Sandyabhi; owner: Sandyabhi):
[labs/tools/VideoCutTool@master] Change the menu display for mobile view

https://gerrit.wikimedia.org/r/659824

Hey @Sandyabhi, I just tested your patch and it displays as shown below in the browser firefox. I would suggest not to add the menu button in the web view but would be good in mobile view. (Optional to see this off Wikimedia site, for some inspiration between web view and mobile view for the better understanding of the behavior)

If you are not able to login to the VideoCutTool locally for testing purpose, point the back-end URL from backend_url: "http://localhost:4000" to backend_url: "https://videocuttool.wmflabs.org/video-cut-tool-back-end" in your env.js file

Change 659824 abandoned by Sandyabhi:
[labs/tools/VideoCutTool@master] Change the menu display for mobile view

Reason:
Wrong code

https://gerrit.wikimedia.org/r/659824

Change 659824 restored by Sandyabhi:
[labs/tools/VideoCutTool@master] Change the menu display for mobile view

https://gerrit.wikimedia.org/r/659824

Hi @Sandyabhi! Do you have any progress on this? We are waiting this task to be done so we can deploy and announce the later version of the tool to the community :)

Change 665004 had a related patch set uploaded (by Sandyabhi; owner: Sandyabhi):
[labs/tools/VideoCutTool@master] Change the menu display for mobile view

https://gerrit.wikimedia.org/r/665004

Hey @Sandyabhi, Good work! I just tested your patch, I couldn't find the dark theme switch option on the mobile screen menu with your patch, Can you please send the screenshot if it's the same with you?

Hi @Gopavasanth , dark theme option is not working in menu. I tried different ways but it is not visible.

@Khr2003, Can you check the above messages and give provide your thoughts?

@Gopavasanth I think the main issue is styling header with float instead of flex. Since bootstrap is included already I though I make few changes to header section with few bootstrap classes. Also, bootstrap includes hamburger menu icon so no need to import another library.

Here are the screenshots of what I have completed.

Logged in:

Logged out:

Menu collapsed:

Good work @Khr2003! Can you create a patch-set with those changes you made? So let's look at your patch and also @Sandyabhi 's patch and go with the better one ;)

Change 665550 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/VideoCutTool@master] Adjusted responsive design

https://gerrit.wikimedia.org/r/665550

Change 666101 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/VideoCutTool@master] Adjusted responsive design

https://gerrit.wikimedia.org/r/666101

View of the latest change:

@Khr2003 Awesome and its so quick again!! @Sandyabhi are you still working on this task with a better approach? and what are your views on the Khr2003's patch?

Hi @Gopavasanth, @Khr2003 work is great and has better approach with less code and I am not working on it .

Change 666101 merged by jenkins-bot:
[labs/tools/VideoCutTool@master] Fixed responsive design

https://gerrit.wikimedia.org/r/666101

Change 665550 abandoned by Gopavasanth:
[labs/tools/VideoCutTool@master] Adjusted responsive design

Reason:
Suppressed by https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/ /666101/

https://gerrit.wikimedia.org/r/665550

Change 665004 abandoned by Gopavasanth:
[labs/tools/VideoCutTool@master] Change the menu display for mobile view

Reason:
Suppressed by: https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/ /666101/

https://gerrit.wikimedia.org/r/665004

Change 659824 abandoned by Gopavasanth:
[labs/tools/VideoCutTool@master] Change the menu display for mobile view

Reason:
Suppressed by: https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/ /666101/

https://gerrit.wikimedia.org/r/659824

@Gopavasanth
I can either hide the overflowing text using ellipses

or break it

Which one should I go with?

Hey @Khr2003 second one seems to be good for me.

Change 672992 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/VideoCutTool@master] Fixed responsive design

https://gerrit.wikimedia.org/r/672992

Change 672992 merged by jenkins-bot:
[labs/tools/VideoCutTool@master] Fixed responsive design

https://gerrit.wikimedia.org/r/672992

Change 658900 abandoned by Gopavasanth:

[labs/tools/VideoCutTool@master] T272401

Reason:

https://gerrit.wikimedia.org/r/658900