1
0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-25 01:37:34 +02:00

Revisited styles for touch devices

Revisited styles to support/improve the following issues:
- iPhone login rendering
- selection of card fields on touch devices
- scrolling on touch devices (mostly iPad)
This commit is contained in:
Giulio Cesare Solaroli
2015-04-20 18:02:37 +02:00
parent 5748515655
commit c7a05c9e8a
6 changed files with 107 additions and 31 deletions

View File

@@ -108,7 +108,7 @@ div.cardList {
}
div.cardList.narrow {
@include overflow-scroll;
@include overflow-auto;
&.loadingCard {
li.selected {
@@ -328,6 +328,8 @@ $cardViewBasePadding: 10px;
}
.content {
// @include user-select(none);
.cardLabel {
@include user-select(text);
@@ -386,6 +388,7 @@ $cardViewBasePadding: 10px;
.cardField {
@include flexbox;
@include flex-direction(row);
// @include user-select(none);
// background-color: rgba(255, 255, 255, 0.75);
// border-bottom: 1px solid #eee;
@@ -397,6 +400,7 @@ $cardViewBasePadding: 10px;
}
.fieldEditAction {
@include user-select(text);
@include flex(none);
width: 32px;
// background-color: pink;
@@ -457,6 +461,7 @@ $cardViewBasePadding: 10px;
padding: $cardViewBasePadding;
.fieldLabel {
@include user-select(text);
color: $labelColor;
// border-bottom: 1px dotted #ddd;
padding-bottom: 4px;
@@ -501,6 +506,7 @@ $cardViewBasePadding: 10px;
@include flex(none);
// @include align-self(center);
@include align-self(flex-start);
@include user-select(text);
span {
display: block;

View File

@@ -22,7 +22,7 @@ refer to http://www.clipperz.com.
*/
#loginPage {
@include overflow-scroll;
@include overflow-auto;
div.loginForm {
@include flexbox;
@@ -87,6 +87,8 @@ refer to http://www.clipperz.com.
// box-shadow:inset 0 0 0;
font-size: 24pt;
width: 100%;
border: 1px solid #ccc;
border-radius: 0px;
}
button {
@@ -165,6 +167,17 @@ refer to http://www.clipperz.com.
}
}
div.loginForm.narrow {
header {
font-size: 30pt;
line-height: 70px;
}
footer {
max-height: 25px;
line-height: 20pt;
}
}
div.loginForm.extra-short {
header {