Merge pull request #76 from SURFnet/54-style-search-type-as-select

Converted search type to selectbox which visually integrates with input field
SURFnet · Dec 8, 2016 · 677a529 · 677a529
2 parents 25667b0 + 1bdd83b
commit 677a529
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/app/Resources/views/popups/group_details.html.twig b/app/Resources/views/popups/group_details.html.twig
@@ -63,7 +63,9 @@
             <div class="search_container">
                 <div class="input_container">
                     <i class="fa fa-search"></i>
-                    <input class="searchInput" type="text"/>
+                    <div class="overflow">
+                        <input class="searchInput" type="text"/>
+                    </div>
                 </div>
             </div>
 
@@ -75,11 +77,15 @@
         {% if is_granted('EDIT', group) %}
             <div id="add_members_tab" class="hidden">
                 <div class="search_container">
-                    <label for="search-type-user">{{ 'Gebruiker'|trans }}</label> <input type="radio" name="search-type" id="search-type-user" value="user" checked="checked">
-                    <label for="search-type-group">{{ 'Groep'|trans }}</label> <input type="radio" name="search-type" id="search-type-group" value="group">
                     <div class="input_container">
                         <i class="fa fa-search"></i>
-                        <input class="searchInput" type="text"/>
+                        <select name="search-type">
+                            <option value="user" selected>{{ 'Gebruiker'|trans }}</option>
+                            <option value="group">{{ 'Groep'|trans }}</option>
+                        </select>
+                        <div class="overflow">
+                            <input class="searchInput" type="text"/>
+                        </div>
                     </div>
                 </div>
 

diff --git a/web/css/grouphub.css b/web/css/grouphub.css
@@ -248,6 +248,12 @@ textarea {
     margin: 0;
     /* 3 */ }
 
+button,
+input,
+select {
+    height: 24px;
+}
+
 /*
  * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
@@ -1268,20 +1274,31 @@ footer a {
     background-color: #ffffff;
     border-bottom: 3px solid #eaeaea;
     padding: 15px; }
-/* line 174, _edit_group.scss */
+
 .edit_group_container .search_container .input_container {
-    position: relative;
-    width: 100%;
-    padding-top: 15px;
-    background-color: white;
-    border-bottom: 1px solid #bbbbbb; }
+    background-color: #5c8da7;
+}
+
+.edit_group_container .search_container .input_container .overflow {
+    overflow: hidden;
+}
+
 /* line 180, _edit_group.scss */
 .edit_group_container .search_container .input_container i {
-    position: absolute;
-    font-size: 20px;
-    top: 19px;
-    left: 8px;
-    color: #52b2cd; }
+    font-size: 14px;
+    margin: 5px;
+    color: white;
+    float: left;
+}
+
+.edit_group_container .search_container .input_container select {
+    color: white;
+    border: 0;
+    float: left;
+    background-color: #5c8da7;
+    border-radius: 0;
+}
+
 /* line 187, _edit_group.scss */
 .edit_group_container .search_container .input_container input {
     display: inline-block;

diff --git a/web/js/scripts.js b/web/js/scripts.js
@@ -487,7 +487,7 @@ var grouphub = (function ($) {
         $editGroup.on('keyup', '.searchInput', $.debounce(250, searchUsersOrGroups));
 
         // Trigger search when type is changed
-        $editGroup.on('click', 'input[name=search-type]', function(){
+        $editGroup.on('change', 'select[name=search-type]', function() {
             $('.searchInput').trigger('keyup');
         });