Updating UI to also fit on mobile devices. Fix #34 #56

bagage · 2016-11-27T21:27:25Z

I am trying to finish the port for mobile support (#34). So far here are the remaining issues I noted (feel free to edit the list if you find anything else).

Elevation graph regressions (no more colors and links with the track).
Always show elevation graph on desktop or at least open it by default.
Allow profiles to be selected by hotkeys. One solution, as suggested by @nrenner is to move them directly in the navigation bar and remove the Options menu.
Missing data tab + future turn instructions display turn instructions #42 and tag graph Display statistics of street surface #45. I think these all three can be skipped on mobile, so maybe a sidebar on desktop would be fine.
Investigate the Itinerary control that is missing as well.
Fix long profiles name display.
Fix (and improve?) Search bar.
Elevation button: add active state.
Nogo area button: remove cancel button and use the same logic as the Draw button instead. WON'T FIX - actually it is not the same thing (canceling vs finishing).

Currently it looks like this:

Left to do:

Fix CSS for profile / alternative dropdown in navigation bar
Fix error of updateStyle applied on segment when a node is moved
readd missing BR.Control

nrenner · 2016-11-28T21:16:51Z

Thanks for your contributions! I was going to suggest to move forward with your approach, make it work on mobile first and then see what to do for desktop.

I added you as a collaborator. Depending on how you prefer to work, I would suggest that we merge this PR now and you commit straight to the master branch of the main repo - unless you feel like discussing first. What do you think?

bagage · 2016-11-28T21:19:40Z

I'd prefer to finish everything before merging it, because many things are broken yet and it does not work really well on mobile. Plus, if you could reread/review the PR before getting merge I would be more comfortable with it :-).

nrenner · 2016-11-28T21:54:49Z

Ok, fine by me.

nrenner · 2016-11-28T21:58:54Z

bower.json

@@ -83,6 +81,12 @@
    "url-search-params": {
      "main": "build/url-search-params.js"
    },
+    "font-awesome": {


font-awesome seems to be addes twice now (I switched to Font Awesome in b108efa for v0.6.0)?

bagage · 2017-01-08T13:25:11Z

I'm still working on it - I just managed to make Profile and Alternative appear in the navbar (no CSS yet):

The biggest last part is to reintegrate missing tabs (probably only on desktop though) but also check if we couldn't keep the existent elevation graph instead of rewriting it.

nrenner · 2017-01-11T18:30:46Z

Thanks for the update.

Regarding the elevation graph, I generally prefer using and ideally contributing to external plugins as much as possible. The Leaflet.Elevation code does need some refactoring, but I'm not sure a complete rewrite would be a better solution (but I also don't know D3 well enough to judge).

I guess the main issue was having a responsive graph that adjusts to the screen size, but haven't looked at how hard it would be to add that to the Elevation plugin. Just saw there is some ongoing work in PR #66 - Elastic width that might allow just that?

Let me know if you want a second opinion or some help.

bagage · 2017-01-12T12:03:49Z

Yeah I agree for the elevation graph - I reverted to Elevation plugin for now, and played a bit with PR66:
There are still a few bugs but I believe it will be OK. Last master missing piece is the ability to hide the elevation graph (which will be required on mobile because it takes way to much place). But again it seems doable.
Yet I am facing only small issues but I'll definitely ask for at least review when I'm filling it ready. Thanks.

bagage · 2017-01-12T16:27:58Z

OK so I finally was able to move pretty quickly on the remaining items, I'd be happy if you could test and/or review it @nrenner :-).
I'll leave a non-rebased branch in feature/mobile_support_raw if needed. There might be also some dead code and/or forgotten things…

bagage

Left problems

bagage · 2017-01-12T16:31:31Z

js/index.js

+            // map.addControl(new BR.Control({
+                 // heading: '',
+                //  divId: 'header'
+            // }));


One thing that has to be fixed. Not sure how though since I don't know what BR.Control is supposed to look like.

bagage · 2017-01-12T16:32:53Z

js/plugin/Routing.js

-        m1._routing.nextLine._updateStyle();
+
+        console.log("TODO: fixme! //m1._routing.nextLine._updateStyle()");
+        // m1._routing.nextLine._updateStyle();


Another thing I wasn't able to fix. Due to leaflet upgrade from 0.7.x to 1.x, this function appears not to exist anymore but… any help welcome about how to fix that because I couldn't find the solution so far!

The fix in commit Use setStyle instead of _updateStyle doesn't seem to have been merged into the PR branch?

bagage · 2017-01-12T16:41:16Z

Not as nice as with the alternate elevation version, but it now looks like this:

One major enhancement would be to be able to draw leaflet.elevation graph outside of the map, below it as the other version did. Or at least reduce the bottom offset.

edit: I fixed this.

aleek · 2017-01-13T15:44:23Z

Last master missing piece is the ability to hide the elevation graph

I'll need that too. When the elastic width is done, I am planning to CTRL+C CTRL+V the code to also make an elastic height, and on top of this, I'll built the feature to show/hide the elevation graph.

Nevertheless it would be great if we could merge our power to deliver this features!

bagage

Another left problem.

bagage · 2017-01-12T16:44:03Z

index.html

-        </ul>
+                <form class="navbar-form">
+                    <div class="form-group">
+                        <select class="selectpicker show-tick" id="profile-alternative" multiple>


Another thing to fix is the CSS for this form. It should looks like this:

But instead looks like this:

It looks like the CSS is not loaded (gulp problem?) or CSS issue. I'm not much familiar with these so some help would be greatly appreciated here :-). Also it should be probably tweaked a bit to look good on black navbar.

bagage · 2017-01-13T17:41:13Z

I'll need that too. When the elastic width is done, I am planning to CTRL+C CTRL+V the code to also make an elastic height, and on top of this, I'll built the feature to show/hide the elevation graph.

Yeah for now I'm hacking it a bit:

$('#elevation-btn').on('click', function (event) {
    $('.elevation').is(':visible') ? el.removeFrom(map) : el.addTo(map)
});

But we should definitely work together on these (though I have no much skills :)).

