From 6e645667b11a97440b4dc65697ad5f80d273a124 Mon Sep 17 00:00:00 2001
From: Rasika Perera <info.rasika@gmail.com>
Date: Sun, 13 Dec 2015 00:04:01 +0530
Subject: [PATCH] fixing ui styling issues

---
 .../type-view.hbs                             | 113 ++++++++----------
 1 file changed, 50 insertions(+), 63 deletions(-)

diff --git a/features/device-mgt-iot-virtualfirealarm-feature/org.wso2.carbon.device.mgt.iot.virtualfirealarm.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs b/features/device-mgt-iot-virtualfirealarm-feature/org.wso2.carbon.device.mgt.iot.virtualfirealarm.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
index 83b8fd6fd9..d5327320b4 100644
--- a/features/device-mgt-iot-virtualfirealarm-feature/org.wso2.carbon.device.mgt.iot.virtualfirealarm.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
+++ b/features/device-mgt-iot-virtualfirealarm-feature/org.wso2.carbon.device.mgt.iot.virtualfirealarm.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
@@ -1,37 +1,27 @@
 <div class="col-lg-12  margin-top-double">
     <h1 class="grey ">Virtual Firealrm</h1>
     <hr>
-    <p class="margin-bottom-double light-grey ">Connect your Android device
-        to the WSO2 device cloud.</p>
+    <p class="margin-bottom-double light-grey ">Connect your Android device to the WSO2 device cloud.</p>
 </div>
 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
     <img src="{{@unit.publicUri}}/images/firealarm.png" class="img-responsive">
 </div>
 <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
-        <h3 class="uppercase">Ingredients</h3>
-        <hr>
-        <p class="grey margin-top">Hardware Requirements </p>
-        <br>
-
-            <span class="fw-stack fw-lg margin-right">
-                    <i class="fw fw-ring fw-stack-2x"> </i>
-                    <i class="fw fw-right-arrow fw-stack-1x"></i>
-                </span> Raspberry Pi (Internet Enabled)<br/>
-            <span class="fw-stack fw-lg margin-right">
-                    <i class="fw fw-ring fw-stack-2x"> </i>
-                    <i class="fw fw-right-arrow fw-stack-1x"></i>
-                </span> DHT11 Temperature Sensor<br/>
-            <span class="fw-stack fw-lg margin-right">
-                    <i class="fw fw-ring fw-stack-2x"> </i>
-                    <i class="fw fw-right-arrow fw-stack-1x"></i>
-                </span> LED<br/>
-            <span class="fw-stack fw-lg margin-right">
-                    <i class="fw fw-ring fw-stack-2x"> </i>
-                    <i class="fw fw-right-arrow fw-stack-1x"></i>
-                </span> Buzzer(3v)<br/>
-
-
-        <br>
+    <h3 class="uppercase">Ingredients</h3>
+    <hr>
+    <p class="grey margin-top">Hardware Requirements </p>
+    <br>
+    <ul class="list-unstyled">
+        <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-right-arrow fw-stack-1x"></i></span> Raspberry Pi (Internet Enabled)</li>
+        <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-right-arrow fw-stack-1x"></i></span> DHT11 Temperature Sensor</li>
+        <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-right-arrow fw-stack-1x"></i></span> LED</li>
+        <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-right-arrow fw-stack-1x"></i></span> Buzzer(3v)</li>
+    </ul>
+    <br>
 
     <a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download</a>
 
@@ -39,7 +29,7 @@
         <div class="modal-content">
             <div class="row">
                 <div class="col-md-7  center-container">
-                    <h3>Name your device and download the agent from following link.dsfsdfdsf</h3>
+                    <h3>Name your device and download the agent from following link.</h3>
                     <br/>
                     <form id="downloadForm" method="GET" action="{{@app.context}}/api/devices/sketch/download">
                         <div class="control-group">
@@ -50,7 +40,7 @@
                                        name="deviceName" size="60" required>
                                 <br/><br/>
                                 <input type="hidden" class="deviceType" name="deviceType" value="virtual_firealarm"/>
-                                <input type="radio" name="sketchType" value="simple_agent" id="simple_agent"> <label for="simple_agent">Simple Agent</label> &nbsp;&nbsp;
+                                <input type="radio" name="sketchType" value="simple_agent" id="simple_agent" checked> <label for="simple_agent">Simple Agent</label> &nbsp;&nbsp;
                                 <input type="radio" name="sketchType" value="advanced_agent" id="advanced_agent"> <label for="advanced_agent">Advanced Agent</label>
                             </div>
                         </div>
@@ -63,7 +53,7 @@
                             </a>
                             &nbsp;&nbsp;
                         </div>
-                </form>
+                    </form>
                 </div>
             </div>
         </div>
@@ -155,40 +145,38 @@
     <br/><br/>
 </div>
 
-    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
-        <h3 class="uppercase">Prepare</h3><hr>
-        <p class="grey margin-top">Get your device ready</p>
-        <br/>
-
-            <p class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</p>
-            <p class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</p>
-            <p class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</p>
-
-        <br>
-    </div>
-
-    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
-        <h3 class="uppercase">Schematic Diagram</h3><hr>
-        <p class="grey margin-top">Click on the image to zoom</p>
-        <center>
-            <a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
-                <img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
-            </a>
-        </center>
-        <br/>
-    </div>
+<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
+    <h3 class="uppercase">Prepare</h3><hr>
+    <p class="grey margin-top">Get your device ready</p>
+    <ul class="list-unstyled">
+        <li class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</li>
+        <li class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</li>
+        <li class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</li>
+    </ul>
+    <br>
+</div>
 
-    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
-        <h3 class="uppercase">Connect (Quick Start)</h3><hr>
-        <p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
-        <br/>
+<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
+    <h3 class="uppercase">Schematic Diagram</h3><hr>
+    <p class="grey margin-top">Click on the image to zoom</p>
+    <center>
+        <a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
+            <img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
+        </a>
+    </center>
+    <br/>
+</div>
 
-            <p class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></p>
-            <p class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></p>
-            <p class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></p>
-        
-        <br>
-    </div>
+<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
+    <h3 class="uppercase">Connect (Quick Start)</h3><hr>
+    <p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
+    <ul class="list-unstyled">
+        <li class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></li>
+        <li class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></li>
+        <li class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></li>
+    </ul>
+    <br/>
+</div>
 
 </div>
 
@@ -272,5 +260,4 @@
         }
 
     </script>
-{{/zone}}
-
+{{/zone}}
\ No newline at end of file