From 82c8c5cdaf6217af1589cfceaa979b77dabd4305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 27 Nov 2018 08:59:13 +0100
Subject: [PATCH] MOBILE-2744 ux: Change big selects to action-sheet

---
 src/addon/calendar/pages/event/event.html     |  2 +-
 .../calendar/pages/settings/settings.html     |  2 +-
 src/addon/files/pages/list/list.html          |  2 +-
 .../addon-mod-assign-submission.html          |  4 +--
 .../index/addon-mod-data-index.html           |  2 +-
 .../addon-mod-data-field-checkbox.html        |  2 +-
 .../component/addon-mod-data-field-menu.html  |  2 +-
 .../addon-mod-data-field-multimenu.html       |  2 +-
 .../addon-mod-data-field-radiobutton.html     |  2 +-
 src/addon/mod/data/pages/edit/edit.html       |  2 +-
 src/addon/mod/data/pages/entry/entry.html     |  2 +-
 src/addon/mod/data/pages/search/search.html   |  2 +-
 .../index/addon-mod-feedback-index.html       |  2 +-
 src/addon/mod/feedback/pages/form/form.html   |  2 +-
 .../pages/nonrespondents/nonrespondents.html  |  2 +-
 .../pages/respondents/respondents.html        |  2 +-
 .../pages/new-discussion/new-discussion.html  |  2 +-
 src/addon/mod/glossary/pages/edit/edit.html   |  2 +-
 .../index/addon-mod-lesson-index.html         |  2 +-
 src/addon/mod/lesson/pages/player/player.html |  2 +-
 .../lesson/pages/user-retake/user-retake.html |  2 +-
 .../index/addon-mod-scorm-index.html          |  2 +-
 .../index/addon-mod-survey-index.html         |  4 +--
 ...shop-assessment-strategy-accumulative.html |  2 +-
 ...ddon-mod-workshop-assessment-strategy.html |  2 +-
 .../index/addon-mod-workshop-index.html       |  2 +-
 .../workshop/pages/assessment/assessment.html |  4 +--
 .../workshop/pages/submission/submission.html |  2 +-
 .../pages/settings/settings.html              |  2 +-
 .../component/addon-qtype-calculated.html     |  2 +-
 .../match/component/addon-qtype-match.html    |  2 +-
 .../addon-user-profile-field-menu.html        |  2 +-
 src/app/app.md.scss                           | 25 +++++++++++++++++++
 .../site-picker/core-site-picker.html         |  2 +-
 src/core/login/pages/site/site.html           |  2 +-
 src/core/settings/pages/general/general.html  |  2 +-
 src/theme/variables.scss                      |  1 +
 37 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/src/addon/calendar/pages/event/event.html b/src/addon/calendar/pages/event/event.html
index 7ce5ba25e..c8de82b17 100644
--- a/src/addon/calendar/pages/event/event.html
+++ b/src/addon/calendar/pages/event/event.html
@@ -55,7 +55,7 @@
         <ion-card list *ngIf="notificationsEnabled">
             <ion-item>
                 <ion-label>{{ 'addon.calendar.notifications' | translate }}</ion-label>
-                <ion-select [(ngModel)]="notificationTime" (ionChange)="updateNotificationTime($event)" interface="popover">
+                <ion-select [(ngModel)]="notificationTime" (ionChange)="updateNotificationTime($event)" interface="action-sheet">
                     <ion-option value="-1">{{ 'core.defaultvalue' | translate :{$a: defaultTimeReadable} }}</ion-option>
                     <ion-option value="0">{{ 'core.settings.disabled' | translate }}</ion-option>
                     <ion-option value="10">{{ 600 | coreDuration }}</ion-option>
diff --git a/src/addon/calendar/pages/settings/settings.html b/src/addon/calendar/pages/settings/settings.html
index 87a7996da..095708be3 100644
--- a/src/addon/calendar/pages/settings/settings.html
+++ b/src/addon/calendar/pages/settings/settings.html
@@ -7,7 +7,7 @@
     <ion-list>
         <ion-item>
             <ion-label>{{ 'addon.calendar.defaultnotificationtime' | translate }}</ion-label>
