changeset 884:616418a6adde

fix: overflow behaviour of identify menu fixed
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 01 Oct 2018 17:07:37 +0200
parents 55fb73a3ebf7
children ea580cab3ce2
files client/src/layers/Identify.vue
diffstat 1 files changed, 13 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/layers/Identify.vue	Mon Oct 01 16:47:36 2018 +0200
+++ b/client/src/layers/Identify.vue	Mon Oct 01 17:07:37 2018 +0200
@@ -11,7 +11,7 @@
                     <h4 class="card-title">Identified</h4>
                 </div>
                 <hr>
-                <div class="d-flex flex-column">
+                <div class="d-flex flex-column features">
                     <div v-for="feature of identifiedFeatures" :key="feature.getId()">
                         <div v-if="feature.getId()">
                             {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
@@ -22,13 +22,11 @@
                     </div>
                 </div>
                 <div class="versioninfo">
-                  <hr/>
-                  gemma <a href="https://hg.intevation.de/gemma/file/tip"
-                     >source-code</a>
-                  <br/>
+                    <hr/>
+                  gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a>
+                    <br/>
                    Some data ©
-                   <a href="https://www.openstreetmap.org/copyright"
-                      >OpenSteetMap</a> contributors
+                    <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors
 
                 </div>
             </div>
@@ -37,8 +35,15 @@
 </template>
 
 <style lang="scss">
+.features {
+  height: $identify-height;
+  overflow-y: scroll;
+  margin-bottom: $x-large-offset + $large-offset;
+}
 .versioninfo {
   font-size: 60%;
+  position: absolute;
+  bottom: $large-offset;
 }
 .identifymenu {
   position: relative;
@@ -52,7 +57,7 @@
 }
 
 .identifycollapsed {
-  height: $icon-height;
+  min-height: $icon-height;
   width: $icon-width;
   transition: $transition-fast;
 }