Merge pull request #1474 from crazyserver/MOBILE-649

Mobile 649

src/app/app.scss

@@ -200,6 +200,14 @@ ion-datetime {
   position: relative;
 }
 
+input {
+  @include rtl() {
+    text-align: right;
+  }
+}
+
+
+
 /** Format Text */
 core-format-text[maxHeight],
 core-format-text[ng-reflect-max-height] {
@@ -238,11 +246,10 @@ core-format-text[ng-reflect-max-height] {
         font-size: 14px;
         display: block;
         position: absolute;
-        bottom: 0;
+        @include position(null, 0, 0, null);
-        right: 0;
         z-index: 1001;
         background-color: $white;
-        padding-left: 10px;
+        @include padding(null, null, null, 10px);
       }
 
       &:before {
@@ -308,8 +315,7 @@ audio.core-media-adapt-width {
 
 .core-image-viewer-icon {
   position: absolute;
-  right: 10px;
+  @include position(null, 10px, 10px, null);
-  bottom: 10px;
   color: $black;
   border-radius: 5px;
   background: rgba(255, 255, 255, .5);
@@ -348,7 +354,7 @@ core-format-text {
     }
     ul, ol {
       list-style-position: inside;
-      margin-left: 15px;
+      @include margin(null, null, null, 15px);
     }
   }
 
@@ -411,7 +417,7 @@ ion-col ion-select {
 
 .core-button-select {
   ion-icon:last-child {
-    margin-left: 5px;
+    @include margin(null, null, null, 5px);
   }
 }
 
@@ -423,8 +429,7 @@ ion-col ion-select {
 
     input {
         position: absolute;
-        top: 0;
+        @include position(null, 0, 0, null);
-        right: 0;
         min-width: 100%;
         min-height: 100%;
         opacity: 0;
@@ -490,7 +495,7 @@ ion-col ion-select {
 }
 
 .core-question-feedback-padding {
-  padding: 8px 35px 8px 14px;
+  @include padding(8px, 35px, 8px, 14px);
 }
 
 .core-question-correct {
@@ -579,13 +584,13 @@ ion-col ion-select {
 /*rtl:begin:ignore*/
 .atto_image_button_left {
     float: left;
-    margin: 0 0.5em 0 0;
+    @include margin(0, 0.5em, 0, 0);
     max-width: calc(100% - 1em);
 }
 
 .atto_image_button_right {
     float: right;
-    margin: 0 0 0 0.5em;
+    @include margin(0, 0, 0, 0.5em);
     max-width: calc(100% - 1em);
 }
 /*rtl:end:ignore*/
@@ -657,8 +662,7 @@ canvas[core-chart] {
       ion-icon {
         color: $color-base;
         position: absolute;
-        top: 0;
+        @include position(0, null, null, 16px)
-        left: 16px;
         height: 100%;
         font-size: 24px;
         display: flex;
@@ -716,8 +720,7 @@ canvas[core-chart] {
 .core-modal-fullscreen {
   .modal-wrapper {
     position: absolute;
-    top: 0 !important;
+    @include position(0 !important, null, null, 0 !important);
-    left: 0 !important;
     display: block;
     width: 100% !important;
     height: 100% !important;
@@ -759,9 +762,7 @@ canvas[core-chart] {
   object,
   video {
     position: absolute;
-    top: 0;
+    @include position(0, null, 0, 0);
-    bottom: 0;
-    left: 0;
     width: 100%;
     height: 100%;
     border: 0;
@@ -848,6 +849,7 @@ ion-alert.core-inapp-notification {
     position: absolute;
     top: -18px;
     right: -8px;
+    @include position(-18px, -8px, null, null);
     color: red;
     font-size: 16px;
   }

src/lang/ar.json

@@ -128,6 +128,7 @@
     "submit": "سلم",
     "success": "نجاح",
     "teachers": "معلمون",
+    "thisdirection": "rtl",
     "time": "وقت",
     "timesup": "انتهى الوقت!",
     "today": "اليوم",

src/lang/en.json

@@ -214,6 +214,7 @@
     "tablet": "Tablet",
     "teachers": "Teachers",
     "thereisdatatosync": "There are offline {{$a}} to be synchronized.",
+    "thisdirection": "ltr",
     "time": "Time",
     "timesup": "Time is up!",
     "today": "Today",

src/lang/fa.json

@@ -125,6 +125,7 @@
     "submit": "ثبت",
     "success": "موفق",
     "teachers": "استاد",
+    "thisdirection": "rtl",
     "time": "زمان",
     "timesup": "وقت تمام شد!",
     "today": "امروز",

src/lang/he.json

@@ -146,6 +146,7 @@
     "success": "הצלחה",
     "tablet": "טאבלט",
     "teachers": "מורים",
+    "thisdirection": "rtl",
     "time": "זמן",
     "timesup": "זמנך נגמר!",
     "today": "היום",

src/providers/lang.ts

@@ -44,6 +44,11 @@ export class CoreLangProvider {
                 moment.locale(language);
             });
         });
+
+        translate.onLangChange.subscribe((event: any) => {
+            platform.setLang(event.lang, true);
+            platform.setDir(this.translate.instant('core.thisdirection'), true);
+        });
     }
 
     /**

src/theme/variables.scss

@@ -8,7 +8,7 @@ $font-path: "../assets/fonts";
 // The app direction is used to include
 // rtl styles in your app. For more info, please see:
 // http://ionicframework.com/docs/theming/rtl-support/
-$app-direction: ltr;
+$app-direction: multi;
 
 
 @import "ionic.globals";