From ba0eea6344eb48c7b758b24c7776a3f5f1e5e738 Mon Sep 17 00:00:00 2001
From: Imesh Chandrasiri <dimal.chandrasiri@gmail.com>
Date: Mon, 5 Dec 2016 16:13:23 +0530
Subject: [PATCH] Fixing text overlapping and UX issues in device pages

---
 .../type-view.hbs                             | 68 +++++++++-------
 .../type-view.hbs                             | 80 ++++++++++---------
 .../type-view.hbs                             | 20 ++---
 .../type-view.hbs                             |  6 +-
 4 files changed, 91 insertions(+), 83 deletions(-)

diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
index 955e07b546..df8584d794 100644
--- a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
@@ -147,15 +147,15 @@
     <hr>
     <ul class="list-unstyled">
         <li class="padding-top-double">
-            <span class="circle">01</span>
+            <span class="badge">01</span>
                Connect Android device to network.
         </li>
         <li class="padding-top-double">
-            <span class="circle">02</span>
+            <span class="badge">02</span>
                Start Android Sense app in your device.
         </li>
         <li class="padding-top-double">
-            <span class="circle">03</span>
+            <span class="badge">03</span>
                Fill login form with the credentials.
             <i>(Use server URL as [ https://&lt;WSO2_IoT_SERVER_HOST&gt;:&lt;
                HTTPS_SERVER_PORT&gt; ] and click on
@@ -169,7 +169,7 @@
         </li>
 
         <li class="padding-top-double">
-            <span class="circle">04</span>
+            <span class="badge">04</span>
                Once the device is enrolled, click on <strong>[+]</strong> button to
             select the sensors.
             <a href="{{@unit.publicUri}}/images/selectSensorView.png" target="_blank"
@@ -178,7 +178,7 @@
             </a>
         </li>
         <li class="padding-top-double">
-            <span class="circle">05</span>
+            <span class="badge">05</span>
                Click on <i>[Publish data]</i> button to publish sensor readings to
             IoT server.
             <a href="{{@unit.publicUri}}/images/publishDataView.png" target="_blank"
@@ -190,41 +190,47 @@
     <br>
 </div>
 
-<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
-    <h3 class="uppercase">Try Out</h3>
-    <hr>
-    <ul class="list-unstyled">
-        <li class="padding-top-double">
-            <span class="fw-stack fw-lg margin-right">
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double">
+    <div class="row">
+        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
+            <h3 class="uppercase">Try Out</h3>
+            <hr>
+            <ul class="list-unstyled">
+                <li class="padding-top-double">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>
-               You can view all your connected devices
-            <a href="{{@app.context}}/devices">[Device Management]</a> page.
-        </li>
-        <li class="padding-top-double">
-            <span class="fw-stack fw-lg margin-right">
+                    You can view all your connected devices
+                    <a href="{{@app.context}}/devices">[Device Management]</a> page.
+                </li>
+                <li class="padding-top-double">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>
-               You can select any one of your connected devices for available
-            operations and Real-Time data monitoring.
-        </li>
-        <li class="padding-top-double">
-            <span class="fw-stack fw-lg margin-right">
+                    You can select any one of your connected devices for available
+                    operations and Real-Time data monitoring.
+                </li>
+                <li class="padding-top-double">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>   For historical analytics of sensor data navigate to device
-                   analytics page.
-        </li>
-    </ul>
-    <br/>
-    <p class="grey margin-top">Click on the image to zoom</p>
-    <center>
-        <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
-            <img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
-        </a>
-    </center>
+                    analytics page.
+                </li>
+            </ul>
+            <br/>
+        </div>
+        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
+            <p class="grey margin-top">Click on the image to zoom</p>
+            <center>
+                <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
+                    <img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
+                </a>
+            </center>
+        </div>
+    </div>
 </div>
 
 <div id="qr-code-modal" data-enrollment-url="{{hostName}}{{@unit.publicUri}}/asset/androidsense.apk" class="hidden">
diff --git a/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs b/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
index 54c12b1541..a2ada8403e 100644
--- a/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
+++ b/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
@@ -196,11 +196,11 @@
     <hr>
     <ul class="list-unstyled">
         <li class="padding-top-double">
-            <span class="circle">01</span>
+            <span class="badge">01</span>
                Wifi-Shield mounted onto the Arduino-UNO board
         </li>
         <li class="padding-top-double">
-            <span class="circle">02</span>
+            <span class="badge">02</span>
                Connect LED bulb to arduino as follows
             <br/><br/>
             <a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
@@ -210,20 +210,20 @@
         </li>
 
         <li class="padding-top-double">
-            <span class="circle">03</span>
+            <span class="badge">03</span>
                Download Arduino-Sketch from [Download Sketch] link above.
         </li>
         <li class="padding-top-double">
-            <span class="circle">04</span>
+            <span class="badge">04</span>
                Unzip the downloaded Arduino Agent
         </li>
         <li class="padding-top-double">
-            <span class="circle">05</span>
+            <span class="badge">05</span>
                Create a folder called "ArduinoBoardSketch" and move all source files
             inside
         </li>
         <li class="padding-top-double">
-            <span class="circle">06</span>
+            <span class="badge">06</span>
                Open ArduinoBoardSketch.h and provide appropriate values for
             <i>[WLAN_SSID]</i>,
             <i>[WLAN_PASS]</i>,
@@ -233,19 +233,19 @@
             variables according to your network.
         </li>
         <li class="padding-top-double">
-            <span class="circle">07</span>
+            <span class="badge">07</span>
                Burn the sketch onto your Arduino board and let the program run.
         </li>
         <li class="padding-top-double">
 
-            <span class="fw-stack fw-lg margin-right">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>
                Arduino will publish it's internal temperature to WSO2-IoT-Server
             <br/><br/>
 
-            <span class="fw-stack fw-lg margin-right">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>
@@ -256,36 +256,38 @@
 </div>
 
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double">
-    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
-        <h3 class="uppercase">Try Out</h3>
-        <hr>
-        <ul class="list-unstyled">
-            <li class="padding-top-double">
-                <span class="circle">01</span>
-                   You can view all your connected devices at
-                <a href="{{@app.context}}/devices">[Device Management]</a> page.
-            </li>
-            <li class="padding-top-double">
-                <span class="circle">02</span>
-                   Select one of connected devices and check for available control
-                operations and monitor Real-Time data.
-            </li>
-            <li class="padding-top-double">
-                <span class="circle">03</span>
-                   You can also view analytics of the data published to IoT-Server by
-                navigating to Device Analytics page.
-            </li>
-        </ul>
-        <br/>
-    </div>
-    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
-        <p class="grey margin-top">Click on the image to zoom</p>
-        <center>
-            <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
-                <img src="{{@unit.publicUri}}/images/myDevices_analytics.png"
-                     class="img-responsive">
-            </a>
-        </center>
+    <div class="row">
+        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
+            <h3 class="uppercase">Try Out</h3>
+            <hr>
+            <ul class="list-unstyled">
+                <li class="padding-top-double">
+                    <span class="badge">01</span>
+                       You can view all your connected devices at
+                    <a href="{{@app.context}}/devices">[Device Management]</a> page.
+                </li>
+                <li class="padding-top-double">
+                    <span class="badge">02</span>
+                       Select one of connected devices and check for available control
+                    operations and monitor Real-Time data.
+                </li>
+                <li class="padding-top-double">
+                    <span class="badge">03</span>
+                       You can also view analytics of the data published to IoT-Server by
+                    navigating to Device Analytics page.
+                </li>
+            </ul>
+            <br/>
+        </div>
+        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
+            <p class="grey margin-top">Click on the image to zoom</p>
+            <center>
+                <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
+                    <img src="{{@unit.publicUri}}/images/myDevices_analytics.png"
+                         class="img-responsive">
+                </a>
+            </center>
+        </div>
     </div>
 </div>
 
diff --git a/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs b/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
index e900fbd1ac..26dd1b94a5 100644
--- a/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
+++ b/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
@@ -192,31 +192,31 @@
     <hr>
     <ul class="list-unstyled">
         <li class="padding-top-double">
-            <span class="circle">01</span>
+            <span class="badge">01</span>
                Connect RaspberryPi, DHT11 Temperature sensor and LED as per the
             schematic below.
         </li>
         <li class="padding-top-double">
-            <span class="circle">02</span>
+            <span class="badge">02</span>
                Ensure your RaspberryPi Board can connect to Internet.
         </li>
         <li class="padding-top-double">
-            <span class="circle">03</span>
+            <span class="badge">03</span>
                Download RaspberryPi Agent via [Download Agent] button above.
             (Alternatively you can use the "curl" command to directly download the Agent to your
             RaspberryPi.)
         </li>
         <li class="padding-top-double">
-            <span class="circle">04</span>
+            <span class="badge">04</span>
                Copy downloaded Agent into your RaspberryPi.
         </li>
         <li class="padding-top-double">
-            <span class="circle">05</span>
+            <span class="badge">05</span>
                Unzip the downloaded Agent and start terminal to run below commands.
         </li>
         <li class="padding-top-double">
 
-            <span class="fw-stack fw-lg margin-right">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>
@@ -225,7 +225,7 @@
         </li>
         <li class="padding-top-double">
 
-            <span class="fw-stack fw-lg margin-right">
+            <span class="fw-stack margin-right">
                 <i class="fw fw-ring fw-stack-2x"></i>
                 <i class="fw fw-right-arrow fw-stack-1x"></i>
             </span>
@@ -251,17 +251,17 @@
     <hr>
     <ul class="list-unstyled">
         <li class="padding-top-double">
-            <span class="circle">01</span>
+            <span class="badge">01</span>
                You can view all your connected devices at
             <a href="{{@app.context}}/devices">[Device Management]</a> page.
         </li>
         <li class="padding-top-double">
-            <span class="circle">02</span>
+            <span class="badge">02</span>
                Select one of connected devices and check for available control
             operations and monitor Real-Time data.
         </li>
         <li class="padding-top-double">
-            <span class="circle">03</span>
+            <span class="badge">03</span>
                You can also view analytics of the data published to IoT-Server by
             navigating to Device Analytics page.
         </li>
diff --git a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
index fa6eaefca6..cb5afe7092 100644
--- a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
+++ b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
@@ -40,9 +40,9 @@
 <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 padding-double grey-bg">
     <h3 class="uppercase">Prepare</h3><hr>
     <ul class="list-unstyled">
-        <li class="padding-top-double"><span class="circle">01</span> Download Device Agent into your Android Mobile.</li>
-        <li class="padding-top-double"><span class="circle">02</span> Install Agent APK file.</li>
-        <li class="padding-top-double"><span class="circle">03</span> Configure Agent App</li>
+        <li class="padding-top-double"><span class="badge">01</span> Download Device Agent into your Android Mobile.</li>
+        <li><span class="badge">02</span> Install Agent APK file.</li>
+        <li><span class="badge">03</span> Configure Agent App</li>
     </ul>
     <br>