[WebUI IntelliHome#7] Added a layout for the user panel

assets/public/css/style.css

@@ -54,7 +54,15 @@ Works      3.2+      Works       9.5+     9+      Works      Works
 /*
   Custom login Style
 */
-
+.login-container{
+    position: relative;
+    width: 300px;
+    margin: 80px auto;
+    padding: 20px 40px 40px;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #ccc;
+}
 
 #output{
     position: absolute;
@@ -176,3 +184,26 @@ Works      3.2+      Works       9.5+     9+      Works      Works
   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp;
 }
+
+/*
+  User Panel
+*/
+
+.navbar-login
+{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+
+.navbar-login-session
+{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+
+.icon-size
+{
+    font-size: 87px;
+}

assets/templates/components/userpanel.html.ep

@@ -0,0 +1,47 @@
+<ul class="nav navbar-nav navbar-right">
+    <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <!-- Insert image of the user if it is big enough -->
+            <span class="glyphicon glyphicon-user"></span> 
+            <b>Nombre</b>
+            <span class="glyphicon glyphicon-chevron-down"></span>
+            <b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu">
+            <li>
+                <div class="navbar-login">
+                    <div class="row">
+                        <div class="col-lg-4">
+                            <p class="text-center">
+                                <img src="%# Define how to get the image url" alt="Alternate Text" class="img-responsive" />
+                                <p class="text-center small"><a href="# %#Define how to change photo">Change Photo</a></p>
+                                %#<span class="glyphicon glyphicon-user icon-size"></span>
+                            </p>
+                        </div>
+                        <div class="col-lg-8">
+                            <b>
+                                <p class="text-left" id="panel-username">%=$username</p>
+                            </b>
+                            %#Button that could be useful
+                            %#<p class="text-left">
+                            %#    <a href="#" class="btn btn-primary btn-block btn-sm">Modify data</a>
+                            %#</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="divider"></li>
+            <li>
+                <div class="navbar-login navbar-login-session">
+                    <div class="row">
+                        <div class="col-lg-12">
+                            <p>
+                                <a href="#" class="btn btn-danger btn-block" id="logout">Logout</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </li>
+</ul>