har ordnet login-form som slider ned

2 files changed, 108 insertions, 82 deletions

diff --git a/public/css/styles.less b/public/css/styles.less
index 2cad3a7..3e235f5 100644
--- a/public/css/styles.less
+++ b/public/css/styles.less
@@ -7,16 +7,54 @@
 
 // The rest comes here
 
-div#wrapper {
+body {
     margin-top: @navbarHeight;
-    background: @yellow;
 }
 
+.textsection {
+    padding-top: 28px;
+}
+
+#login-form {
+    display: block;
+    float:right;
+    margin: 10px 0 0;
+    color: @grayLighter;
+}
+
+#login-form  input {
+    background-color: @grayDarker;
+}
+
+#login-form .input-prepend .add-on {
+    background-color: @grayDarker;
+}
+
+#login-form .btn {
+    margin-top: -2px;
+}
+
+#login-form .form-horizontal .control-group:last-child {
+    margin-bottom: 100px;
+}
+
+.navbar-inner {
+    min-height: 40px;
+    vertical-align: 100px;
+}
+
+.navbar {
+}
+
+.navbar .brand.login {
+    float: right;
+    color: @yellow;
+}
 
 .bs-docs-sidenav {
     background-color: @white;
     width: 200px;
-    top: 100px;
+    top: 150px;
     padding: 0;
     margin: 0;
 
@@ -32,9 +70,22 @@ div#wrapper {
     display: block;
     width: 190px \9;
     margin: 0 0 -1px;
-    padding: 8px 14px;
+    padding: 6px 14px;
+    border: 1px solid @grayLighter;
+}
+
+.bs-docs-sidenav > li:first-child > a {
+    -webkit-border-radius: 6px 6px 0 0;
+       -moz-border-radius: 6px 6px 0 0;
+            border-radius: 6px 6px 0 0;
+}
+
+.bs-docs-sidenav > li:last-child > a {
+    -webkit-border-radius: 0 0 6px 6px;
+       -moz-border-radius: 0 0 6px 6px;
+            border-radius: 0 0 6px 6px;
 }
 
 .bs-docs-sidenav > li > a:hover {
-    background-color: @blue;
+    background-color: @grayLighter;
 }
diff --git a/views/test.ejs b/views/test.ejs
index 750e0c1..8e8a050 100644
--- a/views/test.ejs
+++ b/views/test.ejs
@@ -20,18 +20,47 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="navbar-inner">
             <div class="container">
-                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="nav-collapse">
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="brand" href="#">Divid</a>
-                <div class="nav-collapse collapse">
-                    <ul class="nav">
-                        <li><a href="#login">Login</a></li>
-                        <li><a href="#signup">signup</a></li>
-                        <li><a href="#dashboard">Dashboard</a></li>
-                    </ul>
+                <div class="row collapse login-collapse">
+                    <form action="/login" method="post" id="login-form" class="form-horizontal">
+                        <div class="control-group">
+                            <div class="input-prepend">
+                                <span class="add-on"><i class="icon-envelope icon-white"></i></span>
+                                <input type="email" name="user" id="user-tf" placeholder="E-post" required>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <div class="input-prepend">
+                                <span class="add-on"><i class="icon-lock icon-white"></i></span>
+                                <input type="password" id="pass-tf" placeholder="Passord" required>
+                                </div>
+                        </div>
+                        <div class="row-fluid">
+                            <div class="span7">
+                                <label class="checkbox">
+                                    <input type="checkbox"> Remember me
+                                </label>
+                            </div>
+                            <div class="span5">
+                                <button type="submit" class="btn btn-inverse btn-small">Logg inn</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="row">
+                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="nav-collapse">
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="brand" href="#">Divid</a>
+                    <div class="nav-collapse collapse">
+                        <ul class="nav">
+                            <li><a href="#login">Login</a></li>
+                            <li><a href="#signup">signup</a></li>
+                            <li><a href="#dashboard">Dashboard</a></li>
+                        </ul>
+                    </div>
+                    <a class="brand login" data-toggle="collapse" data-target=".login-collapse" href="#login">Logg inn</a>
                 </div>
             </div>
         </div>
