make the commit page display properly on mobile

app/assets/stylesheets/pages/commit.scss

@@ -4,24 +4,54 @@
 .commit-row {
   display: inline-block;
-  width: 70%;
+  width: 64%;
+
+  @media (max-width: $screen-md-min) {
+    width: inherit;
+  }
 }
-.commit-header {
-  background-color: $background-color;
-  .light {
-    margin-left: 10px;
+.content-list {
+  .commit-header {
+    background-color: $background-color;
+    padding: 4px 0;
+    .light {
+      margin-left: 10px;
+      color: $btn-white-active;
+    }
   }
-}
-.pull-right {
-  .commit_short_id, .ci-status-link, {
-    padding: 0 5px;
+  .commit {
+    .avatar {
+      margin-right: 10px;
+    }
   }
-  .browse-code {
-    margin: 0 5px;
+  .pull-info-right {
+    float: right;
+
+    .commit_short_id, .ci-status-link, {
+      padding: 0 5px;
+    }
+
+    .commit_short_id {
+      display: inline-block;
+      width: 73px;
+      font-weight: 600;
+    }
+
+    .btn-clipboard, .browse-code {
+      color: $btn-white-active;
+    }
+
+    .browse-code {
+      margin: 0 5px;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      float: none;
+    }
   }
 }

app/assets/stylesheets/pages/commits.scss

@@ -82,6 +82,10 @@ li.commit {
   .item-title {
     display: inline-block;
     max-width: 70%;
+
+    .text-expander {
+      color: $btn-white-active;
+    }
   }
   .commit-row-description {
@@ -97,6 +101,10 @@ li.commit {
       background: inherit;
       padding: 0;
       margin: 0;
+
+      @media (max-width: $screen-xs-max) {
+        width: 100%;
+      }
     }
     a {
@@ -105,11 +113,11 @@ li.commit {
   }
   .commit-row-info {
-    color: $gl-gray;
+    color: $btn-white-active;
     line-height: 24px;
     a {
-      color: $gl-gray;
+      color: $btn-white-active;
     }
     .avatar {

app/helpers/commits_helper.rb

@@ -209,7 +209,7 @@ module CommitsHelper
     source_email = clean(commit.send "author_email".to_sym)
     person_email = user.try(:email) || source_email
-    image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "")
+    image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]} hidden-xs" if options[:size]}", width: options[:size], alt: "")
   end
   def view_file_btn(commit_sha, diff, project)

app/views/projects/commits/_commit.html.haml

@@ -9,7 +9,7 @@
 = cache(cache_key) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
-    = commit_author_avatar(commit, size: 30)
+    = commit_author_avatar(commit, size: 32)
     .commit-row
       %span.commit-row-title
         %span.item-title
@@ -23,7 +23,7 @@
         .committed_ago
           #{time_ago_with_tooltip(commit.committed_date)}  
-    .pull-right
+    .pull-info-right
       - if commit.status
         = render_ci_status(commit)
       = clipboard_button(clipboard_text: commit.id)

app/views/projects/commits/_commits.html.haml

@@ -11,7 +11,7 @@
           .light
             %span
               = day.strftime('%d %b, %Y')
-              .
+            •
             = pluralize(commits.count, 'commit')
         = render commits, project: project
   %hr.lists-separator