You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2013/08/22 12:44:39 UTC
[6/7] git commit: updated refs/heads/master to b65f11f
improved styling for query controls
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/ff83a905
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/ff83a905
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/ff83a905
Branch: refs/heads/master
Commit: ff83a905962a9899c6136a73cc42894f135011bb
Parents: f4a623f
Author: sean barclay <fu...@hotmail.com>
Authored: Wed Aug 21 10:25:31 2013 -0700
Committer: Garren Smith <ga...@gmail.com>
Committed: Thu Aug 22 12:30:11 2013 +0200
----------------------------------------------------------------------
src/fauxton/app/templates/documents/doc.html | 2 +-
.../app/templates/documents/view_editor.html | 142 ++++++++-------
src/fauxton/assets/less/fauxton.less | 174 +++++++++++++++++--
3 files changed, 228 insertions(+), 90 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/ff83a905/src/fauxton/app/templates/documents/doc.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/documents/doc.html b/src/fauxton/app/templates/documents/doc.html
index 81c74c4..d6577af 100644
--- a/src/fauxton/app/templates/documents/doc.html
+++ b/src/fauxton/app/templates/documents/doc.html
@@ -35,7 +35,7 @@ the License.
<textarea class="doc-code"><%- JSON.stringify(doc.attributes, null, " ") %></textarea>
<br />
<p>
- <button class="save-doc button" type="button">Save</button>
+ <button class="save-doc btn btn-success btn-large save" type="button">Save</button>
</p>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/ff83a905/src/fauxton/app/templates/documents/view_editor.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/documents/view_editor.html b/src/fauxton/app/templates/documents/view_editor.html
index 3f0d959..b584208 100644
--- a/src/fauxton/app/templates/documents/view_editor.html
+++ b/src/fauxton/app/templates/documents/view_editor.html
@@ -91,11 +91,10 @@ the License.
</div>
</div>
<div class="control-group">
- <hr />
<div class="controls">
- <button class="btn btn-success save">Save</button>
+ <button class="btn btn-success btn-large save">Save</button>
<% if (!this.newView) { %>
- <button class="btn btn-danger delete">Delete</button>
+ <button class="btn btn-danger btn-large delete">Delete</button>
<% } %>
</div>
</div>
@@ -108,80 +107,79 @@ the License.
</div>
<div class="tab-pane" id="query">
<div class="advanced-options well">
- <form class="view-query-update">
- <div class="row-fluid">
- <div class="controls controls-row">
- <input name="key" class="span6" type="text" placeholder="Key">
- <input name="keys" class="span6" type="text" placeholder="Keys">
+ <form class="view-query-update custom-inputs">
+ <div class="controls-group">
+ <div class="row-fluid">
+ <div class="controls controls-row">
+ <input name="key" class="span6" type="text" placeholder="Key">
+ <input name="keys" class="span6" type="text" placeholder="Keys">
+ </div>
</div>
- </div>
- <div class="row-fluid">
- <div class="controls controls-row">
- <input name="startkey" class="span6" type="text" placeholder="Start Key">
- <input name="endkey" class="span6" type="text" placeholder="End Key">
+ <div class="row-fluid">
+ <div class="controls controls-row">
+ <input name="startkey" class="span6" type="text" placeholder="Start Key">
+ <input name="endkey" class="span6" type="text" placeholder="End Key">
+ </div>
</div>
</div>
- <div class="row-fluid">
- <div class="controls controls-row">
-
- <label class="checkbox inline">
- <input name="include_docs" type="checkbox" value="true"> Include Docs
- </label>
-
- <% if (hasReduce) { %>
- <label class="checkbox inline">
- <input name="reduce" type="checkbox" value="true"> Reduce
- </label>
-
- <label class="checkbox inline">
- Group Level:
- <select disabled name="group_level" class="input-small">
- <option value="0">None</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- <option value="8">8</option>
- <option value="9">9</option>
- <option value="999" selected="selected">exact</option>
- </select>
- </label>
- <% } %>
- </div>
- <div class="controls controls-row">
- <label class="checkbox inline">
- <input name="stale" type="checkbox" value="ok"> Stale
- </label>
- <label class="checkbox inline">
- <input name="descending" type="checkbox" value="true"> Descending
- </label>
- <label class="checkbox inline">
- Limit:
- <select name="limit" class="input-small">
- <option>5</option>
- <option selected="selected">10</option>
- <option>25</option>
- <option>50</option>
- <option>100</option>
- </select>
- </label>
- </div>
- <div class="controls controls-row">
- <label class="checkbox inline">
- <input name="inclusive_end" type="checkbox" value="false"> Disable Inclusive End
- </label>
- <label class="checkbox inline">
- <input name="update_seq" type="checkbox" value="true"> Include Update Sequence
- </label>
+ <div class="controls-group">
+ <div class="row-fluid">
+ <div class="controls controls-row">
+ <div class="checkbox inline">
+ <input id="check1" type="checkbox" name="include_docs" value="true">
+ <label name="include_docs" for="check1">Include Docs</label>
+ <% if (hasReduce) { %>
+ <input id="check2" name="reduce" type="checkbox" value="true">
+ <label for="check2">Reduce</label>
+ </div>
+ <label id="select1" class="drop-down inline">
+ Group Level:
+ <select id="select1" disabled name="group_level" class="input-small">
+ <option value="0">None</option>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="999" selected="selected">exact</option>
+ </select>
+ </label>
+ <% } %>
+ <div class="checkbox inline">
+ <input id="check3" name="stale" type="checkbox" value="ok">
+ <label for="check3">Stale</label>
+ <input id="check4" name="descending" type="checkbox" value="true">
+ <label for="check4">Descending</label>
+ </div>
+ <label class="drop-down inline">
+ Limit:
+ <select name="limit" class="input-small">
+ <option>5</option>
+ <option selected="selected">10</option>
+ <option>25</option>
+ <option>50</option>
+ <option>100</option>
+ </select>
+ </label>
+ <div class="checkbox inline">
+ <input id="check5" name="inclusive_end" type="checkbox" value="false">
+ <label for="check5">Disable Inclusive End</label>
+ <input id="check6" name="update_seq" type="checkbox" value="true">
+ <label for="check6">Descending</label>
+ </div>
+ </div>
</div>
</div>
- <div class="row-fluid">
- <div class="controls controls-row">
- <button type="submit" class="btn btn-primary">Query</button>
- <button class="btn btn-info preview">Preview</button>
+ <div class="controls-group">
+ <div class="row-fluid">
+ <div class="controls controls-row">
+ <button type="submit" class="btn btn-primary btn-large">Query</button>
+ <button class="btn btn-info btn-large preview">Preview</button>
+ </div>
</div>
</div>
</form>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/ff83a905/src/fauxton/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 49c973a..fcaf884 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -74,7 +74,7 @@
/*buttons */
@redButton: @red;
-@linkColor: @darkRed;
+@linkColor: @red;
@boxShadow: 2px 2px rgba(0,0,0,0.2);
@boxShadowOff: 2px 2px rgba(0,0,0,0);
@@ -207,6 +207,7 @@ a:hover{
.navbar {
.brand {
+ .box-sizing(content-box);
.hide-text;
.customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
margin: 10px 0 6px;
@@ -214,6 +215,7 @@ a:hover{
height: 40px;
padding: 10px;
.icon{
+ .box-sizing(content-box);
background: url(../img/minilogo.png) no-repeat 0 0;
display: block;
height: 100%;
@@ -430,7 +432,6 @@ a:hover{
}
#breadcrumbs {
-
padding: 15px 20px;
.breadcrumb {
margin-bottom: 0;
@@ -447,6 +448,9 @@ a:hover{
color: @breadcrumbText;
font-size: 18px;
text-shadow: none;
+ &.active{
+ color: #333;
+ }
a{
color: @breadcrumbText;
}
@@ -568,16 +572,20 @@ footer#mainFooter{
padding: 0 20px;
}
-.nav-tabs > li > a {
+.nav-tabs > li{
+ margin-right: 2px;
+ > a {
+ 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;
+ &.fonticon:before{
+ margin-right: 6px;
+ font-size: 16px;
+ }
}
}
@@ -597,6 +605,18 @@ footer#mainFooter{
margin-top: 70px;
}
+.well {
+ .controls-group {
+ &:first-child, &:last-child{
+ margin-top: 24px;
+ }
+ margin-bottom: 8px;
+ }
+ .controls-row {
+ margin-bottom: 8px;
+ }
+}
+
/*TABLE STYLES*/
table.databases {clear: both;}
thead {border-bottom: 2px solid @redButton;}
@@ -678,10 +698,12 @@ tbody {padding-top: 10px;}
input[type=text], input[type=password],
.navbar-form input{
- padding: 7px;
- margin-top: -5px;
- border: 1px solid @inputBorder;
.border-radius(0);
+ padding: 12px;
+ margin-top: -4px;
+ border: 1px solid #ccc;
+ height: auto;
+ font-size: 16px;
}
@@ -689,19 +711,128 @@ input[type=checkbox]{
}
label.fonticon-search {
+ .box-sizing(content-box);
position: relative;
&:before {
+ .transition(all .25s linear);
+ font-size: 16px;
position: absolute;
- right: -35px;
+ right: -47px;
background-color: #E1E1E1;
- height: 18px;
- width: 18px;
- border: 1px solid @inputBorder;
- padding: 8px;
- top: -5px;
+ height: 46px;
+ width: 48px;
+ border: 1px solid #cccccc;
+ padding: 14px;
+ top: -4px;
}
+ &:hover{
+ color:white;
+ &:before {
+ background-color: @red;
+ }
+ }
+}
+
+*, *: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;
+}
+
+label{
+ padding-left: 25px;
+ margin-right: 15px;
+ display: inline-block;
+ cursor: pointer;
+ position: relative;
+ font-size: 14px;
+}
+
+.custom-inputs{
+
+ input[type=radio],
+ input[type=checkbox] {
+ display: none;
+ }
+
+ .checkbox label:before {
+ border-radius: 3px;
+ }
+
+ .controls > .radio:first-child, .controls > .checkbox:first-child {
+ padding-top: 15px;
+ }
+
+ .radio.inline, .checkbox.inline {
+ display: inline-block;
+ padding-top: 15px;
+ margin-bottom: 12px;
+ vertical-align: middle;
+ }
+
+ input[type=checkbox]:checked + label:before {
+ /*content: "\2713"; */
+ content: "\00d7";
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
+ font-size: 16px;
+ background-color: @red;
+ color: white;
+ text-align: center;
+ line-height: 15px;
+ }
+
+ label:before {
+ content: "";
+ display: inline-block;
+
+ width: 16px;
+ height: 16px;
+
+ margin-right: 10px;
+ position: absolute;
+ left: 0;
+ bottom: 1px;
+ background-color: #aaa;
+ box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
+ }
+
+ .radio label:before {
+ border-radius: 8px;
+ }
+
+ input[type=radio]:checked + label:before {
+ content: "\2022";
+ color: #f3f3f3;
+ font-size: 30px;
+ text-align: center;
+ line-height: 18px;
+ }
+
+ label.drop-down{
+ &:before{
+ display: none;
+ }
+ }
+}
+
+
.form-actions {
background: none;
border: none;
@@ -783,11 +914,20 @@ div.spinner {
.input-append.input-prepend {
margin-bottom: 0px;
.add-on {
+ margin-top: -4px;
+ background: none;
+ padding: 14px 12px 32px 12px;
border: none;
- padding-right: 25px;
}
.btn:last-child{
- margin-left: 15px;
+ margin-left: -1px;
+ margin-top: -4px;
+ background: none;
+ padding: 13px 12px 11px 12px;
+ &:hover{
+ background-color: @red;
+ color: white;
+ }
}
}
}