Mobile ui improvements1.2.0

4 files changed, 39 insertions, 18 deletions

diff --git a/Changelog.md b/Changelog.md
index 88d7906..940783c 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -8,6 +8,8 @@ Version 1.1.0 / 18.11.2017
 - Error handling improved
 
 Version 1.2.0 / 19.11.2017
-- Added german localisation
+- Added localisations
+- Added password miner
+- Improved mobile ui
 - Fixed Nextcloud Logout
 - Fixed Request Loop
\ No newline at end of file
diff --git a/src/vue/Manager.vue b/src/vue/Manager.vue
index 4b84046..34890db 100644
--- a/src/vue/Manager.vue
+++ b/src/vue/Manager.vue
@@ -43,6 +43,11 @@
         },
 
         created() {
+            browser.runtime.getPlatformInfo().then(
+                (data) => {
+                    if (data.os === 'android') $('body').addClass('mobile');
+                });
+
             browser.storage.local.get(
                 ['initialized']
             ).then((data) => {
@@ -86,8 +91,7 @@
     body {
         margin    : 0;
         font-size : 12pt;
-        min-width : 300px;
-        width     : 100%;
+        width     : 300px;
     }
 
     .btn {
@@ -98,4 +102,8 @@
         z-index  : 2;
         color    : #fff;
     }
+
+    body.mobile {
+        width : 100%;
+    }
 </style>
diff --git a/src/vue/Partials/Login.vue b/src/vue/Partials/Login.vue
index 6d778dd..74e40ac 100644
--- a/src/vue/Partials/Login.vue
+++ b/src/vue/Partials/Login.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="login theme-hover-invert" @click="insertPassword">
         {{login.title}}
-        <div class="options theme-bg-background">
+        <div class="options">
             <i class="fa fa-user"
                @click="copyUser"
                @mouseover="switchIcon($event, 'user')"
@@ -70,6 +70,7 @@
         box-sizing    : border-box;
         overflow      : hidden;
         position      : relative;
+        transition    : padding 0.25s ease-in-out;
 
         .options {
             position : absolute;
@@ -84,6 +85,8 @@
         }
 
         &:hover {
+            padding-right : 80px;
+
             .options {
                 display : block;
             }
@@ -91,8 +94,15 @@
 
         &.success {
             animation : blink-success 1s 3;
+        }
+    }
+
+    body.mobile {
+        .login {
+            padding-right : 80px;
+
             .options {
-                background-color : transparent !important;
+                display : block;
             }
         }
     }
diff --git a/src/vue/Sections/Search.vue b/src/vue/Sections/Search.vue
index 00a4c15..31b544e 100644
--- a/src/vue/Sections/Search.vue
+++ b/src/vue/Sections/Search.vue
@@ -8,8 +8,8 @@
                    v-on:keyup="updateQuery($event)">
         </div>
         <login v-for="(match, i) in matches" :key="i" :login="match"></login>
-        <translate tag="div" v-if="matches.length == 0 && query" class="no-accounts theme-invert">No matches</translate>
-        <translate tag="div" v-if="matches.length == 0 && !query" class="no-accounts theme-invert">Type to search</translate>
+        <translate tag="div" v-if="matches.length == 0 && query" class="no-matches theme-invert">No matches</translate>
+        <translate tag="div" v-if="matches.length == 0 && !query" class="no-matches theme-invert">Type to search</translate>
     </div>
 </template>
 
@@ -62,6 +62,7 @@
 
                     if (entry.user.indexOf(this.query) !== -1 ||
                         entry.host.indexOf(this.query) !== -1 ||
+                        entry.notes.indexOf(this.query) !== -1 ||
                         entry.password.indexOf(this.query) !== -1
                     ) {
                         entry.title += '@' + entry.host;
@@ -78,20 +79,20 @@
 <style lang="scss">
     .searchbox-container {
         display : flex;
-    }
 
-    #searchbox {
-        flex-grow           : 1;
-        padding             : 5px;
-        display             : block;
-        outline             : 5px solid transparent;
-        margin              : 5px;
-        border              : 0 solid transparent;
-        border-bottom-width : 1px;
-        font-size           : 12pt;
+        #searchbox {
+            flex-grow           : 1;
+            padding             : 5px;
+            display             : block;
+            outline             : 5px solid transparent;
+            margin              : 5px;
+            border              : 0 solid transparent;
+            border-bottom-width : 1px;
+            font-size           : 12pt;
+        }
     }
 
-    .no-accounts {
+    .no-matches {
         padding    : 10px;
         text-align : center;
     }