From 5bfce8e99e7197c57ae91feefa78c13a7a50f476 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Thu, 15 Dec 2016 23:14:04 +0600 Subject: fixes mobile views --- app/assets/stylesheets/pages/projects.scss | 31 ++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index b99be02ab0c..4a1bc560292 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -26,7 +26,7 @@ margin-bottom: 5px; } - &> .form-group { + & > .form-group { padding-left: 0; } } @@ -73,7 +73,7 @@ border: 1px solid $border-color; } - &+ .select2 a { + & + .select2 a { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -618,7 +618,6 @@ pre.light-well { margin: 0; } - .activity-filter-block { .controls { padding-bottom: 7px; @@ -811,7 +810,31 @@ pre.light-well { .compare-form-group { .dropdown-menu { - width: 300px; + width: 100%; + + @media (min-width: $screen-sm-min) { + width: 300px; + } + } + + + .compare-ellipsis { + width: 100%; + vertical-align: middle; + text-align: center; + margin-top: -20px; + + @media (min-width: $screen-sm-min) { + margin-top: 0; + width: auto; + } + } + + .inline-input-group { + width: 100%; + + @media (min-width: $screen-sm-min) { + width: 250px; + } } } -- cgit v1.2.1 From 19967472b1191ea425be3217c26946ab3eb76fb6 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Thu, 22 Dec 2016 18:41:54 +0600 Subject: trucates text to prevent overflow and adds tooltip to it --- app/assets/javascripts/compare_autocomplete.js.es6 | 8 ++++++++ app/views/projects/compare/_form.html.haml | 8 ++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6 index 45c974b2b68..21c7cb4e1fd 100644 --- a/app/assets/javascripts/compare_autocomplete.js.es6 +++ b/app/assets/javascripts/compare_autocomplete.js.es6 @@ -55,6 +55,14 @@ $('.dropdown-toggle-text', $dropdown).text(text); $dropdownContainer.removeClass('open'); }); + + $dropdownContainer.on('click' , '.dropdown-content a', (e) => { + $dropdown.prop('title', e.target.text.replace(/_+?/g,'-')); + if ($dropdown.hasClass('has-tooltip')) { + $dropdown.tooltip('fixTitle'); + } + + }) }); }; diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml index 7bde20c3286..9e1a532d0ba 100644 --- a/app/views/projects/compare/_form.html.haml +++ b/app/views/projects/compare/_form.html.haml @@ -7,16 +7,16 @@ .input-group.inline-input-group %span.input-group-addon from = hidden_field_tag :from, params[:from] - = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do - .dropdown-toggle-text= params[:from] || 'Select branch/tag' + = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do + .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag' = render "ref_dropdown" .compare-ellipsis.inline ... .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown .input-group.inline-input-group %span.input-group-addon to = hidden_field_tag :to, params[:to] - = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do - .dropdown-toggle-text= params[:to] || 'Select branch/tag' + = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do + .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag' = render "ref_dropdown"   = button_tag "Compare", class: "btn btn-create commits-compare-btn" -- cgit v1.2.1 From 8f962f02c465965f5a2c15b93070e8e93e6560f7 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Thu, 22 Dec 2016 19:05:01 +0600 Subject: changelog entry added --- changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml diff --git a/changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml b/changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml new file mode 100644 index 00000000000..18d3ac050ae --- /dev/null +++ b/changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml @@ -0,0 +1,4 @@ +--- +title: Resolves overflow in compare branch and tags dropdown +merge_request: 8118 +author: -- cgit v1.2.1 From ece31cc72b8da010859554f5c6b722dd90c67372 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Fri, 23 Dec 2016 19:58:19 +0600 Subject: fixes js lint warnings --- app/assets/javascripts/compare_autocomplete.js.es6 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6 index 21c7cb4e1fd..251f2ded347 100644 --- a/app/assets/javascripts/compare_autocomplete.js.es6 +++ b/app/assets/javascripts/compare_autocomplete.js.es6 @@ -56,13 +56,12 @@ $dropdownContainer.removeClass('open'); }); - $dropdownContainer.on('click' , '.dropdown-content a', (e) => { - $dropdown.prop('title', e.target.text.replace(/_+?/g,'-')); + $dropdownContainer.on('click', '.dropdown-content a', (e) => { + $dropdown.prop('title', e.target.text.replace(/_+?/g, '-')); if ($dropdown.hasClass('has-tooltip')) { $dropdown.tooltip('fixTitle'); } - - }) + }); }); }; -- cgit v1.2.1