MOBILE-4926 style: Add display modes for phones

Author: crazyserver

src/core/directives/tests/behat/format_text.feature

@@ -20,12 +20,19 @@ Feature: Test functionality added by the format-text directive
       | label      | C1     | Label title   | <div data-app-alt-url="#wwwroot#/my/courses.php">Content for browser</div>                                                                                          |
       | label      | C1     | Label 2 title | <div data-app-alt-url="#wwwroot#/?redirect=0" data-app-alt-msg="Open this link" data-open-in="app" data-app-url-confirm="Custom confirm.">Content for browser</div> |
       | label      | C1     | Label 3 title | <div data-app-alt-url="#wwwroot#/user/view.php" data-open-in="app">Content for browser</div>                                                                        |
+      | label      | C1     | Label 3 title | <div class="d-none mobileapp-d-block">No lms, but yes mobile app</div><div class="d-block mobileapp-d-none">Yes lms, but no mobile app</div><div class="d-none mobileapp-d-inline">Inline in mobile app</div><div class="d-none mobileapp-d-inline-block">Inline-block in mobile app</div><div class="d-none mobileapp-d-flex">Flex in mobile app</div> |
     Given I entered the course "Course 1" as "student1" in the app
     Then I should find "Open this link" in the app
     And I should find "$WWWROOT/my/courses.php" in the app
     And I should find "$WWWROOT/?redirect=0" in the app
     But I should not find "Content for browser" in the app
 
+    And I should find "No lms, but yes mobile app" in the app
+    And I should find "Inline in mobile app" in the app
+    And I should find "Inline-block in mobile app" in the app
+    And I should find "Flex in mobile app" in the app
+    But I should not find "Yes lms, but no mobile app" in the app
+
     When I press "$WWWROOT/my/courses.php" in the app
     Then I should not find "Custom confirm" in the app
 

src/theme/components/format-text.scss

@@ -391,3 +391,61 @@ ion-header.ios h1 core-format-text {
 :root.dark core-rich-text-editor .core-rte-editor select {
 	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
 }
+
+
+:root.plt-ios core-format-text,
+:root.plt-ios .item core-format-text {
+    .mobileapp-ios-d-none {
+        display: none !important;
+    }
+    .mobileapp-ios-d-block {
+        display: block !important;
+    }
+    .mobileapp-ios-d-inline {
+        display: inline !important;
+    }
+    .mobileapp-ios-d-inline-block {
+        display: inline-block !important;
+    }
+    .mobileapp-ios-d-flex {
+        display: flex !important;
+    }
+}
+
+:root.plt-android core-format-text,
+:root.plt-android .item core-format-text {
+    .mobileapp-android-d-none {
+        display: none !important;
+    }
+    .mobileapp-android-d-block {
+        display: block !important;
+    }
+    .mobileapp-android-d-inline {
+        display: inline !important;
+    }
+    .mobileapp-android-d-inline-block {
+        display: inline-block !important;
+    }
+    .mobileapp-android-d-flex {
+        display: flex !important;
+    }
+}
+
+:root core-format-text,
+:root .item core-format-text {
+    .mobileapp-d-none {
+        display: none !important;
+    }
+    .mobileapp-d-block {
+        display: block !important;
+    }
+    .mobileapp-d-inline {
+        display: inline !important;
+    }
+    .mobileapp-d-inline-block {
+        display: inline-block !important;
+    }
+    .mobileapp-d-flex {
+        display: flex !important;
+    }
+}