New layout for mobile menu is ready. #2665

YegorSan · 2019-09-04T11:16:17Z

This PR is related to #2653 issue.

Motivation

New layout for mobile menu was requested.

Changelog

Created a new menu layout for mobile view.
*Not active state:

*

Active state:

Checklist for your PR

I added an entry to CHANGELOG.md with this PR
If I added new functionality, I added tests covering it.
If I fixed a bug, I added a regression test to prevent the bug from silently reappearing again.
I checked whether I should update the docs and did so if necessary
If I added/changed/removed ENV var, I should update the list of env vars in https://github.com/poanetwork/blockscout/blob/master/docs/env-variables.md to reflect changes in the table here https://poanetwork.github.io/blockscout/#/env-variables?id=blockscout-env-variables. I've set master in the Version column.
If I add new indices into DB, I checked, that they don't redundant with PGHero or other tools

vbaranov

@YegorSan as with previous PR too many unnecessary changes. Please check https://github.com/poanetwork/blockscout/pull/2665/files. Also, you can check which changes do you make before committing them.

Deleted untracked file from my code editor.

YegorSan · 2019-09-04T16:43:29Z

@vbaranov I have re-checked the files, should be better now. I am sorry, again VSCode turned on formatting for css files automatically.

…ile-menu

Added some changes to fix ESLINT issues

YegorSan · 2019-09-05T06:55:35Z

@vbaranov Sorry for such a huge list of commits. Lot of tests didn't pass yesterday (ESLINT, test_geth_http_websocket, etc). I've fixed all the issues.

vbaranov

@YegorSan @pashagonchar

I think elements in the header shouldn't jump on open menu https://www.loom.com/share/86f4fe08df8343b494054f478a390e83
Menu items are not centred as in @pashagonchar screenshot in the issue Menu mobile view #2653. I don't know should they be centred finally or not. @pashagonchar please check
The green dot is not vertically centred

vbaranov · 2019-09-05T10:37:45Z

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -30,7 +44,7 @@
              </span>
              <%= gettext("Blocks") %>
            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarBlocksDropdown">
+            <div class="dropdown-menu" id="checkIfSmall" aria-labelledby="navbarBlocksDropdown">        


@YegorSan unnecessary trailing whitespace

pashagonchar · 2019-09-05T11:08:29Z

@vbaranov
Menu items are not centred as in @pashagonchar screenshot in the issue #2653. I don't know should they be centred finally or not. @pashagonchar please check

Yes, I updated mockup in zeplin

YegorSan · 2019-09-05T12:46:09Z

@vbaranov Hello. I am working on performing mentioned above changes right now. Will try to resolve in the shortest terms.

YegorSan · 2019-09-05T19:36:15Z

@vbaranov Hi Victor. Just finished with the requested updates. All changes were performed. Please review. Thank you in advance.

vbaranov · 2019-09-06T12:31:25Z

apps/block_scout_web/assets/css/components/_navbar.scss

+  margin-right: -7px !important;
+  padding-right: 0px;
+  height: 20px!important;
+  border-left: 1px solid #828ba0a1!important;


@YegorSan is the correct color hex here? It looks like it is invalid colour hex. It should be 3-byte hexadecimal code

vbaranov · 2019-09-06T12:34:56Z

@YegorSan in addition, elements are still jumping https://www.loom.com/share/71119ba076624298aeace00fc02d2a5e

vbaranov · 2019-09-06T12:37:43Z

@YegorSan in addition, I don't see dark mode switcher in the desktop mode anymore

… correct hex color.

…ile-menu

YegorSan · 2019-09-07T22:26:38Z

@vbaranov Hello. I've added fixed height for logo (was max-height: 28px now height: 28px). Jumping issue is resolved now.
https://www.loom.com/share/3b9d72fdf09f4954a2333d838c40d101
I was not able to reproduce this issue locally as Blockscout main logo appearing by default, when I switched to Ethereum logo - issue was reproduced. Should be better now. Also changed color to 3-byte hexadecimal code, and dark mode switcher is appearing now in desktop mode. Please review. Thank's in advance.

vbaranov · 2019-09-09T19:56:32Z

@YegorSan please resolve merging conflicts

YegorSan · 2019-09-09T22:01:57Z

@vbaranov Merging conflicts seems to be solved. Could you please review? Thank's in advance.

vbaranov · 2019-09-10T08:31:30Z

@YegorSan changelog entry...

YegorSan · 2019-09-10T09:12:30Z

@vbaranov I am sorry. Changelog is updated.

vbaranov

@YegorSan

Dark mode switcher is not clickable in a mobile view

…ile-menu

YegorSan · 2019-09-10T10:56:15Z

@vbaranov Hello Victor. I am sorry again, forgot to add separate JS onClick function for new button created. Now button is clickable and working as it expected.

YegorSan added 2 commits September 4, 2019 12:13

Created new layout for mobile menu

2c9af69

Modified navbar.scss removed unnecessary lines

eb7aca6

