purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Scrolling is not smooth on iOS devices

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-13 12:23:30 +03:00
parent b2ceb02709
commit d61549d9e6
37 changed files with 69 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/@fuse/components/highlight/highlight.component.scss
View File

@ -4,4 +4,5 @@
background: #263238; background: #263238;
cursor: text; cursor: text;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }

1
src/@fuse/components/sidebar/sidebar.component.scss
View File

@ -9,6 +9,7 @@ fuse-sidebar {
bottom: 0; bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
max-width: 280px; max-width: 280px;

1
src/@fuse/components/theme-options/theme-options.component.scss
View File

@ -19,6 +19,7 @@
flex: 1 0 auto; flex: 1 0 auto;
padding: 40px 24px 24px 24px; padding: 40px 24px 24px 24px;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.header { .header {
display: flex; display: flex;

5
src/@fuse/scss/partials/_angular-material-fix.scss
View File

@ -6,6 +6,11 @@
} }
} }
// Fix: "Smooth scrolling for iOS"
.mat-dialog-container {
-webkit-overflow-scrolling: touch;
}
// Fix: "Inconsistent font sizes across elements" // Fix: "Inconsistent font sizes across elements"
.mat-form-field-wrapper { .mat-form-field-wrapper {
font-size: 16px; font-size: 16px;

11
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -143,8 +143,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
flex: 1 1 auto; flex: 1 1 auto;
> .content { > .content {
overflow: auto;
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }
@ -166,6 +167,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.tab-content { .tab-content {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }
@ -346,6 +348,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.content { .content {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
@ -358,6 +361,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .content { > .content {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }
@ -379,6 +383,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.tab-content { .tab-content {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }
@ -500,12 +505,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.content { .content {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
> .center { > .center {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
@ -528,12 +535,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.content { .content {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
> .center { > .center {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }

1
src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
View File

@ -146,6 +146,7 @@ owl-date-time {
padding: .25em; padding: .25em;
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
.owl-calendar-wrapper { .owl-calendar-wrapper {

1
src/@fuse/scss/partials/plugins/_ngx-color-picker.scss
View File

@ -11,6 +11,7 @@
height: 140px; height: 140px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
> hr { > hr {
display: none; display: none;

5
src/app/layout/components/chat-panel/chat-panel.component.scss
View File

@ -46,11 +46,11 @@ chat-panel {
position: relative; position: relative;
z-index: 5; z-index: 5;
padding: 16px 0; padding: 16px 0;
overflow: auto;
width: 72px; width: 72px;
min-width: 72px; min-width: 72px;
max-width: 72px; max-width: 72px;
background-color: #F9F9F9; background-color: #F9F9F9;
overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Perfect scrollbar // Perfect scrollbar
@ -169,8 +169,9 @@ chat-panel {
.messages { .messages {
position: relative; position: relative;
overflow: auto;
padding: 16px 0 40px 40px; padding: 16px 0 40px 40px;
overflow: auto;
-webkit-overflow-scrolling: touch;
.message-row { .message-row {
position: relative; position: relative;

1
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -117,6 +117,7 @@ navbar {
.navbar-scroll-container { .navbar-scroll-container {
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%), background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%); linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);

1
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -68,6 +68,7 @@ navbar {
.navbar-content { .navbar-content {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
} }

1
src/app/layout/horizontal/layout-1/layout-1.component.scss
View File

@ -49,6 +49,7 @@ horizontal-layout-1 {
transform: translateZ(0); transform: translateZ(0);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
// Content component // Content component
content { content {

1
src/app/layout/vertical/layout-1/layout-1.component.scss
View File

@ -49,6 +49,7 @@ vertical-layout-1 {
transform: translateZ(0); transform: translateZ(0);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
// Content component // Content component
content { content {

1
src/app/layout/vertical/layout-2/layout-2.component.scss
View File

@ -32,6 +32,7 @@ vertical-layout-2 {
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateZ(0); transform: translateZ(0);
// Container 2 // Container 2

1
src/app/layout/vertical/layout-3/layout-3.component.scss
View File

@ -32,6 +32,7 @@ vertical-layout-3 {
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateZ(0); transform: translateZ(0);
// Container 2 // Container 2

1
src/app/main/apps/academy/course/course.component.scss
View File

@ -149,6 +149,7 @@
left: 0; left: 0;
padding: 48px; padding: 48px;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
&.ng-animating { &.ng-animating {
overflow: hidden; overflow: hidden;

4
src/app/main/apps/chat/chat-view/chat-view.component.scss
View File

@ -33,6 +33,7 @@
#chat-content { #chat-content {
background: transparent; background: transparent;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.message-row { .message-row {
padding: 16px; padding: 16px;
@ -113,9 +114,10 @@
padding-right: 16px; padding-right: 16px;
textarea { textarea {
overflow: auto;
max-height: 80px; max-height: 80px;
transition: height 200ms ease; transition: height 200ms ease;
overflow: auto;
-webkit-overflow-scrolling: touch;
&.grow { &.grow {
height: 80px; height: 80px;

1
src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss
View File

@ -42,6 +42,7 @@
.sidenav-content { .sidenav-content {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.contact-list, .chat-list { .contact-list, .chat-list {

1
src/app/main/apps/chat/sidenavs/left/user/user.component.scss
View File

@ -5,6 +5,7 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
mat-toolbar { mat-toolbar {

1
src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
View File

@ -5,6 +5,7 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
mat-toolbar { mat-toolbar {

1
src/app/main/apps/e-commerce/order/order.component.scss
View File

@ -35,6 +35,7 @@
&.compact { &.compact {
padding: 0; padding: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.invoice-container { .invoice-container {
padding: 16px; padding: 16px;

1
src/app/main/apps/e-commerce/orders/orders.component.scss
View File

@ -33,6 +33,7 @@
flex: 1 1 auto; flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, .12); border-bottom: 1px solid rgba(0, 0, 0, .12);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.mat-header-row { .mat-header-row {
min-height: 64px; min-height: 64px;

1
src/app/main/apps/e-commerce/products/products.component.scss
View File

@ -32,6 +32,7 @@
flex: 1 1 auto; flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, .12); border-bottom: 1px solid rgba(0, 0, 0, .12);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.mat-header-row { .mat-header-row {
min-height: 64px; min-height: 64px;

1
src/app/main/apps/file-manager/file-manager.component.scss
View File

@ -43,6 +43,7 @@
.content { .content {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }

3
src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss
View File

@ -4,8 +4,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-y: auto;
padding: 24px; padding: 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.select-message-text { .select-message-text {
font-size: 24px; font-size: 24px;

3
src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss
View File

@ -3,9 +3,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-y: auto;
padding: 0; padding: 0;
border-right: 1px solid rgba(0, 0, 0, .12); border-right: 1px solid rgba(0, 0, 0, .12);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.no-messages-text { .no-messages-text {
font-size: 24px; font-size: 24px;

3
src/app/main/apps/mail/mail-details/mail-details.component.scss
View File

@ -4,8 +4,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-y: auto;
padding: 24px; padding: 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.select-message-text { .select-message-text {
font-size: 24px; font-size: 24px;

3
src/app/main/apps/mail/mail-list/mail-list.component.scss
View File

@ -3,9 +3,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-y: auto;
padding: 0; padding: 0;
border-right: 1px solid rgba(0, 0, 0, .12); border-right: 1px solid rgba(0, 0, 0, .12);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.no-messages-text { .no-messages-text {
font-size: 24px; font-size: 24px;

3
src/app/main/apps/scrumboard/board/list/list.component.scss
View File

@ -28,9 +28,10 @@
.list-content { .list-content {
position: relative; position: relative;
min-height: 0;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
min-height: 0; -webkit-overflow-scrolling: touch;
.list-cards { .list-cards {
position: relative; position: relative;

1
src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss
View File

@ -32,6 +32,7 @@
> .content { > .content {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }

1
src/app/main/apps/scrumboard/scrumboard.component.scss
View File

@ -6,6 +6,7 @@
#boards { #boards {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
.board-list { .board-list {
padding: 32px 0; padding: 32px 0;

1
src/app/main/apps/todo/todo-details/todo-details.component.scss
View File

@ -5,6 +5,7 @@
flex: 1 0 auto; flex: 1 0 auto;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
.todo-header { .todo-header {
padding: 24px; padding: 24px;

3
src/app/main/apps/todo/todo-list/todo-list.component.scss
View File

@ -2,10 +2,11 @@
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
flex-direction: column; flex-direction: column;
overflow-y: auto;
position: relative; position: relative;
padding: 0; padding: 0;
border-right: 1px solid rgba(0, 0, 0, .12); border-right: 1px solid rgba(0, 0, 0, .12);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.no-todos-text { .no-todos-text {
font-size: 24px; font-size: 24px;

3
src/app/main/documentation/components/cards/cards.component.scss
View File

@ -43,9 +43,10 @@
display: flex !important; display: flex !important;
flex: 1; flex: 1;
max-height: 400px; max-height: 400px;
overflow: auto;
min-width: 400px; min-width: 400px;
margin-left: 24px; margin-left: 24px;
overflow: auto;
-webkit-overflow-scrolling: touch;
} }
} }
} }

4
src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss
View File

@ -36,11 +36,13 @@
} }
#forgot-password-form-wrapper { #forgot-password-form-wrapper {
overflow: auto;
width: 400px; width: 400px;
min-width: 400px; min-width: 400px;
max-width: 400px; max-width: 400px;
background: #FFFFFF; background: #FFFFFF;
overflow: auto;
-webkit-overflow-scrolling: touch;
@include mat-elevation(16); @include mat-elevation(16);
@include media-breakpoint('sm') { @include media-breakpoint('sm') {

4
src/app/main/pages/authentication/login-2/login-2.component.scss
View File

@ -36,11 +36,13 @@
} }
#login-form-wrapper { #login-form-wrapper {
overflow: auto;
width: 400px; width: 400px;
min-width: 400px; min-width: 400px;
max-width: 400px; max-width: 400px;
background: #FFFFFF; background: #FFFFFF;
overflow: auto;
-webkit-overflow-scrolling: touch;
@include mat-elevation(16); @include mat-elevation(16);
@include media-breakpoint('sm') { @include media-breakpoint('sm') {

4
src/app/main/pages/authentication/register-2/register-2.component.scss
View File

@ -36,11 +36,13 @@
} }
#register-form-wrapper { #register-form-wrapper {
overflow: auto;
width: 400px; width: 400px;
min-width: 400px; min-width: 400px;
max-width: 400px; max-width: 400px;
background: #FFFFFF; background: #FFFFFF;
overflow: auto;
-webkit-overflow-scrolling: touch;
@include mat-elevation(16); @include mat-elevation(16);
@include media-breakpoint('sm') { @include media-breakpoint('sm') {

4
src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss
View File

@ -36,11 +36,13 @@
} }
#reset-password-form-wrapper { #reset-password-form-wrapper {
overflow: auto;
width: 400px; width: 400px;
min-width: 400px; min-width: 400px;
max-width: 400px; max-width: 400px;
background: #FFFFFF; background: #FFFFFF;
overflow: auto;
-webkit-overflow-scrolling: touch;
@include mat-elevation(16); @include mat-elevation(16);
@include media-breakpoint('sm') { @include media-breakpoint('sm') {