navigation: reorganize distance and narrative

When using the navigation on the road (i.e. on a motorcycle) readability
becomes key. When only a short glance is possible, icon + distance are the
key information, with the narrative being an additional source for when
there is a second more time.

So it makes sense to keep both icon and distance together so the users
eyes don't need to wander across the display.

So move the countdown-distance up near the flag and instead of hard-coding
coordinates, align it 2px below the icon.

Move the narrative text between the distance and progress bar and by making
it the last element in the code, we can profit from the alignment
information of the other elements and set the height calculated from the
position information of distance and progress-bar.

By reducing the slightly excessive spaces between elements, the narrative
gets to be 97px height and can even hold a 4th line of text.

Author: Heiko Stuebner

src/displayapp/screens/Navigation.cpp

@@ -202,22 +202,14 @@ Navigation::Navigation(Pinetime::Controllers::NavigationService& nav) : navServi
   lv_obj_set_style_local_image_recolor(imgFlag, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_CYAN);
   lv_obj_align(imgFlag, nullptr, LV_ALIGN_IN_TOP_MID, 0, 2);
 
-  txtNarrative = lv_label_create(lv_scr_act(), nullptr);
-  lv_label_set_long_mode(txtNarrative, LV_LABEL_LONG_DOT);
-  lv_obj_set_width(txtNarrative, LV_HOR_RES);
-  lv_obj_set_height(txtNarrative, 80);
-  lv_label_set_text_static(txtNarrative, "Navigation");
-  lv_label_set_align(txtNarrative, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(txtNarrative, nullptr, LV_ALIGN_CENTER, 0, 30);
-
   txtManDist = lv_label_create(lv_scr_act(), nullptr);
   lv_label_set_long_mode(txtManDist, LV_LABEL_LONG_BREAK);
   lv_obj_set_style_local_text_color(txtManDist, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_YELLOW);
   lv_obj_set_style_local_text_font(txtManDist, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_42);
   lv_obj_set_width(txtManDist, LV_HOR_RES);
   lv_label_set_text_static(txtManDist, "--M");
   lv_label_set_align(txtManDist, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(txtManDist, nullptr, LV_ALIGN_CENTER, 0, 90);
+  lv_obj_align(txtManDist, imgFlag, LV_ALIGN_OUT_BOTTOM_MID, 0, 2);
 
   // Route Progress
   barProgress = lv_bar_create(lv_scr_act(), nullptr);
@@ -229,6 +221,16 @@ Navigation::Navigation(Pinetime::Controllers::NavigationService& nav) : navServi
   lv_bar_set_range(barProgress, 0, 100);
   lv_bar_set_value(barProgress, 0, LV_ANIM_OFF);
 
+  txtNarrative = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_long_mode(txtNarrative, LV_LABEL_LONG_DOT);
+  lv_obj_set_width(txtNarrative, LV_HOR_RES);
+  lv_label_set_text(txtNarrative, "Navigation");
+  lv_label_set_align(txtNarrative, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(txtNarrative, txtManDist, LV_ALIGN_OUT_BOTTOM_MID, 0, 2);
+
+  // Set Narrative-height dynamically by progress-bar-y with 2px distance added
+  lv_obj_set_height(txtNarrative, lv_obj_get_y(barProgress) - lv_obj_get_y(txtNarrative) - 2);
+
   taskRefresh = lv_task_create(RefreshTaskCallback, LV_DISP_DEF_REFR_PERIOD, LV_TASK_PRIO_MID, this);
 }