-            <ion-select [(ngModel)]="defaultTime" (ionChange)="updateDefaultTime($event)" interface="popover">
+            <ion-select [(ngModel)]="defaultTime" (ionChange)="updateDefaultTime($event)" interface="action-sheet">
                 <ion-option value="0">{{ 'core.settings.disabled' | translate }}</ion-option>
                 <ion-option value="10">{{ 600 | coreDuration }}</ion-option>
                 <ion-option value="30">{{ 1800 | coreDuration }}</ion-option>
diff --git a/src/addon/files/pages/list/list.html b/src/addon/files/pages/list/list.html
index 1f2a23f71..360a36e70 100644
--- a/src/addon/files/pages/list/list.html
+++ b/src/addon/files/pages/list/list.html
@@ -10,7 +10,7 @@
 
     <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
         <!-- Allow selecting the files to see: private or site. -->
-        <div padding *ngIf="showPrivateFiles && showSiteFiles && !path" class="safe-padding-horizontal">
+        <div padding *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select">
                 <ion-option value="my">{{ 'addon.files.privatefiles' | translate }}</ion-option>
                 <ion-option value="site">{{ 'addon.files.sitefiles' | translate }}</ion-option>
diff --git a/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
index adc60f8de..9d64740ec 100644
--- a/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -156,7 +156,7 @@
                 <!-- Grade using a scale. -->
                 <ion-item text-wrap *ngIf="grade.method == 'simple' && grade.scale">
                     <ion-label><h2>{{ 'addon.mod_assign.grade' | translate }}</h2></ion-label>
-                    <ion-select [(ngModel)]="grade.grade" interface="popover" [disabled]="grade.disabled">
+                    <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled">
                         <ion-option *ngFor="let grade of grade.scale" [value]="grade.value">{{grade.label}}</ion-option>
                     </ion-select>
                 </ion-item>
@@ -164,7 +164,7 @@
                 <!-- Outcomes. -->
                 <ion-item text-wrap *ngFor="let outcome of gradeInfo.outcomes">
                     <ion-label><h2>{{ outcome.name }}</h2></ion-label>
-                    <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId" interface="popover" [disabled]="gradeInfo.disabled">
+                    <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId" interface="action-sheet" [disabled]="gradeInfo.disabled">
                         <ion-option *ngFor="let grade of outcome.options" [value]="grade.value">{{grade.label}}</ion-option>
                     </ion-select>
                     <p item-content *ngIf="!canSaveGrades || !outcome.itemNumber">{{ outcome.selected }}</p>
diff --git a/src/addon/mod/data/components/index/addon-mod-data-index.html b/src/addon/mod/data/components/index/addon-mod-data-index.html
index e44f6bcba..18ddc9354 100644
--- a/src/addon/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addon/mod/data/components/index/addon-mod-data-index.html
@@ -29,7 +29,7 @@
     <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
         <ion-label id="addon-data-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
         <ion-label id="addon-data-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-        <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel" interface="popover">
+        <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel" interface="action-sheet">
             <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
         </ion-select>
     </ion-item>
diff --git a/src/addon/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html b/src/addon/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
index 8006a3fdb..9c7932220 100644
--- a/src/addon/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
+++ b/src/addon/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
@@ -1,6 +1,6 @@
 <span *ngIf="!isShowOrListMode()" [formGroup]="form">
     <span *ngIf="mode == 'edit'" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="popover">
+    <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="action-sheet">
         <ion-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-option>
     </ion-select>
     <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
diff --git a/src/addon/mod/data/fields/menu/component/addon-mod-data-field-menu.html b/src/addon/mod/data/fields/menu/component/addon-mod-data-field-menu.html
index 9a9357500..53dabd14c 100644
--- a/src/addon/mod/data/fields/menu/component/addon-mod-data-field-menu.html
+++ b/src/addon/mod/data/fields/menu/component/addon-mod-data-field-menu.html
@@ -1,6 +1,6 @@
 <span *ngIf="!isShowOrListMode()" [formGroup]="form">
     <span *ngIf="mode == 'edit'" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="popover">
