From c7a05c9e8a4cec51d67a846baadd203ee8aba4cf Mon Sep 17 00:00:00 2001 From: Giulio Cesare Solaroli Date: Mon, 20 Apr 2015 18:02:37 +0200 Subject: [PATCH] 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) --- frontend/delta/css/clipperz.css | 79 ++++++++++++++++++------ frontend/delta/scss/core/behavior.scss | 2 +- frontend/delta/scss/core/layout.scss | 30 ++++++--- frontend/delta/scss/core/mixin.scss | 4 +- frontend/delta/scss/style/card.scss | 8 ++- frontend/delta/scss/style/loginPage.scss | 15 ++++- 6 files changed, 107 insertions(+), 31 deletions(-) diff --git a/frontend/delta/css/clipperz.css b/frontend/delta/css/clipperz.css index 2c6fab1..e03be3f 100644 --- a/frontend/delta/css/clipperz.css +++ b/frontend/delta/css/clipperz.css @@ -606,16 +606,7 @@ html { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-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; } + transition-duration: 0.5s; } .page.left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } @@ -628,6 +619,9 @@ html { visibility: visible; display: block; } +input { + -webkit-appearance: none; } + .mainPage > #selectionPanel { position: fixed; z-index: 20; @@ -636,7 +630,8 @@ html { top: 0; left: -250px; transition: left 0.3s ease-in-out; - overflow: auto; } + overflow: auto; + -webkit-overflow-scrolling: touch; } .mainPage > #selectionPanel.open { left: 0px; } @@ -675,7 +670,8 @@ html { -ms-flex: auto; flex: auto; margin-left: 0px; - overflow: auto; } + overflow: auto; + -webkit-overflow-scrolling: touch; } #selections .showArchivedCards { -webkit-box-flex: none; -webkit-flex: none; @@ -851,7 +847,8 @@ html { -moz-flex: auto; -ms-flex: auto; flex: auto; - overflow: auto; } + overflow: auto; + -webkit-overflow-scrolling: touch; } #extraFeaturesPanel .extraFeatureIndex footer { -webkit-box-flex: none; -webkit-flex: none; @@ -987,11 +984,19 @@ div.cardContent { -moz-flex: 1 0; -ms-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; box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); } div.cardContent div.cardListColumn.column.addCard div.cardList { padding-bottom: 100px; } + div.cardContent div.cardListColumn.column div.cardList { + overflow: auto; + -webkit-overflow-scrolling: touch; } div.cardContent div.cardListColumn.column div.addCardButton { font-family: 'clipperz-icons'; -webkit-font-feature-settings: "liga" 1, "dlig" 1; @@ -1101,7 +1106,8 @@ div.cardContent { -moz-flex: auto; -ms-flex: auto; flex: auto; - overflow: auto; } + overflow: auto; + -webkit-overflow-scrolling: touch; } #cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit { display: -webkit-box; @@ -1362,7 +1368,7 @@ div.dialogBox { margin: 0px; } #loginPage { - overflow: scroll; + overflow: auto; -webkit-overflow-scrolling: touch; } #loginPage div.loginForm { display: -webkit-box; @@ -1442,7 +1448,9 @@ div.dialogBox { margin-bottom: 10px; font-size: 100%; font-size: 24pt; - width: 100%; } + width: 100%; + border: 1px solid #ccc; + border-radius: 0px; } #loginPage div.loginForm div.form form button { font-family: "clipperz-font"; min-height: 48px; @@ -1518,6 +1526,12 @@ div.dialogBox { text-decoration: none; padding-left: 5px; 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 { font-size: 18pt; } #loginPage div.loginForm.extra-short div.form form { @@ -2259,7 +2273,7 @@ div.cardList ul { padding-right: 8px; } div.cardList.narrow { - overflow: scroll; + overflow: auto; -webkit-overflow-scrolling: touch; } div.cardList.narrow.loadingCard li.selected:after { color: white; @@ -2478,6 +2492,15 @@ div.cardList.narrow { .content .cardField.dragged { display: none; } .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-flex: none; -moz-box-flex: none; @@ -2537,6 +2560,15 @@ div.cardList.narrow { flex: 1; padding: 10px; } .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; padding-bottom: 4px; margin-bottom: 4px; @@ -2587,7 +2619,16 @@ div.cardList.narrow { -webkit-align-self: flex-start; -moz-align-self: flex-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 { display: block; } .content .cardField .fieldAction span.action { diff --git a/frontend/delta/scss/core/behavior.scss b/frontend/delta/scss/core/behavior.scss index c274566..d9ae5d7 100644 --- a/frontend/delta/scss/core/behavior.scss +++ b/frontend/delta/scss/core/behavior.scss @@ -81,7 +81,7 @@ $transition-duration: 0.5s; @mixin sliding-panel ($side, $size) { position: fixed; z-index: 20; -// @include overflow-scroll; +// @include overflow-auto; @if $side == left { @include sliding-panel-left($size); diff --git a/frontend/delta/scss/core/layout.scss b/frontend/delta/scss/core/layout.scss index ce969d3..94cafca 100644 --- a/frontend/delta/scss/core/layout.scss +++ b/frontend/delta/scss/core/layout.scss @@ -31,7 +31,11 @@ html { .page { @include pageElement(); - @include user-select(none); +// @include user-select(none); +} + +input { + -webkit-appearance: none; } .mainPage { @@ -40,7 +44,8 @@ html { .mainPage > #selectionPanel { @include sliding-panel(left, $selectionPanelWidth); - overflow: auto; + @include overflow-auto; +// overflow: auto; &.open { @include sliding-panel-open(left, $selectionPanelWidth); @@ -65,7 +70,8 @@ html { @include flex(auto); margin-left: 0px; // overflow-y: scroll; - overflow:auto; +// overflow:auto; + @include overflow-auto; li { // @include flexbox(); @@ -103,7 +109,7 @@ html { &.selection { @include flex($selectionPanelFlexWidth, 0); // height: 100%; -// @include overflow-scroll; +// @include overflow-auto; } &.cardContent { @@ -210,7 +216,8 @@ html { & > div { @include flex(auto); - overflow: auto; + @include overflow-auto; +// overflow: auto; } @@ -334,8 +341,12 @@ div.cardContent { div.cardListColumn.column { @include flex($cardListWidth, 0); + @include flexbox; // overflow-y: scroll; - overflow:auto; +// overflow:auto; +// @include overflow-auto; + overflow: hidden; + z-index: 5; 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; div.addCardButton { @include icon-font(); @@ -426,7 +441,8 @@ div.cardContent { .content { @include flex(auto); // overflow-y: scroll; - overflow:auto; +// overflow:auto; + @include overflow-auto; } } } diff --git a/frontend/delta/scss/core/mixin.scss b/frontend/delta/scss/core/mixin.scss index a817b19..daf0038 100644 --- a/frontend/delta/scss/core/mixin.scss +++ b/frontend/delta/scss/core/mixin.scss @@ -177,8 +177,8 @@ refer to http://www.clipperz.com. user-select: $value; } -@mixin overflow-scroll () { - overflow: scroll; +@mixin overflow-auto () { + overflow: auto; -webkit-overflow-scrolling: touch; } diff --git a/frontend/delta/scss/style/card.scss b/frontend/delta/scss/style/card.scss index e8b3fe0..6a43660 100644 --- a/frontend/delta/scss/style/card.scss +++ b/frontend/delta/scss/style/card.scss @@ -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; diff --git a/frontend/delta/scss/style/loginPage.scss b/frontend/delta/scss/style/loginPage.scss index fa02998..888bc7b 100644 --- a/frontend/delta/scss/style/loginPage.scss +++ b/frontend/delta/scss/style/loginPage.scss @@ -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 {