Repository: couchdb-fauxton Updated Branches: refs/heads/master 24953b293 -> ae91c75e6
Remove unused template; flexbox CSS tweaks; mixins added Just a few small clean-up tasks. This removes an unused template, improves the flex CSS to make it more usable elsewhere including moving the key rules to mixins. Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/ae91c75e Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/ae91c75e Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/ae91c75e Branch: refs/heads/master Commit: ae91c75e6672c214a4f2a98377791d13fa714f83 Parents: 24953b2 Author: Ben Keen <ben.k...@gmail.com> Authored: Tue Sep 8 16:31:34 2015 -0700 Committer: Ben Keen <ben.k...@gmail.com> Committed: Thu Sep 10 13:56:43 2015 -0700 ---------------------------------------------------------------------- .../compaction/assets/less/compaction.less | 2 +- app/templates/layouts/with_tabs.html | 25 -------------- app/templates/layouts/with_tabs_sidebar.html | 4 +-- assets/less/layouts.less | 36 ++++++++------------ assets/less/mixins.less | 20 +++++++++++ 5 files changed, 37 insertions(+), 50 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ae91c75e/app/addons/compaction/assets/less/compaction.less ---------------------------------------------------------------------- diff --git a/app/addons/compaction/assets/less/compaction.less b/app/addons/compaction/assets/less/compaction.less index 5344989..4083c6a 100644 --- a/app/addons/compaction/assets/less/compaction.less +++ b/app/addons/compaction/assets/less/compaction.less @@ -19,6 +19,6 @@ padding: 10px; } -#dashboard.flexbox-layout #dashboard-content .compaction-page { +#dashboard-content.flex-layout .compaction-page { padding: @panelPadding; } http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ae91c75e/app/templates/layouts/with_tabs.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/with_tabs.html b/app/templates/layouts/with_tabs.html deleted file mode 100644 index 94cf801..0000000 --- a/app/templates/layouts/with_tabs.html +++ /dev/null @@ -1,25 +0,0 @@ -<!-- -Licensed under the Apache License, Version 2.0 (the "License"); you may not -use this file except in compliance with the License. You may obtain a copy of -the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, WITHOUT -WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the -License for the specific language governing permissions and limitations under -the License. ---> -<div id="dashboard" class="container-fluid"> - - <div class="fixed-header"> - <div id="breadcrumbs"></div> - <div id="api-navbar"></div> - </div> - - <div class="row-fluid content-area"> - <div id="tabs" class="row-fluid"></div> - <div id="dashboard-content" class="list span12"></div> - </div> -</div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ae91c75e/app/templates/layouts/with_tabs_sidebar.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html index e0cff3e..4e16359 100644 --- a/app/templates/layouts/with_tabs_sidebar.html +++ b/app/templates/layouts/with_tabs_sidebar.html @@ -12,7 +12,7 @@ License for the specific language governing permissions and limitations under the License. */%> -<div id="dashboard" class="container-fluid with-sidebar flexbox-layout"> +<div id="dashboard" class="container-fluid with-sidebar"> <div class="with-sidebar tabs-with-sidebar content-area"> <div class="header-wrapper"> @@ -26,7 +26,7 @@ the License. <aside id="sidebar-content" class="scrollable"></aside> - <section id="dashboard-content"> + <section id="dashboard-content" class="flex-layout flex-cols"> <div id="dashboard-upper-content"></div> <div id="dashboard-lower-content" class="flex-body"></div> <div id="footer"></div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ae91c75e/assets/less/layouts.less ---------------------------------------------------------------------- diff --git a/assets/less/layouts.less b/assets/less/layouts.less index 33b2af9..2321f16 100644 --- a/assets/less/layouts.less +++ b/assets/less/layouts.less @@ -1,16 +1,17 @@ @import "variables.less"; +@import "mixins.less"; -/* new flex layout for templates */ +/* new flex layout for templates. "body #dashboard" needed for specificity: will remove at end */ +body #dashboard .flex-layout { + .display-flex(); -#dashboard.flexbox-layout #dashboard-content { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + &.flex-cols { + .flex-direction(column); + } + &.flex-rows { + .flex-direction(row); + } /* overrides */ padding: 0; @@ -21,35 +22,26 @@ /* always default all child elements as flex items */ &>* { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + .flex(1); } /* notice we don't set heights. Flex will expand to fill the content but no more */ #dashboard-upper-content { - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + .flex(0 0 auto); } - #dashboard-lower-content { padding: @panelPadding; } #footer { - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + .flex(0 0 auto); } } /* can be added to any element in a display:flex element that you want to act as the main body. It expands to the available space and shows a scrollbar */ .flex-body { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + .flex(1); overflow: auto; } http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ae91c75e/assets/less/mixins.less ---------------------------------------------------------------------- diff --git a/assets/less/mixins.less b/assets/less/mixins.less index 69abaf1..0448475 100644 --- a/assets/less/mixins.less +++ b/assets/less/mixins.less @@ -38,3 +38,23 @@ -ms-user-select: none; user-select: none; } + +.display-flex() { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/* rather than run through all permutations of the shorthand options for flex, this just pulls all arguments */ +.flex(...) { + -webkit-flex: @arguments; + -ms-flex: @arguments; + flex: @arguments; +} + +/* @dir: column or row */ +.flex-direction(@dir) { + -webkit-flex-direction: @dir; + -ms-flex-direction: @dir; + flex-direction: @dir; +}