Revoke Navigation Bar UI #996

Rbcoder1 · 2023-04-25T12:43:16Z

Changed The UI Of Navigation Bar and Revoke in as per PWA

As Per Our Discussion Here:- https://github.com/kiwix/kiwix-js/issues/523#issuecomment-1510203437 on this issue. I changed the navigation bar UI like PWA and Make a pull request

In this pull request I changed are as follow :

Changed the Kiwix Text into Kiwix Icon.
Move Search Bar In Top Menu
And Also Try To Re-engineer the collapsing of hamburger in very small screen.

KIwix Icon Chaged
I changed the kiwix text into kiwix icon that used in pwa version of kiwix

Serch Bar
Move the search bar in top navbar session as per pwa version

changed other text into icons
changes all text nav link into icon (about,config,random,search)

re-engine the hamburger
Change the hamburger into Three dots and make it visible in verticle or column view.

If Any Problem or Bug In request I Will Solved ASAP
That changes are made in first pull request and the remain are changed in next pull request.

Kiwix-JS Before Changes

Kiwix-JS After Changes

Hamburger :

Before Changes :

After Changes :

…keInterface

Jaifroid · 2023-04-26T07:43:15Z

Thanks for the new PR. However, the usual practice is that you simply push your changes to the same PR, rather than closing one that has errors and then opening a new one. No problem this time, but if changes are needed to this PR, simply push them to this one. Many thanks.

Jaifroid · 2023-04-26T07:44:53Z

PS I'll test and review when I get a chance. It's passing automated tests.

Rbcoder1 · 2023-04-26T08:28:17Z

Ok

Jaifroid · 2023-04-29T16:37:34Z

Thank you very much for this PR. It's a good start, and you have an interesting concept for the kebab menu!

Some suggestions:

I think the search button should always be showing, and always next to the search field.. Can you exclude it from the kebab?
The Kiwix icon (top home) is always pressed after you load an archive and are browsing a ZIM, which looks a bit odd. I suggest it should be "unpressed" after a short period.
Clicking on some of the buttons (e.g. Config) doesn't work unless you centre the mouse directly over the icon inside the button. You should make the button clickable, not the icon within it;
Like in Kiwix JS PWA, buttons should be "unclickable" (if I am on Home, and I click Config, then I should be able to click Config again and it will return me to Home).

I noticed some rough edges:

Once the kebab button is pressed, resizing the window (making it larger) doesn't close the vertical menu;
The buttons in the kebab are unresponsive for me;
Spacing and positioning of icons isn't always correct (see screenshots below) -- additionally, the text in the search box should be further to the left, so as not to waste space.

I think the kebab should only show at very narrow screen widths. Mostly, there is enough space at normal mobile screen widths. And perhaps you can consider always showing the Config icon (as well as the search icon), so that only the Random and About buttons get hidden in the kebab? That might not work on the narrowest screens, I guess, but it's worth experimenting.

NB I haven't reviewed the code.

Rbcoder1 · 2023-04-30T02:22:09Z

Ok I will Fix this fix Push It.
Thanks for give this best suggestions.

Rbcoder1 · 2023-05-03T08:49:30Z

Thank you very much for this PR. It's a good start, and you have an interesting concept for the kebab menu!

Some suggestions:

I think the search button should always be showing, and always next to the search field.. Can you exclude it from the kebab?

The Kiwix icon (top home) is always pressed after you load an archive and are browsing a ZIM, which looks a bit odd. I suggest it should be "unpressed" after a short period.

Clicking on some of the buttons (e.g. Config) doesn't work unless you centre the mouse directly over the icon inside the button. You should make the button clickable, not the icon within it;

Like in Kiwix JS PWA, buttons should be "unclickable" (if I am on Home, and I click Config, then I should be able to click Config again and it will return me to Home).

I noticed some rough edges:

Once the kebab button is pressed, resizing the window (making it larger) doesn't close the vertical menu;

The buttons in the kebab are unresponsive for me;

Spacing and positioning of icons isn't always correct (see screenshots below) -- additionally, the text in the search box should be further to the left, so as not to waste space.

I think the kebab should only show at very narrow screen widths. Mostly, there is enough space at normal mobile screen widths. And perhaps you can consider always showing the Config icon (as well as the search icon), so that only the Random and About buttons get hidden in the kebab? That might not work on the narrowest screens, I guess, but it's worth experimenting.

NB I haven't reviewed the code.

I Update The Pull Request Yet. And Change The Code And Fix Issue you Pointed Above

