Merge branch 'dropdown_menu'

Foundation.hs

@@ -117,7 +117,8 @@ renderLayout widget = do
             , js_picturefill_js
             ])
         $(combineStylesheets 'StaticR
-            [ css_bootstrap_min_css
+            [ css_dropdown_css
+            , css_bootstrap_min_css
             , css_style_global_css
             ])
         $(widgetFile "default-layout")

static/css/dropdown.css

@@ -0,0 +1,50 @@
+#user-nav {
+	list-style: none;
+	font-weight: bold;
+	margin-bottom: 10px;
+	position: relative;
+}
+
+#user-nav ul {
+	display: none;
+	position: absolute;
+}
+
+#user-nav li {
+	margin-right: 20px;
+}
+
+#user-nav li a {
+	padding: 10px 20px 10px;
+	border-radius: 5px;
+	background-color: white;
+}
+
+#user-nav input[type="checkbox"]:checked + ul {
+	display: block;
+	background-color: white;
+	border-radius: 5px;
+	z-index: 99;
+}
+
+#user-nav a {
+	display: block;
+	text-decoration: none;
+	color: #d64760;
+}
+
+#user-nav a:hover {
+	color: black;
+	transition-timing-function: linear
+	transition-duration: 0.25s;
+}
+
+#user-nav label {
+	margin: 0;
+}
+
+.vanish {
+	/*position: absolute;
+	left: -9999px;*/
+	display: none;
+}

static/css/style-desktop.css

@@ -101,7 +101,7 @@
 	#header
 	{
 		padding: 2em 3em;
-		xmin-height: 212px;
+		min-height: 212px;
 		vertical-align: middle;
 	}
 

static/css/style-global.css

@@ -277,3 +277,7 @@
 		outline: 0px none;
 		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255,249,183, 0.6);
 	}
+
+	nav {
+		min-height: 0 !important;
+	}

templates/bulkUpload.hamlet

@@ -1,5 +1,4 @@
 <div id="header" class="item" data-width="400">
   <form class="inner" method=post enctype=#{enctype}>
-    <h3>Upload multiple images
-    <p>Here you can upload your images.
+    Upload multiple images
     ^{uploadWidget}

templates/dUpload.hamlet

@@ -1,5 +1,4 @@
 <div id="header" class="item" data-width="400">
   <form class="inner" method=post enctype=#{enctype}>
-    <h1>Image upload to album #{albumTitle album}
-    <p>Here you can upload your image.
+    Image upload to album #{albumTitle album}
     ^{dUploadWidget}

templates/default-layout.hamlet

@@ -1,24 +1,37 @@
 <nav id="header">
   <div .row>
     <div .col-md-9>
-      <ul id="user-nav" .nav .nav-pills>
-        <li role="presentation">
-          <a href=@{HomeR}>Home
+      <ul #user-nav>
+        <li>
+          <a href=@{HomeR}>
+            Home
         $maybe su <- msu
-          <li role="presentation">
-            <a href=@{UserR username}>#{slug}<br>
-          <li role="presentation">
-            <a href=@{LogoutR}>Logout
-          <li role="presentation">
-            <a href=@{NewAlbumR}>Create album
-          <li role="presentation">
-            <a href=@{UploadR}>Upload images
+          <li>
+            <label for="cb1">
+              <a>
+                #{slug}<span class="caret"></span>
+            <input type="checkbox" #cb1 .vanish aria-hidden="true">
+            <ul>
+              <li>
+                <a href=@{UserR username}>
+                  Your Profile
+              <li>
+                <a href=@{NewAlbumR}>
+                  Create album
+              <li>
+                <a href=@{UploadR}>
+                  Upload images
+              <li>
+                <a href=@{LogoutR}>
+                  Logout
         $nothing
-          <li role="presentation">
-            <a href=@{LoginR}>Login
+          <li>
+            <a href=@{LoginR}>
+              Login
           $if block == False
-            <li role="presentation">
-              <a href=@{SignupR}>Signup
+            <li>
+              <a href=@{SignupR}>
+                Signup
     <div .col-md-3 #search>
       ^{pageBody searchWidget}
 

templates/form-widget.cassius

@@ -1,5 +1,8 @@
 /*templates/form-widget.cassius*/
 
 #main, #reel, #header
-  overflow-y: auto !important
+  /*overflow-y: auto !important*/
   height: auto !important
+
+#main
+  margin-top: -220px !important;