Fix fixAbsoluteLayout.js

Author: HyeongjunCho

app/pages/Home.vue

@@ -1,10 +1,9 @@
 <template>
-    <Page class="page" actionBarHidden="true">
-        <FixedAbsoluteLayout backgroundColor="#eeeeee" width="100%" height="100%">
-            <Label class="info" customTop="4.7%" customLeft="61.6%" width="20%" height="6%" backgroundColor="#ff0000">
-            </Label>
-            <Image src="~/static/image/triangle.png" customTop="50%" customLeft="50%" stretch="none" />
-            <Image src="~/static/image/triangle.png" customTop="51%" customLeft="51%" stretch="none" />
+    <Page class="page" actionBarHidden="true" width="100%" height="100%">
+        <FixedAbsoluteLayout class="pageLayout" backgroundColor="#eeeeee" width="99%" height="100%">
+            <Label customTop="1%" customLeft="1%" width="50%" height="50%" backgroundColor="#ffffff" />
+            <Button class="info rates" customTop="4.7%" customLeft="61.6%" text="Rates" textWrap="true" />
+            <Button class="info status" customTop="11.7%" customLeft="61.6%" text="Status" textWrap="true" />
         </FixedAbsoluteLayout>
     </Page>
 </template>
@@ -24,5 +23,36 @@
     // End custom common variables
 
     // Custom styles
+    @function em($number) {
+        @if (min-width: 1080px) {
+            @return $number * 14;
+        }
+        @if (min-width: 800px) {
+            @return $number * 11;
+        }
+        @if (min-width: 600px) {
+            @return $number * 9;
+        }
+        @if (min-width: 400px) {
+            @return $number * 6;
+        }
+        @return $number * 5;
+    }
 
+    .page {
+        position: relative;
+    }
+
+    .info {
+        background-color: white;
+        width: 20%;
+        height: 6%;
+        padding: 0;
+        color: black;
+        border-radius: 5px;
+        font-size: em(1px);
+        &:active {
+            background-color: lightgray;
+        }
+    }
 </style>

fixAbsoluteLayout.js

@@ -21,13 +21,15 @@ const AbsoluteLayout = (function(_super) {
 
   AbsoluteLayout.prototype.setCustomLeft = function(view, value) {
     var isPercent = typeof value === "string" && value.indexOf("%") >= 0;
-    if(isPercent) absoluteLayout_01.setLeft(view, this.getMeasuredWidth() * (parseFloat(value) / 100));
+    var { width } = this.getActualSize();
+    if(isPercent) absoluteLayout_01.setLeft(view, width * (parseFloat(value) / 100));
       else absoluteLayout_01.setLeft(view, value);
   };
 
   AbsoluteLayout.prototype.setCustomTop = function(view, value) {
     var isPercent = typeof value === "string" && value.indexOf("%") >= 0;
-    if(isPercent) absoluteLayout_01.setTop(view, this.getMeasuredHeight() * (parseFloat(value) / 100));
+    var { height } = this.getActualSize();
+    if(isPercent) absoluteLayout_01.setTop(view, height * (parseFloat(value) / 100));
       else absoluteLayout_01.setTop(view, value);
   };