From 234c0ca485edf9c8dc1c58552044cc54312a56df Mon Sep 17 00:00:00 2001
From: Mario Volke <info@mariovolke.com>
Date: Mon, 16 Jun 2014 14:20:01 +0200
Subject: [PATCH] optimized contact popup for mobile

---
 src/sass/views/_contacts.scss | 31 +++++++++++++++++++++++++------
 src/tpl/contacts.html         | 10 ++++++----
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/sass/views/_contacts.scss b/src/sass/views/_contacts.scss
index 98c8d05..87c2315 100644
--- a/src/sass/views/_contacts.scss
+++ b/src/sass/views/_contacts.scss
@@ -1,16 +1,35 @@
 .view-contacts {
 
     .key-controls {
+        display: flex;
+        flex-direction: row;
         margin: 30px;
 
-        input[type=text] {
-            line-height: 23px;
+        .key-controls-search {
+            flex-grow: 1;
+            input[type=text] {
+                line-height: 23px;
+                width: 100%;
+            }
         }
+        .key-controls-import {
+            display: block;
+            width: 8em;
+            flex-shrink: 0;
+            margin-left: 0.5em;
+            input[type=file] {
+                visibility: hidden;
+                width: 0;
+                height: 0;
+                position: absolute;
+            }
+            .btn {
+                width: 100%;
+            }
 
-        input[type=file] {
-            visibility: hidden;
-            width: 0;
-            height: 0;
+            @include respond-to(desktop) {
+                width: 10em;
+            }
         }
     }
 
diff --git a/src/tpl/contacts.html b/src/tpl/contacts.html
index aaf7781..4d0eb5c 100644
--- a/src/tpl/contacts.html
+++ b/src/tpl/contacts.html
@@ -8,11 +8,13 @@
     <div class="view-contacts">
 
       <div class="key-controls">
-        <input class="input-text" type="text" placeholder="Search..." ng-model="searchText">
-        <span>
+        <div class="key-controls-search">
+          <input class="input-text" type="text" placeholder="Search..." ng-model="searchText">
+        </div>
+        <div class="key-controls-import">
           <input id="keyfile-input" type="file" multiple accept=".asc" keyfile-input>
-          <button class="btn" ng-class="{'btn-primary': sendBtnSecure === false}" keyfile-btn>Import public keys</button>
-        </span>
+          <button class="btn" ng-class="{'btn-primary': sendBtnSecure === false}" keyfile-btn>Import keys</button>
+        </div>
       </div>
 
       <div class="key-list">