bagage · 2017-01-16T10:30:03Z

OK, I was finally able to fix the remaining problems. This time it is fully ready to be reviewed & merged!

nrenner · 2017-01-16T13:39:28Z

Great! It might take me some time to go through this huge PR.

The first obvious thing is that the map doesn't show in Chrome (map height is 0). Can you reproduce this in the Chrome Browser?

bagage · 2017-01-16T15:29:33Z

Yeah sorry, forgot to fix that - it's done now.

nrenner · 2017-01-18T20:55:29Z

Now I see a map, but the 100% map height is taking up the total screen height, so the diagram and the footer are below the visible screen (with scrollbar).

Don't know if related, the Leaflet control buttons have mobile styling applied (larger buttons with border) on desktop in Chrome. Firefox is fine.

(Also see inline comment for missing setStyle commit (others?)).

Still looking into the rest...

bagage · 2017-01-18T21:02:57Z

I need to make more tests for Chrome - I basically did everything on Firefox.
In the mean time only setStyle commit was missing I think, I added it.

bagage · 2017-01-23T09:49:01Z

OK so I finally rearranged all CSS related to flexbox - it should be OK now!

nrenner · 2017-01-23T18:49:36Z

Merging this now, we can work on remaining issues as a follow-up on this.

Thanks a lot for your work @bagage and @RoPP!

BikRider · 2017-05-01T12:52:56Z

Will this wonderful interface be available in the online version of brouter? Thx for this gorgeous work :-).

bagage · 2017-05-01T14:22:06Z

