Style user search with no institution

Minor fixes: make user search wider
Add class to add member button

task no. 22808, 22781, 22904

behatnotneeded - Styling only

Change-Id: Id0d6d0533c28b274cf8670e2c3a8719e1eb4250f

htdocs/group/requestjoin.php

@@ -43,6 +43,7 @@ $form = pieform(array(
         ),
         'submit' => array(
             'type' => 'submitcancel',
+            'class' => 'btn-success',
             'value' => array(get_string('request', 'group'), get_string('cancel')),
             'goto' => $goto
         ),

htdocs/theme/raw/js/theme.js

@@ -118,7 +118,9 @@ jQuery(function($) {
 
     function handleInputDropdown(context) {
         var val = context.find('select').find('option:selected').text();
-
+        if (val.length > 40) {
+            val = val.substring(0, 40) + '...';
+        }
 
         context.find('.js-with-dropdown input').attr('placeholder', val);
         if(context.find('.js-dropdown-context').length > 0){

htdocs/theme/raw/sass/components/_btn.scss

@@ -134,14 +134,17 @@ td.btn-group {
         float: right;
         margin-top: -10px;
         margin-bottom:11px;
-        @media (min-width: $screen-xs-max ) {
+        @media (min-width: $screen-sm-min ) {
             @include clearfix;
             &.btn-group-top .btn {
                 @include border-top-radius(0);
                 border-top: 0;
             }
         }
-        @media (max-width: $screen-xs-max ) {
+        @media (max-width: $screen-sm-max ) {
+            &.btn-group-top .btn {
+                border-top: 1px solid $panel-default-border;
+            }
             margin-top: 10px;
         }
         .btn {

htdocs/theme/raw/sass/form/_dropdown-group.scss

@@ -20,6 +20,7 @@
 
     &.form-group {
         margin-left: 11px;
+        border-bottom: none;
         .with-heading & {
             margin-left: 15px;
         }
@@ -99,3 +100,17 @@
     }
 
 }
+
+// User search dropdown-group
+.admin-user-search {
+    .picker {
+        @media (min-width: $screen-sm-min) {
+            width: 300px;
+        }
+    }
+    .dropdown-group .with-dropdown {
+        @media (min-width: $screen-sm-min) {
+            width: 280px;
+        }
+    }
+}

htdocs/theme/raw/templates/admin/users/search.tpl

 {include file="header.tpl"}
 
-<div class="form form-inline with-heading dropdown">
+
+<div class="form form-inline with-heading dropdown admin-user-search">
+    {if count($institutions) > 1}
     <div class="dropdown-group js-dropdown-group form-group">
         <fieldset class="pieform-fieldset dropdown-group js-dropdown-group">
             <div class="usersearchform with-dropdown js-with-dropdown text form-group">
                 <label for="query">{str tag='Search' section='admin'}: </label>
                 <input placeholder="{str tag='Search' section='admin'}" class="form-control with-dropdown js-with-dropdown text" type="text" name="query" id="query"{if $search->query} value="{$search->query}"{/if}>
             </div>
-            {if count($institutions) > 1}
             <div class="dropdown-connect js-dropdown-connect select form-group">
                 <label for="institution">{str tag='Institution' section='admin'}:</label>
                  <span class="picker">
@@ -19,7 +20,6 @@
                     </select>
                 </span>
             </div>
-            {/if}
         </fieldset>
     </div>
     <div class="no-label text-inline form-group">
@@ -27,6 +27,17 @@
         {str tag='Search' section='admin'}
         </button>
     </div>
+    {else}
+    <div class="usersearchform text input-group">
+        <label class="sr-only" for="query">{str tag='Search' section='admin'}: </label>
+        <input placeholder="{str tag='Search' section='admin'}" class="text form-control" type="text" name="query" id="query"{if $search->query} value="{$search->query}"{/if}>
+        <div class="input-group-btn button">
+            <button id="query-button" class="btn-search btn btn-primary " type="submit">
+            {str tag='Search' section='admin'}
+            </button>
+        </div>
+    </div>
+    {/if}
 </div>
 
 
@@ -99,7 +110,7 @@
                         <label class="input-inline pls" for="duplicateemail">
                             {str tag="duplicateemailfilter" section="admin"}
                         </label>
-                     
+
                     </div>
                 </div>
             </div>