diff --git a/dist/css/ionic.css b/dist/css/ionic.css index a92885d5c8..a060ccf814 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3424,6 +3424,43 @@ a.button { -webkit-transition: opacity 0.4s ease-in; opacity: 1; } +.split-pane { + height: 100%; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + -moz-align-items: stretch; + align-items: stretch; } + +.split-pane-menu { + -webkit-box-flex: 0; + -webkit-flex: 0 0 320px; + -moz-box-flex: 0; + -moz-flex: 0 0 320px; + -ms-flex: 0 0 320px; + flex: 0 0 320px; + height: 100%; + width: 320px; + border-right: 1px solid #eeeeee; + overflow-y: auto; } + @media all and (max-width: 568px) { + .split-pane-menu { + border-right: none; } } + +.split-pane-content { + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -moz-box-flex: 1; + -moz-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } + /** * Scroll is the scroll view component available for complex and custom * scroll view functionality. diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index ed3a617d5a..e4c58f6d38 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -386,6 +386,15 @@ angular.module('ionic.ui.list', ['ngAnimate']) canSwipe: '@', buttons: '=', }, + template: '\ +
\ +
\ +
\ + \ +
\ + ', + + /* template: '
  • \
    \ \ @@ -398,7 +407,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
    \ \
    \ -
    • ', + ',*/ link: function($scope, $element, $attr, list) { $scope.isEditing = false; $scope.deleteIcon = list.scope.deleteIcon; diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index 5fddc52c9d..897b1767df 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -18,6 +18,15 @@ angular.module('ionic.ui.list', ['ngAnimate']) canSwipe: '@', buttons: '=', }, + template: '\ +
    \ +
    \ +
    \ + \ +
    \ +     ', + + /* template: '
  • \
    \ \ @@ -30,7 +39,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
    \ \
    \ -
    • ', + ',*/ link: function($scope, $element, $attr, list) { $scope.isEditing = false; $scope.deleteIcon = list.scope.deleteIcon; diff --git a/scss/ionic/_splitPane.scss b/scss/ionic/_splitPane.scss new file mode 100644 index 0000000000..9587302f52 --- /dev/null +++ b/scss/ionic/_splitPane.scss @@ -0,0 +1,21 @@ +.split-pane { + height: 100%; + width: 100%; + @include display-flex(); + @include align-items(stretch); +} +.split-pane-menu { + @include flex(0, 0, $split-pane-menu-width); + height: 100%; + width: $split-pane-menu-width; + border-right: 1px solid $split-pane-menu-border-color; + + overflow-y: auto; + + @media all and (max-width: 568px) { + border-right: none; + } +} +.split-pane-content { + @include flex(1, 0, auto); +} diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index b0a74a5216..5dee5ae0d3 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -415,6 +415,8 @@ $menu-inset-border-color: #bbb; $menu-width: 270px; $menu-animation-speed: 200ms; +$split-pane-menu-width: 320px; +$split-pane-menu-border-color: #eee; // Modals // ------------------------------- diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss index 2dbedfb63b..2de9cb3c44 100644 --- a/scss/ionic/ionic.scss +++ b/scss/ionic/ionic.scss @@ -42,6 +42,9 @@ "alerts", "slideBox", + + "splitPane", + "scroll", "nav", diff --git a/test/splitPane.html b/test/splitPane.html new file mode 100644 index 0000000000..dfa65b8ede --- /dev/null +++ b/test/splitPane.html @@ -0,0 +1,163 @@ + + + + Split Pane + + + + + + + + +
    + +
    +

    Split Pane

    +
    + +
    +
    +
    +
    +

    Left side

    + +
    +
    +

    Right Side

    +
    +
    +
    +
    + +
    + + + +