From 06cf548b8f71e34f34e13f94da1f92fff66710e1 Mon Sep 17 00:00:00 2001 From: Fabio Akita Date: Fri, 26 Aug 2016 17:26:39 -0300 Subject: [PATCH 01/26] Several project view adjustments in CSS, adding font-awesome to use their icons All adapter from the latest commits of this other fork: https://github.com/hakunin/fulcrum/commits/feature/classic-design --- Gemfile | 1 + Gemfile.lock | 3 + .../javascripts/templates/story.jst.ejs | 34 +++- .../views/column_visibility_button_view.js | 2 +- app/assets/javascripts/views/project_view.js | 2 +- app/assets/javascripts/views/story_view.js | 8 +- app/assets/stylesheets/application.scss | 2 + app/assets/stylesheets/screen.scss | 159 ++++++++++-------- app/views/layouts/application.html.erb | 2 +- app/views/projects/_nav.html.erb | 6 - app/views/projects/show.html.erb | 14 +- 11 files changed, 139 insertions(+), 94 deletions(-) diff --git a/Gemfile b/Gemfile index 695b9b1e4..23cb56899 100644 --- 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 index eaa467f2d..e1a4ce563 100644 --- 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 index 8cf10640b..2b45dc984 100644 --- a/app/assets/javascripts/templates/story.jst.ejs +++ b/app/assets/javascripts/templates/story.jst.ejs @@ -1,8 +1,12 @@ <% if (story.estimable()) { %> -
+
<% _.each(story.point_values(), function(value) { %> - + + <% if (value == 0) { %>[]<% } else { %> + <%= Array(value + 1).join("|") %> + <% } %> + <% }); %>
@@ -20,16 +24,28 @@ <% } %> - - <%= story.story_type %> - + <% if (story.get('story_type') == 'feature') { %> + + + + + <% } %> + <% if (story.get('story_type') == 'chore') { %> + + <% } %> + <% if (story.get('story_type') == 'bug') { %> + + <% } %> <% if (story.estimated()) { %> - - <%= story.get('estimate') %> - + + <%= Array(story.get("estimate") + 1).join("|") %> + <% } %> <% if (story.hasDetails()) { %> - + + + + <% } %>
diff --git a/app/assets/javascripts/views/column_visibility_button_view.js b/app/assets/javascripts/views/column_visibility_button_view.js index 1b9a20df5..733681f03 100644 --- 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 index 5bdedab42..f3e42adb6 100644 --- 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 index 62d85b5dc..269b99456 100644 --- 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 index 6bf2f6fe6..16e5788fb 100644 --- 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 index 7d8dfa5fe..7107a80c8 100644 --- 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 index 6ba1312e5..cb5b27854 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -43,7 +43,7 @@
  • <%= link_to User.model_name.human(:count => 2), admin_users_path %>
    • -
  • <%= link_to current_user.email, edit_user_registration_path %>
    • +
  • <%= link_to current_user.name, edit_user_registration_path %>
  • <%= link_to t('log out'), destroy_user_session_path, :method => :delete %>
    • <% else %> diff --git a/app/views/projects/_nav.html.erb b/app/views/projects/_nav.html.erb index ad2fb8641..ae0fcfc1a 100644 --- a/app/views/projects/_nav.html.erb +++ b/app/views/projects/_nav.html.erb @@ -1,9 +1,3 @@ -

    <%= project.name %>

    - -<%- if defined? show_column_toggles -%> -
    -<%- 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' %> | diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index ac96ca2d2..943682a41 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -3,9 +3,17 @@ <% content_for :title_bar do %>
    - <%= render 'projects/nav', project: @project, show_column_toggles: true %> - | - <%= t('add story') %> +
    + <%= render :partial => 'projects/nav', + :locals => {:project => @project } %> + | + + <%= t('add story') %> + +
    +
    +
    +
    <% end %> <%= content_tag :table, From e7876a51a74334f9e121ae2aa07161cff6fd2e97 Mon Sep 17 00:00:00 2001 From: Fabio Akita Date: Fri, 26 Aug 2016 18:13:41 -0300 Subject: [PATCH 02/26] Fixing failing specs (specially feature specs for removing the project title) --- app/assets/javascripts/templates/story.jst.ejs | 8 ++++---- .../javascripts/templates/story_hover.jst.ejs | 13 ++++++++++++- app/views/layouts/application.html.erb | 2 +- spec/features/logins_spec.rb | 2 +- spec/features/projects_spec.rb | 3 --- spec/features/stories_spec.rb | 2 +- .../views/column_visibility_button_view_spec.js | 2 +- spec/javascripts/views/story_view_spec.js | 2 +- 8 files changed, 21 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/templates/story.jst.ejs b/app/assets/javascripts/templates/story.jst.ejs index 2b45dc984..f4349e270 100644 --- a/app/assets/javascripts/templates/story.jst.ejs +++ b/app/assets/javascripts/templates/story.jst.ejs @@ -2,11 +2,11 @@
    <% _.each(story.point_values(), function(value) { %> - - <% if (value == 0) { %>[]<% } else { %> + <% if (value > 0) { %> + <%= Array(value + 1).join("|") %> - <% } %> - + + <% } %> <% }); %>
    diff --git a/app/assets/javascripts/templates/story_hover.jst.ejs b/app/assets/javascripts/templates/story_hover.jst.ejs index 8aef919ac..feec2eca2 100644 --- a/app/assets/javascripts/templates/story_hover.jst.ejs +++ b/app/assets/javascripts/templates/story_hover.jst.ejs @@ -1,6 +1,17 @@
    - + <% if (story.get('story_type') == 'feature') { %> + + + + + <% } %> + <% if (story.get('story_type') == 'chore') { %> + + <% } %> + <% if (story.get('story_type') == 'bug') { %> + + <% } %> <%= story.get('story_type') %> <% if (story.get('estimated')) { %> <%= story.get('estimate') %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index cb5b27854..5f414f1b9 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -23,7 +23,7 @@
    • - <%= link_to t('fulcrum'), root_path %> + <%= link_to t('fulcrum'), root_path %>
    diff --git a/spec/features/logins_spec.rb b/spec/features/logins_spec.rb index 5b98b08db..77a1dc23d 100644 --- a/spec/features/logins_spec.rb +++ b/spec/features/logins_spec.rb @@ -41,7 +41,7 @@ click_button 'Sign in' expect(page).to have_selector('#title_bar', :text => 'New Project') - expect(page).to have_selector('#primary-nav', :text => 'user@example.com') + expect(page).to have_selector('.navbar-right', :text => 'User 89') end end diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb index 8ae4ad1a6..e7d03baa3 100644 --- a/spec/features/projects_spec.rb +++ b/spec/features/projects_spec.rb @@ -30,7 +30,6 @@ click_on 'Test Project' end - expect(page).to have_selector('h1', :text => 'Test Project') expect(page).not_to have_selector('h1', :text => 'Archived Project') end @@ -45,7 +44,6 @@ fill_in 'Name', :with => 'New Project' click_on 'Create Project' - expect(page).to have_selector('h1', :text => 'New Project') expect(current_path).to eq(project_path(Project.find_by_name('New Project'))) end @@ -71,7 +69,6 @@ fill_in 'Name', :with => 'New Project Name' click_on 'Update Project' - expect(page).to have_selector('h1', :text => 'New Project Name') expect(current_path).to eq(project_path(project)) end diff --git a/spec/features/stories_spec.rb b/spec/features/stories_spec.rb index ba41f9ff8..87d666bf6 100644 --- a/spec/features/stories_spec.rb +++ b/spec/features/stories_spec.rb @@ -34,7 +34,7 @@ # Estimate the story within('#chilly_bin .story') do - click_on '1' + find('#estimate-1').trigger 'click' click_on 'start' end diff --git a/spec/javascripts/views/column_visibility_button_view_spec.js b/spec/javascripts/views/column_visibility_button_view_spec.js index a268c0ada..3e482d02e 100644 --- a/spec/javascripts/views/column_visibility_button_view_spec.js +++ b/spec/javascripts/views/column_visibility_button_view_spec.js @@ -19,7 +19,7 @@ describe("Fulcrum.ColumnVisibilityButtonView", function() { }); it("should set its class from the ColumnView id", function() { - expect(this.view.render().$el.attr('class')).toEqual('hide_' + this.columnView.id); + expect(this.view.render().$el.attr('class')).toEqual('hide_' + this.columnView.id + " btn btn-default"); }); describe('toggle', function() { diff --git a/spec/javascripts/views/story_view_spec.js b/spec/javascripts/views/story_view_spec.js index d1805c3f9..55ec82ed0 100644 --- a/spec/javascripts/views/story_view_spec.js +++ b/spec/javascripts/views/story_view_spec.js @@ -284,7 +284,7 @@ describe('Fulcrum.StoryView', function() { ] ); - var ev = { target: { value : '1' } }; + var ev = { target: { attributes : { 'data-value' : { value : 1 } } } }; this.view.estimate(ev); expect(this.view.saveInProgress).toBeTruthy(); From c7baa1fdfe21d96a942c33a1bca4530d7431dd69 Mon Sep 17 00:00:00 2001 From: alessandro dias Date: Fri, 26 Aug 2016 14:32:14 -0700 Subject: [PATCH 03/26] move icon styles into proper file --- app/assets/stylesheets/icons.scss | 39 ++++++++++++++++++++++++++++++ app/assets/stylesheets/screen.scss | 30 ----------------------- 2 files changed, 39 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 8d1c27a2a..eeb2b7ab5 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -24,3 +24,42 @@ $icon-sprite-dimensions: true; a.expand, a.collapse { cursor: pointer; } +.fa { + &-star { + color: #FFE000; + + &-o { + color: #726904; + } + } + + &-icon-overlay { + position: relative; + + .fa { + position: absolute; + top: 0; + left: 0; + + &:first-child { + position: initial; + } + } + } + + &-comment { + color: white; + + &-o { + color: gray; + } + } + + &-bug { + color: #C20B0B; + } + + &-cog { + color: #5E5C5C; + } +} diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss index 7107a80c8..20e40b65b 100644 --- a/app/assets/stylesheets/screen.scss +++ b/app/assets/stylesheets/screen.scss @@ -695,33 +695,3 @@ 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; -} From 4f3ccf35a44401d3b0b97ee4f3ab2fff5ba377c5 Mon Sep 17 00:00:00 2001 From: alessandro dias Date: Fri, 26 Aug 2016 14:50:50 -0700 Subject: [PATCH 04/26] small refactor in screen.scss --- app/assets/stylesheets/_variables.scss | 13 +++++ app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/scaffold.scss | 53 +++++------------- app/assets/stylesheets/screen.scss | 74 +++++++------------------ 4 files changed, 50 insertions(+), 91 deletions(-) create mode 100644 app/assets/stylesheets/_variables.scss diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss new file mode 100644 index 000000000..685a76054 --- /dev/null +++ b/app/assets/stylesheets/_variables.scss @@ -0,0 +1,13 @@ +$darkgrey: #6a7176; // Header color + +// Tango icon theme pallette +// http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines +$butter-1: #fce94f; +$chameleon-1: #8ae234; +$chameleon-2: #73d216; +$chameleon-3: #4e9a06; +$sky-blue-3: #204a87; +$scarlet-red-2: #cc0000; +$aluminium-3: #babdb6; +$aluminium-4: #888a85; +$aluminium-6: #2e3436; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 16e5788fb..0d804cf3b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -4,5 +4,6 @@ @import 'jquery.atwho'; @import "font-awesome-sprockets"; @import "font-awesome"; +@import "variables"; @import 'screen'; @import 'users' diff --git a/app/assets/stylesheets/scaffold.scss b/app/assets/stylesheets/scaffold.scss index 18f084d10..e6e436843 100644 --- a/app/assets/stylesheets/scaffold.scss +++ b/app/assets/stylesheets/scaffold.scss @@ -1,33 +1,9 @@ -body { background-color: #fff; color: #333; } - body, p, ol, ul, td { font-family: helvetica, verdana, arial, sans-serif; font-size: 11px; line-height: 15px; } -pre { - background-color: #eee; - padding: 10px; - font-size: 11px; -} - -a { color: #000; } - -div.field, div.actions { - margin-bottom: 10px; -} - -#notice { - color: green; -} - -.field_with_errors { - padding: 2px; - background-color: red; - display: table; -} - #error_explanation { width: 450px; border: 2px solid red; @@ -35,20 +11,21 @@ div.field, div.actions { padding-bottom: 0; margin-bottom: 20px; background-color: #f0f0f0; -} -#error_explanation h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - margin-bottom: 0px; - background-color: #c00; - color: #fff; -} + h2 { + text-align: left; + font-weight: bold; + padding: 5px 5px 5px 15px; + font-size: 12px; + margin: -7px; + margin-bottom: 0px; + background-color: #c00; + color: #fff; + } -#error_explanation ul li { - font-size: 12px; - list-style: square; + ul li { + font-size: 12px; + list-style: square; + } } + diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss index 20e40b65b..97385466c 100644 --- a/app/assets/stylesheets/screen.scss +++ b/app/assets/stylesheets/screen.scss @@ -7,39 +7,6 @@ @import 'bootstrap_overrides'; @import 'icons'; -$darkgrey: #6a7176; // Header color -$orange: rgb(250,182,155); // Estimate gauge color - -// Tango icon theme pallette -// http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines -$butter-1: #fce94f; -$butter-2: #edd400; -$butter-3: #c4a000; -$orange-1: #fcaf3e; -$orange-2: #f57900; -$orange-3: #ce5c00; -$chocolate-1: #e9b96e; -$chocolate-2: #c17d11; -$chocolate-3: #8f5902; -$chameleon-1: #8ae234; -$chameleon-2: #73d216; -$chameleon-3: #4e9a06; -$sky-blue-1: #729fcf; -$sky-blue-2: #3465a4; -$sky-blue-3: #204a87; -$plum-1: #ad7fa8; -$plum-2: #75507b; -$plum-3: #5c3566; -$scarlet-red-1: #ef2929; -$scarlet-red-2: #cc0000; -$scarlet-red-3: #a40000; -$aluminium-1: #eeeeec; -$aluminium-2: #d3d7cf; -$aluminium-3: #babdb6; -$aluminium-4: #888a85; -$aluminium-5: #555753; -$aluminium-6: #2e3436; - body { margin: 0; padding: 0; @@ -348,16 +315,17 @@ div.story-title abbr.initials { .estimates { padding-left: 10px; padding-right: 2px; -} -.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; + + .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 { @@ -442,8 +410,6 @@ a.button { text-decoration: none; } - - a.button:hover { @include background(linear-gradient(top, $chameleon-2, $chameleon-3)); color: white; @@ -681,17 +647,19 @@ div#keycut-help { .list-group-item { border-radius: 0; border-width: 1px 0 0 0; - } - > .list-group-item:first-child { - border-top-width: 0; + > &:first-child { + border-top-width: 0; + } } - > .list-group > .list-group-item { - padding-left: 30px; - } + > .list-group { + > .list-group-item { + padding-left: 30px; + } - > .list-group > .list-group > .list-group-item { - padding-left: 45px; + > .list-group > .list-group-item { + padding-left: 45px; + } } } From cd6556dfa24775802b0912e98bd9df319a2fd77f Mon Sep 17 00:00:00 2001 From: alessandro dias Date: Fri, 26 Aug 2016 14:57:22 -0700 Subject: [PATCH 05/26] add autoprefixer --- Gemfile | 1 + Gemfile.lock | 1 + app/assets/stylesheets/screen.scss | 4 ---- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/Gemfile b/Gemfile index 23cb56899..a24153bd4 100644 --- a/Gemfile +++ b/Gemfile @@ -31,6 +31,7 @@ gem 'sass-rails' gem 'uglifier', '>= 2.5.3' gem 'compass-rails' gem 'coffee-rails' +gem "autoprefixer-rails" gem 'bootstrap-sass', '~> 3.3.5' gem 'ejs' diff --git a/Gemfile.lock b/Gemfile.lock index e1a4ce563..3ae1f9f72 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -336,6 +336,7 @@ PLATFORMS DEPENDENCIES attachinary + autoprefixer-rails bootstrap-sass (~> 3.3.5) cancancan (~> 1.10) capybara diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss index 97385466c..96a69d7fe 100644 --- a/app/assets/stylesheets/screen.scss +++ b/app/assets/stylesheets/screen.scss @@ -295,10 +295,6 @@ div.story-title abbr.initials { 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; From 6d7df35991c256f4525d7797ae996a61db7c938a Mon Sep 17 00:00:00 2001 From: alessandro dias Date: Fri, 26 Aug 2016 16:22:31 -0700 Subject: [PATCH 06/26] user pointer cursor in estimatives --- app/assets/stylesheets/screen.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss index 96a69d7fe..b92807f09 100644 --- a/app/assets/stylesheets/screen.scss +++ b/app/assets/stylesheets/screen.scss @@ -307,6 +307,7 @@ div.story-title abbr.initials { color: #3556AA; height: 17px; -webkit-font-smoothing: none; + cursor: pointer; } .estimates { padding-left: 10px; From 9c54ddb3f97f88a29a54cc0bbd77252072fb7715 Mon Sep 17 00:00:00 2001 From: Fabio Akita Date: Sat, 27 Aug 2016 09:51:41 -0300 Subject: [PATCH 07/26] Small CSS Adjustments to save more space between the columns in the project view --- app/assets/javascripts/views/project_view.js | 4 ++-- app/assets/stylesheets/screen.scss | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/views/project_view.js b/app/assets/javascripts/views/project_view.js index f3e42adb6..f10f13e7d 100644 --- a/app/assets/javascripts/views/project_view.js +++ b/app/assets/javascripts/views/project_view.js @@ -105,9 +105,9 @@ Fulcrum.ProjectView = Backbone.View.extend({ }, scaleToViewport: function() { - var storyTableTop = $('table.stories tbody').offset().top + 20; + var storyTableTop = $('table.stories tbody').offset().top; - var extra = 40; + var extra = 20; var height = $(window).height() - (storyTableTop + extra); diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss index b92807f09..c4a315f71 100644 --- a/app/assets/stylesheets/screen.scss +++ b/app/assets/stylesheets/screen.scss @@ -148,7 +148,10 @@ ul#primary-nav li { } #main { - margin: 10px 5px; + margin-top: 2px; + margin-bottom: 2px; + margin-right: 0; + margin-left: 0; position: relative; } @@ -176,7 +179,7 @@ html.stories, html.stories body, html.stories div#main { table.stories { width: 100%; height: 100%; - border-spacing: 5px 0; + border-spacing: 2px 0; border-collapse: separate; table-layout: fixed; } From 000fa9b68224e165ec19b9b23cfed0405ccf1b02 Mon Sep 17 00:00:00 2001 From: Fabio Akita Date: Sat, 27 Aug 2016 09:52:29 -0300 Subject: [PATCH 08/26] Adding a simple collapsible sidebar Copied and adapted from here: https://github.com/BlackrockDigital/startbootstrap-simple-sidebar TODO: instead of the sidebar pushing the content to the right, it should be an overlay on top of the content --- app/assets/javascripts/application.js | 7 ++ app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/simple-sidebar.scss | 114 +++++++++++++++++++++ app/views/layouts/application.html.erb | 68 ++++++------ 4 files changed, 159 insertions(+), 31 deletions(-) create mode 100644 app/assets/stylesheets/simple-sidebar.scss diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 8edd77e18..1176f5a35 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -33,6 +33,13 @@ $(function() { $('.tag-tooltip').tooltip(); + + $("#wrapper").toggleClass("toggled"); // FIXME in CSS find a way to start toggled + $("#menu-toggle").click(function(e) { + e.preventDefault(); + $("#wrapper").toggleClass("toggled"); + }); + executeAttachinary(); }); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0d804cf3b..195a78709 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -5,5 +5,6 @@ @import "font-awesome-sprockets"; @import "font-awesome"; @import "variables"; +@import "simple-sidebar"; @import 'screen'; @import 'users' diff --git a/app/assets/stylesheets/simple-sidebar.scss b/app/assets/stylesheets/simple-sidebar.scss new file mode 100644 index 000000000..90d59d5f5 --- /dev/null +++ b/app/assets/stylesheets/simple-sidebar.scss @@ -0,0 +1,114 @@ +/*! + * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/) + * Copyright 2013-2016 Start Bootstrap + * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) + */ +/* Toggle Styles */ +/* Sidebar Styles */ + +$sidebar-size: 150px; + +body { + overflow-x: hidden; +} +#wrapper { + padding-left: 0; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} +#wrapper.toggled { + padding-left: $sidebar-size; + #sidebar-wrapper { + width: $sidebar-size; + } + #page-content-wrapper { + position: absolute; + margin-right: -$sidebar-size; + } +} +#sidebar-wrapper { + z-index: 1000; + position: fixed; + left: $sidebar-size; + width: 0; + height: 100%; + margin-left: -$sidebar-size; + overflow-y: auto; + background: #000; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} +#page-content-wrapper { + width: 100%; + position: absolute; + padding: 15px +} +.sidebar-nav { + position: absolute; + top: 0; + width: $sidebar-size; + margin: 0; + padding: 0; + list-style: none; + li { + text-indent: 20px; + line-height: 40px; + a { + display: block; + text-decoration: none; + color: #999999; + &:hover { + text-decoration: none; + color: #fff; + background: rgba(255,255,255,0.2); + } + &:active { + text-decoration: none; + } + &:focus { + text-decoration: none; + } + } + } + >.sidebar-brand { + height: 65px; + font-size: 18px; + line-height: 60px; + a { + color: #999999; + &:hover { + color: #fff; + background: none; + } + } + } +} +@media(min-width:768px) { + #wrapper { + padding-left: $sidebar-size; + } + #wrapper.toggled { + padding-left: 0; + #sidebar-wrapper { + width: 0; + } + #page-content-wrapper { + position: relative; + margin-right: 0; + } + } + #sidebar-wrapper { + width: $sidebar-size; + } + #page-content-wrapper { + padding-top: 15px; + padding-left: 0; + padding-right: 0; + position: relative; + } +} + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 5f414f1b9..139fed5ff 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -13,22 +13,17 @@ -
    + + + <%= yield :title_bar %> +
    + +
    + <%= render 'shared/flash' %> + + <%= yield %> +
    + +
    - <%= yield %>
    From 21e3a5af5b50823baa3a9d8fc0e514c01af63447 Mon Sep 17 00:00:00 2001 From: Fabio Akita Date: Sat, 27 Aug 2016 18:06:27 -0300 Subject: [PATCH 09/26] =?UTF-8?q?Repurposing=20the=20simple=20sidebar=20to?= =?UTF-8?q?=20not=20be=20the=20kind=20that=20is=20hidden=20in=20the=20left?= =?UTF-8?q?=20and=20transitions=20by=20resizing=20the=20content=20containe?= =?UTF-8?q?r.=20Instead=20the=20sidebar=20is=20a=20fixed=20layer=20on=20to?= =?UTF-8?q?p=20of=20the=20content=20but=20hidden=20and=20the=20toggle=20ma?= =?UTF-8?q?kes=20it=20visible.=20Moving=20most=20of=20the=20main=20menu=20?= =?UTF-8?q?and=20also=20the=20project=20view=E2=80=99s=20column=20toggle?= =?UTF-8?q?=20buttons=20as=20links=20in=20the=20same=20sidebar.=20And=20ma?= =?UTF-8?q?king=20the=20mobile=20view=20show=20just=20the=20in=5Fprogress?= =?UTF-8?q?=20column=20and=20making=20a=20few=20adjustments=20so=20it=20ju?= =?UTF-8?q?st=20renders=20barely=20correct.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/javascripts/application.js | 6 +- app/assets/javascripts/project.boot.js | 8 +-- .../views/column_visibility_button_view.js | 2 +- app/assets/javascripts/views/keycut_view.js | 8 +-- app/assets/javascripts/views/project_view.js | 16 ++++++ app/assets/stylesheets/application.scss | 4 +- .../stylesheets/bootstrap_overrides.scss | 5 -- app/assets/stylesheets/screen.scss | 10 ---- app/assets/stylesheets/simple-sidebar.scss | 57 +++---------------- app/views/layouts/application.html.erb | 41 ++----------- app/views/projects/_nav.html.erb | 35 +++++++++--- app/views/projects/archived.html.erb | 2 + app/views/projects/edit.html.erb | 4 +- app/views/projects/import.html.erb | 4 +- app/views/projects/index.html.erb | 2 + app/views/projects/new.html.erb | 2 + app/views/projects/reports.html.erb | 4 +- app/views/projects/show.html.erb | 20 ++++--- app/views/shared/_sidebar.html.erb | 41 +++++++++++++ app/views/users/index.html.erb | 4 +- spec/features/keycut_spec.rb | 2 + spec/features/logins_spec.rb | 7 ++- spec/features/notes_spec.rb | 3 + spec/features/stories_spec.rb | 4 ++ .../column_visibility_button_view_spec.js | 8 +-- 25 files changed, 156 insertions(+), 143 deletions(-) create mode 100644 app/views/shared/_sidebar.html.erb diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 1176f5a35..6c1d63928 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -34,10 +34,9 @@ $(function() { $('.tag-tooltip').tooltip(); - $("#wrapper").toggleClass("toggled"); // FIXME in CSS find a way to start toggled - $("#menu-toggle").click(function(e) { + $(".menu-toggle").click(function(e) { e.preventDefault(); - $("#wrapper").toggleClass("toggled"); + $("#sidebar-wrapper").toggle(); }); executeAttachinary(); @@ -46,3 +45,4 @@ $(function() { function executeAttachinary() { $('.attachinary-input').attachinary({ template: $('#attachinary_template').html() }); } + diff --git a/app/assets/javascripts/project.boot.js b/app/assets/javascripts/project.boot.js index 715860f29..ea0f9cb56 100644 --- a/app/assets/javascripts/project.boot.js +++ b/app/assets/javascripts/project.boot.js @@ -9,9 +9,9 @@ $(function() { }).render(); if (data.hideable !== false) { - new Fulcrum.ColumnVisibilityButtonView({ columnView: column }) - .render().$el - .appendTo('#column-toggles'); + $("
  • "). + append(new Fulcrum.ColumnVisibilityButtonView({ columnView: column }).render().$el). + appendTo('#column-toggles'); } if (data.connect) { @@ -38,7 +38,7 @@ $(function() { view.scaleToViewport(); $(window).resize(view.scaleToViewport); - setInterval(function() { project.fetch(); }, 10 * 1000); + setInterval(function() { project.fetch(); }, 30 * 1000); // every 30 seconds window.md = new Markdown.Converter(); window.projectView = view; diff --git a/app/assets/javascripts/views/column_visibility_button_view.js b/app/assets/javascripts/views/column_visibility_button_view.js index 733681f03..eb914cc25 100644 --- 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 + " btn btn-default"); + this.$el.attr('class','hide_'+this.options.columnView.id ); this.options.columnView.on('visibilityChanged', this.setClassName); }, diff --git a/app/assets/javascripts/views/keycut_view.js b/app/assets/javascripts/views/keycut_view.js index ec8fd1a60..71d6faf83 100644 --- a/app/assets/javascripts/views/keycut_view.js +++ b/app/assets/javascripts/views/keycut_view.js @@ -6,19 +6,19 @@ Fulcrum.KeycutView = Backbone.View.extend({ template: JST['templates/keycut_view'], tagName: 'div', id: 'keycut-help', - + events: { 'click a.close' : 'closeWindow' }, - + render: function() { $('#main').append($(this.el).html(this.template)); return this; }, - + closeWindow : function(){ $('#'+this.id).fadeOut( function() {$('#'+this.id).remove();} ); } -}); \ No newline at end of file +}); diff --git a/app/assets/javascripts/views/project_view.js b/app/assets/javascripts/views/project_view.js index f10f13e7d..e0def5df6 100644 --- a/app/assets/javascripts/views/project_view.js +++ b/app/assets/javascripts/views/project_view.js @@ -112,6 +112,22 @@ Fulcrum.ProjectView = Backbone.View.extend({ var height = $(window).height() - (storyTableTop + extra); $('.storycolumn').css('height', height + 'px'); + + if ($(window).width() > 992) { + // desktop + $('.done_column').show(); + $('.backlog_column').show(); + $('.chilly_bin_column').show(); + $('.hide_search_results').show(); + $('#form_search').show(); + } else { + // mobile + $('.done_column').hide(); + $('.backlog_column').hide(); + $('.chilly_bin_column').hide(); + $('.hide_search_results').hide(); + $('#form_search').hide(); + } }, notice: function(message) { diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 195a78709..477fb40f9 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -5,6 +5,6 @@ @import "font-awesome-sprockets"; @import "font-awesome"; @import "variables"; -@import "simple-sidebar"; @import 'screen'; -@import 'users' +@import 'users'; +@import "simple-sidebar"; diff --git a/app/assets/stylesheets/bootstrap_overrides.scss b/app/assets/stylesheets/bootstrap_overrides.scss index ee8eae8bd..d756b82e4 100644 --- a/app/assets/stylesheets/bootstrap_overrides.scss +++ b/app/assets/stylesheets/bootstrap_overrides.scss @@ -18,8 +18,3 @@ margin-right: 0px; } } -@media (min-width: 992px) { - .col-md-4 > .panel > .panel-body { - min-height: 90px; - } -} diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss index c4a315f71..d414a4a0f 100644 --- a/app/assets/stylesheets/screen.scss +++ b/app/assets/stylesheets/screen.scss @@ -160,18 +160,8 @@ html.stories, html.stories body, html.stories div#main { } #column-toggles { - float: right; - a { - @extend .btn; - @extend .btn-xs; - @extend .btn-primary; - - margin: 0 0.2em; - } a.pressed { - @extend .btn-default; color: #636363; - background-color: #E2E2E2; } } diff --git a/app/assets/stylesheets/simple-sidebar.scss b/app/assets/stylesheets/simple-sidebar.scss index 90d59d5f5..b1a050ed5 100644 --- a/app/assets/stylesheets/simple-sidebar.scss +++ b/app/assets/stylesheets/simple-sidebar.scss @@ -6,46 +6,29 @@ /* Toggle Styles */ /* Sidebar Styles */ -$sidebar-size: 150px; +$sidebar-size: 200px; body { overflow-x: hidden; } +.menu-toggle { + margin-right: 15px; +} + #wrapper { padding-left: 0; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; -} -#wrapper.toggled { - padding-left: $sidebar-size; - #sidebar-wrapper { - width: $sidebar-size; - } - #page-content-wrapper { - position: absolute; - margin-right: -$sidebar-size; - } } #sidebar-wrapper { - z-index: 1000; + z-index: 2000; position: fixed; - left: $sidebar-size; - width: 0; + width: $sidebar-size; height: 100%; - margin-left: -$sidebar-size; - overflow-y: auto; background: #000; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; } #page-content-wrapper { width: 100%; position: absolute; - padding: 15px + padding-top: 20px; } .sidebar-nav { position: absolute; @@ -87,28 +70,4 @@ body { } } } -@media(min-width:768px) { - #wrapper { - padding-left: $sidebar-size; - } - #wrapper.toggled { - padding-left: 0; - #sidebar-wrapper { - width: 0; - } - #page-content-wrapper { - position: relative; - margin-right: 0; - } - } - #sidebar-wrapper { - width: $sidebar-size; - } - #page-content-wrapper { - padding-top: 15px; - padding-left: 0; - padding-right: 0; - position: relative; - } -} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 139fed5ff..58647ffae 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,53 +10,20 @@ I18n.defaultLocale = "<%= I18n.default_locale %>"; I18n.locale = "<%= I18n.locale %>"; <%- end -%> +
    -