From be06e32134a0212cc87c564da9c16d62dfefc99a Mon Sep 17 00:00:00 2001
From: elisabethP <elisabeth.pointal@free.fr>
Date: Mon, 16 Jul 2018 21:10:52 +0200
Subject: [PATCH] #18 add to front page the case "always display caption under
 map"

---
 Controller/Front.php |   4 +-
 css/lfh-style.css    | 238 ++++++++++++++++++++++++++++++-------------
 css/lfh-style.less   | 177 ++++++++++++++++++++++----------
 js/lfh-plugin.js     |   3 +-
 4 files changed, 293 insertions(+), 129 deletions(-)

diff --git a/Controller/Front.php b/Controller/Front.php
index 69a8144..8868979 100644
--- a/Controller/Front.php
+++ b/Controller/Front.php
@@ -295,6 +295,7 @@ private static function enqueue_mapquest(){
     private static function add_css_inline($css){
    
         $data = 'div.lfh-min div.lfh-nav div.lfh-title,
+                 div.undermap div.lfh-nav div.lfh-title,
                  #content .lfh-element h3:first-child,
                  #lfh-fade .lfh-element h3:first-child,
                  .lfh-element h3:first-child {
@@ -314,7 +315,8 @@ private static function add_css_inline($css){
                  a.lfh-gpx-file{
                      border-color:'.$css['lfh_color'].';
                  }
-                 div.lfh-min a.lfh-gpx-file{
+                 div.lfh-min a.lfh-gpx-file,
+                 div.undermap a.lfh-gpx-file{
                      background:none;
                      color:inherit;
                      border:none;
diff --git a/css/lfh-style.css b/css/lfh-style.css
index c1f9afa..ee17901 100644
--- a/css/lfh-style.css
+++ b/css/lfh-style.css
@@ -436,7 +436,8 @@ div.lfh-no-data {
   border: 1px dotted red;
   margin: 5px;
 }
-div.lfh-min div.lfh-no-data {
+div.lfh-min div.lfh-no-data,
+div.undermap div.lfh-no-data {
   display: block;
   margin-top: 2px;
   height: 153px;
@@ -473,7 +474,8 @@ div.lfh-fadable,
   width: 100%;
   height: 100%;
 }
-#lfh-fade.lfh-min div.lfh-map {
+#lfh-fade.lfh-min div.lfh-map,
+#lfh-fade.undermap div.lfh-map {
   position: absolute;
   width: 100%;
   top: 0;
@@ -625,21 +627,25 @@ input.lfh-button + input[type="button"] {
 div.lfh-container {
   clear: both;
 }
-div.lfh-container.lfh-min div.lfh-data {
+div.lfh-container.lfh-min div.lfh-data,
+div.lfh-container.undermap div.lfh-data {
   position: relative;
   height: 200px;
 }
-#lfh-fade.lfh-min div.lfh-data {
+#lfh-fade.lfh-min div.lfh-data,
+#lfh-fade.undermap div.lfh-data {
   position: absolute;
   top: auto;
   bottom: 0;
   height: 200px;
   background-color: white;
 }
-div.lfh-min div.lfh-content {
+div.lfh-min div.lfh-content,
+div.undermap div.lfh-content {
   margin: 0;
 }
-div.lfh-min div.lfh-control-list {
+div.lfh-min div.lfh-control-list,
+div.undermap div.lfh-control-list {
   display: none;
 }
 div.lfh-data-content {
@@ -650,41 +656,52 @@ div.lfh-data-content > div:not(.lfh-contributor) {
   width: 100%;
   margin-top: 3px;
 }
-div.lfh-min div.lfh-data-content {
+div.lfh-min div.lfh-data-content,
+div.undermap div.lfh-data-content {
   margin: 35px 5px;
   display: block;
   text-align: left;
   vertical-align: middle;
 }
-div.lfh-min div.lfh-data-content div.lfh-section {
+div.lfh-min div.lfh-data-content div.lfh-section,
+div.undermap div.lfh-data-content div.lfh-section {
   display: block;
   height: 100%;
   vertical-align: middle;
   line-height: 113px;
 }
-div.lfh-min div.lfh-data-content div.lfh-section div.lfh-content {
+div.lfh-min div.lfh-data-content div.lfh-section div.lfh-content,
+div.undermap div.lfh-data-content div.lfh-section div.lfh-content {
   margin: auto;
 }
 div.lfh-container.lfh-min,
-#fade div.lfh-container.lfh-min {
+#fade div.lfh-container.lfh-min,
+div.lfh-container.undermap,
+#fade div.lfh-container.undermap {
   height: auto;
 }
 #lfh-fade.lfh-min div.lfh-nav,
-div.lfh-min div.lfh-nav {
+div.lfh-min div.lfh-nav,
+#lfh-fade.undermap div.lfh-nav,
+div.undermap div.lfh-nav {
   display: block;
 }
-div.lfh-container.lfh-min {
+div.lfh-container.lfh-min,
+div.lfh-container.undermap {
   border: 2px solid #9e9e9e;
 }
 div.lfh-nav div.lfh-back,
 div.lfh-nav div.lfh-next {
   display: none;
 }
-div.lfh-min div.lfh-head {
+div.lfh-min div.lfh-head,
+div.undermap div.lfh-head {
   display: none;
 }
 div.lfh-min div.lfh-nav div.lfh-back,
-div.lfh-min div.lfh-nav div.lfh-next {
+div.lfh-min div.lfh-nav div.lfh-next,
+div.undermap div.lfh-nav div.lfh-back,
+div.undermap div.lfh-nav div.lfh-next {
   position: absolute;
   display: none;
   top: 100px;
@@ -699,10 +716,12 @@ div.lfh-min div.lfh-nav div.lfh-next {
   margin: auto;
   background-color: rgba(255, 255, 255, 0.6);
 }
-div.lfh-min div.lfh-nav div.lfh-back {
+div.lfh-min div.lfh-nav div.lfh-back,
+div.undermap div.lfh-nav div.lfh-back {
   left: -1px;
 }
-div.lfh-min div.lfh-nav div.lfh-next {
+div.lfh-min div.lfh-nav div.lfh-next,
+div.undermap div.lfh-nav div.lfh-next {
   right: 0px;
 }
 div.lfh-nav div.lfh-next::before,
@@ -710,7 +729,9 @@ div.lfh-nav div.lfh-back::before {
   margin-left: -3px;
 }
 div.lfh-min div.lfh-nav div.lfh-back:hover,
-div.lfh-min div.lfh-nav div.lfh-next:hover {
+div.lfh-min div.lfh-nav div.lfh-next:hover,
+div.undermap div.lfh-nav div.lfh-back:hover,
+div.undermap div.lfh-nav div.lfh-next:hover {
   opacity: 0.9;
   background-color: rgba(255, 255, 255, 0.9);
 }
@@ -734,7 +755,9 @@ a.lfh-gpx-file:hover {
   background: #eee;
 }
 div.lfh-min a.lfh-gpx-file,
-#lfh-fade.lfh-min a.lfh-gpx-file {
+#lfh-fade.lfh-min a.lfh-gpx-file,
+div.undermap a.lfh-gpx-file,
+#lfh-fade.undermap a.lfh-gpx-file {
   color: inherit;
   pointer-events: auto;
   background: none;
@@ -743,23 +766,27 @@ div.lfh-min a.lfh-gpx-file,
   padding: 0;
   margin: 0 2px;
 }
-div.lfh-min a.lfh-gpx-file {
+div.lfh-min a.lfh-gpx-file,
+div.undermap a.lfh-gpx-file {
   pointer-events: auto;
   cursor: pointer;
   margin: 0 5px;
   float: right;
 }
-div.lfh-min div.lfh-contributor {
+div.lfh-min div.lfh-contributor,
+div.undermap div.lfh-contributor {
   position: absolute;
   bottom: 0;
   right: 5px;
   font-size: 11px;
   pointer-events: auto;
 }
-div.lfh-min div.lfh-contributor a {
+div.lfh-min div.lfh-contributor a,
+div.undermap div.lfh-contributor a {
   text-decoration: none;
 }
-div.lfh-min div.lfh-nav div.lfh-title {
+div.lfh-min div.lfh-nav div.lfh-title,
+div.undermap div.lfh-nav div.lfh-title {
   font-size: 1rem;
   font-weight: 600;
   padding: 3px 5px;
@@ -771,10 +798,12 @@ div.lfh-min div.lfh-nav div.lfh-title {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-#lfh-fade.lfh-min div.lfh-nav div.lfh-title {
+#lfh-fade.lfh-min div.lfh-nav div.lfh-title,
+#lfh-fade.undermap div.lfh-nav div.lfh-title {
   text-align: left;
 }
-div.lfh-min div.lfh-element {
+div.lfh-min div.lfh-element,
+div.undermap div.lfh-element {
   position: absolute;
   top: 33px;
   left: 0;
@@ -783,27 +812,33 @@ div.lfh-min div.lfh-element {
   height: 167px;
   max-height: 167px;
 }
-div.lfh-min div.lfh-element.lfh-small-content {
+div.lfh-min div.lfh-element.lfh-small-content,
+div.undermap div.lfh-element.lfh-small-content {
   width: 100%;
 }
-div.lfh-min div.lfh-element.lfh-small-content div.lfh-element-content {
+div.lfh-min div.lfh-element.lfh-small-content div.lfh-element-content,
+div.undermap div.lfh-element.lfh-small-content div.lfh-element-content {
   text-align: center;
 }
-div.lfh-min div.lfh-element.lfh-small-content:not(.lfh-list) div.lfh-content {
+div.lfh-min div.lfh-element.lfh-small-content:not(.lfh-list) div.lfh-content,
+div.undermap div.lfh-element.lfh-small-content:not(.lfh-list) div.lfh-content {
   text-align: left;
 }
-div.lfh-min div.lfh-element.lfh-small-content div.lfh-section {
+div.lfh-min div.lfh-element.lfh-small-content div.lfh-section,
+div.undermap div.lfh-element.lfh-small-content div.lfh-section {
   float: none;
   margin: auto;
 }
-div.lfh-min div.lfh-element.lfh-hidden {
+div.lfh-min div.lfh-element.lfh-hidden,
+div.undermap div.lfh-element.lfh-hidden {
   -ms-transform: translateY(300px);
   -webkit-transform: translateY(300px);
   -moz-transform: translateY(300px);
   -o-transform: translateY(300px);
   transform: translateY(300px);
 }
-div.lfh-min div.lfh-list.lfh-element.lfh-hidden {
+div.lfh-min div.lfh-list.lfh-element.lfh-hidden,
+div.undermap div.lfh-list.lfh-element.lfh-hidden {
   opacity: 1;
   max-height: 167px;
   -ms-transform: translate(0, 0);
@@ -814,11 +849,14 @@ div.lfh-min div.lfh-list.lfh-element.lfh-hidden {
   z-index: 0;
   background: transparent;
 }
-div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description {
+div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description,
+div.undermap div.lfh-list.lfh-element.lfh-hidden div.lfh-description {
   margin-top: 40px;
 }
 div.lfh-min div.lfh-element.step1,
-div.lfh-min div.lfh-list.lfh-hidden.step1 {
+div.lfh-min div.lfh-list.lfh-hidden.step1,
+div.undermap div.lfh-element.step1,
+div.undermap div.lfh-list.lfh-hidden.step1 {
   -ms-transform: translateX(-280px);
   -webkit-transform: translateX(-280px);
   -moz-transform: translateX(-280px);
@@ -826,7 +864,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step1 {
   transform: translateX(-280px);
 }
 div.lfh-min div.lfh-element.step2,
-div.lfh-min div.lfh-list.lfh-hidden.step2 {
+div.lfh-min div.lfh-list.lfh-hidden.step2,
+div.undermap div.lfh-element.step2,
+div.undermap div.lfh-list.lfh-hidden.step2 {
   -ms-transform: translateX(-560px);
   -webkit-transform: translateX(-560px);
   -moz-transform: translateX(-560px);
@@ -834,7 +874,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step2 {
   transform: translateX(-560px);
 }
 div.lfh-min div.lfh-element.step3,
-div.lfh-min div.lfh-list.lfh-hidden.step3 {
+div.lfh-min div.lfh-list.lfh-hidden.step3,
+div.undermap div.lfh-element.step3,
+div.undermap div.lfh-list.lfh-hidden.step3 {
   -ms-transform: translateX(-840px);
   -webkit-transform: translateX(-840px);
   -moz-transform: translateX(-840px);
@@ -842,7 +884,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step3 {
   transform: translateX(-840px);
 }
 div.lfh-min div.lfh-element.step4,
-div.lfh-min div.lfh-list.lfh-hidden.step4 {
+div.lfh-min div.lfh-list.lfh-hidden.step4,
+div.undermap div.lfh-element.step4,
+div.undermap div.lfh-list.lfh-hidden.step4 {
   -ms-transform: translateX(-1120px);
   -webkit-transform: translateX(-1120px);
   -moz-transform: translateX(-1120px);
@@ -850,7 +894,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step4 {
   transform: translateX(-1120px);
 }
 div.lfh-min div.lfh-element.step5,
-div.lfh-min div.lfh-list.lfh-hidden.step5 {
+div.lfh-min div.lfh-list.lfh-hidden.step5,
+div.undermap div.lfh-element.step5,
+div.undermap div.lfh-list.lfh-hidden.step5 {
   -ms-transform: translateX(-1400px);
   -webkit-transform: translateX(-1400px);
   -moz-transform: translateX(-1400px);
@@ -858,7 +904,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step5 {
   transform: translateX(-1400px);
 }
 div.lfh-min div.lfh-element.step6,
-div.lfh-min div.lfh-list.lfh-hidden.step6 {
+div.lfh-min div.lfh-list.lfh-hidden.step6,
+div.undermap div.lfh-element.step6,
+div.undermap div.lfh-list.lfh-hidden.step6 {
   -ms-transform: translateX(-1680px);
   -webkit-transform: translateX(-1680px);
   -moz-transform: translateX(-1680px);
@@ -866,7 +914,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step6 {
   transform: translateX(-1680px);
 }
 div.lfh-min div.lfh-element.step7,
-div.lfh-min div.lfh-list.lfh-hidden.step7 {
+div.lfh-min div.lfh-list.lfh-hidden.step7,
+div.undermap div.lfh-element.step7,
+div.undermap div.lfh-list.lfh-hidden.step7 {
   -ms-transform: translateX(-1960px);
   -webkit-transform: translateX(-1960px);
   -moz-transform: translateX(-1960px);
@@ -874,7 +924,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step7 {
   transform: translateX(-1960px);
 }
 div.lfh-min div.lfh-element.step8,
-div.lfh-min div.lfh-list.lfh-hidden.step8 {
+div.lfh-min div.lfh-list.lfh-hidden.step8,
+div.undermap div.lfh-element.step8,
+div.undermap div.lfh-list.lfh-hidden.step8 {
   -ms-transform: translateX(-2240px);
   -webkit-transform: translateX(-2240px);
   -moz-transform: translateX(-2240px);
@@ -882,7 +934,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step8 {
   transform: translateX(-2240px);
 }
 div.lfh-min div.lfh-element.step9,
-div.lfh-min div.lfh-list.lfh-hidden.step9 {
+div.lfh-min div.lfh-list.lfh-hidden.step9,
+div.undermap div.lfh-element.step9,
+div.undermap div.lfh-list.lfh-hidden.step9 {
   -ms-transform: translateX(-2520px);
   -webkit-transform: translateX(-2520px);
   -moz-transform: translateX(-2520px);
@@ -890,7 +944,9 @@ div.lfh-min div.lfh-list.lfh-hidden.step9 {
   transform: translateX(-2520px);
 }
 div.lfh-min div.lfh-element.step10,
-div.lfh-min div.lfh-list.lfh-hidden.step10 {
+div.lfh-min div.lfh-list.lfh-hidden.step10,
+div.undermap div.lfh-element.step10,
+div.undermap div.lfh-list.lfh-hidden.step10 {
   -ms-transform: translateX(-2800px);
   -webkit-transform: translateX(-2800px);
   -moz-transform: translateX(-2800px);
@@ -898,84 +954,97 @@ div.lfh-min div.lfh-list.lfh-hidden.step10 {
   transform: translateX(-2800px);
 }
 div.lfh-min div.lfh-element.lfh-hidden:not(.lfh-list),
-div.lfh-min div.lfh-element.lfh-hidden.step0:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step0:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step0:not(.lfh-list) {
   -ms-transform: translateY(250px);
   -webkit-transform: translateY(250px);
   -moz-transform: translateY(250px);
   -o-transform: translateY(250px);
   transform: translateY(250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step1:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step1:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step1:not(.lfh-list) {
   -ms-transform: translate(-280px, 250px);
   -webkit-transform: translate(-280px, 250px);
   -moz-transform: translate(-280px, 250px);
   -o-transform: translate(-280px, 250px);
   transform: translate(-280px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step2:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step2:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step2:not(.lfh-list) {
   -ms-transform: translate(-560px, 250px);
   -webkit-transform: translate(-560px, 250px);
   -moz-transform: translate(-560px, 250px);
   -o-transform: translate(-560px, 250px);
   transform: translate(-560px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step3:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step3:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step3:not(.lfh-list) {
   -ms-transform: translate(-840px, 250px);
   -webkit-transform: translate(-840px, 250px);
   -moz-transform: translate(-840px, 250px);
   -o-transform: translate(-840px, 250px);
   transform: translate(-840px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step4:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step4:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step4:not(.lfh-list) {
   -ms-transform: translate(-1120px, 250px);
   -webkit-transform: translate(-1120px, 250px);
   -moz-transform: translate(-1120px, 250px);
   -o-transform: translate(-1120px, 250px);
   transform: translate(-1120px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step5:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step5:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step5:not(.lfh-list) {
   -ms-transform: translate(-1400px, 250px);
   -webkit-transform: translate(-1400px, 250px);
   -moz-transform: translate(-1400px, 250px);
   -o-transform: translate(-1400px, 250px);
   transform: translate(-1400px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step6:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step6:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step6:not(.lfh-list) {
   -ms-transform: translate(-1680px, 250px);
   -webkit-transform: translate(-1680px, 250px);
   -moz-transform: translate(-1680px, 250px);
   -o-transform: translate(-1680px, 250px);
   transform: translate(-1680px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step7:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step7:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step7:not(.lfh-list) {
   -ms-transform: translate(-1960px, 250px);
   -webkit-transform: translate(-1960px, 250px);
   -moz-transform: translate(-1960px, 250px);
   -o-transform: translate(-1960px, 250px);
   transform: translate(-1960px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step8:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step8:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step8:not(.lfh-list) {
   -ms-transform: translate(-2240px, 250px);
   -webkit-transform: translate(-2240px, 250px);
   -moz-transform: translate(-2240px, 250px);
   -o-transform: translate(-2240px, 250px);
   transform: translate(-2240px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step9:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step9:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step9:not(.lfh-list) {
   -ms-transform: translate(-2520px, 250px);
   -webkit-transform: translate(-2520px, 250px);
   -moz-transform: translate(-2520px, 250px);
   -o-transform: translate(-2520px, 250px);
   transform: translate(-2520px, 250px);
 }
-div.lfh-min div.lfh-element.lfh-hidden.step10:not(.lfh-list) {
+div.lfh-min div.lfh-element.lfh-hidden.step10:not(.lfh-list),
+div.undermap div.lfh-element.lfh-hidden.step10:not(.lfh-list) {
   -ms-transform: translate(-2800px, 250px);
   -webkit-transform: translate(-2800px, 250px);
   -moz-transform: translate(-2800px, 250px);
   -o-transform: translate(-2800px, 250px);
   transform: translate(-2800px, 250px);
 }
-div.lfh-min div.lfh-section {
+div.lfh-min div.lfh-section,
+div.undermap div.lfh-section {
   float: left;
   display: inline-block;
   max-height: 167px;
@@ -985,7 +1054,8 @@ div.lfh-section div.lfh-content,
 div.lfh-section div.lfh-content > div {
   height: auto;
 }
-div.lfh-min .lfh-content > div {
+div.lfh-min .lfh-content > div,
+div.undermap .lfh-content > div {
   max-width: 280px;
   width: 280px;
   float: left;
@@ -1004,7 +1074,8 @@ div.lfh-min .lfh-content > div {
   max-width: 290px;
   margin: 0;
 }
-div.lfh-min .lfh-element svg {
+div.lfh-min .lfh-element svg,
+div.undermap .lfh-element svg {
   margin-top: 0;
   min-height: 160px;
   height: 160px;
@@ -1012,42 +1083,56 @@ div.lfh-min .lfh-element svg {
   max-width: 270px;
 }
 div.lfh-min div.lfh-file,
-div.lfh-min div.lfh-position {
+div.lfh-min div.lfh-position,
+div.undermap div.lfh-file,
+div.undermap div.lfh-position {
   display: none;
 }
-div.lfh-min .lfh-section .lfh-header h4 {
+div.lfh-min .lfh-section .lfh-header h4,
+div.undermap .lfh-section .lfh-header h4 {
   display: none;
 }
-div.lfh-min div.lfh-data-content .lfh-section .lfh-header h4 {
+div.lfh-min div.lfh-data-content .lfh-section .lfh-header h4,
+div.undermap div.lfh-data-content .lfh-section .lfh-header h4 {
   display: block;
 }
 div.lfh-min .lfh-section .lfh-header h4::before,
-div.lfh-min .lfh-section.lfh-hidden .lfh-header h4::before {
+div.lfh-min .lfh-section.lfh-hidden .lfh-header h4::before,
+div.undermap .lfh-section .lfh-header h4::before,
+div.undermap .lfh-section.lfh-hidden .lfh-header h4::before {
   content: none;
 }
 div.lfh-min div.lfh-content,
 div.lfh-min div.lfh-content svg,
-div.lfh-min div.lfh-content ~ div {
+div.lfh-min div.lfh-content ~ div,
+div.undermap div.lfh-content,
+div.undermap div.lfh-content svg,
+div.undermap div.lfh-content ~ div {
   display: inline-block;
 }
-div.lfh-min div.lfh-content ~ div {
+div.lfh-min div.lfh-content ~ div,
+div.undermap div.lfh-content ~ div {
   max-width: 280px;
 }
-div.lfh-min div.lfh-content > div {
+div.lfh-min div.lfh-content > div,
+div.undermap div.lfh-content > div {
   width: 280px;
-  /*  height: @height - @height_title - 2*@padding_title;*/
+  /* height: @height - @height_title - 2*@padding_title;*/
   max-width: 280px;
   max-height: 167px;
 }
-div.lfh-min div.lfh-content div.wp-caption {
+div.lfh-min div.lfh-content div.wp-caption,
+div.undermap div.lfh-content div.wp-caption {
   max-width: 280px;
   max-height: 167px;
 }
-div.lfh-min div.lfh-content img {
+div.lfh-min div.lfh-content img,
+div.undermap div.lfh-content img {
   max-width: 270px;
   max-height: 167px;
 }
-div.lfh-min .lfh-element-content {
+div.lfh-min .lfh-element-content,
+div.undermap .lfh-element-content {
   float: left;
   height: 167px;
   max-height: 167px;
@@ -1057,7 +1142,9 @@ div.lfh-min .lfh-element-content {
   box-sizing: border-box;
 }
 div.lfh-min .lfh-element:hover ~ div.lfh-nav div.lfh-next,
-div.lfh-min .lfh-element:hover ~ div.lfh-nav div.lfh-back {
+div.lfh-min .lfh-element:hover ~ div.lfh-nav div.lfh-back,
+div.undermap .lfh-element:hover ~ div.lfh-nav div.lfh-next,
+div.undermap .lfh-element:hover ~ div.lfh-nav div.lfh-back {
   opacity: 0.7;
   /* border-radius: 50% 50%;
     width: 50px;
@@ -1099,25 +1186,32 @@ span.lfh-close {
   box-shadow: none;
   pointer-events: auto;
 }
-div.lfh-min span.lfh-close {
+div.lfh-min span.lfh-close,
+div.undermap span.lfh-close {
   margin-right: 0px;
 }
 span.lfh-close:hover {
   cursor: pointer;
 }
-div.lfh-min div.lfh-data span.lfh-close {
+div.lfh-min div.lfh-data span.lfh-close,
+div.undermap div.lfh-data span.lfh-close {
   margin-left: 5px;
   display: none;
 }
-div.lfh-min div.lfh-data div.lfh-list:not(.step0) ~ div.lfh-nav div.lfh-back {
+div.lfh-min div.lfh-data div.lfh-list:not(.step0) ~ div.lfh-nav div.lfh-back,
+div.undermap div.lfh-data div.lfh-list:not(.step0) ~ div.lfh-nav div.lfh-back {
   display: inline;
 }
 div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav span.lfh-close,
 div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back,
-div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-next {
+div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-next,
+div.undermap div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav span.lfh-close,
+div.undermap div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back,
+div.undermap div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-next {
   display: inline;
 }
-div.lfh-min div.lfh-data div.lfh-element.step0:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back {
+div.lfh-min div.lfh-data div.lfh-element.step0:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back,
+div.undermap div.lfh-data div.lfh-element.step0:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back {
   display: none;
 }
 .fakefull .lfh-map-container {
diff --git a/css/lfh-style.less b/css/lfh-style.less
index e3e3c27..a1142ee 100644
--- a/css/lfh-style.less
+++ b/css/lfh-style.less
@@ -186,7 +186,8 @@ div.lfh-no-data{
     border: 1px dotted red;
     margin: 5px;
 }
-div.lfh-min div.lfh-no-data{
+div.lfh-min div.lfh-no-data,
+div.undermap div.lfh-no-data{
     display:block;
     margin-top:2px;
     height:@height - @height_title - 20px;
@@ -229,7 +230,8 @@ div.lfh-fadable,
     height:100%;
 }
 
-#lfh-fade.lfh-min div.lfh-map{
+#lfh-fade.lfh-min div.lfh-map,
+#lfh-fade.undermap div.lfh-map{
 	position:absolute;
 	width:100%;
 	top:0;
@@ -386,22 +388,26 @@ input.lfh-button + input[type="button"]{
 div.lfh-container{
     clear:both;
 }
-div.lfh-container.lfh-min div.lfh-data{
+div.lfh-container.lfh-min div.lfh-data,
+div.lfh-container.undermap div.lfh-data{
   
     position: relative;
     height:@height;
 }
-#lfh-fade.lfh-min div.lfh-data{
+#lfh-fade.lfh-min div.lfh-data,
+#lfh-fade.undermap div.lfh-data{
 	position:absolute;
 	top:auto;
 	bottom:0;
 	height:@height;
 	background-color:white;
 }
-div.lfh-min div.lfh-content{
+div.lfh-min div.lfh-content,
+div.undermap div.lfh-content{
     margin:0;
 }
-div.lfh-min div.lfh-control-list{
+div.lfh-min div.lfh-control-list,
+div.undermap div.lfh-control-list{
     display:none;
 }
 div.lfh-data-content{
@@ -412,13 +418,15 @@ div.lfh-data-content > div:not(.lfh-contributor){
 	width:100%;
 	margin-top:3px;
 }
-div.lfh-min div.lfh-data-content{
+div.lfh-min div.lfh-data-content,
+div.undermap div.lfh-data-content{
     margin: 35px 5px;
     display:block;
     text-align:left;
     vertical-align:middle;
 }
-div.lfh-min div.lfh-data-content div.lfh-section{
+div.lfh-min div.lfh-data-content div.lfh-section,
+div.undermap div.lfh-data-content div.lfh-section{
 
     display:block;
     height:100%;
@@ -426,18 +434,24 @@ div.lfh-min div.lfh-data-content div.lfh-section{
     line-height:@height - @height_title - 60px;
 }
  
-div.lfh-min div.lfh-data-content div.lfh-section div.lfh-content{
+div.lfh-min div.lfh-data-content div.lfh-section div.lfh-content,
+div.undermap div.lfh-data-content div.lfh-section div.lfh-content{
 	margin:auto;
 }
 div.lfh-container.lfh-min,
-#fade div.lfh-container.lfh-min{
+#fade div.lfh-container.lfh-min,
+div.lfh-container.undermap,
+#fade div.lfh-container.undermap{
     height:auto;
 }
 #lfh-fade.lfh-min div.lfh-nav,
- div.lfh-min div.lfh-nav{
+ div.lfh-min div.lfh-nav,
+ #lfh-fade.undermap div.lfh-nav,
+ div.undermap div.lfh-nav{
     display: block;
  }
- div.lfh-container.lfh-min{
+ div.lfh-container.lfh-min,
+  div.lfh-container.undermap{
      border: 2px solid #9e9e9e;
  }
  
@@ -445,11 +459,14 @@ div.lfh-container.lfh-min,
  div.lfh-nav div.lfh-next{
      display:none;
  }
- div.lfh-min div.lfh-head{
+ div.lfh-min div.lfh-head,
+ div.undermap div.lfh-head{
      display:none;
  }
  div.lfh-min div.lfh-nav div.lfh-back,
- div.lfh-min div.lfh-nav div.lfh-next{
+ div.lfh-min div.lfh-nav div.lfh-next,
+ div.undermap div.lfh-nav div.lfh-back,
+ div.undermap div.lfh-nav div.lfh-next{
     position:absolute;
     display:none;
     top:@height/2;
@@ -466,10 +483,12 @@ div.lfh-container.lfh-min,
      background-color:rgba(255,255,255,0.6)
    
  }
- div.lfh-min div.lfh-nav div.lfh-back{
+ div.lfh-min div.lfh-nav div.lfh-back,
+ div.undermap div.lfh-nav div.lfh-back{
       left:-1px;
  }
- div.lfh-min div.lfh-nav div.lfh-next{
+ div.lfh-min div.lfh-nav div.lfh-next,
+ div.undermap div.lfh-nav div.lfh-next{
      right:0px;
  }
  div.lfh-nav div.lfh-next::before,
@@ -477,7 +496,9 @@ div.lfh-nav div.lfh-back::before{
     margin-left:-3px;
 }
  div.lfh-min div.lfh-nav div.lfh-back:hover,
- div.lfh-min div.lfh-nav div.lfh-next:hover{
+ div.lfh-min div.lfh-nav div.lfh-next:hover,
+ div.undermap div.lfh-nav div.lfh-back:hover,
+ div.undermap div.lfh-nav div.lfh-next:hover{
      opacity:0.9;
      background-color:rgba(255,255,255,0.9);
 
@@ -502,7 +523,9 @@ a.lfh-gpx-file:hover{
       background:#eee;
 }
  div.lfh-min a.lfh-gpx-file,
-#lfh-fade.lfh-min a.lfh-gpx-file{
+#lfh-fade.lfh-min a.lfh-gpx-file,
+div.undermap a.lfh-gpx-file,
+#lfh-fade.undermap a.lfh-gpx-file{
      color:inherit;
      pointer-events: auto;
      background:none;
@@ -512,28 +535,32 @@ a.lfh-gpx-file:hover{
      margin:0 2px;
  }
 
- div.lfh-min a.lfh-gpx-file{
+ div.lfh-min a.lfh-gpx-file,
+ div.undermap a.lfh-gpx-file{
       pointer-events: auto;
       cursor: pointer;
       margin: 0 5px;
       float:right;
  }
 
- div.lfh-min div.lfh-contributor{
+ div.lfh-min div.lfh-contributor,
+ div.undermap div.lfh-contributor{
      position:absolute;
      bottom:0;
      right:5px;
      font-size:11px;
      pointer-events:auto;
  }
-  div.lfh-min div.lfh-contributor a{
+  div.lfh-min div.lfh-contributor a,
+  div.undermap div.lfh-contributor a{
      text-decoration:none;
   }
  @width: 280px;
  @height:200px;
  @height_title:27px;
  @padding_title:3px;
- div.lfh-min div.lfh-nav div.lfh-title{
+ div.lfh-min div.lfh-nav div.lfh-title,
+ div.undermap div.lfh-nav div.lfh-title{
      font-size:1rem;
      font-weight:600;
      padding: @padding_title 5px;
@@ -546,12 +573,14 @@ a.lfh-gpx-file:hover{
     overflow: hidden;
  }
  
- #lfh-fade.lfh-min div.lfh-nav div.lfh-title{
+ #lfh-fade.lfh-min div.lfh-nav div.lfh-title,
+ #lfh-fade.undermap div.lfh-nav div.lfh-title{
      text-align:left;
  }
  
- div.lfh-min div.lfh-element{
- position:absolute;
+ div.lfh-min div.lfh-element,
+ div.undermap div.lfh-element{
+    position:absolute;
     top: @height_title + 6px;
     left:0;
     min-width:100%;
@@ -561,21 +590,26 @@ a.lfh-gpx-file:hover{
  
 }
 
-div.lfh-min div.lfh-element.lfh-small-content{
+div.lfh-min div.lfh-element.lfh-small-content,
+div.undermap div.lfh-element.lfh-small-content{
     width:100%;
 }
 
-div.lfh-min div.lfh-element.lfh-small-content div.lfh-element-content{
+div.lfh-min div.lfh-element.lfh-small-content div.lfh-element-content,
+div.undermap div.lfh-element.lfh-small-content div.lfh-element-content{
     text-align:center;
 }
-div.lfh-min div.lfh-element.lfh-small-content:not(.lfh-list) div.lfh-content{
+div.lfh-min div.lfh-element.lfh-small-content:not(.lfh-list) div.lfh-content,
+div.undermap div.lfh-element.lfh-small-content:not(.lfh-list) div.lfh-content{
     text-align:left;
 }
-div.lfh-min div.lfh-element.lfh-small-content div.lfh-section{
+div.lfh-min div.lfh-element.lfh-small-content div.lfh-section,
+div.undermap div.lfh-element.lfh-small-content div.lfh-section{
     float:none;
     margin:auto;
 }
-div.lfh-min div.lfh-element.lfh-hidden{
+div.lfh-min div.lfh-element.lfh-hidden,
+div.undermap div.lfh-element.lfh-hidden{
    -ms-transform: translateY(300px);
    -webkit-transform: translateY(300px);
    -moz-transform: translateY(300px);
@@ -583,7 +617,8 @@ div.lfh-min div.lfh-element.lfh-hidden{
    transform: translateY(300px);
 
  }
-div.lfh-min div.lfh-list.lfh-element.lfh-hidden{
+div.lfh-min div.lfh-list.lfh-element.lfh-hidden,
+div.undermap div.lfh-list.lfh-element.lfh-hidden{
    opacity:1;
    max-height:@height - @height_title - 2* @padding_title;
    -ms-transform: translate(0, 0);
@@ -594,12 +629,15 @@ div.lfh-min div.lfh-list.lfh-element.lfh-hidden{
    z-index:0;
    background: transparent;
 }
-div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description{
+div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description,
+div.undermap div.lfh-list.lfh-element.lfh-hidden div.lfh-description{
     margin-top:40px;
 }
 .loopingClass (@i) when (@i < 11) {
     div.lfh-min div.lfh-element.step@{i},
-    div.lfh-min div.lfh-list.lfh-hidden.step@{i} {
+    div.lfh-min div.lfh-list.lfh-hidden.step@{i},
+    div.undermap div.lfh-element.step@{i},
+    div.undermap div.lfh-list.lfh-hidden.step@{i} {
         -ms-transform: translateX(-(@i * @width));
         -webkit-transform: translateX(-(@i * @width));
         -moz-transform: translateX(-(@i * @width));
@@ -611,7 +649,9 @@ div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description{
 .loopingClass (1);
 
  div.lfh-min div.lfh-element.lfh-hidden:not(.lfh-list),
- div.lfh-min div.lfh-element.lfh-hidden.step0:not(.lfh-list){
+ div.lfh-min div.lfh-element.lfh-hidden.step0:not(.lfh-list),
+ div.undermap div.lfh-element.lfh-hidden:not(.lfh-list),
+ div.undermap div.lfh-element.lfh-hidden.step0:not(.lfh-list){
    -ms-transform: translateY( @height + 50px);
    -webkit-transform: translateY( @height + 50px );
    -moz-transform: translateY( @height + 50px );
@@ -619,7 +659,8 @@ div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description{
    transform: translateY( @height + 50px );
  }
 .loopHidden (@k) when (@k < 11) {
-    div.lfh-min div.lfh-element.lfh-hidden.step@{k}:not(.lfh-list) {
+    div.lfh-min div.lfh-element.lfh-hidden.step@{k}:not(.lfh-list),
+    div.undermap div.lfh-element.lfh-hidden.step@{k}:not(.lfh-list) {
         -ms-transform: translate(-(@k * @width), @height + 50);
         -webkit-transform: translate(-(@k * @width),@height + 50);
         -moz-transform: translate(-(@k * @width), @height + 50);
@@ -631,7 +672,8 @@ div.lfh-min div.lfh-list.lfh-element.lfh-hidden div.lfh-description{
 .loopHidden (1);           
 
 
-div.lfh-min div.lfh-section{
+div.lfh-min div.lfh-section,
+div.undermap div.lfh-section{
     float:left;
     display:inline-block;
     max-height:@height - @height_title - 2* @padding_title;
@@ -642,7 +684,8 @@ div.lfh-section div.lfh-content,
 div.lfh-section div.lfh-content > div{
     height:auto;
 }
-div.lfh-min .lfh-content > div
+div.lfh-min .lfh-content > div,
+div.undermap .lfh-content > div
 {
      max-width:@width;
      width:@width;
@@ -662,7 +705,8 @@ div.lfh-min .lfh-content > div
     max-width:290px;
     margin:0;
 }
-div.lfh-min .lfh-element svg{
+div.lfh-min .lfh-element svg,
+div.undermap .lfh-element svg{
     margin-top:0;
     min-height:@height - @height_title - 13px; 
     height:@height - @height_title - 13px;
@@ -670,18 +714,24 @@ div.lfh-min .lfh-element svg{
     max-width: @width - 10px;
 }
 div.lfh-min div.lfh-file,
-div.lfh-min div.lfh-position{
+div.lfh-min div.lfh-position,
+div.undermap div.lfh-file,
+div.undermap div.lfh-position{
     display:none;
 }
 
-div.lfh-min .lfh-section .lfh-header h4{
+div.lfh-min .lfh-section .lfh-header h4,
+div.undermap .lfh-section .lfh-header h4{
     display:none;
 }
-div.lfh-min div.lfh-data-content .lfh-section .lfh-header h4{
+div.lfh-min div.lfh-data-content .lfh-section .lfh-header h4,
+div.undermap div.lfh-data-content .lfh-section .lfh-header h4{
     display: block;
 }
 div.lfh-min .lfh-section .lfh-header h4::before,
-div.lfh-min .lfh-section.lfh-hidden .lfh-header h4::before
+div.lfh-min .lfh-section.lfh-hidden .lfh-header h4::before,
+div.undermap .lfh-section .lfh-header h4::before,
+div.undermap .lfh-section.lfh-hidden .lfh-header h4::before
 {
     content:none;
 }
@@ -689,31 +739,39 @@ div.lfh-min .lfh-section.lfh-hidden .lfh-header h4::before
 
 div.lfh-min div.lfh-content,
 div.lfh-min div.lfh-content svg,
-div.lfh-min div.lfh-content ~ div{
+div.lfh-min div.lfh-content ~ div,
+div.undermap div.lfh-content,
+div.undermap div.lfh-content svg,
+div.undermap div.lfh-content ~ div{
     display:inline-block;
 }
 
-div.lfh-min div.lfh-content ~ div{
+div.lfh-min div.lfh-content ~ div,
+div.undermap div.lfh-content ~ div{
        max-width:@width;
 
     }
-div.lfh-min div.lfh-content > div{
+div.lfh-min div.lfh-content > div,
+div.undermap div.lfh-content > div{
     width: @width;
-   /*  height: @height - @height_title - 2*@padding_title;*/
+    /* height: @height - @height_title - 2*@padding_title;*/
     max-width: @width;
     max-height: @height - @height_title - 2*@padding_title;
 }
-div.lfh-min div.lfh-content div.wp-caption{
+div.lfh-min div.lfh-content div.wp-caption,
+div.undermap div.lfh-content div.wp-caption{
     max-width: @width;
     max-height: @height - @height_title - 2*@padding_title;
     
 }
-div.lfh-min div.lfh-content  img{
+div.lfh-min div.lfh-content  img,
+div.undermap div.lfh-content  img{
     max-width: @width - 10px;
      max-height: @height - @height_title - 2*@padding_title;
 }
 
-div.lfh-min .lfh-element-content{
+div.lfh-min .lfh-element-content,
+div.undermap .lfh-element-content{
     float:left;
     height:@height - @height_title - 2*@padding_title;
     max-height:@height - @height_title - 2*@padding_title;
@@ -723,7 +781,9 @@ div.lfh-min .lfh-element-content{
     box-sizing: border-box;
 }
 div.lfh-min .lfh-element:hover ~ div.lfh-nav div.lfh-next,
-div.lfh-min .lfh-element:hover ~ div.lfh-nav div.lfh-back{
+div.lfh-min .lfh-element:hover ~ div.lfh-nav div.lfh-back,
+div.undermap .lfh-element:hover ~ div.lfh-nav div.lfh-next,
+div.undermap .lfh-element:hover ~ div.lfh-nav div.lfh-back{
 	opacity:0.7;
 	/* border-radius: 50% 50%;
     width: 50px;
@@ -767,28 +827,35 @@ span.lfh-close{
     box-shadow:none;
     pointer-events:auto;
 }
-div.lfh-min span.lfh-close{
+div.lfh-min span.lfh-close,
+div.undermap span.lfh-close{
 	margin-right:0px;
 }
 span.lfh-close:hover{
     cursor:pointer;
 }
 
-div.lfh-min div.lfh-data span.lfh-close{
+div.lfh-min div.lfh-data span.lfh-close,
+div.undermap div.lfh-data span.lfh-close{
 	margin-left:5px;
 	display:none;
 }
 
-div.lfh-min div.lfh-data div.lfh-list:not(.step0) ~ div.lfh-nav div.lfh-back{
+div.lfh-min div.lfh-data div.lfh-list:not(.step0) ~ div.lfh-nav div.lfh-back,
+div.undermap div.lfh-data div.lfh-list:not(.step0) ~ div.lfh-nav div.lfh-back{
     display:inline;
 }
 div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav span.lfh-close,
 div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back,
-div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-next{
+div.lfh-min div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-next,
+div.undermap div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav span.lfh-close,
+div.undermap div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back,
+div.undermap div.lfh-data div.lfh-element:not(.lfh-hidden) ~ div.lfh-nav div.lfh-next{
 	display:inline;
 }
 
-div.lfh-min div.lfh-data div.lfh-element.step0:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back{
+div.lfh-min div.lfh-data div.lfh-element.step0:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back,
+div.undermap div.lfh-data div.lfh-element.step0:not(.lfh-hidden) ~ div.lfh-nav div.lfh-back{
     display:none;
 }
 .fakefull .lfh-map-container{
diff --git a/js/lfh-plugin.js b/js/lfh-plugin.js
index 3466449..31293d5 100644
--- a/js/lfh-plugin.js
+++ b/js/lfh-plugin.js
@@ -407,7 +407,8 @@ lfh.resize_content = function(container){
     // compute the size of the description fonction of the parent
     var node = document.querySelector('#'+ container.id + '-data');
     var height = node.offsetHeight ;
-    if(container.parentNode.parentNode.className.indexOf('lfh-min')<0){
+    if(container.parentNode.parentNode.className.indexOf('lfh-min')<0 
+       && container.parentNode.parentNode.className.indexOf('undermap')<0){
         height -= 70;
     }else{
         height = 220;