fix(list): dense lists cut off descenders of letters like gjqpy

update demo to include letters with descenders fix demo layout on mobile Fixes #8890
angular · Sep 30, 2019 · 64feb8b · 64feb8b
1 parent 595fefe
commit 64feb8b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 21 deletions.
diff --git a/src/components/list/demoBasicUsage/index.html b/src/components/list/demoBasicUsage/index.html
@@ -1,4 +1,4 @@
-<div ng-controller="AppCtrl" ng-cloak layout-gt-sm="row" layout="column">
+<div ng-controller="AppCtrl" ng-cloak layout-gt-sm="row">
 
   <div flex-gt-sm="50" flex>
 
@@ -35,9 +35,8 @@ <h3>{{ todos[0].who }}</h3>
           <div class="md-list-item-text">
             <h3>{{ todos[0].who }}</h3>
             <p>
-              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
-              Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
-              velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed.
             </p>
           </div>
         </md-list-item>
@@ -46,9 +45,8 @@ <h3>{{ todos[0].who }}</h3>
           <div class="md-list-item-text">
             <h3>{{ todos[1].who }}</h3>
             <p>
-              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
-              Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
-              velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
+              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed.
             </p>
           </div>
         </md-list-item>
@@ -108,9 +106,9 @@ <h3>{{ todos[0].who }}</h3>
           <div class="md-list-item-text">
             <h3>{{ todos[0].who }}</h3>
             <p>
-              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
-              Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
-              velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
+              quam.  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque
+              volutpat condimentum velit.
             </p>
           </div>
         </md-list-item>
@@ -119,9 +117,9 @@ <h3>{{ todos[0].who }}</h3>
           <div class="md-list-item-text">
             <h3>{{ todos[1].who }}</h3>
             <p>
-              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
-              Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
-              velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
+              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
+              quam.  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque
+              volutpat condimentum velit.
             </p>
           </div>
         </md-list-item>

diff --git a/src/components/list/demoBasicUsage/script.js b/src/components/list/demoBasicUsage/script.js
@@ -42,10 +42,10 @@ angular.module('listDemo1', ['ngMaterial'])
     $scope.todos = [
       {
         face : imagePath,
-        what: 'Brunch this weekend?',
-        who: 'Min Li Chan',
+        what: 'My quirky, joyful porg',
+        who: 'Kaguya w/ #qjporg',
         when: '3:08PM',
-        notes: " I'll be in your neighborhood doing errands"
+        notes: " I was lucky to find a quirky, joyful porg!"
       },
       {
         face : imagePath,

diff --git a/src/components/list/demoBasicUsage/style.css b/src/components/list/demoBasicUsage/style.css
@@ -1,5 +1,4 @@
 md-divider {
-    margin-top: 10px;
-    margin-bottom: 0;
+  margin-top: 10px;
+  margin-bottom: 0;
 }
-
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -1,6 +1,6 @@
 $dense-baseline-grid: $baseline-grid / 2 !default;
 
-$list-h3-margin: 0 0 0px 0 !default;
+$list-h3-margin: 0 0 0 0 !default;
 $list-h4-margin: 3px 0 1px 0 !default;
 $list-h4-font-weight: 400 !default;
 $list-header-line-height: 1.2em !default;
@@ -56,7 +56,7 @@ md-list {
         @include ie11-min-height-flexbug($list-item-dense-height);
 
 
-        // Layout for controls in primary or secondary divs, or auto-infered first child
+        // Layout for controls in primary or secondary divs, or auto-inferred first child
 
         md-icon:first-child {
           width: $list-item-dense-primary-icon-width;
@@ -89,6 +89,7 @@ md-list {
             p {
               line-height: $list-item-dense-line-height;
               font-size: $list-item-dense-font-size;
+              padding-bottom: 4px;
             }
 
             h3 {