@BikRider Well there are a few things left (see #74 and #66), but hopefully it should be available soon on the website yes. It should replace the current version totally.

nrenner reviewed Nov 28, 2016

View reviewed changes

bagage force-pushed the feature/mobile_support branch from 8b7f840 to 7a3f7f2 Compare November 30, 2016 19:03

bagage mentioned this pull request Dec 22, 2016

brouter-web leaping around, legend is huge #59

Closed

bagage force-pushed the feature/mobile_support branch from 9021ea6 to d7e3bc4 Compare January 8, 2017 10:05

bagage force-pushed the feature/mobile_support branch 2 times, most recently from a69f721 to f8f3421 Compare January 11, 2017 16:06

bagage mentioned this pull request Jan 12, 2017

Remove permalink, regenerate URL instead #62

Closed

bagage force-pushed the feature/mobile_support branch from 9c0c834 to aed5fd6 Compare January 12, 2017 14:42

bagage mentioned this pull request Jan 12, 2017

Profile: better display name #64

Closed

bagage force-pushed the feature/mobile_support branch from 5c3fd41 to 9939806 Compare January 12, 2017 16:29

bagage commented Jan 12, 2017

View reviewed changes

bagage commented Jan 13, 2017

View reviewed changes

bagage force-pushed the feature/mobile_support branch 7 times, most recently from c0bd570 to 8cf2e6b Compare January 16, 2017 10:29

bagage changed the title ~~[WIP] Updating UI to also fit on mobile devices. Fix #34~~ Updating UI to also fit on mobile devices. Fix #34 Jan 16, 2017

bagage force-pushed the feature/mobile_support branch from 8cf2e6b to d30a8d8 Compare January 16, 2017 15:29

bagage force-pushed the feature/mobile_support branch from d30a8d8 to f6d30cc Compare January 18, 2017 21:01

Updating UI to also fit on mobile devices. Fix nrenner#34

d7e476d

bagage force-pushed the feature/mobile_support branch from f6d30cc to d7e476d Compare January 23, 2017 09:49

nrenner merged commit a092813 into nrenner:master Jan 23, 2017

nrenner mentioned this pull request Jan 30, 2017

PR #56 follow-up #66

Closed

15 tasks

bagage mentioned this pull request Apr 25, 2017

toggle information panels #40

Closed

bagage deleted the feature/mobile_support branch May 5, 2017 13:07

nrenner mentioned this pull request Jul 19, 2017

Verify deleted CSS in PR #56 #92

Closed

6 tasks

nrenner added a commit that referenced this pull request Jan 27, 2018

Restore 3-digit distance title (see #38) removed with PR #56

6d3a7a6

nrenner mentioned this pull request Mar 29, 2018

Restore (short) attribution on the map #110

Closed

5 tasks

nrenner added a commit that referenced this pull request Apr 5, 2018

Fix error message position, center horizontally (#56, #114)

e0a786b

nrenner added a commit that referenced this pull request Jul 5, 2018

Adapt left-over own diagram styles from #56 to override theme (#111)

4d4b344

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updating UI to also fit on mobile devices. Fix #34 #56

Updating UI to also fit on mobile devices. Fix #34 #56

bagage commented Nov 27, 2016 •

edited

Loading

nrenner commented Nov 28, 2016

bagage commented Nov 28, 2016

nrenner commented Nov 28, 2016

nrenner Nov 28, 2016

bagage commented Jan 8, 2017

nrenner commented Jan 11, 2017

bagage commented Jan 12, 2017 •

edited

Loading

bagage commented Jan 12, 2017

bagage left a comment

bagage Jan 12, 2017

bagage Jan 12, 2017 •

edited

Loading

nrenner Jan 18, 2017

bagage commented Jan 12, 2017 •

edited

Loading

aleek commented Jan 13, 2017

bagage left a comment

bagage Jan 12, 2017

bagage commented Jan 13, 2017

bagage commented Jan 16, 2017

nrenner commented Jan 16, 2017

bagage commented Jan 16, 2017

nrenner commented Jan 18, 2017

bagage commented Jan 18, 2017

bagage commented Jan 23, 2017

nrenner commented Jan 23, 2017

BikRider commented May 1, 2017 •

edited

Loading

bagage commented May 1, 2017

Updating UI to also fit on mobile devices. Fix #34 #56

Updating UI to also fit on mobile devices. Fix #34 #56

Conversation

bagage commented Nov 27, 2016 • edited Loading

nrenner commented Nov 28, 2016

bagage commented Nov 28, 2016

nrenner commented Nov 28, 2016

nrenner Nov 28, 2016

Choose a reason for hiding this comment

bagage commented Jan 8, 2017

nrenner commented Jan 11, 2017

bagage commented Jan 12, 2017 • edited Loading

bagage commented Jan 12, 2017

bagage left a comment

Choose a reason for hiding this comment

bagage Jan 12, 2017

Choose a reason for hiding this comment

bagage Jan 12, 2017 • edited Loading

Choose a reason for hiding this comment

nrenner Jan 18, 2017

Choose a reason for hiding this comment

bagage commented Jan 12, 2017 • edited Loading

aleek commented Jan 13, 2017

bagage left a comment

Choose a reason for hiding this comment

bagage Jan 12, 2017

Choose a reason for hiding this comment

bagage commented Jan 13, 2017

bagage commented Jan 16, 2017

nrenner commented Jan 16, 2017

bagage commented Jan 16, 2017

nrenner commented Jan 18, 2017

bagage commented Jan 18, 2017

bagage commented Jan 23, 2017

nrenner commented Jan 23, 2017

BikRider commented May 1, 2017 • edited Loading

bagage commented May 1, 2017

bagage commented Nov 27, 2016 •

edited

Loading

bagage commented Jan 12, 2017 •

edited

Loading

bagage Jan 12, 2017 •

edited

Loading

bagage commented Jan 12, 2017 •

edited

Loading

BikRider commented May 1, 2017 •

edited

Loading