MOBILE-2430 ux: Solve minor ux problems

src/addon/mod/forum/pages/discussion/discussion.ts

@@ -68,6 +68,7 @@ export class AddonModForumDiscussionPage implements OnDestroy {
     };
     refreshIcon = 'spinner';
     syncIcon = 'spinner';
+    discussionStr = '';
 
     protected cmId: number;
     protected forumId: number;
@@ -101,6 +102,8 @@ export class AddonModForumDiscussionPage implements OnDestroy {
             this.isOnline = this.appProvider.isOnline();
         });
         this.isSplitViewOn = this.svComponent && this.svComponent.isOn();
+
+        this.discussionStr = translate.instant('addon.mod_forum.discussion');
     }
 
     /**

src/addon/mod/lesson/pages/player/player.html

@@ -107,7 +107,7 @@
                     </ng-container>
 
                     <ion-item>
-                        <button ion-button block (click)="submitQuestion()">{{ question.submitLabel }}</button>
+                        <button ion-button block (click)="submitQuestion()" class="button-no-uppercase">{{ question.submitLabel }}</button>
                     </ion-item>
                 </form>
             </ion-card>
@@ -117,7 +117,7 @@
                 <ion-grid text-wrap *ngIf="pageButtons && pageButtons.length" class="addon-mod_lesson-pagebuttons">
                     <ion-row align-items-center>
                         <ion-col *ngFor="let button of pageButtons" col-12 col-md-6 col-lg-3 col-xl>
-                            <a ion-button block outline text-wrap [id]="button.id" (click)="buttonClicked(button.data)">{{ button.content }}</a>
+                            <a ion-button block outline text-wrap [id]="button.id" (click)="buttonClicked(button.data)" class="button-no-uppercase">{{ button.content }}</a>
                         </ion-col>
                     </ion-row>
                 </ion-grid>
@@ -174,7 +174,7 @@
                     <core-format-text [text]="eolData.displayofgrade.message"></core-format-text>
                 </ion-item>
                 <ion-item text-wrap *ngIf="eolData.reviewlesson">
-                    <a ion-button block (click)="reviewLesson(eolData.reviewlesson.pageid)">
+                    <a ion-button block (click)="reviewLesson(eolData.reviewlesson.pageid)" class="button-no-uppercase">
                         <core-format-text [text]="'addon.mod_lesson.reviewlesson' | translate"></core-format-text>
                     </a>
                 </ion-item>
@@ -184,7 +184,7 @@
                 <ion-item text-wrap *ngIf="eolData.activitylink && eolData.activitylink.value">
                     <ng-container *ngIf="eolData.activitylink.value.formatted">
                         <!-- Activity link was successfully formatted, render the button. -->
-                        <a ion-button block color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true">
+                        <a ion-button block color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true" class="button-no-uppercase">
                             <core-format-text [text]="eolData.activitylink.value.label"></core-format-text>
                         </a>
                     </ng-container>

src/addon/mod/lesson/pages/player/player.scss

@@ -12,10 +12,12 @@ page-addon-mod-lesson-player {
 
     .addon-mod_lesson-pagebuttons .button-block {
         contain: content;
-        height: auto;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
 
         .button-inner {
-            height: auto;
+            flex-grow: 1;
         }
     }
 }

src/app/app.scss

@@ -39,6 +39,10 @@
 .core-big   { font-size: 115%; }
 .invisible { visibility: hidden; }
 
+.button-no-uppercase {
+  text-transform: none;
+}
+
 @include media-breakpoint-up(sm) {
   .core-center-view .scroll-content {
     display: flex!important;

src/components/loading/loading.scss

@@ -9,7 +9,7 @@ core-loading {
     }
 
     .core-loading-content {
-        display: unset;
+        display: inline;
         padding-bottom: 1px; /* This makes height be real */
     }
 
@@ -21,7 +21,7 @@ core-loading {
 .scroll-content > core-loading,
 ion-content > .scroll-content > core-loading,
 .core-loading-center {
-    position: unset !important;
+    position: static !important;
 }
 
 .scroll-content > core-loading,

src/components/tabs/tabs.scss

@@ -18,6 +18,14 @@
         font-size: 1.6rem;
         border: 0;
 
+        span {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            word-wrap: break-word;
+            display: block;
+        }
+
         &[aria-selected=true] {
             color: $core-top-tabs-color-active !important;
             border: 0 !important;

src/core/course/components/format/core-course-format.html

@@ -16,7 +16,7 @@
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
             <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
-                <button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select">
+                <button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select button-no-uppercase">
                     {{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}
                     <ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
                 </button>

src/core/courses/pages/my-courses/my-courses.html

@@ -19,7 +19,7 @@
     </ion-refresher>
 
     <core-loading [hideUntil]="coursesLoaded">
-        <ion-searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
+        <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
         </ion-searchbar>
         <ion-grid no-padding>
             <ion-row no-padding>

src/core/courses/pages/my-courses/my-courses.ts

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
-import { IonicPage, NavController } from 'ionic-angular';
+import { IonicPage, Searchbar, NavController } from 'ionic-angular';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
@@ -31,6 +31,8 @@ import { CoreCourseOptionsDelegate } from '@core/course/providers/options-delega
     templateUrl: 'my-courses.html',
 })
 export class CoreCoursesMyCoursesPage implements OnDestroy {
+    @ViewChild('searchbar') searchbar: Searchbar;
+
     courses: any[];
     filteredCourses: any[];
     searchEnabled: boolean;
@@ -153,6 +155,11 @@ export class CoreCoursesMyCoursesPage implements OnDestroy {
         this.filter = '';
         this.showFilter = !this.showFilter;
         this.filteredCourses = this.courses;
+        if (this.showFilter) {
+            setTimeout(() => {
+                this.searchbar.setFocus();
+            });
+        }
     }
 
     /**

src/core/courses/pages/my-overview/my-overview.html

@@ -80,7 +80,7 @@
                             </div>
                         </div>
                         <!-- Filter courses. -->
-                        <ion-searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
+                        <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
                         </ion-searchbar>
                         <!-- List of courses. -->
                         <div>

src/core/courses/pages/my-overview/my-overview.ts

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
-import { IonicPage, NavController } from 'ionic-angular';
+import { IonicPage, Searchbar, NavController } from 'ionic-angular';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
@@ -34,6 +34,8 @@ import * as moment from 'moment';
     templateUrl: 'my-overview.html',
 })
 export class CoreCoursesMyOverviewPage implements OnDestroy {
+    @ViewChild('searchbar') searchbar: Searchbar;
+
     firstSelectedTab: number;
     siteHomeEnabled: boolean;
     tabsReady = false;
@@ -245,6 +247,11 @@ export class CoreCoursesMyOverviewPage implements OnDestroy {
         this.showFilter = !this.showFilter;
         this.courses.filter = '';
         this.filteredCourses = this.courses[this.courses.selected];
+        if (this.showFilter) {
+            setTimeout(() => {
+                this.searchbar.setFocus();
+            });
+        }
     }
 
     /**