Update commit page styles

2 files changed, 44 insertions, 59 deletions

diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 04d2d2ba622..47d3e72679b 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -36,13 +36,17 @@
     padding: 10px 0;
     margin-bottom: 0;
 
-    .commitable-meta {
-      display: inline-block;
-      line-height: 18px;
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      align-items: center;
+
+      .commit-meta {
+        flex: 1;
+      }
     }
 
     .commit-hash-full {
-      @media (max-width: $screen-md-min) {
+      @media (max-width: $screen-sm-max) {
         width: 80px;
         white-space: nowrap;
         overflow: hidden;
@@ -52,31 +56,24 @@
       }
     }
 
-    .commitable-actions {
-      @media (min-width: $screen-sm) {
-        float: right;
-        padding-top: 0;
+    .commit-action-buttons {
+      i {
+        color: $gl-icon-color;
+        font-size: 13px;
+        margin-right: 3px;
       }
 
-      .dropdown {
-        @media (max-width: $screen-sm) {
+      @media (max-width: $screen-xs-max) {
+        .dropdown {
           width: 100%;
           margin-top: 10px;
         }
-      }
 
-      .dropdown-toggle {
-        @media (max-width: $screen-sm) {
+        .dropdown-toggle {
           width: 100%;
         }
       }
     }
-
-    .commit-options-dropdown-caret {
-      @media (max-width: $screen-sm) {
-        margin-left: 0;
-      }
-    }
   }
 
   .avatar {
@@ -224,17 +221,6 @@
   }
 }
 
-.commit-action-buttons {
-  position: relative;
-  top: -1px;
-
-  i {
-    color: $gl-icon-color;
-    font-size: 13px;
-    margin-right: 3px;
-  }
-}
-
 /*
  * Commit message textarea for web editor and
  * custom merge request message
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index cca3a962816..0ebc38d16cf 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,5 +1,5 @@
 .commit-info-row.commit-info-row-header
-  .commitable-meta
+  .commit-meta
     %strong Commit
     %strong.monospace.js-details-short= @commit.short_id
     = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
@@ -19,35 +19,34 @@
       %strong
         = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
-  .commitable-actions
-    .commit-action-buttons
-      - if defined?(@notes_count) && @notes_count > 0
-        %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
-          = icon('comment')
-          = @notes_count
-      = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-default append-right-10 hidden-xs hidden-sm" do
-        Browse Files
-      .dropdown.inline
-        %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
-          %span Options
-          = icon('caret-down', class: ".commit-options-dropdown-caret")
-        %ul.dropdown-menu.dropdown-menu-align-right
-          %li.visible-xs-block.visible-sm-block
-            = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do
-              Browse Files
-          - unless @commit.has_been_reverted?(current_user)
-            %li.clearfix
-              = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
+  .commit-action-buttons
+    - if defined?(@notes_count) && @notes_count > 0
+      %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
+        = icon('comment')
+        = @notes_count
+    = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-default append-right-10 hidden-xs hidden-sm" do
+      Browse Files
+    .dropdown.inline
+      %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
+        %span Options
+        = icon('caret-down')
+      %ul.dropdown-menu.dropdown-menu-align-right
+        %li.visible-xs-block.visible-sm-block
+          = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do
+            Browse Files
+        - unless @commit.has_been_reverted?(current_user)
           %li.clearfix
-            = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
-          %li.clearfix
-            = link_to "Tag", new_namespace_project_tag_path(@project.namespace, @project, ref: @commit)
-          %li.divider
-          %li.dropdown-header
-            Download
-          - unless @commit.parents.length > 1
-            %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
-          %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
+            = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
+        %li.clearfix
+          = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
+        %li.clearfix
+          = link_to "Tag", new_namespace_project_tag_path(@project.namespace, @project, ref: @commit)
+        %li.divider
+        %li.dropdown-header
+          Download
+        - unless @commit.parents.length > 1
+          %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
+        %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
 
 .commit-box
   %h3.commit-title