@@ -47,7 +76,7 @@
             <ul class="nav nav-list bs-docs-sidenav affix">
                 <li><a href="#"><i class="icon-chevron-right"></i> Stian og hans mor</a></li>
                 <li><a href="#"><i class="icon-chevron-right"></i> Mora til Stian og RBK</a></li>
-                <li><a href="#"><i class="icon-chevron-right"></i> Mora til Erling</a></li>
+                <li><a href="#tits"><i class="icon-chevron-right"></i> Mora til Erling</a></li>
             </ul>
         </div>
 
@@ -59,69 +88,15 @@
             <p>Velkommen til <%= title %></p>
             <p>Her kommer det <em>kanskje</em> mer senere.</p>
 
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <p>TEST</p>
-            <br />
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum, mauris molestie interdum venenatis, sapien diam vestibulum arcu, sit amet ultrices urna sem et ipsum. Pellentesque dapibus tellus tristique augue sollicitudin mollis. Donec consectetur scelerisque lacus sit amet ullamcorper. Maecenas lectus ante, iaculis vitae consequat quis, viverra non lacus. Vestibulum vestibulum lacinia ullamcorper. Nam facilisis blandit turpis sit amet ultricies. Nulla facilisi. Donec non quam risus. Suspendisse venenatis nisl ut dolor imperdiet in eleifend nulla sagittis. Cras facilisis tempus sapien. In dapibus sodales aliquet. Nullam blandit, elit non convallis congue, velit augue facilisis odio, vel blandit turpis purus nec eros. Donec vel ipsum tellus, id lobortis justo. Vivamus ac porta nisi. Suspendisse malesuada convallis velit, non eleifend metus vehicula vitae. Ut pretium, diam nec iaculis gravida, nunc lacus accumsan arcu, et laoreet elit justo nec libero.</p>
+            <p>Integer sit amet lacus lectus, quis laoreet nisl. Pellentesque ut augue odio, eget placerat mauris. Phasellus tortor libero, placerat at interdum id, luctus scelerisque ipsum. Maecenas auctor feugiat aliquam. Nullam eu lorem quis est euismod elementum. Integer sit amet nulla at dui semper pellentesque eget id sem. Sed bibendum nisl id eros ullamcorper ut condimentum justo tempus. Nam eget neque arcu, ac pulvinar justo. Nunc ac justo vel risus ultrices aliquam vel vehicula velit. Nullam faucibus, sapien eget volutpat commodo, erat ipsum congue ante, non facilisis lacus erat non eros. Pellentesque facilisis semper nibh ac tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae magna massa, eu laoreet libero.</p>
+            <section id="tits" class="textsection">
+                <p><h2>Tits</a></h2></p>
+            <img src="http://i.imgur.com/tgFf0gc.png" class="img-polaroid" />
+            <p>Cras ac erat arcu, condimentum posuere lectus. Suspendisse mollis volutpat ipsum, ac posuere quam rutrum vitae. Nullam dignissim, diam eu posuere blandit, diam nibh congue eros, a posuere magna diam ut metus. Sed vehicula commodo lobortis. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a purus lorem, non laoreet libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum, ligula non tristique consequat, erat lacus porttitor orci, eu viverra ipsum nunc nec risus.</p>
+            <p> Donec vitae felis et quam tempor vestibulum vel at diam. Donec felis mauris, euismod vel interdum ac, commodo quis nunc. Nulla nec libero diam, in tempus arcu. Cras justo neque, sodales vel rhoncus nec, placerat ut nunc. Mauris convallis urna non erat varius malesuada. Curabitur eu mauris purus, ut suscipit lorem. Ut convallis varius lacus nec sollicitudin. Fusce egestas ultricies justo, et gravida neque mollis vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+            <p><code>Aliquam blandit mi turpis. Integer ut semper justo. Etiam ultrices metus nec risus pulvinar rhoncus eu id quam. Pellentesque eget consequat metus. Fusce congue feugiat ullamcorper. Donec pretium egestas quam vel interdum. Sed mollis sem ac nulla feugiat id ultrices lacus gravida.</code></p>
+            </section>
         </div><!-- /div.span9 -->
     </div><!-- /div.row -->
     </div><!-- /div#wrapper -->
@@ -135,7 +110,7 @@
         Placed at the end of the document so the pages load faster
     -->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
-    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
+    <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
     <script src="/js/bootstrap.min.js"></script>
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){