diff --git a/src/addon/calendar/pages/event/event.html b/src/addon/calendar/pages/event/event.html index b55da9358..598ae4c83 100644 --- a/src/addon/calendar/pages/event/event.html +++ b/src/addon/calendar/pages/event/event.html @@ -7,7 +7,7 @@ - + diff --git a/src/addon/calendar/pages/list/list.html b/src/addon/calendar/pages/list/list.html index f61ed9e87..6eaaeb367 100644 --- a/src/addon/calendar/pages/list/list.html +++ b/src/addon/calendar/pages/list/list.html @@ -16,7 +16,7 @@ - + diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss index 662eb401e..ad9be8fdd 100644 --- a/src/app/app.ios.scss +++ b/src/app/app.ios.scss @@ -16,6 +16,11 @@ color: $toolbar-ios-button-color; } +.item-ios ion-spinner[item-start], +.item-ios ion-spinner[item-end] { + @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0); +} + // Highlights inside the input element. @if ($core-text-input-ios-show-highlight) { .card-ios, .list-ios { diff --git a/src/app/app.md.scss b/src/app/app.md.scss index c0814c60b..b79bb1bdf 100644 --- a/src/app/app.md.scss +++ b/src/app/app.md.scss @@ -16,6 +16,11 @@ color: $toolbar-md-button-color; } +.item-md ion-spinner[item-start] + .item-inner, +.item-md ion-spinner[item-start] + .item-input { + @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2) - 1, null); +} + // Highlights inside the input element. @if ($core-text-input-md-show-highlight) { .card-md, .list-md { diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss index fd5175023..312358980 100644 --- a/src/app/app.wp.scss +++ b/src/app/app.wp.scss @@ -15,3 +15,8 @@ .bar-buttons core-context-menu .button-clear-wp { color: $toolbar-wp-button-color; } + +.item-wp ion-spinner[item-start] + .item-inner, +.item-wp ion-spinner[item-start] + .item-input { + @include margin-horizontal(($item-wp-padding-start / 2), null); +} diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index 752623059..2fb7b23f1 100644 --- a/src/components/loading/loading.scss +++ b/src/components/loading/loading.scss @@ -15,8 +15,8 @@ core-loading { } } -.scroll-content > .padding > core-loading > .core-loading-container, -ion-content[padding] > .scroll-content > core-loading > .core-loading-container, +.scroll-content > core-loading > .core-loading-container, +ion-content > .scroll-content > core-loading > .core-loading-container, .core-loading-center .core-loading-container { position: absolute; top: 0; diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index f1aaaa36a..1435f2247 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -12,8 +12,10 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef } from '@angular/core'; +import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef, + ViewChild } from '@angular/core'; import { CoreTabsComponent } from './tabs'; +import { Content } from 'ionic-angular'; /** * A tab to use inside core-tabs. The content of this tab will be displayed when the tab is selected. @@ -49,6 +51,7 @@ export class CoreTabComponent implements OnInit, OnDestroy { @Output() ionSelect: EventEmitter = new EventEmitter(); @ContentChild(TemplateRef) template: TemplateRef // Template defined by the content. + @ContentChild(Content) scroll: Content; element: HTMLElement; // The core-tab element. loaded = false; @@ -76,8 +79,18 @@ export class CoreTabComponent implements OnInit, OnDestroy { */ selectTab() { this.element.classList.add('selected'); + this.loaded = true; this.ionSelect.emit(this); + + // Setup tab scrolling. + setTimeout(() => { + if (this.scroll) { + this.scroll.getScrollElement().onscroll = (e) => { + this.tabs.showHideTabs(e); + } + } + }, 1); } /** diff --git a/src/components/tabs/tabs.html b/src/components/tabs/tabs.html index 22fdd6113..51e2fe3ba 100644 --- a/src/components/tabs/tabs.html +++ b/src/components/tabs/tabs.html @@ -1,5 +1,5 @@ - -
+ +
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 4eb747c02..dd40b2d86 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -1,7 +1,6 @@ core-tabs { .core-tabs-bar { @include position(null, null, 0, 0); - z-index: $z-index-toolbar; display: flex; width: 100%; @@ -21,11 +20,19 @@ core-tabs { } } } - .core-tabs-content-container { height: 100%; } + &.tabs-hidden { + .core-tabs-bar { + display: none !important; + } + .core-tabs-content-container { + padding-bottom: 0 !important; + } + } + core-tab { display: none; height: 100%; @@ -35,3 +42,7 @@ core-tabs { } } } + +.scroll-content.no-scroll { + overflow: hidden !important; +} diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 3edfe1706..2fca81ca0 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -15,6 +15,7 @@ import { Component, Input, Output, EventEmitter, OnInit, OnChanges, AfterViewInit, ViewChild, ElementRef, SimpleChange } from '@angular/core'; import { CoreTabComponent } from './tab'; +import { Content } from 'ionic-angular'; /** * This component displays some tabs that usually share data between them. @@ -43,6 +44,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges { @Input() hideUntil: boolean; // Determine when should the contents be shown. @Output() ionChange: EventEmitter = new EventEmitter(); // Emitted when the tab changes. @ViewChild('originalTabs') originalTabsRef: ElementRef; + @ViewChild('topTabs') topTabs: ElementRef; tabs: CoreTabComponent[] = []; // List of tabs. selected: number; // Selected tab number. @@ -50,13 +52,27 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges { protected initialized = false; protected afterViewInitTriggered = false; - constructor() {} + protected topTabsElement: HTMLElement; // The container of the original tabs. It will include each tab's content. + protected tabBarHeight; + protected tabBarElement: HTMLElement; // Host element. + protected tabsShown = true; + protected scroll: HTMLElement; // Parent scroll element (if core-tabs is inside a ion-content). + + constructor(element: ElementRef, content: Content) { + this.tabBarElement = element.nativeElement; + setTimeout(() => { + if (content) { + this.scroll = content.getScrollElement(); + } + }, 1); + } /** * Component being initialized. */ ngOnInit() { this.originalTabsContainer = this.originalTabsRef.nativeElement; + this.topTabsElement = this.topTabs.nativeElement; } /** @@ -144,9 +160,35 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges { this.selectTab(selectedIndex); } + // Setup tab scrolling. + this.tabBarHeight = this.topTabsElement.offsetHeight; + this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px'; + if (this.scroll) { + this.scroll.classList.add('no-scroll'); + } + this.initialized = true; } + /** + * Show or hide the tabs. This is used when the user is scrolling inside a tab. + * + * @param {any} e Scroll event. + */ + showHideTabs(e: any) : void { + if (e.target.scrollTop < this.tabBarHeight) { + if (!this.tabsShown) { + this.tabBarElement.classList.remove('tabs-hidden'); + this.tabsShown = true; + } + } else { + if (this.tabsShown) { + this.tabBarElement.classList.add('tabs-hidden'); + this.tabsShown = false; + } + } + } + /** * Remove a tab from the list of tabs. * diff --git a/src/core/courses/pages/categories/categories.html b/src/core/courses/pages/categories/categories.html index c22dfe194..64d9a9971 100644 --- a/src/core/courses/pages/categories/categories.html +++ b/src/core/courses/pages/categories/categories.html @@ -23,7 +23,6 @@

{{category.coursecount}} -
diff --git a/src/core/courses/pages/my-courses/my-courses.html b/src/core/courses/pages/my-courses/my-courses.html index b93f51ee9..bd837b0b2 100644 --- a/src/core/courses/pages/my-courses/my-courses.html +++ b/src/core/courses/pages/my-courses/my-courses.html @@ -19,11 +19,19 @@ - - - - - +
+ + + + +
+ + + + + + +

{{ 'core.courses.searchcoursesadvice' | translate }}

 diff --git a/src/core/courses/pages/my-overview/my-overview.html b/src/core/courses/pages/my-overview/my-overview.html index 8cdaddcbf..76123c08d 100644 --- a/src/core/courses/pages/my-overview/my-overview.html +++ b/src/core/courses/pages/my-overview/my-overview.html @@ -82,7 +82,7 @@
- +
@@ -105,4 +105,4 @@ - + \ No newline at end of file diff --git a/src/core/sitehome/components/index/index.html b/src/core/sitehome/components/index/index.html index 0c7c4ed3f..23187e37e 100644 --- a/src/core/sitehome/components/index/index.html +++ b/src/core/sitehome/components/index/index.html @@ -5,34 +5,38 @@ - - - - - + + + + + + - - - - - - - - - - - + - - - - - - + + + + + + + + + + + - - + + + + + + + + + +