+    <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="action-sheet">
         <ion-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-option>
         <ion-option *ngFor="let option of options" [value]="option">{{option}}</ion-option>
     </ion-select>
diff --git a/src/addon/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html b/src/addon/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
index e1d9081ba..8acf2c8c5 100644
--- a/src/addon/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
+++ b/src/addon/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
@@ -1,6 +1,6 @@
 <span *ngIf="!isShowOrListMode()" [formGroup]="form">
     <span *ngIf="mode == 'edit'" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="popover">
+    <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="action-sheet">
         <ion-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-option>
     </ion-select>
     <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
diff --git a/src/addon/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html b/src/addon/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
index 9a9357500..53dabd14c 100644
--- a/src/addon/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
+++ b/src/addon/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
@@ -1,6 +1,6 @@
 <span *ngIf="!isShowOrListMode()" [formGroup]="form">
     <span *ngIf="mode == 'edit'" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="popover">
+    <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" [selectOptions]="{title: field.name}" interface="action-sheet">
         <ion-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-option>
         <ion-option *ngFor="let option of options" [value]="option">{{option}}</ion-option>
     </ion-select>
diff --git a/src/addon/mod/data/pages/edit/edit.html b/src/addon/mod/data/pages/edit/edit.html
index 2accfb5f3..7f34748e7 100644
--- a/src/addon/mod/data/pages/edit/edit.html
+++ b/src/addon/mod/data/pages/edit/edit.html
@@ -13,7 +13,7 @@
         <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
             <ion-label id="addon-data-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
             <ion-label id="addon-data-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-            <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel" interface="popover">
+            <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel" interface="action-sheet">
                 <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
             </ion-select>
         </ion-item>
diff --git a/src/addon/mod/data/pages/entry/entry.html b/src/addon/mod/data/pages/entry/entry.html
index 8d1ee2a9e..a23353f2a 100644
--- a/src/addon/mod/data/pages/entry/entry.html
+++ b/src/addon/mod/data/pages/entry/entry.html
@@ -17,7 +17,7 @@
         <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
             <ion-label id="addon-data-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
             <ion-label id="addon-data-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-            <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel" interface="popover">
+            <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel" interface="action-sheet">
                 <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
             </ion-select>
         </ion-item>
diff --git a/src/addon/mod/data/pages/search/search.html b/src/addon/mod/data/pages/search/search.html
index fcc6e1830..4af747ec6 100644
--- a/src/addon/mod/data/pages/search/search.html
+++ b/src/addon/mod/data/pages/search/search.html
@@ -20,7 +20,7 @@
             </ion-item>
             <ion-item text-wrap>
                 <ion-label stacked>{{ 'core.sortby' | translate }}</ion-label>
-                <ion-select interface="popover" name="sortBy" formControlName="sortBy">
+                <ion-select interface="action-sheet" name="sortBy" formControlName="sortBy">
                     <optgroup *ngIf="fieldsArray.length" label="{{ 'addon.mod_data.fields' | translate }}">
                         <ion-option *ngFor="let field of fieldsArray" [value]="field.id">{{field.name}}</ion-option>
                     </optgroup>
diff --git a/src/addon/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addon/mod/feedback/components/index/addon-mod-feedback-index.html
index 544ba8255..152bc23c8 100644
--- a/src/addon/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addon/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -47,7 +47,7 @@
         <ion-item text-wrap *ngIf="access.canedititems && (groupInfo.separateGroups || groupInfo.visibleGroups)">
             <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
             <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-            <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-feedback-groupslabel" interface="popover">
+            <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-feedback-groupslabel" interface="action-sheet">
                 <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
             </ion-select>
         </ion-item>
diff --git a/src/addon/mod/feedback/pages/form/form.html b/src/addon/mod/feedback/pages/form/form.html
index 3d29e01bf..4a65c41c2 100644
--- a/src/addon/mod/feedback/pages/form/form.html
+++ b/src/addon/mod/feedback/pages/form/form.html
@@ -49,7 +49,7 @@
                                     </ion-item>
                                 </ion-list>
                                 <ng-container *ngSwitchCase="'multichoice-d'">
