Browse Source

Use rem instead of px to control password profile height

pull/342/head
Guillaume Vincent 7 years ago
parent
commit
2f3e6d385a
3 changed files with 10 additions and 15 deletions
  1. +3
    -3
      src/components/Avatar.vue
  2. +3
    -3
      src/components/PasswordProfile.vue
  3. +4
    -9
      src/views/Passwords.vue

+ 3
- 3
src/components/Avatar.vue View File

@@ -1,10 +1,10 @@
<style> <style>
.passwordProfile__avatar { .passwordProfile__avatar {
display: inline-block; display: inline-block;
width: 38px;
height: 38px;
width: 2rem;
height: 2rem;
text-align: center; text-align: center;
line-height: 38px;
line-height: 2rem;
margin-right: 1em; margin-right: 1em;
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;


+ 3
- 3
src/components/PasswordProfile.vue View File

@@ -2,7 +2,7 @@
.passwordProfile { .passwordProfile {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
margin-bottom: 1em;
margin-bottom: 1rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
@@ -14,8 +14,8 @@
} }


.passwordProfile__meta { .passwordProfile__meta {
font-size: 0.8em;
line-height: 1.2em;
font-size: 0.8rem;
line-height: 1rem;
flex-grow: 1; flex-grow: 1;
} }




+ 4
- 9
src/views/Passwords.vue View File

@@ -1,6 +1,6 @@
<style> <style>
#passwords__list { #passwords__list {
min-height: 216px;
min-height: 11rem;
} }


#passwords__pagination .pagination { #passwords__pagination .pagination {
@@ -10,10 +10,6 @@
#passwords__pagination .page-link { #passwords__pagination .page-link {
cursor: pointer; cursor: pointer;
} }

.passwords__profile:last-child .passwordProfile{
border-bottom: none;
}
</style> </style>
<template> <template>
<div id="passwords"> <div id="passwords">
@@ -45,7 +41,6 @@
</div> </div>
</div> </div>
<password-profile <password-profile
class="passwords__profile"
v-bind:password="password" v-bind:password="password"
v-on:deleted="pagination.currentPage=1" v-on:deleted="pagination.currentPage=1"
v-for="password in filteredPasswords" v-for="password in filteredPasswords"
@@ -77,7 +72,7 @@


export default { export default {
name: 'passwords-view', name: 'passwords-view',
data(){
data() {
return { return {
searchQuery: '', searchQuery: '',
pagination: { pagination: {
@@ -93,7 +88,7 @@
}, },
computed: { computed: {
...mapState(['passwords']), ...mapState(['passwords']),
filteredPasswords(){
filteredPasswords() {
const passwords = this.passwords.filter(password => { const passwords = this.passwords.filter(password => {
var loginMatch = password.login.match(new RegExp(this.searchQuery, 'i')); var loginMatch = password.login.match(new RegExp(this.searchQuery, 'i'));
var siteMatch = password.site.match(new RegExp(this.searchQuery, 'i')); var siteMatch = password.site.match(new RegExp(this.searchQuery, 'i'));
@@ -107,7 +102,7 @@
} }
}, },
methods: { methods: {
setCurrentPage(page){
setCurrentPage(page) {
this.pagination.currentPage = page; this.pagination.currentPage = page;
} }
} }


Loading…
Cancel
Save