Merge branch '1659-long-tag-title' into 'master'

Truncate the tag description and improve mobile layout for individual tag

Closes #1659

See merge request !8220

app/assets/stylesheets/framework/common.scss

@@ -57,6 +57,11 @@ pre {
     border-radius: 0;
     color: $well-pre-color;
   }
+
+  &.wrap {
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
 }
 
 hr {
@@ -67,6 +72,17 @@ hr {
   @include str-truncated;
 }
 
+.block-truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  > div,
+  .str-truncated {
+    display: inline;
+  }
+}
+
 .item-title { font-weight: 600; }
 
 /** FLASH message **/

app/assets/stylesheets/framework/lists.scss

@@ -208,6 +208,11 @@ ul.content-list {
     padding-right: 8px;
   }
 
+  .row-fixed-content {
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+
   .row-title {
     font-weight: 600;
   }

app/assets/stylesheets/framework/nav.scss

@@ -165,6 +165,8 @@
     padding: 11px 0;
     margin-bottom: 0;
 
+    > .btn,
+    > .btn-container,
     > .dropdown {
       margin-right: $gl-padding-top;
       display: inline-block;
@@ -172,16 +174,7 @@
 
       &:last-child {
         margin-right: 0;
-      }
-    }
-
-    > .btn {
-      margin-right: $gl-padding-top;
-      display: inline-block;
-      vertical-align: top;
-
-      &:last-child {
-        margin-right: 0;
+        float: right;
       }
     }
 
@@ -427,4 +420,36 @@
       border-bottom: none;
     }
   }
-}
+}
\ No newline at end of file
+
+@media (max-width: $screen-xs-max) {
+  .top-area .nav-controls {
+    $controls-margin: $btn-xs-side-margin - 2px;
+
+    &.controls-flex {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: center;
+      padding: 0 0 $gl-padding-top;
+    }
+
+    .controls-item,
+    .controls-item:last-child {
+      flex: 1 1 35%;
+      display: block;
+      width: 100%;
+      margin: $controls-margin;
+
+      .btn,
+      .dropdown {
+        margin: 0;
+      }
+    }
+
+    .controls-item-full {
+      @extend .controls-item;
+      flex: 1 1 100%;
+    }
+  }
+}

app/views/projects/tags/_tag.html.haml

 - commit = @repository.commit(tag.dereferenced_target)
 - release = @releases.find { |release| release.tag == tag.name }
-%li
-  %div
+%li.flex-row
+  .row-main-content.str-truncated
     = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
       %span.item-title
         = icon('tag')
@@ -10,24 +10,25 @@
        
       = strip_gpg_signature(tag.message)
 
-    .controls
-      = render 'projects/buttons/download', project: @project, ref: tag.name
+    - if commit
+      .block-truncated
+        = render 'projects/branches/commit', commit: commit, project: @project
+    - else
+      %p
+        Cant find HEAD commit for this tag
+    - if release && release.description.present?
+      .description.prepend-top-default
+        .wiki
+          = preserve do
+            = markdown_field(release, :description)
 
-      - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes", data: { container: "body" } do
-          = icon("pencil")
+  .row-fixed-content.controls
+    = render 'projects/buttons/download', project: @project, ref: tag.name
 
-      - if can?(current_user, :admin_project, @project)
-        = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
-          = icon("trash-o")
+    - if can?(current_user, :push_code, @project)
+      = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes", data: { container: "body" } do
+        = icon("pencil")
 
-  - if commit
-    = render 'projects/branches/commit', commit: commit, project: @project
-  - else
-    %p
-      Cant find HEAD commit for this tag
-  - if release && release.description.present?
-    .description.prepend-top-default
-      .wiki
-        = preserve do
-          = markdown_field(release, :description)
+    - if can?(current_user, :admin_project, @project)
+      = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
+        = icon("trash-o")

app/views/projects/tags/index.html.haml

@@ -11,8 +11,8 @@
       = form_tag(filter_tags_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: 'Filter by tag name', id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
-      .dropdown.inline
-        %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
+      .dropdown
+        %button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
             = projects_sort_options_hash[@sort]
           = icon('chevron-down')
@@ -30,7 +30,7 @@
 
   .tags
     - if @tags.any?
-      %ul.content-list
+      %ul.flex-list.content-list
         = render partial: 'tag', collection: @tags
 
       = paginate @tags, theme: 'gitlab'

app/views/projects/tags/show.html.haml

@@ -12,21 +12,23 @@
       - else
         Cant find HEAD commit for this tag
 
-    .nav-controls
+    .nav-controls.controls-flex
       - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Edit release notes' do
+        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Edit release notes' do
           = icon("pencil")
-      = link_to namespace_project_tree_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Browse files' do
+      = link_to namespace_project_tree_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Browse files' do
         = icon('files-o')
-      = link_to namespace_project_commits_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Browse commits' do
+      = link_to namespace_project_commits_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Browse commits' do
         = icon('history')
-      = render 'projects/buttons/download', project: @project, ref: @tag.name
+      .btn-container.controls-item
+        = render 'projects/buttons/download', project: @project, ref: @tag.name
       - if can?(current_user, :admin_project, @project)
-        .pull-right
+        .btn-container.controls-item-full
           = link_to namespace_project_tag_path(@project.namespace, @project, @tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{@tag.name}' tag cannot be undone. Are you sure?" } do
             %i.fa.fa-trash-o
+            
     - if @tag.message.present?
-      %pre.body
+      %pre.wrap
         = strip_gpg_signature(@tag.message)
 
   .append-bottom-default.prepend-top-default

spec/features/tags/master_creates_tag_spec.rb

@@ -34,7 +34,7 @@ feature 'Master creates tag', feature: true do
     expect(current_path).to eq(
       namespace_project_tag_path(project.namespace, project, 'v3.0'))
     expect(page).to have_content 'v3.0'
-    page.within 'pre.body' do
+    page.within 'pre.wrap' do
       expect(page).to have_content "Awesome tag message\n\n- hello\n- world"
     end
   end