clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Revisited styles for touch devices

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/delta/css/clipperz.css
View File

@ -606,16 +606,7 @@ html {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-transition-duration: 0.5s; -webkit-transition-duration: 0.5s;
transition-duration: 0.5s; transition-duration: 0.5s; }
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none; }
.page.left { .page.left {
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } transform: translate3d(-100%, 0, 0); }
@ -628,6 +619,9 @@ html {
visibility: visible; visibility: visible;
display: block; } display: block; }
input {
-webkit-appearance: none; }
.mainPage > #selectionPanel { .mainPage > #selectionPanel {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
@ -636,7 +630,8 @@ html {
top: 0; top: 0;
left: -250px; left: -250px;
transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out;
overflow: auto; } overflow: auto;
-webkit-overflow-scrolling: touch; }
.mainPage > #selectionPanel.open { .mainPage > #selectionPanel.open {
left: 0px; } left: 0px; }
@ -675,7 +670,8 @@ html {
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
margin-left: 0px; margin-left: 0px;
overflow: auto; } overflow: auto;
-webkit-overflow-scrolling: touch; }
#selections .showArchivedCards { #selections .showArchivedCards {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
@ -851,7 +847,8 @@ html {
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
overflow: auto; } overflow: auto;
-webkit-overflow-scrolling: touch; }
#extraFeaturesPanel .extraFeatureIndex footer { #extraFeaturesPanel .extraFeatureIndex footer {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
@ -987,11 +984,19 @@ div.cardContent {
-moz-flex: 1 0; -moz-flex: 1 0;
-ms-flex: 1 0; -ms-flex: 1 0;
flex: 1 0; flex: 1 0;
overflow: auto; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
z-index: 5; z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); } box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); }
div.cardContent div.cardListColumn.column.addCard div.cardList { div.cardContent div.cardListColumn.column.addCard div.cardList {
padding-bottom: 100px; } padding-bottom: 100px; }
div.cardContent div.cardListColumn.column div.cardList {
overflow: auto;
-webkit-overflow-scrolling: touch; }
div.cardContent div.cardListColumn.column div.addCardButton { div.cardContent div.cardListColumn.column div.addCardButton {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "liga" 1, "dlig" 1; -webkit-font-feature-settings: "liga" 1, "dlig" 1;
@ -1101,7 +1106,8 @@ div.cardContent {
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
overflow: auto; } overflow: auto;
-webkit-overflow-scrolling: touch; }
#cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit { #cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit {
display: -webkit-box; display: -webkit-box;
@ -1362,7 +1368,7 @@ div.dialogBox {
margin: 0px; } margin: 0px; }
#loginPage { #loginPage {
overflow: scroll; overflow: auto;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
#loginPage div.loginForm { #loginPage div.loginForm {
display: -webkit-box; display: -webkit-box;
@ -1442,7 +1448,9 @@ div.dialogBox {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 100%; font-size: 100%;
font-size: 24pt; font-size: 24pt;
width: 100%; } width: 100%;
border: 1px solid #ccc;
border-radius: 0px; }
#loginPage div.loginForm div.form form button { #loginPage div.loginForm div.form form button {
font-family: "clipperz-font"; font-family: "clipperz-font";
min-height: 48px; min-height: 48px;
@ -1518,6 +1526,12 @@ div.dialogBox {
text-decoration: none; text-decoration: none;
padding-left: 5px; padding-left: 5px;
font-weight: bold; } font-weight: bold; }
#loginPage div.loginForm.narrow header {
font-size: 30pt;
line-height: 70px; }
#loginPage div.loginForm.narrow footer {
max-height: 25px;
line-height: 20pt; }
#loginPage div.loginForm.extra-short header { #loginPage div.loginForm.extra-short header {
font-size: 18pt; } font-size: 18pt; }
#loginPage div.loginForm.extra-short div.form form { #loginPage div.loginForm.extra-short div.form form {
@ -2259,7 +2273,7 @@ div.cardList ul {
padding-right: 8px; } padding-right: 8px; }
div.cardList.narrow { div.cardList.narrow {
overflow: scroll; overflow: auto;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
div.cardList.narrow.loadingCard li.selected:after { div.cardList.narrow.loadingCard li.selected:after {
color: white; color: white;
@ -2478,6 +2492,15 @@ div.cardList.narrow {
.content .cardField.dragged { .content .cardField.dragged {
display: none; } display: none; }
.content .cardField .fieldEditAction { .content .cardField .fieldEditAction {
-webkit-user-select: text;
/* Chrome all / Safari all */
-moz-user-select: text;
/* Firefox all */
-ms-user-select: text;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: text;
user-select: text;
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
-moz-box-flex: none; -moz-box-flex: none;
@ -2537,6 +2560,15 @@ div.cardList.narrow {
flex: 1; flex: 1;
padding: 10px; } padding: 10px; }
.content .cardField .fieldValues .fieldLabel { .content .cardField .fieldValues .fieldLabel {
-webkit-user-select: text;
/* Chrome all / Safari all */
-moz-user-select: text;
/* Firefox all */
-ms-user-select: text;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: text;
user-select: text;
color: gray; color: gray;
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 4px; margin-bottom: 4px;
@ -2587,7 +2619,16 @@ div.cardList.narrow {
-webkit-align-self: flex-start; -webkit-align-self: flex-start;
-moz-align-self: flex-start; -moz-align-self: flex-start;
-ms-flex-item-align: start; -ms-flex-item-align: start;
align-self: flex-start; } align-self: flex-start;
-webkit-user-select: text;
/* Chrome all / Safari all */
-moz-user-select: text;
/* Firefox all */
-ms-user-select: text;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: text;
user-select: text; }
.content .cardField .fieldAction span { .content .cardField .fieldAction span {
display: block; } display: block; }
.content .cardField .fieldAction span.action { .content .cardField .fieldAction span.action {

2
frontend/delta/scss/core/behavior.scss
View File

@ -81,7 +81,7 @@ $transition-duration: 0.5s;
@mixin sliding-panel ($side, $size) { @mixin sliding-panel ($side, $size) {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
// @include overflow-scroll; // @include overflow-auto;
@if $side == left { @if $side == left {
@include sliding-panel-left($size); @include sliding-panel-left($size);

30
frontend/delta/scss/core/layout.scss
View File

@ -31,7 +31,11 @@ html {
.page { .page {
@include pageElement(); @include pageElement();
@include user-select(none); // @include user-select(none);
}
input {
-webkit-appearance: none;
} }
.mainPage { .mainPage {
@ -40,7 +44,8 @@ html {
.mainPage > #selectionPanel { .mainPage > #selectionPanel {
@include sliding-panel(left, $selectionPanelWidth); @include sliding-panel(left, $selectionPanelWidth);
overflow: auto; @include overflow-auto;
// overflow: auto;
&.open { &.open {
@include sliding-panel-open(left, $selectionPanelWidth); @include sliding-panel-open(left, $selectionPanelWidth);
@ -65,7 +70,8 @@ html {
@include flex(auto); @include flex(auto);
margin-left: 0px; margin-left: 0px;
// overflow-y: scroll; // overflow-y: scroll;
overflow:auto; // overflow:auto;
@include overflow-auto;
li { li {
// @include flexbox(); // @include flexbox();
@ -103,7 +109,7 @@ html {
&.selection { &.selection {
@include flex($selectionPanelFlexWidth, 0); @include flex($selectionPanelFlexWidth, 0);
// height: 100%; // height: 100%;
// @include overflow-scroll; // @include overflow-auto;
} }
&.cardContent { &.cardContent {
@ -210,7 +216,8 @@ html {
& > div { & > div {
@include flex(auto); @include flex(auto);
overflow: auto; @include overflow-auto;
// overflow: auto;
} }
@ -334,8 +341,12 @@ div.cardContent {
div.cardListColumn.column { div.cardListColumn.column {
@include flex($cardListWidth, 0); @include flex($cardListWidth, 0);
@include flexbox;
// overflow-y: scroll; // overflow-y: scroll;
overflow:auto; // overflow:auto;
// @include overflow-auto;
overflow: hidden;
z-index: 5; z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1); box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@ -349,6 +360,10 @@ div.cardContent {
} }
} }
div.cardList {
@include overflow-auto;
}
$addButtonSize: 60px; $addButtonSize: 60px;
div.addCardButton { div.addCardButton {
@include icon-font(); @include icon-font();
@ -426,7 +441,8 @@ div.cardContent {
.content { .content {
@include flex(auto); @include flex(auto);
// overflow-y: scroll; // overflow-y: scroll;
overflow:auto; // overflow:auto;
@include overflow-auto;
} }
} }
} }

4
frontend/delta/scss/core/mixin.scss
View File

@ -177,8 +177,8 @@ refer to http://www.clipperz.com.
user-select: $value; user-select: $value;
} }
@mixin overflow-scroll () { @mixin overflow-auto () {
overflow: scroll; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

8
frontend/delta/scss/style/card.scss
View File

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

15
frontend/delta/scss/style/loginPage.scss
View File

@ -22,7 +22,7 @@ refer to http://www.clipperz.com.
*/ */
#loginPage { #loginPage {
@include overflow-scroll; @include overflow-auto;
div.loginForm { div.loginForm {
@include flexbox; @include flexbox;
@ -87,6 +87,8 @@ refer to http://www.clipperz.com.
// box-shadow:inset 0 0 0; // box-shadow:inset 0 0 0;
font-size: 24pt; font-size: 24pt;
width: 100%; width: 100%;
border: 1px solid #ccc;
border-radius: 0px;
} }
button { 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 { div.loginForm.extra-short {
header { header {