vbaranov requested changes Sep 4, 2019

View reviewed changes

YegorSan added 3 commits September 4, 2019 19:18

Removed Unnecessary spaces from navbar.scss file

1a456a5

Delete settings.json

c3221bd

Deleted untracked file from my code editor.

Merge branch 'master' into mobile-menu

4600338

YegorSan added 10 commits September 4, 2019 22:46

ESLINT tests should pass now

47b0129

Merge branch 'mobile-menu' of github.com:YegorSan/blockscout into mob…

b18878f

…ile-menu

ESLINT tests should pass now.

ef95d74

Added some changes to fix ESLINT issues

Gettext test should pass

98072db

Gettext test should pass

7a16860

ESLINT test should pass, merging conflict should be solved

a749113

ESLINT tests failure recheck

a03f364

ESLINT tests failure recheck1

ba059db

ESLINT tests failure recheck2

0aaab5d

ESLINT tests failure recheck3

63ce594

Added update to Changelog

d6a6416

vbaranov self-requested a review September 5, 2019 10:36

vbaranov requested changes Sep 5, 2019

View reviewed changes

YegorSan added 2 commits September 5, 2019 22:26

All requested changes for mobile menu performed

50ae7ca

Removed spaces in dark-theme.scss file

f88e991

Merge branch 'master' into mobile-menu

ab22875

vbaranov self-requested a review September 6, 2019 11:50

vbaranov requested changes Sep 6, 2019

View reviewed changes

YegorSan added 2 commits September 8, 2019 01:12

Added fixed height for logo. Jumping issue should be fixed now. Added…

2de5234

… correct hex color.

Merge branch 'mobile-menu' of github.com:YegorSan/blockscout into mob…

8e66349

…ile-menu

Gettext issue should be fixed.

00fcab6

YegorSan added 3 commits September 10, 2019 00:22

Resolve merging conflict.

c9a5914

Merge branch 'master' into mobile-menu

a251eab

Gettext issue fixed.

09c5ac7

Update CHANGELOG.md

2d72206

vbaranov self-requested a review September 10, 2019 10:11

vbaranov requested changes Sep 10, 2019

View reviewed changes

YegorSan added 2 commits September 10, 2019 13:51

Added new function for new-button

7b8ae12

Merge branch 'mobile-menu' of github.com:YegorSan/blockscout into mob…

65d8679

…ile-menu

vbaranov self-requested a review September 10, 2019 12:06

vbaranov approved these changes Sep 10, 2019

View reviewed changes

vbaranov merged commit e708063 into blockscout:master Sep 10, 2019

Abuchtela mentioned this pull request Sep 21, 2023

[Snyk] Upgrade sweetalert2 from 11.4.27 to 11.7.27 Abuchtela/blockscout#154

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New layout for mobile menu is ready. #2665

New layout for mobile menu is ready. #2665

YegorSan commented Sep 4, 2019 •

edited

Loading

vbaranov left a comment

YegorSan commented Sep 4, 2019

YegorSan commented Sep 5, 2019

vbaranov left a comment

vbaranov Sep 5, 2019

pashagonchar commented Sep 5, 2019

YegorSan commented Sep 5, 2019 •

edited

Loading

YegorSan commented Sep 5, 2019

vbaranov Sep 6, 2019

vbaranov commented Sep 6, 2019

vbaranov commented Sep 6, 2019

YegorSan commented Sep 7, 2019

vbaranov commented Sep 9, 2019

YegorSan commented Sep 9, 2019

vbaranov commented Sep 10, 2019

YegorSan commented Sep 10, 2019

vbaranov left a comment

YegorSan commented Sep 10, 2019

New layout for mobile menu is ready. #2665

New layout for mobile menu is ready. #2665

Conversation

YegorSan commented Sep 4, 2019 • edited Loading

Motivation

Changelog

Created a new menu layout for mobile view. *Not active state:

*

Active state:

Checklist for your PR

vbaranov left a comment

Choose a reason for hiding this comment

YegorSan commented Sep 4, 2019

YegorSan commented Sep 5, 2019

vbaranov left a comment

Choose a reason for hiding this comment

vbaranov Sep 5, 2019

Choose a reason for hiding this comment

pashagonchar commented Sep 5, 2019

YegorSan commented Sep 5, 2019 • edited Loading

YegorSan commented Sep 5, 2019

vbaranov Sep 6, 2019

Choose a reason for hiding this comment

vbaranov commented Sep 6, 2019

vbaranov commented Sep 6, 2019

YegorSan commented Sep 7, 2019

vbaranov commented Sep 9, 2019

YegorSan commented Sep 9, 2019

vbaranov commented Sep 10, 2019

YegorSan commented Sep 10, 2019

vbaranov left a comment

Choose a reason for hiding this comment

YegorSan commented Sep 10, 2019

YegorSan commented Sep 4, 2019 •

edited

Loading

Created a new menu layout for mobile view.
*Not active state:

YegorSan commented Sep 5, 2019 •

edited

Loading