From d2b730c5e36e91d2e224aed3d7260990852dd689 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 27 Jul 2015 08:31:34 -0500
Subject: [PATCH] list headers/footers

---
 ionic/components/form/form.scss               | 20 ++---
 ionic/components/item/extensions/ios.scss     | 13 ++-
 ionic/components/list/extensions/ios.scss     | 25 ++----
 ionic/components/list/list.scss               | 36 +-------
 .../list/test/headers-footers/e2e.ts          |  1 +
 .../list/test/headers-footers/index.ts        |  7 ++
 .../list/test/headers-footers/main.html       | 83 +++++++++++++++++++
 .../components/search-bar/extensions/ios.scss |  2 +-
 ionic/ionic.scss                              |  2 +-
 9 files changed, 117 insertions(+), 72 deletions(-)
 create mode 100644 ionic/components/list/test/headers-footers/e2e.ts
 create mode 100644 ionic/components/list/test/headers-footers/index.ts
 create mode 100644 ionic/components/list/test/headers-footers/main.html

diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
index a0f1f0b6ae..bef08509b4 100644
--- a/ionic/components/form/form.scss
+++ b/ionic/components/form/form.scss
@@ -19,11 +19,6 @@ textarea {
 // Form Controls
 // -------------------------------
 
-textarea {
-  height: auto;
-  padding: 0;
-}
-
 .item-input {
 
   // text inputs
@@ -65,6 +60,15 @@ textarea {
   }
 }
 
+textarea {
+  height: auto;
+  padding: 0;
+}
+
+.platform-mobile textarea {
+  resize: none;
+}
+
 
 // Placeholder
 // -------------------------------
@@ -92,9 +96,3 @@ input[type="checkbox"][readonly] {
   background-color: transparent;
 }
 
-.platform-ios,
-.platform-android {
-  textarea {
-    resize: none;
-  }
-}
diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss
index 06ad065c23..5d2321b7cc 100644
--- a/ionic/components/item/extensions/ios.scss
+++ b/ionic/components/item/extensions/ios.scss
@@ -2,6 +2,7 @@
 // iOS Item
 // --------------------------------------------------
 
+$item-ios-border-color:           #c8c7cc !default;
 $item-ios-font-size:              1.6rem !default;
 
 $item-ios-padding-top:            13px !default;
@@ -9,9 +10,9 @@ $item-ios-padding-right:          15px !default;
 $item-ios-padding-bottom:         14px !default;
 $item-ios-padding-left:           15px !default;
 
-$item-ios-border-color:           $list-ios-border-color !default;
-$item-ios-avatar-size:            4rem;
-$item-ios-thumbnail-size:         8rem;
+$item-ios-avatar-size:            4rem !default;
+$item-ios-thumbnail-size:         8rem !default;
+$item-ios-note-color:             #999 !default;
 
 
 .list[mode="ios"] {
@@ -37,10 +38,6 @@ $item-ios-thumbnail-size:         8rem;
       left: $item-ios-padding-left;
       border-top: 1px solid $item-ios-border-color;
     }
-
-    &:last-child:after {
-      left: 0;
-    }
   }
 
   .text-input,
@@ -52,7 +49,7 @@ $item-ios-thumbnail-size:         8rem;
   }
 
   .item-note {
-    color: #999;
+    color: $item-ios-note-color;
   }
 
   .item > icon {
diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss
index e1b612bd59..38293d2465 100644
--- a/ionic/components/list/extensions/ios.scss
+++ b/ionic/components/list/extensions/ios.scss
@@ -2,38 +2,29 @@
 // iOS List
 // --------------------------------------------------
 
-$list-ios-background-color:      #fff !default;
-$list-ios-border-color:          #c8c7cc !default;
-
-$list-ios-header-margin:         35px 15px 10px 15px !default;
-$list-ios-header-font-size:      1.4rem !default;
+$list-ios-header-padding:         30px $item-ios-padding-right 10px $item-ios-padding-left !default;
+$list-ios-header-font-size:      1.2rem !default;
 $list-ios-header-color:          #6d6d72 !default;
 
-$list-ios-footer-padding:        0 15px !default;
-$list-ios-footer-font-size:      1.4rem !default;
+$list-ios-footer-padding:        10px $item-ios-padding-right 0 $item-ios-padding-left !default;
+$list-ios-footer-font-size:      1.2rem !default;
 $list-ios-footer-color:          #8f8f94 !default;
 
 
 .list[mode="ios"] {
-/*
-  .list-header {
-    position: relative;
-    margin: $list-ios-header-margin;
 
+  .list-header {
+    padding: $list-ios-header-padding;
     font-size: $list-ios-header-font-size;
     text-transform: uppercase;
-
     color: $list-ios-header-color;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 
   .list-footer {
     padding: $list-ios-footer-padding;
     font-size: $list-ios-footer-font-size;
+    text-transform: uppercase;
     color: $list-ios-footer-color;
   }
-*/
+
 }
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index 4fe48305c8..b3313f6f1e 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -10,41 +10,9 @@
   list-style-type: none;
 }
 
