Several project view adjustments in CSS, adding font-awesome to use t…

…heir icons All adapter from the latest commits of this other fork: https://github.com/hakunin/fulcrum/commits/feature/classic-design
Codeminer42 · Aug 26, 2016 · 06cf548 · 06cf548
1 parent bb9aea2
commit 06cf548
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 94 deletions.
diff --git a/Gemfile b/Gemfile
@@ -13,6 +13,7 @@ gem 'devise', '~> 3.5.4'
 gem 'devise-async'
 gem 'dotenv-rails'
 gem 'font_assets', github: "ericallam/font_assets", branch: 'master'
+gem 'font-awesome-sass', '~> 4.6.2'
 gem 'friendly_id', '~> 5.1.0'
 gem 'foreman'
 gem 'rails-i18n'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -125,6 +125,8 @@ GEM
       factory_girl (~> 4.7.0)
       railties (>= 3.0.0)
     ffi (1.9.10)
+    font-awesome-sass (4.6.2)
+      sass (>= 3.2)
     foreman (0.82.0)
       thor (~> 0.19.1)
     friendly_id (5.1.0)
@@ -351,6 +353,7 @@ DEPENDENCIES
   dotenv-rails
   ejs
   factory_girl_rails
+  font-awesome-sass (~> 4.6.2)
   font_assets!
   foreman
   friendly_id (~> 5.1.0)

diff --git a/app/assets/javascripts/templates/story.jst.ejs b/app/assets/javascripts/templates/story.jst.ejs
@@ -1,8 +1,12 @@
 <% if (story.estimable()) { %>
-<div class="state-actions">
+<div class="state-actions estimates">
   <form>
     <% _.each(story.point_values(), function(value) { %>
-    <input type="button" class="estimate" value="<%= value %>"/>
+      <span class="estimate input" data-value="<%= value %>">
+        <% if (value == 0) { %>[]<% } else { %>
+          <%= Array(value + 1).join("|") %>
+        <% } %>
+      </span>
     <% }); %>
   </form>
 </div>
@@ -20,16 +24,28 @@
   <a class="icon icons-throbber" title="<%= I18n.t('saving') %>"></a>
   <% } %>
   <span class="popover-activate">
-    <span class="icon icons-<%= story.get('story_type') %> story_type" title="<%= story.story_type %>: <%= story.id %>">
-      <%= story.story_type %>
-    </span>
+    <% if (story.get('story_type') == 'feature') { %>
+      <span class="fa-icon-overlay">
+        <i class="fa fa-star"></i>
+        <i class="fa fa-star-o"></i>
+      </span>
+    <% } %>
+    <% if (story.get('story_type') == 'chore') { %>
+      <i class="fa fa-cog"></i>
+    <% } %>
+    <% if (story.get('story_type') == 'bug') { %>
+      <i class="fa fa-bug"></i>
+    <% } %>
     <% if (story.estimated()) { %>
-    <span class="estimate estimate_<%= story.get('estimate') %>">
-      <%= story.get('estimate') %>
-    </span>
+      <span class="estimate estimate_<%= story.get('estimate') %>">
+        <%= Array(story.get("estimate") + 1).join("|") %>
+      </span>
     <% } %>
     <% if (story.hasDetails()) { %>
-    <span class="icon icons-details"></span>
+      <span class="fa-icon-overlay">
+        <i class="fa fa-comment"></i>
+        <i class="fa fa-comment-o"></i>
+      </span>
     <% } %>
   </span>
 </div>

