#26 Panel icon, title and toolbar was added

lab2023 · Aug 9, 2013 · b7949e1 · b7949e1
1 parent a54209d
commit b7949e1
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 28 deletions.
diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee
@@ -16,13 +16,13 @@ $(document).ready ->
 
   # Dock dropdown fix
   $('#dock li.launcher').each ->
-    $(this).find('.dropdown-menu').css 'top', $(this).position().top + 23
+    $(this).find('.dropdown-menu').css 'top', $(this).position().top + 33
 
   $('#toggle').click ->
     $('#dock .launcher a').toggle()
     $('#dock li.launcher').each ->
-      $(this).find('.dropdown-menu').css 'top', $(this).position().top + 23
+      $(this).find('.dropdown-menu').css 'top', $(this).position().top + 33
 
   # Enable toolbar tooltips
-  $('#toolbar [title]').tooltip
+  $('[data-toggle=toolbar-tooltip]').tooltip
     placement: 'bottom'
diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass
@@ -21,7 +21,6 @@ $dock-link-font-size: .8em
 $animation-duration: .4s
 
 // Bootstrap Overrides
-
 $brand-primary: $base-color
 $brand-success: $brand-primary
 

diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass
@@ -18,6 +18,41 @@
 .panel // Remove box shadow from panels
   +box-shadow(none)
 
+  // Panel heading styles
+  .panel-heading
+    color: $base-dark-color
+    i[class*='icon-']
+      margin-right: 10px
+  .panel-tools
+    float: right
+    margin-top: -48px
+    margin-right: -8px
+    .btn-group
+      margin-top: -6px
+    .btn-group, .label, .badge
+      float: right
+      display: inline-block
+    .btn
+      padding: 8px 6px
+      font-weight: 200
+      font-size: 1em
+      color: $base-dark-color
+      &:hover
+        color: $base-color
+      &:active, &:focus
+        color: darken($base-color, 10)
+        +box-shadow(none)
+      span.badge
+        font-size: .7em
+        padding: 2px 4px
+    .label, .badge
+      margin-right: 5px
+      margin-top: 4px
+      padding-bottom: 4px
+      font-weight: 200
+  .panel-body
+    clear: both
+
 body.main
   padding: 15px
   background-color: $body-bg-primary
@@ -32,7 +67,7 @@ body.main
   .nav > li > a
     padding: 15px 10px
   .navbar-nav > li > .dropdown-menu
-    margin-top: -10px
+    margin-top: -5px
   li.dropdown.user img
     margin: -2px 5px 0 5px
     width: 20px
@@ -75,21 +110,26 @@ body.main
     color: lighten($base-dark-color, 10)
 
   ul#dock
-    margin: 0 0 0 0
+    margin: -15px 0 0 0
     padding: 0
     width: $sidebar-width
     text-align: center
     color: $clouds
     border-right: 1px solid $dropdown-border
     li.launcher
       list-style: none
-      margin-top: 15px
+      margin-top: 25px
       cursor: pointer
       > i
         display: block
         font-size: 2.5em
         margin-bottom: -2px
       > a
+        height: 36px
+        display: block
+        position: relative
+        padding-top: 36px
+        margin-top: -36px
         text-decoration: none
         color: $clouds
         font-size: $dock-link-font-size
@@ -167,10 +207,11 @@ body.main
       border-bottom: 0
       border: 1px solid #ddd
       border-bottom: 0
-    .btn-group
+    .btn-group, .label, form
       float: right
       display: inline-block
-      button
+    .btn-group
+      .btn
         height: 37px
         @extend .btn-success
         span.badge
@@ -179,8 +220,6 @@ body.main
           font-size: .7em
           font-weight: 200
     .label
-      display: inline-block
-      float: right
       margin-right: 5px
       margin-top: 7px
       padding: 5px

diff --git a/source/index.html.haml b/source/index.html.haml
@@ -1,8 +1,26 @@
-- @title = '## HIERAPOLIS ##'
-- @body_class = 'main'
+- page 'Dashboard', 'dashboard'
 
 .panel
   .panel-heading
     %i.icon-beer.icon-large
     Hierapolis Rocks!
-  Lorem ipsum
+  .panel-tools
+    .btn-group
+      %a.btn{href: '#'}
+        %i.icon-wrench
+        Settings
+      %a.btn{href: '#'}
+        %i.icon-filter
+        Filters
+      %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'}
+        %i.icon-refresh
+      %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Toggle'}
+        %i.icon-chevron-down
+    .badge 3 record
+  .panel-body
+    Lorem ipsum
+
+    %a.btn.btn-default{:href => "#"} Link
+    %button.btn.btn-default{:type => "submit"} Button
+    %input.btn.btn-default{:type => "button", :value => "Input"}/
+    %input.btn.btn-default{:type => "submit", :value => "Submit"}/
diff --git a/source/partials/_breadcrumb.haml b/source/partials/_breadcrumb.haml
@@ -1,4 +1,3 @@
 %ul#breadcrumb.breadcrumb
-  %li
-    %a{:href => "#"} Dashboard
+  %li Dashboard
   %li.active Reports
diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml
@@ -1,12 +1,15 @@
 %i#toggle.icon-align-justify.icon-large
 
 %ul#dock
-  %li.launcher.active
+  %li.launcher{launcher_active('dashboard')}
     %i.icon-dashboard
-    %a{href: '#'} Dashboard
+    =link_to 'Dashboard', 'index.html'
+  %li.launcher{launcher_active('forms')}
+    %i.icon-file-text-alt
+    =link_to 'Forms', 'forms.html'
   %li.launcher
-    %i.icon-user
-    %a{href: '#'} Forms
+    %i.icon-table
+    %a{href: '#'} Tables
   %li.launcher.dropdown.hover
     %i.icon-flag
     %a{href: '#'} Reports
@@ -18,9 +21,6 @@
         %a{:href => '#'} Another action
       %li
         %a{:href => '#'} Something else here
-  %li.launcher
-    %i.icon-picture
-    %a{href: '#'} Pictures
   %li.launcher
     %i.icon-bookmark
     %a{href: '#'} Bookmarks

diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml
@@ -26,7 +26,7 @@
       %a.dropdown-toggle{'data-toggle' => 'dropdown', :href => '#'}
         %i.icon-user
         %strong John DOE
-        =image_tag 'http://placehold.it/20x20/777', class: 'img-rounded'
+        =image_tag lorem.image('300x400', color: '#777'), class: 'img-rounded'
         %b.caret
       %ul.dropdown-menu
         %li

diff --git a/source/partials/_toolbar.haml b/source/partials/_toolbar.haml
@@ -1,13 +1,13 @@
 #toolbar
   .btn-group
-    %button.btn{title: 'Building'}
+    %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Building'}
       %i.icon-building
-    %button.btn{title: 'Laptop'}
+    %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Laptop'}
       %i.icon-laptop
-    %button.btn{title: 'Calendar'}
+    %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Calendar'}
       %i.icon-calendar
       %span.badge 3
-    %button.btn{title: 'Lemon'}
+    %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Lemon'}
       %i.icon-lemon
   .label.label-danger
     Danger