Fix the Search Button Problem And Exclude it From Kebab Menu and Fix the spacing problem.
Fix the top-home Icon always pressed problem and it will unpressed after 3 seconds.
Fix the problem of button click in center now you can click anywhere on entire button it will affect.
Fix the problem of vertical menu is not closing after resizing window now it will working better you can resize window anywhere.
Fix the problem related to search spacing remove the extra space and code again to ensuring that no wasting of space.

You can Check the Fix and Test that it will help or not.

But I am not understanding this :

The buttons in the kebab are unresponsive for me;

Rbcoder1 · 2023-05-03T08:55:38Z

I Have One Idea That In Kiwix-Js We Remove The Text Version and Replace it To Kiwix Icon so We can not easily view the current version of kiwix now. yes it will be on another place in app. but i think when we hover on the top-icon we show the current version of kiwix-js there.

Jaifroid · 2023-05-03T10:24:55Z

I Have One Idea That In Kiwix-Js We Remove The Text Version and Replace it To Kiwix Icon so We can not easily view the current version of kiwix now. yes it will be on another place in app. but i think when we hover on the top-icon we show the current version of kiwix-js there.

I think hovering over the icon to view the version is OK, but remember it won't work on mobile.. So we should have a text version somewhere. See where I put it on the PWA (pwa.kiwix.org). This could be a separate issue/PR, as you wish.

Jaifroid · 2023-05-03T10:26:20Z

The buttons in the kebab are unresponsive for me

When I click on the kebab and then on one of the buttons that it show, nothing happens. But I'll test that again with your new commits and let you know if it still persists.

Rbcoder1 · 2023-05-03T12:23:41Z

The buttons in the kebab are unresponsive for me

When I click on the kebab and then on one of the buttons that it show, nothing happens. But I'll test that again with your new commits and let you know if it still persists.

Yes it will fix in this commit

Rbcoder1 · 2023-05-03T12:24:54Z

I Have One Idea That In Kiwix-Js We Remove The Text Version and Replace it To Kiwix Icon so We can not easily view the current version of kiwix now. yes it will be on another place in app. but i think when we hover on the top-icon we show the current version of kiwix-js there.

I think hovering over the icon to view the version is OK, but remember it won't work on mobile.. So we should have a text version somewhere. See where I put it on the PWA (pwa.kiwix.org). This could be a separate issue/PR, as you wish.

Yes
Else we can can add it into about / Config tab

Rbcoder1 · 2023-05-07T11:56:43Z

I am really sorry Understand that it was formated by my editor. That's why it look like this
I revert many files from them and there are only 5 files that I changed so revert back all unnecessary changes

Jaifroid · 2023-05-07T15:30:41Z

I am really sorry Understand that it was formated by my editor. That's why it look like this I revert many files from them and there are only 5 files that I changed so revert back all unnecessary changes

There's no need to apologize! I hope it's not too complicated to fix. You should find the setting in your editor and make sure you prettify (if you want to) only the sections of code that you have written, or that you are currently working on. You can usually just select the code you want to prettify, taking care to select only code you've written, or code that needs to be changed to accommodate what you've written.

Rbcoder1 · 2023-05-07T15:34:16Z

Yes i take care of it . And I Will Revert All the Changes Ok.

…

On Sun, 7 May 2023, 9:00 pm Jaifroid, ***@***.***> wrote: I am really sorry Understand that it was formated by my editor. That's why it look like this I revert many files from them and there are only 5 files that I changed so revert back all unnecessary changes There's no need to apologize! I hope it's not too complicated to fix. You should find the setting in your editor and make sure you prettify (if you want to) only the sections of code that you have written, or that you are currently working on. You can usually just select the code you want to prettify, taking care to select only code you've written, or code that needs to be changed to accommodate what you've written. — Reply to this email directly, view it on GitHub <#996 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZRVEQQ7SF7OR25DL3OFVEDXE652ZANCNFSM6AAAAAAXK6L5EM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

…kNavbar

www/img/icons/circle-info-solid.svg

Rbcoder1

I Review This Files And Revert Back uneccessary Changes From That

Rbcoder1

All changes reverted please check them again and tell is it right or any other changes needed.

Rbcoder1 · 2023-05-15T10:28:57Z

@Jaifroid Please Check It Again .
AND tell Me Is their Any changes Needed

Jaifroid · 2023-05-20T13:40:54Z

www/js/app.js

