From aa5b1535a84206bcb80d72289a35419d1ba2158b Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 20 Mar 2015 12:55:08 -0500
Subject: [PATCH] codes

---
 src/components/tool-bar/tool-bar.scss | 66 ++++++++++++++++++---------
 src/components/view/view.js           | 23 ++++++++--
 2 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/src/components/tool-bar/tool-bar.scss b/src/components/tool-bar/tool-bar.scss
index b2979ae9e1..78bc34757e 100644
--- a/src/components/tool-bar/tool-bar.scss
+++ b/src/components/tool-bar/tool-bar.scss
@@ -15,32 +15,56 @@
   @include flex-order(80);
 }
 
-.bar > .title {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  @include flex-display();
-  display:none;
-}
-
-.bar > .title > .inner-title {
-  /*text-align: center;
-  @include flex-align-self(center);*/
-}
-
-.bar-accessories {
+.bar-items {
   @include flex(1);
   @include flex-display();
   @include flex-justify-content(space-between);
 }
 
-.bar > .accessory-primary {
-  /*@include flex-align-self(flex-start);*/
+.bar-items > .title {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: maroon;
+  margin: 0 140px;
+
+  @include flex(1);
+  @include flex-display();
+  @include flex-align-items(center);
 }
 
-.bar > .accessory-secondary {
-  /*@include flex-align-self(flex-end);*/
-  /*display:none;*/
+.bar-items > .title > .inner-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background: blue;
 }
+
+.back-button {
+  @include flex-display();
+  background: purple;
+
+  .back-button-icon {
+    background: blue;
+  }
+}
+
+.bar-items > .spacer {
+  @include flex(1);
+}
+
+.bar-android {
+
+  .spacer {
+    @include flex(none);
+  }
+
+  .title {
+    position: static;
+    margin: 0;
+  }
+
+}
+
diff --git a/src/components/view/view.js b/src/components/view/view.js
index 3b26f8e7fe..18ddb6b646 100644
--- a/src/components/view/view.js
+++ b/src/components/view/view.js
@@ -9,17 +9,30 @@ import {Ion} from '../ion';
 })
 @Template({
   inline: `
-    <div class="container">
-      <div class="bar">
-        <div class="bar-accessories">
-          <div class="bar-accessory accessory-primary" style="background:red">
+      <div class="bar bar-android2">
+        <div class="bar-items">
+          <div class="back-button">
+            <div class="back-button-icon">&lt;</div>
+            <div class="back-button-text">
+              <div class="back-default">Back</div>
+              <div class="back-title"></div>
+            </div>
+          </div>
+          <div class="title">
+            <div class="inner-title">
+              Create hybrid mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
+            </div>
+          </div>
+          <div class="bar-primary-item" style="background:red">
             PRIMARY
           </div>
-          <div class="bar-accessory accessory-secondary" style="background:green">
+          <div class="spacer"></div>
+          <div class="bar-secondary-item" style="background:green">
             SECONDARY
           </div>
         </div>
       </div>
+    <div class="container">
       <content></content>
     </div>`
 })