[Rt-commit] rt branch, 4.6/add-collapse-to-topactions-buttons, repushed

Blaine Motsinger blaine at bestpractical.com
Thu Dec 26 15:41:26 EST 2019


The branch 4.6/add-collapse-to-topactions-buttons was deleted and repushed:
       was ef39e2c37bc6f387ac7292d8d3047a1506c6e781
       now 723b2a477899b26ee8807f8d0b6200317a5e8f0e

1: ef39e2c37b ! 1: 200b3966c4 Add collapse to topactions inputs
    @@ -1,15 +1,14 @@
     Author: Blaine Motsinger <blaine at bestpractical.com>
     
    -    Add collapse to topactions buttons
    +    Add collapse to topactions inputs
         
    -    This commit makes the topactions buttons collapse for smaller
    +    This commit makes the topactions inputs collapse for smaller
         window sizes.
         
    -    The search and create buttons previously collapsed in a similar
    -    way before removing the queue selection dropdown from topactions.
    -    This update has slightly different styling and removes the easing
    -    animation on window sizes smaller than 1300px to save colliding
    -    with the main-navigation.
    +    The search and create inputs previously collapsed before the
    +    queue selection dropdown was removed from topactions.  This update
    +    has slightly different styling but emulates the general idea
    +    previously implemented in the collapse.
     
     diff --git a/share/html/Elements/CreateTicket b/share/html/Elements/CreateTicket
     --- a/share/html/Elements/CreateTicket
    @@ -47,58 +46,38 @@
          -webkit-appearance: textfield;
      }
      
    --#topactions input[type="search"]: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 search box sizes and easing definitions
    -+
    -+for browser sizes
    -+- 1300px or greater, when in focus grow to 16em with easing then shrink back to 10em with easing.
    -+- smaller than 1300px, don't grow and disable easing, but size remains 10em.
    -+- 900px or smaller, change size to 4.7em.
    -+
    -+*/
    -+#topactions input,
    -+#topactions button {
    ++#topactions input {
     +    width: 10em;
     +}
     +
    -+ at media (min-width: 1300px) {
    -+    #topactions input {
    -+        -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[type="search"]:focus {
    -+        width: 16em;
    -+    }
    -+}
    -+
    + #topactions input[type="search"]:focus {
    +     width: 16em;
    +     -webkit-transition: width 0.25s ease-in-out;
    +@@
    +     transition: width 0.25s ease-in-out;
    + }
    + 
     + at media (max-width: 900px) {
     +    #topactions input {
     +        width: 4.7em;
     +    }
    - }
    - 
    ++
    ++    #topactions input[type="search"]:focus {
    ++        width: 10em;
    ++    }
    ++}
    ++
      #topactions input[type="search"]::-webkit-search-cancel-button {
    +     /* hide webkit x button for searches */
    +     -webkit-appearance: none;
     @@
    -     padding-left: 0.5em;
          padding-right: 0.5em;
          vertical-align: middle;
    --
    + 
     -    width: 10em;
    --    -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;
    - }
    - 
    - @-moz-document url-prefix() {
    +     -webkit-transition: width 0.25s ease-in-out;
    +     -moz-transition: width 0.25s ease-in-out;
    +     -ms-transition: width 0.25s ease-in-out;
     @@
          #topactions .create-medium { display: block; }
          #topactions .create-narrow { display: none; }
    @@ -112,3 +91,4 @@
          }
      
          div#header h1 {
    +
-:  ------- > 2: 723b2a4778 Fix topactions input animation overlap



More information about the rt-commit mailing list