+    var btn = document.getElementById("collapbtn");
+    var navIcons = document.getElementById("horizontalNavBtn");
+
+    btn.addEventListener('click', () => {


As mentioned in CONTRIBUTING.md, we can't use arrow function syntax in this Repo yet, because we are still supporting old browsers and we are not yet using Babel to transpile. Please change.

Jaifroid

Apologies for the slow review, I've been completely snowed under with the day job.

Thank you for removing most of the extraneous code. There is still some small stuff to be removed (see comments).

It's good work so far! But I noticed some problems:

The about button sometimes disappears when resizing but the hamburger menu doesn't always show instead;
The Home button (Kiwix icon) remains "pressed", and doesn't seem to go back to neutral after a few seconds (you had mentioned this functionality);
If I click the Config button, I can't then "unclick" it to go back to the currently loaded article.
If I'm in Configuration and click the Random button, it doesn't then display the article;
The vertical menu sometimes gets misaligned, which looks quite ugly (see screenshot);
I wonder if it would be better for the hamburger menu to show a second row of buttons rather than stack them vertically. The vertical layout option is not very standard.

Jaifroid · 2023-05-20T13:45:29Z

www/js/app.js

@@ -71,12 +71,13 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
     * WARNING: Only change these paramaeters if you know what you are doing
     */
    // The current version number of this app
-    params['appVersion'] = '3.8.1'; // **IMPORTANT** Ensure this is the same as the version number in service-worker.js
+    params['appVersion'] = '3.8.1' ; // **IMPORTANT** Ensure this is the same as the version number in service-worker.js


Please remove space, it's not part of this PR.

Jaifroid · 2023-05-20T13:45:52Z

www/js/app.js

    // The PWA server (currently only for use with the Mozilla extension)
    params['PWAServer'] = 'https://moz-extension.kiwix.org/current/'; // Include final slash!
    // params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages
    // params['PWAServer'] = 'http://localhost:8080/'; // DEV: Uncomment this line (and adjust) for local testing
    // A parameter to determine the Settings Store API in use
+


Remove redundant extra line.

Jaifroid · 2023-05-20T13:47:45Z

www/js/lib/require.js

This file should not be altered in any way, as it's a dependency.

Jaifroid · 2023-05-20T13:48:22Z

www/js/lib/uiUtil.js

This file should not be altered in any way, as it is not part of the PR.

Jaifroid · 2023-05-20T14:05:20Z

Additionally, it's not possible to "unclick" the About button. See the PWA version for what I mean. When you have an article loaded, click on the Config icon, then click on that icon again (this is what I mean by "unclick"). Also do the same with the About button.

Rbcoder1 · 2023-05-21T01:43:29Z

Ok I Understand the unclick problem now I will solved ASAP. As I Mention that home button is disappear after 3 second but If you can't see the change then I will check that. For navhat I will stack them like bootstrap navbar ok. Thanks for review and suggestions for me.

…

On Sat, 20 May 2023, 7:35 pm Jaifroid, ***@***.***> wrote: Additionally, it's not possible to "unclick" the About button. See the PWA version <https://pwa.kiwix.org> for what I mean. When you have an article loaded, click on the Config icon, then click on that icon again (this is what I mean by "unclick"). Also do the same with the About button. — Reply to this email directly, view it on GitHub <#996 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZRVEQVJEHFLI6NQUXD5BBLXHDFSXANCNFSM6AAAAAAXK6L5EM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

…kNavbar

Rbcoder1 · 2023-07-20T01:47:04Z

I want to rework on this issue

Rbcoder1 added 11 commits April 24, 2023 17:00

Navigation Bar Chaged

c664205

Make Navbar Responsive

55441b2

Merge branch 'main' of https://github.com/Rbcoder1/kiwix-js into revo…

46ac62c

…keInterface

demo changed

09f1a74

Merge branch 'main' of https://github.com/Rbcoder1/kiwix-js into revo…

96e72a6

…keInterface

f

5cd2569

Merge branch 'main' of https://github.com/Rbcoder1/kiwix-js into revo…

ddcda6d

…keInterface

third commit

a4f7f7d

third commit

00a21be

third commit

9b81817

third commit

ba5c13b

Rbcoder1 mentioned this pull request Apr 26, 2023

Rework User Interface like Kiwix JS Windows #523

Open

Jaifroid assigned Rbcoder1 Apr 29, 2023

Jaifroid added the user interface label Apr 29, 2023

Rbcoder1 added 3 commits April 30, 2023 18:13

extra space remove searchbar

b86c287

Fix The Navbar Layout

579f710

fix navbar layout

b814961

Rbcoder1 added 2 commits May 6, 2023 10:01

Merge branch 'kiwix:main' into main

e3725f5

Merge branch 'main' into revokNavbar

02a71a7

Rbcoder1 added 7 commits May 7, 2023 15:41

revert

4fc4154

revert changes

282da00

revert files

f3f0c6c

revert files

a6791e8

revert files

4e8642a

revert files

9b5429c

Revert All Changes

311beae

Merge branch 'main' of github.com:kiwix/kiwix-js

4e3e081

Merge branch 'main' of https://github.com/Rbcoder1/kiwix-js into revo…

e1d44b2

…kNavbar

Rbcoder1 commented May 11, 2023

View reviewed changes

www/img/icons/circle-info-solid.svg Outdated Show resolved Hide resolved

Rbcoder1 commented May 11, 2023

View reviewed changes

all uneccesary changes reverted

8d78d97

This comment was marked as duplicate.

Sign in to view

Rbcoder1 commented May 11, 2023

View reviewed changes

This comment was marked as duplicate.

Sign in to view

Jaifroid reviewed May 20, 2023

View reviewed changes

Jaifroid requested changes May 20, 2023

View reviewed changes

Rbcoder1 added 3 commits June 3, 2023 15:52

Merge branch 'kiwix:main' into main

a3caa96

About Button Resized

d5ab086

Merge branch 'main' of https://github.com/Rbcoder1/kiwix-js into revo…

547f852

…kNavbar

Rbcoder1 force-pushed the revokNavbar branch from 7720653 to 547f852 Compare June 4, 2023 01:56

Jaifroid closed this Jul 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revoke Navigation Bar UI #996

Revoke Navigation Bar UI #996

Rbcoder1 commented Apr 25, 2023

Jaifroid commented Apr 26, 2023

Jaifroid commented Apr 26, 2023

Rbcoder1 commented Apr 26, 2023

Jaifroid commented Apr 29, 2023 •

edited

Loading

Rbcoder1 commented Apr 30, 2023

Rbcoder1 commented May 3, 2023

Rbcoder1 commented May 3, 2023 •

edited

Loading

Jaifroid commented May 3, 2023

Jaifroid commented May 3, 2023

Rbcoder1 commented May 3, 2023

Rbcoder1 commented May 3, 2023

Rbcoder1 commented May 7, 2023

Jaifroid commented May 7, 2023

Rbcoder1 commented May 7, 2023 via email

Rbcoder1 left a comment

This comment was marked as duplicate.

Rbcoder1 left a comment

This comment was marked as duplicate.

This comment was marked as duplicate.

Rbcoder1 commented May 15, 2023

Jaifroid May 20, 2023

Jaifroid left a comment

Jaifroid May 20, 2023

Jaifroid May 20, 2023

Jaifroid May 20, 2023

Jaifroid May 20, 2023

Jaifroid commented May 20, 2023

Rbcoder1 commented May 21, 2023 via email

Rbcoder1 commented Jul 20, 2023

Revoke Navigation Bar UI #996

Revoke Navigation Bar UI #996

Conversation

Rbcoder1 commented Apr 25, 2023

Jaifroid commented Apr 26, 2023

Jaifroid commented Apr 26, 2023

Rbcoder1 commented Apr 26, 2023

Jaifroid commented Apr 29, 2023 • edited Loading

Rbcoder1 commented Apr 30, 2023

Rbcoder1 commented May 3, 2023

Rbcoder1 commented May 3, 2023 • edited Loading

Jaifroid commented May 3, 2023

Jaifroid commented May 3, 2023

Rbcoder1 commented May 3, 2023

Rbcoder1 commented May 3, 2023

Rbcoder1 commented May 7, 2023

Jaifroid commented May 7, 2023

Rbcoder1 commented May 7, 2023 via email

Rbcoder1 left a comment

Choose a reason for hiding this comment

This comment was marked as duplicate.

Rbcoder1 left a comment

Choose a reason for hiding this comment

This comment was marked as duplicate.

This comment was marked as duplicate.

Rbcoder1 commented May 15, 2023

Jaifroid May 20, 2023

Choose a reason for hiding this comment

Jaifroid left a comment

Choose a reason for hiding this comment

Jaifroid May 20, 2023

Choose a reason for hiding this comment

Jaifroid May 20, 2023

Choose a reason for hiding this comment

Jaifroid May 20, 2023

Choose a reason for hiding this comment

Jaifroid May 20, 2023

Choose a reason for hiding this comment

Jaifroid commented May 20, 2023

Rbcoder1 commented May 21, 2023 via email

Rbcoder1 commented Jul 20, 2023

Jaifroid commented Apr 29, 2023 •

edited

Loading

Rbcoder1 commented May 3, 2023 •

edited

Loading