Ensure flutter-for/react-native is mobile-friendly by making images r…

…esponsive (flutter#1790)

* Ensure flutter-for/react-native is mobile-friendly by making images responsive

- Make flutter-for/react-native mobile friendly by making images responsive.
- Move flutter-for images into _assets folder (contributes to flutter#1303)
- Fix 404 for `/docs/get-started/flutter-for/react-native-devs/images`

* Ensure two gesture GIFs are of the same size

src/_assets/css/_base.scss

@@ -107,14 +107,12 @@ dd {
   .site-figure-container {
     flex: 0 1 auto;
 
-    img {
-      width: 100%;
-    }
+    img { width: 100%; }
 
     figcaption {
-    margin-top: bs-spacer(4);
-    text-align: center;
-  }
+      margin-top: bs-spacer(4);
+      text-align: center;
+    }
   }
 }
 

src/docs/get-started/flutter-for/_android-ios-figure-pair.md

@@ -0,0 +1,26 @@
+{% comment %}
+TODO: Fernando, should we set all `figure-caption` to have centered text,
+      or locally use class="text-center"? I'd favor the former.
+      I've (chalin) temporarily used .text-center below.
+
+Sadly, Jekyll doesn't seem to supported nested includes, so the following won't work:
+
+  {% include app-figure.md image="{{include.image}}" platform="Android" %}
+  {% include app-figure.md image="{{include.image}}" platform="iOS" %}
+
+{% endcomment -%}
+
+<figure class="site-figure">
+  <div class="site-figure-container">
+      {% asset 'get-started/android/{{include.image}}'
+          alt='{{include.alt}} on Android'
+          class='{{include.class}}' %}
+      <figcaption class="figure-caption">Android</figcaption>
+  </div>
+  <div class="site-figure-container">
+      {% asset 'get-started/ios/{{include.image}}'
+          alt='{{include.alt}} on iOS'
+          class='{{include.class}}' %}
+      <figcaption class="figure-caption">iOS</figcaption>
+  </div>
+</figure>

src/docs/get-started/flutter-for/react-native-devs/index.md → src/docs/get-started/flutter-for/react-native-devs.md

@@ -52,8 +52,6 @@ main() {
 }
 ```
 
-
-
 Try it out in [DartPad](https://dartpad.dartlang.org/0df636e00f348bdec2bc1c8ebc7daeb1).
 
 ### Printing to the console
@@ -75,7 +73,6 @@ print('Hello world!');
 Try it out in
 [DartPad](https://dartpad.dartlang.org/cf9e652f77636224d3e37d96dcf238e5).
 
-
 ### Variables
 
 Dart is type safe—it uses a combination of static type checking and runtime
@@ -403,19 +400,18 @@ void main() {
 
 ```
 
-
-
 The following images show the Android and iOS UI for the basic Flutter
 "Hello world!" app.
 
-|Android |iOS |
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/hello_world_basic_android.png?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/hello_world_basic_iOS.png?raw=true" style="width:300px;" alt="Loading">|
+{% comment %}
+  FIXME: _android-ios-figure-pair.md is currently a copy.
+{% endcomment -%}
 
-<br>
-Now that you've seen the most basic Flutter app, the next section shows
- how to take advantage of Flutter's rich widget libraries to create a modern,
-  polished app.
+{% include_relative _android-ios-figure-pair.md image="react-native/hello-world-basic.png" alt="Hello world app" class="border" %}
+
+Now that you've seen the most basic Flutter app, the next section shows how to
+take advantage of Flutter's rich widget libraries to create a modern, polished
+app.
 
 ### How do I use widgets and nest them to form a widget tree?
 
@@ -434,8 +430,8 @@ A widget can define:
 * An aspect of layout—like padding or alignment
 
 The following example shows the "Hello world!" app using widgets from the
- Material library. In this example, the widget tree is nested inside the
-  `MaterialApp` root widget.
+Material library. In this example, the widget tree is nested inside the
+`MaterialApp` root widget.
 
 
 <!-- skip -->
@@ -467,11 +463,7 @@ class MyApp extends StatelessWidget {
 
 The following images show "Hello world!" built from Material Design widgets. You get more functionality for free than in the basic "Hello world!" app.
 
-|Android |iOS |
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/6b18b6e158b15685.png?raw=true" style="width:275px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/2e973d40d6e82114.png?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/hello-world.png" alt="Hello world app" %}
 
 When writing an app, you'll use two types of widgets: [StatelessWidget](https://docs.flutter.io/flutter/widgets/StatelessWidget-class.html) or
  [StatefulWidget](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html). A StatelessWidget is just what it sounds like—a
@@ -568,18 +560,16 @@ add `@required` to the constructor.
 
 The following screenshots show an example of the reusable CustomCard class.
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/android.png?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/iOS.png?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/custom-cards.png" alt="Custom cards" class="border" %}
 
 
 ## Project structure and resources
+
 ### Where do I start writing the code?
 
 Start with the `main.dart` file. It's autogenerated when you create a
 Flutter app.
+
 <!-- skip -->
 ```dart
 // Dart
@@ -594,7 +584,8 @@ starts from the `main` function.
 ### How are files structured in a Flutter app?
 
 When you create a new Flutter project, it builds the following directory structure. You can customize it later, but this is where you start.
-<pre>
+
+```
 ┬
 └ projectname
   ┬
@@ -611,7 +602,7 @@ When you create a new Flutter project, it builds the following directory structu
   ├ test         - Contains automated test files.
   └ pubspec.yaml - Contains the metadata for the Flutter app.
                    This is equivalent to the package.json file in React Native.
-</pre>
+```
 
 ### Where do I put my resources and assets and how do I use them?
 
@@ -754,6 +745,7 @@ For more information about the core widgets from the Widgets package, see
 [Flutter Widget Index](/docs/reference/widgets).
 
 ## Views
+
 ### What is the equivalent of the `View` container?
 
 In React Native, `View` is a container that supports layout with `Flexbox`,
@@ -806,11 +798,8 @@ ListView.builder(
 )
 ```
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/flatlist_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/flatlist_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
+{% include_relative _android-ios-figure-pair.md image="react-native/flatlist.gif" alt="Flat list" class="border" %}
 
-<br>
 To learn how to implement an infinite scrolling list, see the
 [Write Your First Flutter App,
 Part 1](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1)
@@ -882,14 +871,10 @@ class _MyCanvasState extends State<MyCanvas> {
 }
 ```
 
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/canvas_android.png?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/canvas_iOS.png?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/canvas.png" alt="Canvas" class="border" %}
 
 ## Layouts
+
 ### How do I use widgets to define layout properties?
 
 In React Native, most of the layout can be done with the props that are passed
@@ -957,13 +942,7 @@ and [`Stack`](https://docs.flutter.io/flutter/widgets/Stack-class.html).
 
 For a complete list, see [Layout Widgets](/docs/reference/widgets/layout).
 
-
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/basic_layout_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/basic_layout_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/basic-layout.gif" alt="Layout" class="border" %}
 
 ### How do I layer widgets?
 
@@ -1001,17 +980,14 @@ The previous example uses `Stack` to overlay a Container (that displays its `Tex
 on a translucent black background) on top of a `CircleAvatar`. The Stack offsets
 the text using the alignment property and Alignment coordinates.
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/stack_android.png?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/stack_iOS.png?raw=true" style="width:300px;" alt="Loading">|
-ge
-<br/>
+{% include_relative _android-ios-figure-pair.md image="react-native/stack.png" alt="Stack" class="border" %}
 
 For more information, see the
 [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html)
 class documentation.
 
 ## Styling
+
 ### How do I style my components?
 
 In React Native, inline styling and `stylesheets.create` are used to style
@@ -1064,11 +1040,7 @@ Center(
 )
 ```
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/flutterstyling_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/flutterstyling_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/flutterstyling.gif" alt="Styling" class="border" %}
 
 ### How do I use `Icons` and `Colors`?
 
@@ -1419,11 +1391,7 @@ class MyStatelessWidget extends StatelessWidget {
 }
 ```
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/state_change_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/state_change_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/state-change.gif" alt="State change" class="border" %}
 
 ## Props
 
@@ -1504,14 +1472,7 @@ CustomCard(
 )
 ```
 
-
-
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/modular_android.png?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/modular_iOS.png?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/modular.png" alt="Cards" class="border" %}
 
 ## Local storage
 
@@ -1864,11 +1825,7 @@ Widget build(BuildContext context) {
 }
 ```
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/navigation_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/navigation_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/navigation.gif" alt="Navigation" class="border" %}
 
 ## Gesture detection and touch event handling
 
@@ -1973,11 +1930,7 @@ see the [GestureDetector class][].
 
 [GestureDetector class]: https://docs.flutter.io/flutter/widgets/GestureDetector-class.html#instance-properties
 
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/flutter_gestures_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/flutter_gestures_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/flutter-gestures.gif" alt="Gestures" class="border" %}
 
 ## Making HTTP network requests
 
@@ -2042,13 +1995,7 @@ _getIPAddress() async {
 }
 ```
 
-
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/api_calls_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/api_calls_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/api-calls.gif" alt="API calls" class="border" %}
 
 ## Form input
 
@@ -2177,14 +2124,7 @@ void _submit() {
 }
 ```
 
-
-
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/input_fields_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/input_fields_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/input-fields.gif" alt="Input" class="border" %}
 
 ## Platform-specific code
 
@@ -2440,13 +2380,8 @@ class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin {
 }
 ```
 
+{% include_relative _android-ios-figure-pair.md image="react-native/flutter-fade.gif" alt="Flutter fade" class="border" %}
 
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/flutter_fade_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/flutter_fade_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
 ### How do I add swipe animation to cards?
 
 In React Native, either the `PanResponder` or third-party libraries are used for
@@ -2469,13 +2404,7 @@ child: Dismissible(
 ),
 ```
 
-
-
-|Android|iOS|
-|:---:|:--:|
-|<img src="/get-started/flutter-for/react-native-devs/images/card_swipe_android.gif?raw=true" style="width:300px;" alt="Loading">|<img src="/get-started/flutter-for/react-native-devs/images/card_swipe_iOS.gif?raw=true" style="width:300px;" alt="Loading">|
-
-<br>
+{% include_relative _android-ios-figure-pair.md image="react-native/card-swipe.gif" alt="Card swipe" class="border" %}
 
 ## React Native and Flutter Widget equivalent components
 
@@ -2551,3 +2480,4 @@ corresponding Flutter widget and common widget properties.
 | [Slider](https://facebook.github.io/react-native/docs/slider.html)                      | [Slider](https://docs.flutter.io/flutter/material/Slider-class.html)                                      | Used to select from a range of values.                                                                                                                                                                       |
 |                                                                                         | value [required]                                                                                          | [ double ] The current value of the slider.                                                                                                                                                                           |
 |                                                                                         | onChanged [required]                                                                                      | Called when the user selects a new value for the slider.                                                                                                                                                      |
+{:.table.table-striped}