diff --git a/app/assets/javascripts/views/column_visibility_button_view.js b/app/assets/javascripts/views/column_visibility_button_view.js
@@ -16,7 +16,7 @@ Fulcrum.ColumnVisibilityButtonView = Backbone.View.extend({
 
   initialize: function() {
     _.bindAll(this, 'setClassName');
-    this.$el.attr('class','hide_'+this.options.columnView.id);
+    this.$el.attr('class','hide_'+this.options.columnView.id + " btn btn-default");
     this.options.columnView.on('visibilityChanged', this.setClassName);
   },
 

diff --git a/app/assets/javascripts/views/project_view.js b/app/assets/javascripts/views/project_view.js
@@ -105,7 +105,7 @@ Fulcrum.ProjectView = Backbone.View.extend({
   },
 
   scaleToViewport: function() {
-    var storyTableTop = $('table.stories tbody').offset().top;
+    var storyTableTop = $('table.stories tbody').offset().top + 20;
 
     var extra = 40;
 

diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js
@@ -68,7 +68,7 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
     "click .submit": "saveEdit",
     "click .cancel": "cancelEdit",
     "click .transition": "transition",
-    "click input.estimate": "estimate",
+    "click .estimate": "estimate",
     "change select.story_type": "disableEstimate",
     "click .destroy": "clear",
     "click .description": "editDescription",
@@ -163,7 +163,7 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
   estimate: function(ev) {
     this.saveInProgress = true;
     this.render();
-    this.model.set({estimate: ev.target.value});
+    this.model.set({estimate: ev.target.attributes['data-value'].value});
 
     var that = this;
     this.model.save(null, {
@@ -237,7 +237,9 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
       return false;
     }
     // Should expand if the click wasn't on one of the buttons.
-    return !$(e.target).is('input');
+    if ($(e.target).is('input')) return false
+    if ($(e.target).is('.input')) return false
+    return true;
   },
 
   cancelEdit: function() {

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -2,5 +2,7 @@
 @import 'jquery.gritter';
 @import 'jquery_tagit';
 @import 'jquery.atwho';
+@import "font-awesome-sprockets";
+@import "font-awesome";
 @import 'screen';
 @import 'users'
diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss
@@ -50,11 +50,7 @@ a img {
 }
 
 #header {
-  background: $darkgrey;
-  @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
-  border-bottom: 1px solid $darkgrey*0.7;
-  @include box-shadow(0 1px 2px #aaaaaa);
-  text-shadow: black 0 1px 0;
+  background: #3E6A9E;
   position: relative;
   z-index: 900;
 }
@@ -109,11 +105,8 @@ ul#primary-nav li {
 }
 
 #title_bar {
-  background: #efefef;
-  @include background(linear-gradient(top, #efefef, #dfe1e2));
-  @include box-shadow(0 1px 2px #aaaaaa);
-  text-shadow: white 0 1px 0;
-  border-bottom: 1px solid #ededed;
+  background: #E9E9E9;
+  border-bottom: 1px solid #d5d5d5;
   padding: 5px 10px 3px 10px;
   font-size: 1.0em;
   line-height: 140%;
@@ -124,7 +117,7 @@ ul#primary-nav li {
   padding: 10px 1em;
 
   div.velocity {
-    font-size: 1.4em;
+    font-size: 1.2em;
     float: right;
     position: relative;
 
@@ -170,6 +163,16 @@ ul#primary-nav li {
     @extend .btn-primary;
     @extend .btn-xs;
   }
+  h1 {
+    display: inline;
+  }
+  .project_nav {
+    display: inline;
+  }
+  .column-toggles-wrap {
+    float: right;
+    margin-right: 10px;
+  }
 }
 
 #title_bar h1 {
@@ -178,7 +181,7 @@ ul#primary-nav li {
 }
 
 #main {
-  margin: 1em;
+  margin: 10px 5px;
   position: relative;
 }
 
@@ -197,6 +200,8 @@ html.stories, html.stories body, html.stories div#main {
   }
   a.pressed {
     @extend .btn-default;
+    color: #636363;
+    background-color: #E2E2E2;
   }
 }
 
@@ -223,11 +228,11 @@ div.storycolumn {
 /* Story columns headers */
 .column_header {
   text-align: left;
-  background: $darkgrey;
+  background: #444;
   color: #eee;
-  padding: 0.2em 0.2em 0.2em 1em;
-  text-transform:capitalize;
-  @include border-radius(5px 5px 0 0);
+  padding: 0.4em 0.2em 0.3em 0.7em;
+  text-transform: uppercase;
+  @include border-radius(2px 2px 0 0);
   a.toggle-title{
     color: white;
     text-decoration: none;
@@ -285,7 +290,6 @@ div.story textarea {
 
 div.story-icons {
   float: left;
-  font-size: 0;
 }
 div.story-controls {
   padding: 10px 0;
@@ -319,60 +323,45 @@ div.story-title abbr.initials {
   cursor: inherit;
 }
 
-span.estimate {
-  border: 1px solid #777;
-  padding: 0 0.2em;
-  margin: 0 2px 0 0;
-  @include border-radius(3px);
-  vertical-align: top;
-  font-size: x-small;
-  font-weight: bold;
-  font-style: italic;
-}
-
-span.estimate_1 {
-  @include background(linear-gradient(bottom,
-      $orange 12.5%,
-      white 12.5%));
-}
-span.estimate_2 {
-  @include background(linear-gradient(bottom,
-      $orange 25%,
-      white 25%));
-}
-span.estimate_3 {
-  @include background(linear-gradient(bottom,
-      $orange 37.5%,
-      white 37.5%));
-}
-span.estimate_4 {
-  @include background(linear-gradient(bottom,
-      $orange 50%,
-      white 50%));
-}
-span.estimate_5 {
-  @include background(linear-gradient(bottom,
-      $orange 62.5%,
-      white 62.5%));
-}
-span.estimate_6 {
-  @include background(linear-gradient(bottom,
-      $orange 75%,
-      white 75%));
+.estimate {
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: 10px;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+  display: inline-block;
+  letter-spacing: -1px;
+  width: 20px;
+  margin-left: -2px;
+  margin-right: -6px;
+  text-align: right;
+  top: -7px;
+  position: relative;
+  color: #3556AA;
+  height: 17px;
+  -webkit-font-smoothing: none;
 }
-span.estimate_7 {
-  @include background(linear-gradient(bottom,
-      $orange 87.5%,
-      white 87.5%));
+.estimates {
+  padding-left: 10px;
+  padding-right: 2px;
 }
-span.estimate_8 {
-  @include background(linear-gradient(bottom,
-      $orange 100%,
-      white 100%));
+.estimates .estimate {
+  font-weight: normal;
+  border-radius: none;
+  margin-left: -3px;
+  border-right: 1px solid #858484;
+  padding-right: 2px;
+  top: -3px;
+  background: transparent;
+  line-height: 15px;
 }
 
 .story.release {
-  background-color: darkgrey;
+  background-color: #444;
   color: white;
 }
 .story.release:hover {
@@ -391,10 +380,10 @@ span.estimate_8 {
 
 /* Iteration markers */
 .iteration {
-  @include icons-sprite(iteration, false, 2px, 3px);
-  background-color: #000;
-  color: #ddd;
-  padding: 0.2em 0.2em 0.2em 20px
+  background-color: #707C8B;
+  color: #f5f5f5;
+  padding: 0.2em 0.7em 0.2em 20px;
+  font-size: 12px;
 }
 .iteration .points {
   float: right;
@@ -706,3 +695,33 @@ div#keycut-help {
     padding-left: 45px;
   }
 }
+
+.fa-star {
+  color: #FFE000;
+}
+.fa-star-o {
+  color: #726904;
+}
+.fa-icon-overlay {
+  position: relative;
+}
+.fa-icon-overlay .fa {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.fa-icon-overlay .fa:first-child {
+  position: initial;
+}
+.fa-comment {
+  color: white;
+}
+.fa-comment-o {
+  color: gray;
+}
+.fa-bug {
+  color: #C20B0B;
+}
+.fa-cog {
+  color: #5E5C5C;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -43,7 +43,7 @@
           </ul>
         </li>
         <li><%= link_to User.model_name.human(:count => 2), admin_users_path %></li>
-        <li><%= link_to current_user.email, edit_user_registration_path %></li>
+        <li><%= link_to current_user.name, edit_user_registration_path %></li>
         <li><%= link_to t('log out'), destroy_user_session_path,
                         :method => :delete %></li>
       <% else %>

diff --git a/app/views/projects/_nav.html.erb b/app/views/projects/_nav.html.erb
@@ -1,9 +1,3 @@
-<h1><%= project.name %></h1>
-
-<%- if defined? show_column_toggles -%>
-<div id="column-toggles"></div>
-<%- end -%>
-
 <%= link_to_unless_current Story.model_name.human(:count => 2), project_path(project), class: 'project-action' %> |
 <% if can? :manage, User %>
   <%= link_to_unless_current User.model_name.human(:count => 2), project_users_path(project), class: 'project-action' %> |