-
-/*
-.list-header {
-  margin-top: $list-margin-top;
-  margin-bottom: $list-margin-bottom;
+.list-header,
+.list-footer {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-
-.list {
-  position: relative;
-  display: block;
-  margin: $list-margin-top 0;
-  padding: 0;
-
-  // TODO: Verify if we need this, it makes margin sizing (inset, etc.) not
-  // work and is not present in v1
-  //width: 100%;
-
-  list-style-type: none;
-
-  &[inset],
-  &.list-inset {
-    margin-top: 0;
-    margin-left: -$content-padding;
-    margin-right: -$content-padding;
-  }
-}
-
-.list + .list-footer {
-  margin: ($list-margin-bottom - $list-margin-top) 0 $list-margin-bottom;
-}
-
-.list-header + .list {
-  margin-top: 0;
-}
-*/
diff --git a/ionic/components/list/test/headers-footers/e2e.ts b/ionic/components/list/test/headers-footers/e2e.ts
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/ionic/components/list/test/headers-footers/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/ionic/components/list/test/headers-footers/index.ts b/ionic/components/list/test/headers-footers/index.ts
new file mode 100644
index 0000000000..2dac2b7a35
--- /dev/null
+++ b/ionic/components/list/test/headers-footers/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
diff --git a/ionic/components/list/test/headers-footers/main.html b/ionic/components/list/test/headers-footers/main.html
new file mode 100644
index 0000000000..e6098a5ff4
--- /dev/null
+++ b/ionic/components/list/test/headers-footers/main.html
@@ -0,0 +1,83 @@
+<ion-toolbar><ion-title>List Headers/Footers</ion-title></ion-toolbar>
+
+<ion-list>
+
+  <div class="list-header">
+    List Header
+  </div>
+
+  <div class="item">
+    <icon name="ion-wifi"></icon>
+    <div class="item-content">
+      Wifi
+    </div>
+    <div class="item-note">
+      Terrible
+    </div>
+  </div>
+
+  <div class="item">
+    <icon name="ion-heart"></icon>
+    <div class="item-content">
+      Affection
+    </div>
+    <div class="item-note">
+      Very Little
+    </div>
+  </div>
+
+</ion-list>
+
+<ion-list>
+
+  <div class="list-header">
+    List Header
+  </div>
+
+  <div class="item">
+    <icon name="ion-wand"></icon>
+    <div class="item-content">
+      Magic
+    </div>
+    <div class="item-note">
+      Activated
+    </div>
+  </div>
+
+  <div class="list-footer">
+    List Footer
+  </div>
+
+</ion-list>
+
+<ion-list>
+
+  <div class="list-header">
+    List Header with text that is too long to fit inside the list header
+  </div>
+
+  <div class="item">
+    <icon name="ion-pizza"></icon>
+    <div class="item-content">
+      Pizza
+    </div>
+    <div class="item-note">
+      Always
+    </div>
+  </div>
+
+  <div class="item">
+    <icon name="ion-beer"></icon>
+    <div class="item-content">
+      Beer
+    </div>
+    <div class="item-note">
+      Yes Plz
+    </div>
+  </div>
+
+  <div class="list-footer">
+    List Footer with text that is also too long why do you do this all the time plz stop its too long!
+  </div>
+
+</ion-list>
diff --git a/ionic/components/search-bar/extensions/ios.scss b/ionic/components/search-bar/extensions/ios.scss
index be4a45ddb5..8a2f766efb 100644
--- a/ionic/components/search-bar/extensions/ios.scss
+++ b/ionic/components/search-bar/extensions/ios.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 $search-bar-ios-background-color:     #c9c9ce !default;
-$search-bar-ios-border-color:         $list-ios-border-color !default;
+$search-bar-ios-border-color:         $item-ios-border-color !default;
 $search-bar-ios-padding:              0 8px !default;
 $search-bar-ios-input-height:         28px !default;
 $search-bar-ios-background-svg:       "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='#939398' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 4891314ae0..837e328ba0 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -49,13 +49,13 @@
 
 // iOS Components
 @import
+  "components/item/extensions/ios",
   "components/toolbar/extensions/ios",
   "components/action-menu/extensions/ios",
   "components/card/extensions/ios",
   "components/checkbox/extensions/ios",
   "components/content/extensions/ios",
   "components/list/extensions/ios",
-  "components/item/extensions/ios",
   "components/nav-bar/extensions/ios",
   "components/popup/extensions/ios",
   "components/radio/extensions/ios",