diff options
author | BigBlueHat <byoung@bigbluehat.com> | 2014-02-17 21:55:40 +0000 |
---|---|---|
committer | suelockwood <deathbear@apache.org> | 2014-02-19 14:55:44 -0500 |
commit | 5d17c204dbcefc389420fef79810a58be91cde71 (patch) | |
tree | fac41763d656b40abd03b03b1ab1d7cb9231645a | |
parent | 3ad1f6a76e10ccf4f9608fd6d8de06da7491c548 (diff) | |
download | couchdb-5d17c204dbcefc389420fef79810a58be91cde71.tar.gz |
added overflow:auto to one-pane styles
fixed styletests template license comment...again
fixed Delete DB modal button styles
took graphs out of span5 + inline styles
They are now properly sized with no cutoffs
changed .row to .row-fluid in .container-fluid
reordered imports in databases; consolidated .well
removed unused styles
more Bootstrap overrides moved higher up
conslidated prettyprint stuff
moved document specific CSS to documents
no more CodeMirror anymore; gone be the related CSS
moved the input tag overrides up
Keeping like with like, so we can find the
like.
working on grouping Bootstrap overrides together
Also fixed some space around in-tab icons and
did some whitespace cleanup...I know...I know...
reordering & reducing the customness some more
Still finding heavy/dangerous Bootstrap 2.x overrides
(margin settings for .row & .tab-content--broadly).
Changing colors and such is generally fine, but
changing positioning breaks the grid. :frowning:
12 files changed, 282 insertions, 373 deletions
diff --git a/src/fauxton/app/addons/compaction/templates/layout.html b/src/fauxton/app/addons/compaction/templates/layout.html index 512589252..f63b7de5f 100644 --- a/src/fauxton/app/addons/compaction/templates/layout.html +++ b/src/fauxton/app/addons/compaction/templates/layout.html @@ -11,7 +11,7 @@ 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 class="row"> +<div class="row-fluid"> <div class="span12 compaction-option"> <h3> Compact Database </h3> <p>Compacting a database removes deleted documents and previous revisions. It is an irreversible operation and may take a while to complete for large databases.</p> @@ -19,7 +19,7 @@ the License. </div> </div> -<div class="row"> +<div class="row-fluid"> <div class="span12 compaction-option"> <h3> Cleanup Views </h3> <p>Cleaning up views in a database removes old view files still stored on the filesystem. It is an irreversible operation.</p> diff --git a/src/fauxton/app/addons/databases/assets/less/databases.less b/src/fauxton/app/addons/databases/assets/less/databases.less index 7b7cf6a5a..b401e7df9 100644 --- a/src/fauxton/app/addons/databases/assets/less/databases.less +++ b/src/fauxton/app/addons/databases/assets/less/databases.less @@ -13,8 +13,9 @@ /* =database ---------------------------------------------------------------------- */ -@import "../../../../../assets/less/bootstrap/variables.less"; -@import "../../../../../assets/less/bootstrap/mixins.less"; +@import "../../../../../assets/less/bootstrap/variables.less"; +@import "../../../../../assets/less/variables.less"; +@import "../../../../../assets/less/bootstrap/mixins.less"; .tools .nav { margin-bottom: 10px; diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less index 6f462ef75..9dee85e7b 100644 --- a/src/fauxton/app/addons/documents/assets/less/documents.less +++ b/src/fauxton/app/addons/documents/assets/less/documents.less @@ -48,25 +48,6 @@ button.beautify { } } -/** used in ddocs_info.html **/ -.well { - .row-fluid { - margin: 0; - } - .row-fluid .row-fluid:last-child .well-item { - border: none; - } - .well-item { - color: #666; - font-size: 12px; - border-bottom: 1px solid #e5e5e5; - padding: 8px 4px; - strong { - font-size: 16px; - } - } -} - /** used in view_editor.html **/ .design-doc-group{ .span3 { margin: 0;} @@ -90,3 +71,14 @@ button.beautify { width: 5%; } } + +#map-function, #reduce-function{ + width: 100%; + font-size: 16px; +} + +#editor-container { + width: 1316px; + height: 688px; + font-size: 16px; +} diff --git a/src/fauxton/app/addons/documents/templates/delete_database_modal.html b/src/fauxton/app/addons/documents/templates/delete_database_modal.html index 024f7c947..7ea3bc47e 100644 --- a/src/fauxton/app/addons/documents/templates/delete_database_modal.html +++ b/src/fauxton/app/addons/documents/templates/delete_database_modal.html @@ -30,8 +30,10 @@ the License. </form> </div> <div class="modal-footer"> - <a href="#" data-dismiss="modal" data-bypass="true" class="btn button cancel-button outlineGray fonticon-circle-x">Cancel</a> - <a href="#" id="delete-db-btn" data-bypass="true" class="btn btn-primary button red save fonticon-circle-check">Delete</a> + <button data-dismiss="modal" data-bypass="true" class="btn cancel-button"> + <i class="icon fonticon-circle-x"></i> Cancel</button> + <button id="delete-db-btn" data-bypass="true" class="btn btn-danger save"> + <i class="icon fonticon-circle-check"></i> Delete</button> </div> </div> diff --git a/src/fauxton/app/addons/documents/templates/view_editor.html b/src/fauxton/app/addons/documents/templates/view_editor.html index b4addad22..6a2084923 100644 --- a/src/fauxton/app/addons/documents/templates/view_editor.html +++ b/src/fauxton/app/addons/documents/templates/view_editor.html @@ -11,7 +11,6 @@ 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 class="row"> <ul class="nav nav-tabs" id="db-views-tabs-nav"> <li class="active"> <a data-bypass="true" id="index-nav" data-toggle="tab" href="#index"> <i class="fonticon-wrench fonticon"></i> @@ -88,5 +87,3 @@ the License. <div class="tab-pane" id="query"> </div> </div> -</div> - diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js index 13cbacb1b..62d876113 100644 --- a/src/fauxton/app/addons/documents/views.js +++ b/src/fauxton/app/addons/documents/views.js @@ -117,7 +117,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum template: "addons/documents/templates/delete_database_modal", events: { - "click a#delete-db-btn": "deleteDatabase", + "click #delete-db-btn": "deleteDatabase", "submit #delete-db-check": "deleteDatabase" }, @@ -456,7 +456,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum Views.AllDocsLayout = FauxtonAPI.View.extend({ template: "addons/documents/templates/all_docs_layout", - className: "row", initialize: function (options) { this.database = options.database; diff --git a/src/fauxton/app/addons/permissions/templates/section.html b/src/fauxton/app/addons/permissions/templates/section.html index 8f4d55200..0459562b1 100644 --- a/src/fauxton/app/addons/permissions/templates/section.html +++ b/src/fauxton/app/addons/permissions/templates/section.html @@ -16,7 +16,7 @@ the License. <p class="help"> <%= help %> <a href="<%=getDocUrl('database_permission')%>" target="_blank"><i class="icon-question-sign"> </i> </a></p> </header> -<div class="row"> +<div class="row-fluid"> <div class="span6"> <header> <h4> Users </h4> diff --git a/src/fauxton/app/addons/stats/templates/pie_table.html b/src/fauxton/app/addons/stats/templates/pie_table.html index c8e89cd03..1fa781a40 100644 --- a/src/fauxton/app/addons/stats/templates/pie_table.html +++ b/src/fauxton/app/addons/stats/templates/pie_table.html @@ -46,9 +46,5 @@ the License. </table> </div> - <div class="span5" style="height:430px;min-width: 430px"> - <center> - <svg id="<%= datatype %>_graph"></svg> - </center> - </div> + <svg id="<%= datatype %>_graph"></svg> </div> diff --git a/src/fauxton/app/addons/styletests/templates/theme.html b/src/fauxton/app/addons/styletests/templates/theme.html index f05bad182..3d93e5f1e 100644 --- a/src/fauxton/app/addons/styletests/templates/theme.html +++ b/src/fauxton/app/addons/styletests/templates/theme.html @@ -1,3 +1,4 @@ +<!-- // 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 @@ -9,7 +10,7 @@ // 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 class="container theme-showcase"> <!-- Main jumbotron for a primary marketing message or call to action --> diff --git a/src/fauxton/assets/less/bootstrap/bootstrap.less b/src/fauxton/assets/less/bootstrap/bootstrap.less index 6f1abd7e1..333198010 100644 --- a/src/fauxton/assets/less/bootstrap/bootstrap.less +++ b/src/fauxton/assets/less/bootstrap/bootstrap.less @@ -9,7 +9,6 @@ */ // Core variables and mixins -@import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; // CSS Reset diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less index 43e623c19..4ec502a2a 100644 --- a/src/fauxton/assets/less/fauxton.less +++ b/src/fauxton/assets/less/fauxton.less @@ -16,66 +16,33 @@ * Fauxton less style files * */ +@import "bootstrap/variables.less"; +@import "variables.less"; @import "bootstrap/bootstrap.less"; @import "bootstrap/mixins.less"; -@import "variables.less"; @import "prettyprint.less"; @import "icons.less"; +/** + * HTML-wide overrides + **/ -body { - background-color: #F2F2F2; -} -#main > footer { - position: fixed; - bottom: 0; - font-size: 10px; - margin-left: @navWidth; - padding: 5px 10px; - background-color: #F2F2F2; - width: 100%; - .closeMenu & { - margin-left: @collapsedNavWidth; - } -} - -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - -.row { - margin-left: 0; +*, *:before, *:after { + .box-sizing(border-box); } -// globals body { font-size: 16px; line-height:1.3; padding-bottom: 0px; color: #333; - padding-top: 92px; - &#home{ - padding-top: 90px; - } + padding-top: 90px; background-color: @sidebarBG; - /* OVERRIDE BOOTSTRAP BTN STYLES */ - .btn{ - .box-shadow(none); - .border-radius(@baseBorderRadius); - background-image: none; - text-shadow: none; - background-repeat: no-repeat; - } } h2,h3,h4 {font-weight: 600;} - -a, .btn{ +a { .transition(all .25s linear); } @@ -85,10 +52,245 @@ a:active { color: @linkColor; } -a:hover{ +a:hover { color: @red; } +input[type=text], +input[type=password] { + .border-radius(0); + padding: 12px; + border: 1px solid #ccc; + height: auto; + font-size: 16px; + margin-top: 0; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="file"], +input[type="checkbox"], +input[type="radio"], +select { + margin: 0 0 1em 0; +} + + +/* bootstrap overrides */ +.page-header { + border-bottom: 1px solid #E3E3E3; + margin-bottom: 10px; + h3 { + text-transform: capitalize; + margin-bottom: 0; + } +} + +.nav-tabs > li { + margin-right: 2px; + > a { + cursor: pointer; + color: #333; + border-color: #eeeeee #eeeeee #dddddd; + text-decoration: none; + background-color: #eeeeee; + border-radius: 0; + border-left: none; + border-right: none; + &:hover, + &:focus { + background-color: @linkRed; + border-top: 1px solid @red; + color: white; + } + } +} + +.well { + select { + margin: 0; + } + .controls-group { + &:first-child, + &:last-child { + margin-top: 24px; + } + margin-bottom: 8px; + } + .controls-row { + margin-bottom: 8px; + } + .row-fluid { + margin: 0; + } + .row-fluid .row-fluid:last-child .well-item { + border: none; + } + .well-item { + color: #666; + font-size: 12px; + border-bottom: 1px solid #e5e5e5; + padding: 8px 4px; + strong { + font-size: 16px; + } + } +} + +/*TABLE STYLES*/ +table.table { + table-layout: fixed; +} +table tr td{ + word-wrap: break-word; + &.select { + width: 20px; + } +} +thead { + border-bottom: 2px solid @redButton; +} +tbody { + padding-top: 10px; +} +.table-condensed td { + padding: 18px 5px; +} +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th +{ + background-color: #F7F7F7; +} + +/*form elements and buttons*/ +.btn-group { + > .btn + .dropdown-toggle, + > .btn:first-child, + > .btn:last-child, + > .dropdown-toggle { + .border-radius(0); + background-image: none; + text-shadow: none; + } +} + +.btn { + .box-shadow(none); + .border-radius(@baseBorderRadius); + background-image: none; + text-shadow: none; + background-repeat: no-repeat; + padding: 10px; + margin-top: 0px; + .icon { + margin-right: 0.2em; + } + &.btn-small { + padding: 5px 10px; + .icon { + margin-right: 0; + font-size: inherit; + } + } + &.btn-mini { + padding: 3px 8px; + .icon { + margin-right: 0; + font-size: inherit; + } + } +} +.btn-primary { + background: @redButton; +} + +.btn-primary a:visited { + color: #fff; +} + +.form-actions { + background: none; + border: none; +} + +.input-append, +.input-prepend { + .add-on { + font-size: 18px; + padding: 14px 5px 30px; + } + .btn .icon { + font-size: 21.5px; + margin-right: 0; + } +} + +.row-fluid .input-append [class*="span"], +.input-prepend input[class*="span"] { + width: auto; +} + +.form-inline { + input[type=password], + input[type=text] { + width: auto; + } +} +.checkbox { + label { + display: inline-block; + padding-left:25px; + } +} + +label { + margin-right: 15px; + padding-left:0; + display: block; + cursor: pointer; + position: relative; + font-size: 14px; + &.inline { + display: inline-block; + } +} +.help-block { + font-size: 12px; +} + +input[type=text].error { + border: red 1px solid; +} + +/** + * Fauxton-specific Bootstrap additions + **/ +table.databases { + clear: both; +} +.nav-tabs > li > a .fonticon:before { + margin-right: 6px; + font-size: 16px; +} + +/* application specific stuff */ +#main > footer { + position: fixed; + bottom: 0; + font-size: 10px; + margin-left: @navWidth; + padding: 5px 10px; + background-color: #F2F2F2; + width: 100%; + .closeMenu & { + margin-left: @collapsedNavWidth; + } +} + /* ajax loader */ .loader { background: url('../img/loader.gif') center center no-repeat; @@ -125,20 +327,6 @@ a:hover{ } } -/* bootstrap overrides */ -.container-fluid { - padding-right: 0px; - padding-left: 0px; -} -.page-header { - border-bottom: 1px solid #E3E3E3; - margin-bottom: 10px; - h3 { - text-transform: capitalize; - margin-bottom: 0; - } -} - /* Fixed side navigation */ #primary-navbar { height: 100%; @@ -306,6 +494,8 @@ a:hover{ left: @navWidth; right: 0; margin-left: 0; + padding-left: 0; + padding-right: 0; background-color: @sidebarBG; min-width: 600px; height: 100%; @@ -315,6 +505,7 @@ a:hover{ &.one-pane{ min-width: 800px; margin-top: 0; + overflow: auto; } } @@ -413,11 +604,6 @@ a:hover{ } -footer#mainFooter{ - position: fixed; - bottom: 0; -} - /*SIDEBAR TEMPLATE STYLES*/ .topmenu-defaults { height: 70px; @@ -439,6 +625,9 @@ footer#mainFooter{ } #dashboard-upper-content{ + .tab-content { + padding-top: 70px; + } .well{ padding: 20px; .border-radius(0); @@ -526,107 +715,7 @@ footer#mainFooter{ max-width: 500px; } -.nav-tabs > li{ - margin-right: 2px; - > a { - cursor: pointer; - color: #333; - border-color: #eeeeee #eeeeee #dddddd; - text-decoration: none; - background-color: #eeeeee; - border-radius: 0; - border-left: none; - border-right: none; - &.fonticon:before{ - margin-right: 6px; - font-size: 16px; - } - } -} - -.nav-tabs > li > a:hover, .nav-tabs > li > a:focus { - background-color: @linkRed; - border-top: 1px solid @red; - color: white; -} - - -.tab-content { - margin-top: 70px; -} - -.well { - .controls-group { - &:first-child, &:last-child{ - margin-top: 24px; - } - margin-bottom: 8px; - } - .controls-row { - margin-bottom: 8px; - } -} - -/*TABLE STYLES*/ -table.table { - table-layout: fixed; -} -table { - tr{ - td{ - word-wrap: break-word; - &.select { - width: 20px; - } - } - } -} -table.databases {clear: both;} -thead {border-bottom: 2px solid @redButton;} -tbody {padding-top: 10px;} -.table-condensed td {padding: 18px 5px;} -.table-striped tbody > tr:nth-child(odd) > td, -.table-striped tbody > tr:nth-child(odd) > th -{ - background-color: #F7F7F7; -} - - -/*form elements and buttons*/ -.btn-group { - > .btn + .dropdown-toggle, - > .btn:first-child, - > .btn:last-child, - > .dropdown-toggle - { - .border-radius(0); - background-image: none; - text-shadow: none; - } -} - -.btn { - padding: 10px; - margin-top: 0px; - .icon { - margin-right: 0.2em; - } - &.btn-small { - padding: 5px 10px; - .icon { - margin-right: 0; - font-size: inherit; - } - } - &.btn-mini { - padding: 3px 8px; - .icon { - margin-right: 0; - font-size: inherit; - } - } -} - +/** table row selector thing **/ .select{ > a{ display: block; @@ -657,98 +746,6 @@ tbody {padding-top: 10px;} } } -input[type=text], input[type=password], -.navbar-form input{ - .border-radius(0); - padding: 12px; - border: 1px solid #ccc; - height: auto; - font-size: 16px; - margin-top: 0; -} - - - -label.fonticon-search { - .box-sizing(content-box); - position: relative; - &:before { - .transition(all .25s linear); - font-size: 16px; - position: absolute; - right: -47px; - background-color: #E1E1E1; - height: 46px; - width: 48px; - border: 1px solid #cccccc; - padding: 14px; - top: -4px; - } - &:hover{ - color:white; - &:before { - background-color: @red; - } - } -} - - -.form-inline { - input[type=password], - input[type=text]{ - width: auto; - } -} -*, *:before, *:after { - .box-sizing(border-box); -} - -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -input[type="file"], input[type="checkbox"], input[type="radio"], select { - margin: 0 0 1em 0; -} - -.well select { - margin: 0; -} - -form.custom .hidden-field { - margin-left: -99999px; - position: absolute; - visibility: hidden; -} - - -.checkbox { - label{ - display: inline-block; - padding-left:25px; - } -} - -label{ - margin-right: 15px; - padding-left:0; - display: block; - cursor: pointer; - position: relative; - font-size: 14px; - &.inline{ - display: inline-block; - } -} -.help-block{ - font-size: 12px; -} - -input[type=text].error{ - border: red 1px solid; -} - .custom-inputs{ input[type=radio], @@ -820,45 +817,6 @@ form.view-query-update, form.view-query-save { max-width: 100%; } - -.form-actions { - background: none; - border: none; -} - -.input-append, -.input-prepend { - .add-on { - font-size: 18px; - padding: 14px 5px 30px; - } - .btn .icon{ - font-size: 21.5px; - margin-right: 0; - } -} - -.row-fluid .input-append [class*="span"], -.input-prepend input[class*="span"]{ - width: auto; -} - -/*pretty print*/ -pre.prettyprint { - background: #E5E0DD; - border: none; -} - -.prettyprint .str, .prettyprint .lit { - color: @red; -} - -.prettyprint .pln, .prettyprint .pun, .prettyprint .typ{ - color: #333333; -} - - - /*logs*/ #log-sidebar{ padding: 20px; @@ -876,20 +834,6 @@ div.spinner { top: 50%; } -/* Code mirror overrides */ -.CodeMirror-scroll { - .border-radius(2px); - border: solid 1px #ddd; -} - -.btn-primary { - background: @redButton; -} - -.btn-primary a:visited { - color: #fff; -} - #api-navbar{ position: relative; } @@ -924,14 +868,3 @@ div.spinner { } } } - -#map-function, #reduce-function{ - width: 100%; - font-size: 16px; -} - -#editor-container { - width: 1316px; - height: 688px; - font-size: 16px; -} diff --git a/src/fauxton/assets/less/prettyprint.less b/src/fauxton/assets/less/prettyprint.less index 7925fa72a..4367b3263 100644 --- a/src/fauxton/assets/less/prettyprint.less +++ b/src/fauxton/assets/less/prettyprint.less @@ -12,8 +12,8 @@ */ pre.prettyprint { - background: #000; - border-radius: 0; + background: #E5E0DD; + border: none; font-size: 83%; line-height: 1.4; margin: 0; @@ -21,26 +21,15 @@ pre.prettyprint { } .prettyprint { .pln, .pun, .typ { - color: #f8f8f8; + color: #333; } .kwd { color: #ff8300; } - .str { - color: #ff8300; - } - .lit { - color: #00ff00; + .str, .lit { + color: @red; } .com { color: #666; } } -.CodeMirror-wrap pre{ - &.view-code-error{ - color: @darkRed; - } - .tooltip{ - z-index: 100000000; - } -} |