From 34402ca571c12608114dad5e917f9e6b60ae5dd8 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 22 Oct 2017 19:41:50 +0200
Subject: [PATCH] more library styling: make only the list scroll, don't
 overlap close button

---
 index.html       |  2 +-
 style/lantea.css | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 74b5152..c3c491d 100644
--- a/index.html
+++ b/index.html
@@ -149,7 +149,7 @@ upload from multiple devices.</p>
 </div>
 
 <div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
-The following tracks are saved on the Lantea Maps Server:
+<p>The following tracks are saved on the Lantea Maps Server:</p>
 <ul id="libTrackList">
 </ul>
 <p id="libTrackPages" class="hidden"></p>
diff --git a/style/lantea.css b/style/lantea.css
index 7835b42..589beff 100644
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -442,7 +442,6 @@ h1 {
   bottom: 1%;
   right: 1%;
   left: 1%;
-  overflow: auto;
   z-index: 10;
   background-color: rgba(15, 15, 15, 1.0);
   border: 0;
@@ -472,6 +471,26 @@ h1 {
 }
 */
 
+.fullScreenOverlay p {
+  margin: 0.5em 0;
+}
+
+.fullScreenOverlay > p:first-child {
+  margin-top: 0;
+  /* leave space for close button */
+  margin-right: 1.5em;
+}
+
+#libTrackList {
+  overflow: auto;
+  /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */
+  height: calc(100% - 5em);
+}
+
+#libTrackPages {
+  margin-bottom: 0;
+}
+
 /* small screen media adaptations */
 @media screen and (max-width: 500px),
        screen and (max-height: 500px) {
-- 
2.43.0