[2375] Add a logged in state to the masthead

ckan · May 10, 2012 · c588ba0 · c588ba0
1 parent 582eae1
commit c588ba0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/ckan/public/base/less/masthead.less b/ckan/public/base/less/masthead.less
@@ -54,3 +54,29 @@
   box-shadow: @inset-box-shadow, 0 1px 0 rgba(255, 255, 255, 0.3);
   background-color: rgba(255, 255, 255, 0.15);
 }
+
+.masthead .account {
+  position: relative;
+  float: right;
+  padding-top: 7px;
+  margin-left: 15px;
+  padding-left: 40px;
+}
+
+.masthead .account .image {
+  position: absolute;
+  left: 10px;
+  top: 8px;
+}
+
+.masthead .account .image img {
+  display: block;
+}
+
+.masthead .account .links {
+  line-height: 11px;
+}
+
+.masthead .account .links .logout {
+  color: rgba(255, 255, 255, 0.6);
+}
diff --git a/ckan/public/base/test/primer/index.html b/ckan/public/base/test/primer/index.html
@@ -13,6 +13,10 @@
       .primer-heading {
         margin-bottom: 20px;
       }
+
+      .primer-spacer {
+        height: 20px;
+      }
     </style>
   </head>
   <body>
@@ -595,6 +599,30 @@ <h1><a href="">My Site Title</a></h1>
           </ul>
         </nav>
       </header>
+      <div class="primer-spacer"></div>
+      <header class="masthead">
+        <hgroup>
+          <h1><a href="">My Site Title</a></h1>
+          <p>My Site Tagline</p>
+        </hgroup>
+        <div class="account">
+          <a href="#home" class="image">
+            <img src="" width="25" height="25" />
+          </a>
+          <span class="links">
+            <a href="#home">username</a>
+            <a class="logout" href="#logout">Log out</a>
+          </span>
+        </div>
+        <nav>
+          <ul class="unstyled">
+            <li><a href="#">Find</a></li>
+            <li><a class="active" href="#">Groups</a></li>
+            <li><a href="#">Share</a></li>
+            <li><a href="#">About</a></li>
+          </ul>
+        </nav>
+      </header>
     </div>
   </body>
 </html>