From 9cc969459846601cfdcbc1d15f4ff4e055f4882f Mon Sep 17 00:00:00 2001 From: Kristjan Broder Lund Date: Fri, 8 Mar 2019 18:08:24 +0000 Subject: [PATCH 1/3] fix: wrap key in div to keep size in correct ratio --- src/keyboard.vue | 67 +++++++++++++++++++++++------------------------- 1 file changed, 32 insertions(+), 35 deletions(-) diff --git a/src/keyboard.vue b/src/keyboard.vue index 10025e8..651ff5c 100644 --- a/src/keyboard.vue +++ b/src/keyboard.vue @@ -3,7 +3,8 @@ // input(type="text", v-model="keyboardText", v-if="!input") .keyboard .line(v-for="(line, index) in keySet", :key="index") - span(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", @click="e => clickKey(e, key)", @mousedown="mousedown", :style="getKeyStyle(key)") + div(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", :style="getKeyStyle(key)") + div(v-if="!key.placeholder" v-text="getCaptionOfKey(key)", @click="e => clickKey(e, key)", @mousedown="mousedown") @@ -316,72 +317,72 @@ } .key { - &:not(:last-child) { - margin-right: $margin; - } - flex: $width; - //width: $btnW; - height: $height; - line-height: $height; - overflow: hidden; - vertical-align: middle; - border: 1px solid #ccc; - color: #333; - background-color: #fff; - box-shadow: 0px 2px 2px rgba(0, 0, 0, .6); - border-radius: $radius; + &.half { + flex: $width / 2; + } + + > div { + height: $height; + line-height: $height; + overflow: hidden; - font-size: 1.25em; - text-align: center; - white-space: nowrap; - user-select: none; - cursor: pointer; + vertical-align: middle; + border: 1px solid #ccc; + color: #333; + background-color: #fff; + box-shadow: 0px 2px 2px rgba(0, 0, 0, .6); + border-radius: $radius; + + font-size: 1.25em; + text-align: center; + white-space: nowrap; + user-select: none; + cursor: pointer; + } + &:not(:last-child) > div { + margin-right: $margin; + } - &.backspace { + &.backspace > div { background-image: url("./icons/backspace.svg"); background-position: center center; background-repeat: no-repeat; background-size: 35%; } - - &.half { - flex: $width / 2; - } - &.control { + &.control > div { color: #fff; background-color: #7d7d7d; border-color: #656565; } - &.featured { + &.featured > div { color: #fff; background-color: #337ab7; border-color: #2e6da4; } - &:hover { + &:hover > div { color: #333; background-color: #d6d6d6; border-color: #adadad; } - &:active { + &:active > div { transform: scale(.98); // translateY(1px); color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } - &.activated { + &.activated > div { color: #fff; background-color: #5bc0de; border-color: #46b8da; } - } // .key /* // Apple style @@ -425,10 +426,6 @@ flex: $width / 2; height: $height; line-height: $height; - - &:not(:last-child) { - margin-right: $margin; - } } From e8293123fce0530af1c091f8059c795b62f79595 Mon Sep 17 00:00:00 2001 From: Kristjan Broder Lund Date: Fri, 8 Mar 2019 18:20:20 +0000 Subject: [PATCH 2/3] fix: always set margin on keys to have consistent sizes on keys --- src/keyboard.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/keyboard.vue b/src/keyboard.vue index 651ff5c..a1016c8 100644 --- a/src/keyboard.vue +++ b/src/keyboard.vue @@ -311,6 +311,7 @@ .line { display: flex; justify-content: space-around; + margin-right: -$margin; &:not(:last-child) { margin-bottom: $margin; } @@ -327,6 +328,7 @@ height: $height; line-height: $height; overflow: hidden; + margin-right: $margin; vertical-align: middle; border: 1px solid #ccc; @@ -342,10 +344,6 @@ cursor: pointer; } - &:not(:last-child) > div { - margin-right: $margin; - } - &.backspace > div { background-image: url("./icons/backspace.svg"); background-position: center center; From c3afd0fd353a61b135f22f98f6b6b623383c6726 Mon Sep 17 00:00:00 2001 From: Kristjan Broder Lund Date: Tue, 16 Jul 2019 17:10:35 +0000 Subject: [PATCH 3/3] fix(layouts): correct width of zero to match grid --- src/layouts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts.js b/src/layouts.js index d0ee0c2..247d60e 100644 --- a/src/layouts.js +++ b/src/layouts.js @@ -49,7 +49,7 @@ module.exports = { "backspace": { func: "backspace", classes: "control"}, "accept": { func: "accept", text: "Close", classes: "control featured"}, "next": { func: "next", text: "Next", classes: "featured"}, - "zero": { key: "0", width: 130} + "zero": { key: "0", width: 120} }, default: [ @@ -80,7 +80,7 @@ module.exports = { "backspace": { func: "backspace", classes: "control"}, "accept": { func: "accept", text: "Close", classes: "control featured"}, "next": { func: "next", text: "Next", classes: "control featured"}, - "zero": { key: "0", width: 130} + "zero": { key: "0", width: 120} }, default: [