]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e5746c7)
Update test case for issue #7070, and change drilldown height calculation to check... 8320/head
authorGeoff Kimball <geoff@zurb.com>
Wed, 2 Mar 2016 17:22:04 +0000 (09:22 -0800)
committerGeoff Kimball <geoff@zurb.com>
Wed, 2 Mar 2016 17:22:04 +0000 (09:22 -0800)
js/foundation.drilldown.js patch | blob | blame | history
scss/components/_drilldown.scss patch | blob | blame | history
test/visual/drilldown/long-drilldown-menu.html [deleted file] patch | blob | blame | history
test/visual/drilldown/long-titles.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index ee55085bc0fae9a08ef6b1191bf2a83f1b9dbf7e..5c2f456afa5166a98112d587a2d6900a6d1a71bb 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -279,13 +279,15 @@ class Drilldown {
    * @private
    */
   _getMaxDims() {
-    var max = 0, result = {};
-    this.$submenus.add(this.$element).each(function(){
-      var numOfElems = $(this).children('li').length;
-      max = numOfElems > max ? numOfElems : max;
+    var biggest = 0
+    var result = {};
+
+    this.$submenus.add(this.$element).each((i, elem) => {
+      var height = elem.getBoundingClientRect().height;
+      if (height > biggest) biggest = height;
     });
 
-    result['min-height'] = `${max * this.$menuItems[0].getBoundingClientRect().height}px`;
+    result['min-height'] = `${biggest}px`;
     result['max-width'] = `${this.$element[0].getBoundingClientRect().width}px`;
 
     return result;
diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index 159dbb4e3314d430e86afaa5b6a7fba5eb1573ac..6dbb7cffb0f5842de1cbef3530727807a2789792 100644 (file)
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -39,7 +39,7 @@ $drilldown-background: $white !default;
     top: 0;
     #{$global-left}: 100%;
     z-index: -1;
-    height: 100%;
+    // height: 100%;
     width: 100%;
     background: $drilldown-background;
     transition: $drilldown-transition;
diff --git a/test/visual/drilldown/long-drilldown-menu.html b/test/visual/drilldown/long-drilldown-menu.html
deleted file mode 100644 (file)
index 70b0326..0000000
--- a/test/visual/drilldown/long-drilldown-menu.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Foundation for Sites Testing</title>
-    <link href="../assets/css/foundation.css" rel="stylesheet" />
-    <style>
-      .is-drilldown-submenu {
-        background: #eee;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="medium-6 row column">
-      <p>Submenus should not be cut off at the bottom.</p>
-
-      <ul class="vertical menu" data-drilldown>
-        <li>
-          <a href="#">Item</a>
-          <ul class="vertical menu">
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-            <li><a href="#">Item</a></li>
-          </ul>
-        </li>
-        <li><a href="#">Item</a></li>
-      </ul>
-    </div>
-
-    <script src="../assets/js/vendor.js"></script>
-    <script src="../assets/js/foundation.js"></script>
-    <script>
-      $(document).foundation();
-    </script>
-  </body>
-</html>
diff --git a/test/visual/drilldown/long-titles.html b/test/visual/drilldown/long-titles.html
new file mode 100644 (file)
index 0000000..fee576d
--- /dev/null
+++ b/test/visual/drilldown/long-titles.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+    <style>
+      .test-drilldown-wrapper {
+        width: 300px;
+      }
+      .is-drilldown-submenu {
+        background: #eee;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="medium-6 row column">
+      <p>Submenus should not be cut off at the bottom.</p>
+
+      <div class="test-drilldown-wrapper">
+        <ul class="vertical menu" data-drilldown>
+          <li>
+            <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li>
+            <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li>
+            <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git