-                                    <ion-select [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="popover">
+                                    <ion-select [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="action-sheet">
                                         <ion-option *ngFor="let option of item.choices" [value]="option.value"><core-format-text  [component]="component" [componentId]="componentId" [text]="option.label"></core-format-text></ion-option>
                                     </ion-select>
                                 </ng-container>
diff --git a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
index e269f5e31..12a3189ac 100644
--- a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -12,7 +12,7 @@
             <ion-item text-wrap *ngIf="groupInfo.separateGroups || groupInfo.visibleGroups">
                 <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
                 <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-                <ion-select [(ngModel)]="selectedGroup" (ionChange)="loadAttempts(selectedGroup)" aria-labelledby="addon-feedback-groupslabel" interface="popover">
+                <ion-select [(ngModel)]="selectedGroup" (ionChange)="loadAttempts(selectedGroup)" aria-labelledby="addon-feedback-groupslabel" interface="action-sheet">
                     <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/feedback/pages/respondents/respondents.html b/src/addon/mod/feedback/pages/respondents/respondents.html
index bee8066c9..115e9a13c 100644
--- a/src/addon/mod/feedback/pages/respondents/respondents.html
+++ b/src/addon/mod/feedback/pages/respondents/respondents.html
@@ -13,7 +13,7 @@
                 <ion-item text-wrap *ngIf="groupInfo.separateGroups || groupInfo.visibleGroups">
                     <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
                     <ion-label id="addon-feedback-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-                    <ion-select [(ngModel)]="selectedGroup" (ionChange)="loadAttempts(selectedGroup)" aria-labelledby="addon-feedback-groupslabel" interface="popover">
+                    <ion-select [(ngModel)]="selectedGroup" (ionChange)="loadAttempts(selectedGroup)" aria-labelledby="addon-feedback-groupslabel" interface="action-sheet">
                         <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                     </ion-select>
                 </ion-item>
diff --git a/src/addon/mod/forum/pages/new-discussion/new-discussion.html b/src/addon/mod/forum/pages/new-discussion/new-discussion.html
index ab0e795c9..1003dd05a 100644
--- a/src/addon/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addon/mod/forum/pages/new-discussion/new-discussion.html
@@ -23,7 +23,7 @@
             </ion-item>
             <ion-item *ngIf="showGroups">
                 <ion-label id="addon-mod-forum-groupslabel">{{ 'addon.mod_forum.group' | translate }}</ion-label>
-                <ion-select [(ngModel)]="newDiscussion.groupId" aria-labelledby="addon-mod-forum-groupslabel" interface="popover">
+                <ion-select [(ngModel)]="newDiscussion.groupId" aria-labelledby="addon-mod-forum-groupslabel" interface="action-sheet">
                     <ion-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/glossary/pages/edit/edit.html b/src/addon/mod/glossary/pages/edit/edit.html
index af3412560..d76e0793b 100644
--- a/src/addon/mod/glossary/pages/edit/edit.html
+++ b/src/addon/mod/glossary/pages/edit/edit.html
@@ -19,7 +19,7 @@
             </ion-item>
             <ion-item *ngIf="categories.length > 0">
                 <ion-label stacked id="addon-mod-glossary-categories-label">{{ 'addon.mod_glossary.categories' | translate }}</ion-label>
-                <ion-select [(ngModel)]="options.categories" multiple="true" aria-labelledby="addon-mod-glossary-categories-label" interface="popover">
+                <ion-select [(ngModel)]="options.categories" multiple="true" aria-labelledby="addon-mod-glossary-categories-label" interface="action-sheet">
                     <ion-option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
index 2aca8f933..cc32f61e1 100644
--- a/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -110,7 +110,7 @@
                     <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
                         <ion-label id="addon-mod_lesson-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
                         <ion-label id="addon-mod_lesson-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-                        <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-mod_lesson-groupslabel" interface="popover">
+                        <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-mod_lesson-groupslabel" interface="action-sheet">
                             <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                         </ion-select>
                     </ion-item>
diff --git a/src/addon/mod/lesson/pages/player/player.html b/src/addon/mod/lesson/pages/player/player.html
index a6a2c73c6..3bfc7dff9 100644
--- a/src/addon/mod/lesson/pages/player/player.html
+++ b/src/addon/mod/lesson/pages/player/player.html
@@ -97,7 +97,7 @@
                                             <p><core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component" [componentId]="lesson.coursemodule" [text]="row.text"></core-format-text></p>
                                         </ion-col>
                                         <ion-col>
-                                            <ion-select [id]="row.id" [formControlName]="row.name" [attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id" interface="popover">
+                                            <ion-select [id]="row.id" [formControlName]="row.name" [attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id" interface="action-sheet">
                                                 <ion-option *ngFor="let option of row.options" [value]="option.value">{{option.label}}</ion-option>
                                             </ion-select>
                                         </ion-col>
diff --git a/src/addon/mod/lesson/pages/user-retake/user-retake.html b/src/addon/mod/lesson/pages/user-retake/user-retake.html
index afe8b48cc..1f28b5e6d 100644
--- a/src/addon/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addon/mod/lesson/pages/user-retake/user-retake.html
@@ -20,7 +20,7 @@
             <!-- Retake selector if there is more than one retake. -->
             <ion-item text-wrap *ngIf="student.attempts && student.attempts.length > 1">
                 <ion-label id="addon-mod_lesson-retakeslabel">{{ 'addon.mod_lesson.attemptheader' | translate }}</ion-label>
-                <ion-select [(ngModel)]="selectedRetake" (ionChange)="changeRetake(selectedRetake)" aria-labelledby="addon-mod_lesson-retakeslabel" interface="popover">
+                <ion-select [(ngModel)]="selectedRetake" (ionChange)="changeRetake(selectedRetake)" aria-labelledby="addon-mod_lesson-retakeslabel" interface="action-sheet">
                     <ion-option *ngFor="let retake of student.attempts" [value]="retake.try">{{retake.label}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
index 7f6dcdbc8..fdd0eee67 100644
--- a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -81,7 +81,7 @@
             <ion-list>
                 <ion-item text-wrap *ngIf="organizations.length > 1">
                     <ion-label>{{ 'addon.mod_scorm.organizations' | translate }}</ion-label>
-                    <ion-select [(ngModel)]="currentOrganization.identifier" (ionChange)="loadOrganization()" interface="popover">
+                    <ion-select [(ngModel)]="currentOrganization.identifier" (ionChange)="loadOrganization()" interface="action-sheet">
                         <ion-option *ngFor="let org of organizations" [value]="org.identifier">{{ org.title }}</ion-option>
                     </ion-select>
                 </ion-item>
diff --git a/src/addon/mod/survey/components/index/addon-mod-survey-index.html b/src/addon/mod/survey/components/index/addon-mod-survey-index.html
index 094b44471..4ad777c3a 100644
--- a/src/addon/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addon/mod/survey/components/index/addon-mod-survey-index.html
@@ -64,7 +64,7 @@
                         <ion-radio [value]="value + 1" [attr.aria-labelledby]="'addon-mod_survey-'+question.name"></ion-radio>
                     </ion-col>
                     <ion-col class="hidden-tablet">
-                        <ion-select padding [(ngModel)]="answers[question.name]" [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="popover" [required]="question.required">
+                        <ion-select padding [(ngModel)]="answers[question.name]" [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="action-sheet" [required]="question.required">
                             <ion-option value="-1" selected disabled>{{ 'core.choose' | translate }}</ion-option>
                             <ion-option *ngFor="let option of question.options; let value=index;" [value]="value +1">{{option}}</ion-option>
                         </ion-select>
@@ -80,7 +80,7 @@
                             <ion-label [core-mark-required]="question.required" padding-horizontal id="addon-mod_survey-{{question.name}}"><strong>{{question.num}}.</strong> {{ question.text }}</ion-label>
                         </ion-col>
                         <ion-col col-5>
-                            <ion-select padding [(ngModel)]="answers[question.name]" [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="popover" [required]="question.required">
+                            <ion-select padding [(ngModel)]="answers[question.name]" [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="action-sheet" [required]="question.required">
                             <ion-option *ngFor="let option of question.options; let value=index;" [value]="value">{{option}}</ion-option>
                         </ion-select>
                         </ion-col>
diff --git a/src/addon/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html b/src/addon/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
index 07e2967a8..80195fbb5 100644
--- a/src/addon/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
+++ b/src/addon/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
@@ -6,7 +6,7 @@
         </ion-item>
         <ion-item *ngIf="edit && field.grades">
             <ion-label [core-mark-required]="true" stacked>{{ 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' | translate : {'$a': field.dimtitle } }}</ion-label>
-            <ion-select [(ngModel)]="selectedValues[n].grade" interface="popover">
+            <ion-select [(ngModel)]="selectedValues[n].grade" interface="action-sheet">
                 <ion-option *ngFor="let grade of field.grades" [value]="grade.value">{{grade.label}}</ion-option>
             </ion-select>
             <core-input-errors item-content *ngIf="fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]"></core-input-errors>
diff --git a/src/addon/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html b/src/addon/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
index fbefcc6b9..1ae7628aa 100644
--- a/src/addon/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
+++ b/src/addon/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
@@ -23,7 +23,7 @@
                 [maxSubmissions]="workshop.overallfeedbackfiles" [component]="component" [componentId]="componentId" [allowOffline]="true"></core-attachments>
             <ion-item *ngIf="edit && access && access.canallocate">
                 <ion-label stacked [core-mark-required]="true">{{ 'addon.mod_workshop.assessmentweight' | translate }}</ion-label>
-                <ion-select [(ngModel)]="weight" interface="popover">
+                <ion-select [(ngModel)]="weight" interface="action-sheet">
                     <ion-option *ngFor="let w of weights" [value]="w">{{w}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
index 5ac411c4f..bce2d0cbc 100644
--- a/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -143,7 +143,7 @@
             <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
                 <ion-label id="addon-workshop-groupslabel" *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ion-label>
                 <ion-label id="addon-workshop-groupslabel" *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ion-label>
-                <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-workshop-groupslabel" interface="popover">
+                <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-workshop-groupslabel" interface="action-sheet">
                     <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/workshop/pages/assessment/assessment.html b/src/addon/mod/workshop/pages/assessment/assessment.html
index 88392540f..4834ab4ca 100644
--- a/src/addon/mod/workshop/pages/assessment/assessment.html
+++ b/src/addon/mod/workshop/pages/assessment/assessment.html
@@ -44,7 +44,7 @@
             </ion-item>
             <ion-item text-wrap *ngIf="access.canallocate">
                 <ion-label stacked core-mark-required="true">{{ 'addon.mod_workshop.assessmentweight' | translate }}</ion-label>
-                <ion-select formControlName="weight" required="true" interface="popover">
+                <ion-select formControlName="weight" required="true" interface="action-sheet">
                     <ion-option *ngFor="let w of weights" [value]="w">{{ w }}</ion-option>
                 </ion-select>
             </ion-item>
@@ -54,7 +54,7 @@
             </ion-item>
             <ion-item text-wrap *ngIf="access.canoverridegrades">
                 <ion-label stacked>{{ 'addon.mod_workshop.gradinggradeover' | translate }}</ion-label>
-                <ion-select formControlName="grade" interface="popover">
+                <ion-select formControlName="grade" interface="action-sheet">
                     <ion-option *ngFor="let grade of evaluationGrades" [value]="grade.value">{{grade.label}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/mod/workshop/pages/submission/submission.html b/src/addon/mod/workshop/pages/submission/submission.html
index 79b103899..7a77c3f44 100644
--- a/src/addon/mod/workshop/pages/submission/submission.html
+++ b/src/addon/mod/workshop/pages/submission/submission.html
@@ -81,7 +81,7 @@
             </ion-item>
             <ion-item text-wrap>
                 <ion-label stacked>{{ 'addon.mod_workshop.gradeover' | translate }}</ion-label>
-                <ion-select formControlName="grade" interface="popover">
+                <ion-select formControlName="grade" interface="action-sheet">
                     <ion-option *ngFor="let grade of evaluationGrades" [value]="grade.value">{{grade.label}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addon/notifications/pages/settings/settings.html b/src/addon/notifications/pages/settings/settings.html
index f5dd5cdb3..f6fea7a20 100644
--- a/src/addon/notifications/pages/settings/settings.html
+++ b/src/addon/notifications/pages/settings/settings.html
@@ -35,7 +35,7 @@
 
             <!-- Show processor selector. -->
             <div padding class="safe-padding-horizontal">
-                <ion-select *ngIf="preferences && preferences.processors && preferences.processors.length > 0" [ngModel]="currentProcessor.name" (ngModelChange)="changeProcessor($event)" interface="popover" class="core-button-select">
+                <ion-select *ngIf="preferences && preferences.processors && preferences.processors.length > 0" [ngModel]="currentProcessor.name" (ngModelChange)="changeProcessor($event)" interface="action-sheet" class="core-button-select">
                     <ion-option *ngFor="let processor of preferences.processors" [value]="processor.name">{{ processor.displayname }}</ion-option>
                 </ion-select>
             </div>
diff --git a/src/addon/qtype/calculated/component/addon-qtype-calculated.html b/src/addon/qtype/calculated/component/addon-qtype-calculated.html
index db25e4f4b..144d02c03 100644
--- a/src/addon/qtype/calculated/component/addon-qtype-calculated.html
+++ b/src/addon/qtype/calculated/component/addon-qtype-calculated.html
@@ -40,7 +40,7 @@
 <ng-template #selectUnits>
     <ion-col>
         <label *ngIf="question.select.accessibilityLabel" class="accesshide" for="{{question.select.id}}">{{ question.select.accessibilityLabel }}</label>
-        <ion-select id="{{question.select.id}}" [name]="question.select.name" [(ngModel)]="question.select.selected" interface="popover" [disabled]="question.select.disabled">
+        <ion-select id="{{question.select.id}}" [name]="question.select.name" [(ngModel)]="question.select.selected" interface="action-sheet" [disabled]="question.select.disabled">
             <ion-option *ngFor="let option of question.select.options" [value]="option.value">{{option.label}}</ion-option>
         </ion-select>
 
diff --git a/src/addon/qtype/match/component/addon-qtype-match.html b/src/addon/qtype/match/component/addon-qtype-match.html
index cfa627279..b392ef3b4 100644
--- a/src/addon/qtype/match/component/addon-qtype-match.html
+++ b/src/addon/qtype/match/component/addon-qtype-match.html
@@ -10,7 +10,7 @@
                 </ion-col>
                 <ion-col [ngClass]='{"core-question-answer-correct": row.isCorrect === 1, "core-question-answer-incorrect": row.isCorrect === 0}'>
                     <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">{{ row.accessibilityLabel }}</label>
-                    <ion-select id="{{row.id}}" [name]="row.name" [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [(ngModel)]="row.selected" interface="popover">
+                    <ion-select id="{{row.id}}" [name]="row.name" [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [(ngModel)]="row.selected" interface="action-sheet">
                         <ion-option *ngFor="let option of row.options" [value]="option.value">{{option.label}}</ion-option>
                     </ion-select>
 
diff --git a/src/addon/userprofilefield/menu/component/addon-user-profile-field-menu.html b/src/addon/userprofilefield/menu/component/addon-user-profile-field-menu.html
index 351812d26..dcde5daa8 100644
--- a/src/addon/userprofilefield/menu/component/addon-user-profile-field-menu.html
+++ b/src/addon/userprofilefield/menu/component/addon-user-profile-field-menu.html
@@ -6,7 +6,7 @@
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname" text-wrap [formGroup]="form">
     <ion-label stacked [core-mark-required]="field.required">{{ field.name }}</ion-label>
-    <ion-select [formControlName]="field.modelName" [placeholder]="'core.choosedots' | translate" interface="popover">
+    <ion-select [formControlName]="field.modelName" [placeholder]="'core.choosedots' | translate" interface="action-sheet">
         <ion-option value="">{{ 'core.choosedots' | translate }}</ion-option>
         <ion-option *ngFor="let option of field.options" [value]="option">{{option}}</ion-option>
     </ion-select>
diff --git a/src/app/app.md.scss b/src/app/app.md.scss
index de8eefcf1..ef972d724 100644
--- a/src/app/app.md.scss
+++ b/src/app/app.md.scss
@@ -55,4 +55,29 @@ ion-app.app-root.md {
   .card-md.with-borders .item-md:last-child .item-inner {
     border-bottom: 0;
   }
+
+  .action-sheet-md {
+    .action-sheet-title,
+    .action-sheet-container > .action-sheet-group:first-child {
+      box-shadow: 0 3px 5px $gray;
+    }
+
+    .action-sheet-title {
+      padding-top: 0;
+      margin-top: $action-sheet-md-title-padding-top;
+    }
+    .action-sheet-cancel {
+      color: $red;
+    }
+
+    .action-sheet-wrapper {
+      bottom: 0;
+      top: initial;
+      max-height: 50%;
+      height: 100%;
+    }
+    .action-sheet-selected {
+      color: $core-color;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/site-picker/core-site-picker.html b/src/components/site-picker/core-site-picker.html
index c10dbe49f..9cae3ec3a 100644
--- a/src/components/site-picker/core-site-picker.html
+++ b/src/components/site-picker/core-site-picker.html
@@ -1,6 +1,6 @@
 <ion-item>
     <ion-label>{{ 'core.site' | translate }}</ion-label>
-    <ion-select [(ngModel)]="selectedSite" (ngModelChange)="siteSelected.emit(selectedSite)" interface="popover">
+    <ion-select [(ngModel)]="selectedSite" (ngModelChange)="siteSelected.emit(selectedSite)" interface="action-sheet">
         <ion-option *ngFor="let site of sites" [value]="site.id">{{ site.fullNameAndSiteName }}</ion-option>
     </ion-select>
 </ion-item>
diff --git a/src/core/login/pages/site/site.html b/src/core/login/pages/site/site.html
index b96233d70..52a88d4bb 100644
--- a/src/core/login/pages/site/site.html
+++ b/src/core/login/pages/site/site.html
@@ -28,7 +28,7 @@
 
             <ion-item *ngIf="fixedSites && fixedDisplay == 'select'" margin-vertical text-wrap>
                 <ion-label stacked for="siteSelect">{{ 'core.login.selectsite' | translate }}</ion-label>
-                <ion-select formControlName="siteUrl" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" interface="popover">
+                <ion-select formControlName="siteUrl" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" interface="action-sheet">
                     <ion-option *ngFor="let site of fixedSites" [value]="site.url">{{site.name}}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/core/settings/pages/general/general.html b/src/core/settings/pages/general/general.html
index d313a9d76..2358295de 100644
--- a/src/core/settings/pages/general/general.html
+++ b/src/core/settings/pages/general/general.html
@@ -6,7 +6,7 @@
 <ion-content>
     <ion-item text-wrap>
         <ion-label><h2>{{ 'core.settings.language' | translate }}</h2></ion-label>
-        <ion-select [(ngModel)]="selectedLanguage" (ngModelChange)="languageChanged()" interface="popover">
+        <ion-select [(ngModel)]="selectedLanguage" (ngModelChange)="languageChanged()" interface="action-sheet">
             <ion-option *ngFor="let code of languageCodes" [value]="code">{{ languages[code] }}</ion-option>
         </ion-select>
     </ion-item>
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ca9426283..787e6f854 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -182,6 +182,7 @@ $checkbox-md-disabled-opacity: $input-select-opacity !default;
 $toggle-md-disabled-opacity: $input-select-opacity !default;
 $note-md-color: $note-color;
 $popover-md-width: $popover-width;
+$action-sheet-md-title-color: $core-color;
 
 // App Windows Variables
 // --------------------------------------------------