[Rt-commit] rt branch, 4.4/layout-changes, created. rt-4.2.11-239-g3db1895

[Shawn Moore]

The branch, 4.4/layout-changes has been created
        at  3db1895dcdb34a1bff37a92fe6d7a9cabc69b5e1 (commit)

- Log -----------------------------------------------------------------
commit 3db1895dcdb34a1bff37a92fe6d7a9cabc69b5e1
Author: Shawn M Moore <shawn at bestpractical.com>
Date:   Mon Oct 19 22:42:11 2015 +0000

    Improve topactions layout
    
        Use input[type=search] for a dropdown of recent searches in WebKit (with a
        button to clear them)
    
        More modern rounded, borderless search field
    
        Adjust sizing and layout to be more consistent and centered
    
        On focus widen search field

diff --git a/share/html/Elements/SimpleSearch b/share/html/Elements/SimpleSearch
index 7db2aca..6d07a75 100644
--- a/share/html/Elements/SimpleSearch
+++ b/share/html/Elements/SimpleSearch
@@ -46,7 +46,7 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <form action="<% RT->Config->Get('WebPath') %><% $SendTo %>" id="simple-search">
-  <input size="12" name="q" accesskey="0" class="field" value="<% $value %>" placeholder="<% $Placeholder %>..." />
+  <input size="12" name="q" accesskey="0" class="field" value="<% $value %>" placeholder="<% $Placeholder %>..." type="search" results=5 autosave="simple-search" />
 </form>
 <%init>
 my $value = defined $DECODED_ARGS->{q} ? $DECODED_ARGS->{q} : '';
diff --git a/share/static/css/aileron/nav.css b/share/static/css/aileron/nav.css
index d78fad2..795ff6a 100644
--- a/share/static/css/aileron/nav.css
+++ b/share/static/css/aileron/nav.css
@@ -157,3 +157,10 @@
     -moz-border-radius:     0 0 0 5px;
     -webkit-border-radius:  0 0 0 5px;
 }
+
+#simple-search input.field {
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+}
+
diff --git a/share/static/css/ballard/nav.css b/share/static/css/ballard/nav.css
index 09858cb..b2ec4b2 100644
--- a/share/static/css/ballard/nav.css
+++ b/share/static/css/ballard/nav.css
@@ -142,3 +142,8 @@
  color: #000;
  }
 
+#simple-search input.field {
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+}
diff --git a/share/static/css/base/nav.css b/share/static/css/base/nav.css
index 538aab8..e21b0f2 100644
--- a/share/static/css/base/nav.css
+++ b/share/static/css/base/nav.css
@@ -27,3 +27,30 @@
     width: 1.25em;
 }
 
+#simple-search input.field {
+    border: none;
+
+    /* turn off webkit input[type=search] styling */
+    -webkit-appearance: textfield;
+}
+
+#simple-search input.field::-webkit-search-cancel-button {
+    /* hide webkit x button for searches */
+    -webkit-appearance: none;
+}
+
+#topactions input,
+#topactions select,
+#topactions button {
+    height: 2em;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+ at -moz-document url-prefix() {
+    #topactions select.select-queue {
+        padding-top: 0.25em;
+        padding-bottom: 0.25em;
+        height: auto;
+    }
+}
diff --git a/share/static/css/rudder/nav.css b/share/static/css/rudder/nav.css
index 3e1be38..277aeb2 100644
--- a/share/static/css/rudder/nav.css
+++ b/share/static/css/rudder/nav.css
@@ -117,12 +117,10 @@
 #topactions {
     position: absolute;
     background: transparent;
-    top: 2.5em;
+    top: 3.25em;
     right: 0em;
     padding-right: 0.7em;
     width: auto;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
     min-width: 42em;
     font-size: 0.9em;
     z-index: 99;
@@ -136,12 +134,29 @@
 #topactions select,
 #topactions button {
     font-size: 1em;
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
+    padding-top: 0;
+    padding-bottom: 0;
     padding-left: 0.5em;
     padding-right: 0.5em;
-    width: 8em;
     vertical-align: middle;
+
+    width: 8em;
+    -webkit-transition: width 0.25s ease-in-out;
+    -moz-transition: width 0.25s ease-in-out;
+    -ms-transition: width 0.25s ease-in-out;
+    transition: width 0.25s ease-in-out;
+}
+
+#topactions input:focus {
+    width: 16em;
+    -webkit-transition: width 0.25s ease-in-out;
+    -moz-transition: width 0.25s ease-in-out;
+    -ms-transition: width 0.25s ease-in-out;
+    transition: width 0.25s ease-in-out;
+}
+
+#topactions select {
+    -webkit-appearance: menulist-button;
 }
 
 #topactions .select-queue {
@@ -210,3 +225,10 @@
     -moz-border-radius: 0 0 0 5px;
     -webkit-border-radius: 0 0 0 5px;
 }
+
+#simple-search input.field {
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+}
+

-----------------------------------------------------------------------