Merge pull request #1502 from crazyserver/MOBILE-2567

Mobile 2567

src/addon/files/pages/list/list.html

@@ -36,7 +36,7 @@
     </core-loading>
 
     <!-- Upload a private file. -->
-    <ion-fab bottom right *ngIf="showUpload && root != 'site' && !path">
+    <ion-fab bottom end *ngIf="showUpload && root != 'site' && !path">
         <button ion-fab (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
             <ion-icon name="add"></ion-icon>
         </button>

src/addon/messages/pages/discussion/discussion.html

@@ -12,7 +12,7 @@
         </a>
     </core-navbar-buttons>
 </ion-header>
-<ion-content>
+<ion-content class="has-footer">
     <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
         <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadPrevious($event)" position="top">

src/addon/mod/assign/components/submission/addon-mod-assign-submission.html

@@ -112,15 +112,15 @@
                 <ion-item text-wrap *ngIf="membersToSubmit && membersToSubmit.length > 0">
                     <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                     <div *ngFor="let user of membersToSubmit">
-                        <a *ngIf="user.fullname" (click)="openUserProfile(user.id)" [title]="user.fullname">
+                        <a ion-item text-wrap *ngIf="user.fullname" (click)="openUserProfile(user.id)" [title]="user.fullname">
                             <ion-avatar item-start>
                                 <img [src]="user.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: user.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
                             </ion-avatar>
                             <h2>{{ user.fullname }}</h2>
                         </a>
-                        <p *ngIf="!user.fullname">
+                        <ion-item text-wrap *ngIf="!user.fullname">
                             {{ 'addon.mod_assign.hiddenuser' | translate }} <core-format-text [text]="user"></core-format-text>
-                        </p>
+                        </ion-item>
                     </div>
                 </ion-item>
 

src/addon/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html

@@ -5,7 +5,7 @@
         <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="80" [fullOnClick]="true" [fullTitle]="plugin.name" [text]="text"></core-format-text>
     </p>
     <div item-end>
-        <div text-right>
+        <div text-end>
             <button ion-button icon-only clear *ngIf="canEdit" (click)="editComment()" color="dark">
                 <ion-icon name="create"></ion-icon>
             </button>

src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html

@@ -1,5 +1,5 @@
 <ion-list>
     <a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none>
-        <p [attr.padding-start]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
+        <p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
     </a>
 </ion-list>

src/addon/mod/chat/pages/chat/chat.html

@@ -8,7 +8,7 @@
         </ion-buttons>
     </ion-navbar>
 </ion-header>
-<ion-content>
+<ion-content  class="has-footer">
     <core-loading [hideUntil]="loaded">
         <div aria-live="polite">
             <div *ngFor="let message of messages; index as index; last as last">

src/addon/mod/data/components/index/addon-mod-data-index.html

@@ -92,7 +92,7 @@
 
 </core-loading>
 
-<ion-fab bottom right *ngIf="canAdd">
+<ion-fab bottom end *ngIf="canAdd">
     <button ion-fab (click)="gotoAddEntries($event)" [attr.aria-label]="'addon.mod_data.addentries' | translate">
         <ion-icon name="add"></ion-icon>
     </button>

src/addon/mod/data/pages/search/search.html

@@ -47,9 +47,11 @@
                 <core-compile-html [text]="advancedSearch" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
             </div>
         </ion-list>
-        <button ion-button block margin type="submit" icon-start>
+        <div padding>
+            <button ion-button block type="submit" icon-start>
                 <ion-icon name="search"></ion-icon>
                 {{ 'addon.mod_data.search' | translate }}
             </button>
+        </div>
     </form>
 </ion-content>

src/addon/mod/feedback/components/index/index.ts

@@ -423,9 +423,10 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
 
                 this.warning = '';
                 if (analysis.warnings.length) {
-                    this.warning = analysis.warnings.find((warning) => {
+                    const warning = analysis.warnings.find((warning) => {
                         return warning.warningcode == 'insufficientresponsesforthisgroup';
                     });
+                    this.warning = warning && warning.message;
                 }
             }
         });

