Merge pull request #1 from williamjuan027/refactor/vue-extra-layout

refactor: remove extra StackLayout

Author: williamjuan027

vue-demo/app/components/Details.vue

@@ -7,7 +7,7 @@
             <Image
                 margin="0"
                 stretch="aspectFill"
-                :src="flick.image"></Image>
+                :src="flick.image" />
             <StackLayout padding="10 20">
                 <StackLayout v-for="detail in flick.details" :key="detail.id">
                     <Label
@@ -16,12 +16,12 @@
                         fontWeight="700"
                         class="text-primary"
                         textWrap="true"
-                        :text="detail.title"></Label>
+                        :text="detail.title" />
                     <Label
                         fontSize="14"
                         class="text-secondary"
                         textWrap="true"
-                        :text="detail.body"></Label>
+                        :text="detail.body" />
                 </StackLayout>
             </StackLayout>
         </StackLayout>

vue-demo/app/components/Home.vue

@@ -1,44 +1,43 @@
 <template>
   <Page>
     <ActionBar title="NativeFlix" />
-    <StackLayout height="100%">
-      <ListView
-          height="100%"
-          separatorColor="transparent"
-          for="item in flicks"
-          @itemTap="onFlickTap">
-          <v-template>
-              <GridLayout
-                  height="280"
-                  borderRadius="10"
-                  class="bg-secondary"
-                  rows="*, auto, auto"
-                  columns="*"
-                  margin="5 10"
-                  padding="0">
-                <Image
-                  row="0"
-                  margin="0"
-                  stretch="aspectFill"
-                  :src="item.image"></Image>
-                <Label
-                  row="1"
-                  margin="10 10 0 10"
-                  fontWeight="700"
-                  class="text-primary"
-                  fontSize="18"
-                  :text="item.title"></Label>
-                <Label
-                  row="2"
-                  margin="0 10 10 10"
-                  class="text-secondary"
-                  fontSize="14"
-                  textWrap="true"
-                  :text="item.description"></Label>
-              </GridLayout>
-            </v-template>
-      </ListView>
-    </StackLayout>
+    
+    <ListView
+        height="100%"
+        separatorColor="transparent"
+        for="item in flicks"
+        @itemTap="onFlickTap">
+        <v-template>
+            <GridLayout
+                height="280"
+                borderRadius="10"
+                class="bg-secondary"
+                rows="*, auto, auto"
+                columns="*"
+                margin="5 10"
+                padding="0">
+              <Image
+                row="0"
+                margin="0"
+                stretch="aspectFill"
+                :src="item.image" />
+              <Label
+                row="1"
+                margin="10 10 0 10"
+                fontWeight="700"
+                class="text-primary"
+                fontSize="18"
+                :text="item.title" />
+              <Label
+                row="2"
+                margin="0 10 10 10"
+                class="text-secondary"
+                fontSize="14"
+                textWrap="true"
+                :text="item.description" />
+            </GridLayout>
+          </v-template>
+    </ListView>
   </Page>
 </template>