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
parent
5748515655
commit
c7a05c9e8a
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user