src/addon/mod/feedback/providers/helper.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Injectable } from '@angular/core';
-import { NavController } from 'ionic-angular';
+import { NavController, ViewController } from 'ionic-angular';
 import { AddonModFeedbackProvider } from './feedback';
 import { CoreUserProvider } from '@core/user/providers/user';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
@@ -35,17 +35,17 @@ export class AddonModFeedbackHelperProvider {
     }
 
     /**
-     * Check if the page we are going to open is in the history and returns the number of pages in the stack to go back.
+     * Check if the page we are going to open is in the history and returns the view controller in the stack to go back.
      *
      * @param {string} pageName       Name of the page we want to navigate.
      * @param {number} instance       Activity instance Id. I.e FeedbackId.
      * @param {string} paramName      Param name where to find the instance number.
      * @param {string} prefix         Prefix to check if we are out of the activity context.
      * @param {NavController} navCtrl Nav Controller of the view.
-     * @return {number}   Returns the number of times the history needs to go back to find the specified page.
+     * @return {ViewController}   Returns view controller found or null.
      */
-    protected getActivityHistoryBackCounter(pageName: string, instance: number, paramName: string, prefix: string,
+    protected getPageView(pageName: string, instance: number, paramName: string, prefix: string,
-            navCtrl: NavController): number {
+            navCtrl: NavController): ViewController {
         let historyInstance, params,
             view = navCtrl.getActive();
 
@@ -65,13 +65,13 @@ export class AddonModFeedbackHelperProvider {
 
             // Page found.
             if (view.name == pageName) {
-                return view.index;
+                return view;
             }
 
             view = navCtrl.getPrevious(view);
         }
 
-        return 0;
+        return null;
     }
 
     /**
@@ -223,10 +223,8 @@ export class AddonModFeedbackHelperProvider {
      * @return {Promise<void>}    Resolved when navigation animation is done.
      */
     openFeature(feature: string, navCtrl: NavController, module: any, courseId: number, group: number = 0): Promise<void> {
-        const pageName = feature && feature != 'analysis' ? 'AddonModFeedback' + feature + 'Page' : 'AddonModFeedbackIndexPage';
+        const pageName = feature && feature != 'analysis' ? 'AddonModFeedback' + feature + 'Page' : 'AddonModFeedbackIndexPage',
-        let backTimes = 0;
+            stateParams = {
-
-        const stateParams = {
                 module: module,
                 moduleId: module.id,
                 courseId: courseId,
@@ -237,12 +235,12 @@ export class AddonModFeedbackHelperProvider {
         // Only check history if navigating through tabs.
         if (pageName == 'AddonModFeedbackIndexPage') {
             stateParams['tab'] = feature == 'analysis' ? 'analysis' : 'overview';
-            backTimes = this.getActivityHistoryBackCounter(pageName, module.instance, 'feedbackId', 'AddonModFeedback', navCtrl);
+            const view = this.getPageView(pageName, module.instance, 'feedbackId', 'AddonModFeedback', navCtrl);
-        }
 
-        if (backTimes > 0) {
+            if (view) {
-            // Go back X times until the the page we want to reach.
+                // Go back to the found page.
-            return navCtrl.remove(navCtrl.getActive().index, backTimes);
+                return navCtrl.popTo(view);
+            }
         }
 
         // Not found, open new state.

src/addon/mod/forum/components/index/addon-mod-forum-index.html

@@ -32,12 +32,12 @@
                         </ion-avatar>
                         <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p *ngIf="discussion.userfullname">
-                            <ion-note float-end padding-start><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
+                            <ion-note float-end padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
                             {{discussion.userfullname}}
                         </p>
                     </ion-item>
                     <ion-card-content>
-                        <ion-note text-right *ngIf="discussion.groupname">
+                        <ion-note text-end *ngIf="discussion.groupname">
                             <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
                         </ion-note>
                         <p><core-format-text [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text></p>
@@ -50,9 +50,9 @@
                         </ion-avatar>
                         <h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p>
-                            <ion-note float-end padding-start>
+                            <ion-note float-end padding-left text-end>
                                 {{discussion.created | coreDateDayOrTime}}
-                                <div *ngIf="discussion.numunread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
+                                <div *ngIf="discussion.numunread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
                             </ion-note>
                             {{discussion.userfullname}}
                         </p>
@@ -93,7 +93,7 @@
             </ion-infinite-scroll>
         </core-loading>
 
-        <ion-fab bottom right *ngIf="forum && forum.cancreatediscussions">
+        <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">
             <button ion-fab (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
                 <ion-icon name="add"></ion-icon>
             </button>

src/addon/mod/forum/components/index/index.ts

@@ -88,6 +88,12 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         this.viewDiscObserver = this.eventsProvider.on(AddonModForumProvider.VIEW_DISCUSSION_EVENT, (data) => {
             if (this.forum && this.forum.id == data.forumId) {
                 this.selectedDiscussion = this.splitviewCtrl.isOn() ? data.discussion : 0;
+
+                // Invalidate discussion list if it was not read.
+                const discussion = this.discussions.find((disc) => disc.discussion == data.discussion);
+                if (discussion && discussion.numunread > 0) {
+                    this.forumProvider.invalidateDiscussionsList(this.forum.id);
+                }
             }
         }, this.sitesProvider.getCurrentSiteId());
 
@@ -406,7 +412,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
             forumId: this.forum.id,
             discussionId: discussion.discussion,
             trackPosts: this.trackPosts,
-            locked: discussion.locked && !discussion.canreply
+            locked: discussion.locked
         };
         this.splitviewCtrl.push('AddonModForumDiscussionPage', params);
     }

src/addon/mod/forum/components/post/addon-mod-forum-post.html

@@ -1,18 +1,20 @@
-<ion-item text-wrap>
+<ion-card-header text-wrap no-padding >
+    <ion-item text-wrap>
         <ion-avatar item-start (click)="openUserProfile(post.userid)">
             <img [src]="post.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: post.userfullname}" role="presentation">
         </ion-avatar>
         <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
         <p>
-        <ion-note float-end padding-start *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
+            <ion-note float-end padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
-        <ion-note float-end padding-start *ngIf="post.modified">
+            <ion-note float-end padding-left text-end *ngIf="post.modified">
                 {{post.modified | coreDateDayOrTime}}
-            <div *ngIf="unread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
+                <div *ngIf="trackPosts && !post.postread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
             </ion-note>
             {{post.userfullname}}
         </p>
-</ion-item>
+    </ion-item>
-<ion-card-content>
+</ion-card-header>
+<ion-card-content padding-top>
     <core-format-text [component]="component" [componentId]="componentId" [text]="post.message"></core-format-text>
     <div *ngFor="let attachment of post.attachments">
         <!-- Files already attached to the submission. -->
@@ -21,12 +23,12 @@
         <core-local-file *ngIf="attachment.name" [file]="attachment"></core-local-file>
     </div>
 </ion-card-content>
-<ion-item text-right *ngIf="post.id && post.canreply">
+<ion-item no-padding text-end *ngIf="post.id && post.canreply" class="addon-forum-reply-button">
     <button ion-button icon-left clear small (click)="showReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.id">
         <ion-icon name="undo"></ion-icon> {{ 'addon.mod_forum.reply' | translate }}
     </button>
 </ion-item>
-<ion-item text-right *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)">
+<ion-item text-end *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)">
     <button ion-button icon-left clear small (click)="editReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.parent">
         <ion-icon name="create"></ion-icon> {{ 'addon.mod_forum.edit' | translate }}
     </button>

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

@@ -30,7 +30,7 @@
             <ion-icon name="warning"></ion-icon> {{ 'addon.mod_forum.discussionlocked' | translate }}
         </ion-card>
 
-        <ion-card *ngIf="discussion" margin-bottom>
+        <ion-card *ngIf="discussion" margin-bottom class="highlight">
             <addon-mod-forum-post [post]="discussion" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
         </ion-card>
 
@@ -51,7 +51,7 @@
             <ion-card>
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
             </ion-card>
-            <div padding-start *ngIf="post.children.length && post.children[0].subject">
+            <div padding-left *ngIf="post.children.length && post.children[0].subject">
                 <ng-container *ngFor="let child of post.children">
                     <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container>
                 </ng-container>

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

@@ -0,0 +1,9 @@
+ion-app.app-root page-addon-mod-forum-discussion {
+    .card.highlight .card-header .item {
+        background-color: $gray-lighter;
+    }
+
+    .addon-forum-reply-button .label {
+        margin: 0;
+    }
+}

src/addon/mod/glossary/components/index/addon-mod-glossary-index.html

@@ -61,7 +61,7 @@
             </ion-infinite-scroll>
         </core-loading>
 
-        <ion-fab bottom right *ngIf="canAdd">
+        <ion-fab bottom end *ngIf="canAdd">
             <button ion-fab (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
                 <ion-icon name="add"></ion-icon>
             </button>

src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html

@@ -1,5 +1,5 @@
 <ion-list>
     <a ion-item *ngFor="let item of items" (click)="loadItem(item.href)" detail-none [class.core-bold]="!item.href">
-        <span padding-start *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
+        <span padding-left *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
     </a>
 </ion-list>

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

@@ -50,7 +50,7 @@
 
                         <!-- Short answer. -->
                         <ng-container *ngSwitchCase="'shortanswer'">
-                            <ion-input padding-start [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength">
+                            <ion-input padding-left [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength">
                             </ion-input>
                         </ng-container>
 

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

@@ -7,11 +7,6 @@ ion-app.app-root page-addon-mod-lesson-player {
 
     ion-input[padding-left] input[padding-left] {
         // Applying padding-left to the ion-input applies it twice since it's replicated in the inner input.
-        padding-left: 0;
-    }
-
-    ion-input[padding-start] input[padding-start] {
-        // Applying padding-start to the ion-input applies it twice since it's replicated in the inner input.
         @include padding(null, null, null, 0);
     }
 

src/addon/mod/quiz/pages/review/review.html

@@ -88,12 +88,12 @@
 <!-- Arrows to go to next/previous. -->
 <ng-template #navArrows>
     <ion-row align-items-center>
-        <ion-col>
+        <ion-col text-start>
             <a ion-button icon-only color="light" *ngIf="previousPage >= 0" (click)="changePage(previousPage)" [title]="'core.previous' | translate">
                 <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
             </a>
         </ion-col>
-        <ion-col text-right>
+        <ion-col text-end>
             <a ion-button icon-only color="light" *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [title]="'core.next' | translate">
                 <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
             </a>

src/addon/mod/wiki/components/index/addon-mod-wiki-index.html

@@ -73,7 +73,7 @@
 
 </core-loading>
 
-<ion-fab bottom right *ngIf="canEdit">
+<ion-fab bottom end *ngIf="canEdit">
     <button ion-fab (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate">
         <ion-icon name="add"></ion-icon>
     </button>

src/addon/mod/wiki/components/index/index.ts

@@ -84,7 +84,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
             protected userProvider: CoreUserProvider, private popoverCtrl: PopoverController) {
         super(injector, content);
 
-        this.pageStr = this.translate.instant('addon.mod_wiki.page');
+        this.pageStr = this.translate.instant('addon.mod_wiki.wikipage');
     }
 
     /**

src/addon/mod/wiki/lang/en.json

@@ -10,7 +10,6 @@
     "newpagetitle": "New page title",
     "nocontent": "There is no content for this page",
     "notingroup": "Not in group",
-    "page": "Page",
     "pageexists": "This page already exists.",
     "pagename": "Page name",
     "subwiki": "Sub-wiki",

src/addon/mod/workshop/components/index/addon-mod-workshop-index.html

@@ -119,10 +119,13 @@
                 </ion-item>
             </ion-card>
 
-            <ion-card class="with-borders" *ngIf="canAssess && assessments && assessments.length">
+            <ion-card class="with-borders" *ngIf="canAssess">
                 <ion-item-divider color="light" text-wrap>
                     <h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2>
                 </ion-item-divider>
+                <ion-item text-wrap *ngIf="!assessments || !assessments.length">
+                    <p>{{ 'addon.mod_workshop.assignedassessmentsnone' | translate }}</p>
+                </ion-item>
                 <ng-container *ngFor="let assessment of assessments">
                     <addon-mod-workshop-submission [submission]="assessment.submission" [assessment]="assessment" [courseId]="workshop.course" [module]="module" [workshop]="workshop" [access]="access" summary="true"></addon-mod-workshop-submission>
                 </ng-container>
@@ -130,7 +133,7 @@
         </ng-container>
 
         <!-- MULTIPLE PHASES SUBMISSION OR GREATER only teachers -->
-        <ion-card class="with-borders" *ngIf="access.canviewallsubmissions && workshop.phase >= workshopPhases.PHASE_SUBMISSION && grades && grades.length">
+        <ion-card class="with-borders" *ngIf="access.canviewallsubmissions && workshop.phase >= workshopPhases.PHASE_SUBMISSION && ((grades && grades.length) || (groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)))">
             <ion-item-divider color="light" text-wrap *ngIf="workshop.phase == workshopPhases.PHASE_SUBMISSION">
                 <h2>{{ 'addon.mod_workshop.submissionsreport' | translate }}</h2>
             </ion-item-divider>

src/addon/mod/workshop/lang/en.json

@@ -9,6 +9,7 @@
     "assessmentstrategynotsupported": "Assessment strategy {{$a}} not supported",
     "assessmentweight": "Assessment weight",
     "assignedassessments": "Assigned submissions to assess",
+    "assignedassessmentsnone": "You have no assigned submission to assess",
     "conclusion": "Conclusion",
     "createsubmission": "Start preparing your submission",
     "deletesubmission": "Delete submission",

src/addon/notifications/pages/list/list.html

@@ -20,7 +20,7 @@
                     <img [src]="notification.profileimageurlfrom || 'assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: notification.userfromfullname}" role="presentation">
                 </ion-avatar>
                 <h2>{{notification.userfromfullname}}</h2>
-                <div item-end *ngIf="!notification.timeread"><ion-icon name="record" color="primary"></ion-icon></div>
+                <div item-end *ngIf="!notification.timeread"><core-icon name="fa-circle" color="primary"></core-icon></div>
                 <p>{{notification.timecreated | coreDateDayOrTime}}</p>
             </ion-item>
             <ion-item text-wrap>

src/addon/qtype/calculated/component/addon-qtype-calculated.html

@@ -18,7 +18,7 @@
 
                 <!-- Input to enter the answer. -->
                 <ion-col>
-                    <ion-input padding-start type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off">
+                    <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off">
                     </ion-input>
                 </ion-col>
 

src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html

@@ -2,6 +2,6 @@
     <ion-item text-wrap>
         <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
     </ion-item>
-    <ion-input padding-start type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
+    <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
     </ion-input>
 </section>

src/app/app.ios.scss

@@ -59,71 +59,6 @@ ion-app.app-root.ios {
       height: 100%;
   }
 
-
-  // Highlights inside the input element.
-  @if ($core-text-input-ios-show-highlight) {
-    .card-ios, .list-ios {
-      // In order to get a 2px border we need to add an inset
-      // box-shadow 1px (this is to avoid the div resizing)
-
-      // The last item in a list has a border on the item, not the
-      // inner item, so add it to the item itself
-      .item-input.item-input-has-focus:last-child,
-      .item-input.input-has-focus:last-child {
-        @include ios-input-highlight($text-input-ios-highlight-color);
-
-        .item-inner ion-input {
-          box-shadow: none;
-        }
-      }
-
-      // Show the focus highlight when the input has focus
-      .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
-      .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
-        @include ios-input-highlight($text-input-ios-highlight-color-valid);
-
-        .item-inner ion-input {
-          box-shadow: none;
-        }
-      }
-
-      .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
-        @include ios-input-highlight($text-input-ios-highlight-color-invalid);
-
-        .item-inner ion-input {
-          box-shadow: none;
-        }
-      }
-    }
-
-    .item-ios.item-input {
-      .item-inner {
-        border: 0;
-      }
-
-      &.item-block .item-inner ion-input {
-        border-bottom: $hairlines-width solid $list-border-color;
-      }
-
-      // TODO remove all uses of input-has-focus in v4
-      &.item-input-has-focus .item-inner ion-input,
-      &.input-has-focus .item-inner ion-input {
-        @include ios-input-highlight($text-input-ios-highlight-color);
-      }
-
-      // Show the valid highlight when it has the .ng-valid class and a value
-      &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
-      &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
-        @include ios-input-highlight($text-input-ios-highlight-color-valid);
-      }
-
-      // Show the invalid highlight when it has the invalid class and has been touched
-      &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
-        @include ios-input-highlight($text-input-ios-highlight-color-invalid);
-      }
-    }
-  }
-
   // Different levels of padding.
   @for $i from 0 through 15 {
     .core-padding-#{$i} {
@@ -138,4 +73,22 @@ ion-app.app-root.ios {
   .card-ios.with-borders .item-ios:last-child .item-inner {
     border-bottom: 0;
   }
+
+
+  .radio-ios .radio-icon {
+    @include position(0, null, null, 0);
+    @include margin(0);
+    @include border-radius($radio-md-icon-border-radius);
+
+    position: relative;
+    display: block;
+
+    width: $checkbox-ios-icon-size;
+    height: $checkbox-ios-icon-size;
+
+    border-width: $checkbox-ios-icon-border-width;
+    border-style: $checkbox-ios-icon-border-style;
+    border-color: $checkbox-ios-icon-border-color-off;
+    background-color: $checkbox-ios-background-color-off;
+  }
 }

src/app/app.md.scss

@@ -41,71 +41,6 @@ ion-app.app-root.md {
       height: calc(100% - #{($navbar-md-height)});
   }
 
-  // Highlights inside the input element.
-  @if ($core-text-input-md-show-highlight) {
-    .card-md, .list-md {
-      // In order to get a 2px border we need to add an inset
-      // box-shadow 1px (this is to avoid the div resizing)
-
-      // The last item in a list has a border on the item, not the
-      // inner item, so add it to the item itself
-      .item-input.item-input-has-focus:last-child,
-      .item-input.input-has-focus:last-child {
-        @include md-input-highlight($text-input-md-highlight-color);
-
-        .item-inner ion-input {
-          box-shadow: none;
-        }
-      }
-
-      .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
-      .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
-        @include md-input-highlight($text-input-md-highlight-color-valid);
-
-        .item-inner ion-input {
-          box-shadow: none;
-        }
-      }
-
-      .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
-        @include md-input-highlight($text-input-md-highlight-color-invalid);
-
-        .item-inner ion-input {
-          box-shadow: none;
-        }
-      }
-    }
-
-    .item-md.item-input {
-      .item-inner {
-        border: 0;
-      }
-
-      &.item-block .item-inner ion-input {
-        border-bottom: 1px solid $list-border-color;
-      }
-
-      // TODO remove all uses of input-has-focus in v4
-      &.item-input-has-focus .item-inner ion-input,
-      &.input-has-focus .item-inner ion-input {
-        @include md-input-highlight($text-input-md-highlight-color);
-      }
-
-      // Show the valid highlight when it has the .ng-valid class and a value
-      // TODO remove all uses of input-has-focus in v4
-      // TODO remove all uses of input-has-value in v4
-      &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
-      &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
-        @include md-input-highlight($text-input-md-highlight-color-valid);
-      }
-
-      // Show the invalid highlight when it has the invalid class and has been touched
-      &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
-        @include md-input-highlight($text-input-md-highlight-color-invalid);
-      }
-    }
-  }
-
   // Different levels of padding.
   @for $i from 0 through 15 {
     .core-padding-#{$i} {

src/app/app.scss

@@ -374,6 +374,13 @@ ion-app.app-root {
     @include core-headings();
   }
 
+  .item core-format-text,
+  core-format-text {
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+
   // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
   ion-card core-format-text img {
     width: min-content;
@@ -396,6 +403,12 @@ ion-app.app-root {
     }
   }
 
+  .item .item-button[icon-only] {
+      height: 2.8em;
+      font-size: 1.6rem;
+      padding: 0 3px;
+  }
+
   // Ionic fix. Button can occupy all page if not.
   ion-select {
     position: relative;
@@ -411,10 +424,19 @@ ion-app.app-root {
       }
   }
 
-  :not(.item) > * > * > ion-select,
+  ion-select {
+    color: $core-select-placeholder-color;
+    align-self: start;
+
+    .select-icon .select-icon-inner {
+      color: $core-select-placeholder-color;
+    }
+  }
+
+  ion-select.core-button-select,
   .core-button-select {
     background-color: white;
-    color: $core-color;
+    color: $core-select-placeholder-color;
     white-space: normal;
     align-self: start;
     max-width: none;
@@ -446,7 +468,7 @@ ion-app.app-root {
     }
 
     .select-icon .select-icon-inner {
-      color: $core-color;
+      color: $core-select-placeholder-color;
     }
 
     ion-icon:last-child {
@@ -919,9 +941,11 @@ ion-app.app-root {
 }
 
 body.keyboard-is-open {
-  .scroll-content, .fixed-content {
+  ion-content:not(.has-footer) {
+    > .scroll-content, > .fixed-content {
       margin-bottom: 0 !important;
     }
+  }
 
   core-ion-tabs .tabbar {
       display: none;

src/components/tabs/tabs.scss

@@ -26,6 +26,7 @@ ion-app.app-root .core-tabs-bar {
             word-wrap: break-word;
             display: block;
             width: 100%;
+            line-height: 1.2em;
         }
 
         &[aria-selected=true] {

src/components/timer/core-timer.html

@@ -1,4 +1,4 @@
-<ion-item #container class="core-timer" [attr.text-center]="align == 'center' ? true : null" [attr.text-right]="align == 'right' ? true : null">
+<ion-item #container class="core-timer" [attr.text-center]="align == 'center' ? true : null" [attr.text-end]="align == 'right' ? true : null">
     <ion-icon name="timer" item-start></ion-icon>
     <label *ngIf="timeLeft > 0 && timerText">{{ timerText }}</label>
     <span *ngIf="timeLeft > 0">{{ timeLeft | coreSecondsToHMS }}</span>

src/core/courses/components/overview-events/core-courses-overview-events.html

@@ -1,11 +1,11 @@
 <ng-template #eventTemplate let-event="event">
-    <a ion-item core-link text-wrap detail-none capture="true" class="core-course-module-handler item-media" [href]="event.url" [title]="event.name" [class.item-badge-right-phone]="event.action && event.action.showitemcount">
+    <a ion-item core-link text-wrap detail-none capture="true" class="core-course-module-handler item-media" [href]="event.url" [title]="event.name">
         <img item-start [src]="event.iconUrl" core-external-content alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
         <h2><core-format-text [text]="event.name"></core-format-text></h2>
         <p>{{event.timesort * 1000 | coreFormatDate:"dfmediumdate" }} <core-format-text *ngIf="showCourse" [text]="event.course.fullnamedisplay"></core-format-text></p>
         <button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
             {{event.action.name}}
-            <ion-badge item-end margin-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
+            <ion-badge item-end margin-start *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
         </button>
         <ion-badge class="hidden-tablet" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
     </a>

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

@@ -37,7 +37,7 @@
                     <core-loading [hideUntil]="courses.loaded" class="core-loading-center">
                         <!-- "Time" selector. -->
                         <div padding class="clearfix" [hidden]="showFilter" ion-row justify-content-between>
-                            <ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected" ion-col (ngModelChange)="selectedChanged()" interface="popover">
+                            <ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected" ion-col (ngModelChange)="selectedChanged()" interface="popover" class="core-button-select">
                                 <ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
                                 <ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
                                 <ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
@@ -82,7 +82,7 @@
                     </ion-refresher>
 
                     <div padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
-                        <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover">
+                        <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover" class="core-button-select">
                             <ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
                             <ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
                         </ion-select>

src/core/emulator/pages/capture-media/capture-media.html

@@ -11,7 +11,7 @@
         </ion-buttons>
     </ion-navbar>
 </ion-header>
-<ion-content>
+<ion-content  class="has-footer">
     <core-loading [hideUntil]="readyToCapture">
         <div class="core-av-wrapper">
             <!-- Video stream for image and video. -->
@@ -47,7 +47,7 @@
                 <ion-icon name="trash"></ion-icon>
             </button>
         </ion-col>
-        <ion-col padding text-right class="chrono-container">
+        <ion-col padding text-end class="chrono-container">
             <core-chrono *ngIf="!isImage" [hidden]="hasCaptured" [running]="isCapturing" [reset]="resetChrono" [endTime]="maxTime" (onEnd)="stopCapturing()"></core-chrono>
         </ion-col>
     </ion-row>

src/core/login/pages/site/site.html

@@ -14,7 +14,7 @@
         <div text-center padding>
             <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">
         </div>
-        <form ion-list no-lines [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
+        <form ion-list [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
             <!-- Form to input the site URL if there are no fixed sites. -->
             <div *ngIf="!fixedSites">
                 <p padding>{{ 'core.login.newsitedescription' | translate }}</p>

src/core/login/pages/sites/sites.html

@@ -24,7 +24,7 @@
             </button>
         </a>
     </ion-list>
-    <ion-fab bottom right>
+    <ion-fab bottom end>
         <button ion-fab (click)="add()" [attr.aria-label]="'core.add' | translate">
             <ion-icon name="add"></ion-icon>
         </button>

src/core/login/pages/sites/sites.scss

@@ -1,5 +1,5 @@
 ion-app.app-root page-core-login-sites {
-    .item-button[icon-only] ion-icon {
+    .item-ios .item-button[icon-only] ion-icon {
-        font-size: 2.3em;
+        font-size: 2.1em;
     }
 }

src/core/mainmenu/pages/menu/menu.scss

@@ -6,11 +6,15 @@ ion-app.app-root page-core-mainmenu {
     .ion-fa-graduation-cap {
         @extend .fa-graduation-cap;
         @extend .fa;
+        font-size: 21px;
+        height: 21px;
     }
 
     .ion-ios-fa-graduation-cap-outline {
         color: transparent;
         -webkit-text-stroke-width: 0.8px;
         -webkit-text-stroke-color: $tabs-tab-color-inactive;
+        font-size: 23px;
+        height: 23px;
     }
 }

src/theme/variables.scss

@@ -135,13 +135,13 @@ $core-login-box-background-border: $gray !default;
 $core-login-box-text-color: $text-color !default;
 $core-login-button-outline: false !default;
 $core-login-loading-color: false !default;
+$core-select-placeholder-color: $core-color;
 
 // App iOS Variables
 // --------------------------------------------------
 // iOS only Sass variables can go here
 
 $text-input-ios-show-focus-highlight: false;
-$core-text-input-ios-show-highlight: false;
 $item-ios-avatar-size: 54px;
 $loading-ios-spinner-color: $core-loading-spinner-color;
 $spinner-ios-ios-color: $core-spinner-color;
@@ -149,6 +149,7 @@ $tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
 $button-ios-outline-background-color: $core-button-outline-background-color;
 $toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
 $checkbox-ios-icon-border-radius: 0px !default;
+$select-ios-placeholder-color: $core-select-placeholder-color;
 $radio-ios-disabled-opacity: .5 !default;
 $checkbox-ios-disabled-opacity: .5 !default;
 $toggle-ios-disabled-opacity: .5 !default;
@@ -157,8 +158,7 @@ $toggle-ios-disabled-opacity: .5 !default;
 // --------------------------------------------------
 // Material Design only Sass variables can go here
 
-$text-input-md-show-focus-highlight: false;
+$text-input-md-show-focus-highlight: true;
-$core-text-input-md-show-highlight: true;
 $item-md-detail-push-show: true;
 $item-md-avatar-size: 54px;
 $loading-md-spinner-color: $core-loading-spinner-color;
@@ -166,6 +166,8 @@ $spinner-md-crescent-color: $core-spinner-color;
 $tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
 $button-md-outline-background-color: $core-button-outline-background-color;
 $font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default;
+$select-md-placeholder-color: $core-select-placeholder-color;
+$label-md-text-color: $text-color !default;
 $radio-md-disabled-opacity: .5 !default;
 $checkbox-md-disabled-opacity: .5 !default;
 $toggle-md-disabled-opacity: .5 !default;
@@ -181,6 +183,8 @@ $loading-wp-spinner-color: $core-loading-spinner-color;
 $spinner-wp-circles-color: $core-spinner-color;
 $tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
 $button-wp-outline-background-color: $core-button-outline-background-color;
+$select-wp-placeholder-color: $core-select-placeholder-color;
+$label-wp-text-color: $text-color !default;
 $radio-wp-disabled-opacity: .5 !default;
 $checkbox-wp-disabled-opacity: .5 !default;
 $toggle-wp-disabled-opacity: .5 !default;