From 29955caeeb90b0805cf639337e29fbf50cbd4afe Mon Sep 17 00:00:00 2001 From: Himanshu Kapoor Date: Fri, 23 Aug 2019 10:21:05 +0000 Subject: [PATCH] Fix broken git clone box on wiki git access page Some CSS fixes to fix the position of the git clone box on the wiki git access page. This fix also includes fixes for various responsive states. --- .../stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/wiki.scss | 29 ++++--------------- app/views/projects/wikis/_sidebar.html.haml | 6 ++-- app/views/projects/wikis/edit.html.haml | 4 +-- app/views/projects/wikis/git_access.html.haml | 12 ++++---- app/views/projects/wikis/history.html.haml | 2 +- app/views/projects/wikis/pages.html.haml | 4 +-- app/views/projects/wikis/show.html.haml | 4 +-- ...-box-on-wiki-git-access-page-is-broken.yml | 5 ++++ 9 files changed, 29 insertions(+), 38 deletions(-) create mode 100644 changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 92190f8979e..9871771542d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -469,6 +469,7 @@ $link-active-background: rgba(0, 0, 0, 0.04); $link-hover-background: rgba(0, 0, 0, 0.06); $inactive-badge-background: rgba(0, 0, 0, 0.08); $sidebar-toggle-height: 60px; +$sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; /* diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index 379df1c4db1..0b65b915abf 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -32,13 +32,11 @@ color: $gl-text-color-secondary; } - .git-access-header { - padding: $gl-padding 0 $gl-padding-top; - } - .git-clone-holder { - width: 100%; - padding-bottom: 40px; + .input-group-prepend, + .input-group-append { + background-color: transparent; + } } button.sidebar-toggle { @@ -48,19 +46,8 @@ display: block; } - @include media-breakpoint-up(sm) { - &.has-sidebar-toggle { - padding-right: 40px; - } - - .git-clone-holder { - width: 480px; - padding-bottom: $gl-padding; - } - - .nav-controls { - width: auto; - } + &.has-sidebar-toggle .git-access-header { + padding-right: $sidebar-toggle-width; } @include media-breakpoint-up(md) { @@ -105,10 +92,6 @@ padding: 0 $gl-padding; } - .block { - width: 100%; - } - a { color: $layout-link-gray; diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml index a9d21470944..83d145444d8 100644 --- a/app/views/projects/wikis/_sidebar.html.haml +++ b/app/views/projects/wikis/_sidebar.html.haml @@ -1,6 +1,6 @@ %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } } .sidebar-container - .block.wiki-sidebar-header.append-bottom-default + .block.wiki-sidebar-header.append-bottom-default.w-100 %a.gutter-toggle.float-right.d-block.d-sm-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" } = icon('angle-double-right') @@ -10,12 +10,12 @@ %span= _("Clone repository") .blocks-container - .block.block-first + .block.block-first.w-100 - if @sidebar_page = render_wiki_content(@sidebar_page) - else %ul.wiki-pages = render @sidebar_wiki_entries, context: 'sidebar' - .block + .block.w-100 = link_to project_wikis_pages_path(@project), class: 'btn btn-block' do = s_("Wiki|More Pages") diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml index 815b4a51261..9ccf5acfefc 100644 --- a/app/views/projects/wikis/edit.html.haml +++ b/app/views/projects/wikis/edit.html.haml @@ -5,7 +5,7 @@ = wiki_page_errors(@error) -.wiki-page-header.top-area.has-sidebar-toggle +.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') @@ -19,7 +19,7 @@ - else = s_("Wiki|Create New Page") - .nav-controls + .nav-controls.pb-md-3.pb-lg-0 - if @page.persisted? = link_to project_wiki_history_path(@project, @page), class: "btn" do = s_("Wiki|Page history") diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml index 009133be117..6972eda9bb7 100644 --- a/app/views/projects/wikis/git_access.html.haml +++ b/app/views/projects/wikis/git_access.html.haml @@ -1,15 +1,17 @@ - @content_class = "limit-container-width" unless fluid_layout - page_title s_("WikiClone|Git Access"), _("Wiki") -.wiki-page-header.top-area.has-sidebar-toggle +.wiki-page-header.top-area.has-sidebar-toggle.py-3.flex-column.flex-lg-row %button.btn.btn-default.d-block.d-sm-block.d-md-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') - .git-access-header - = _("Clone repository") - %strong= @project_wiki.full_path + .git-access-header.w-100.d-flex.flex-column.justify-content-center + %span + = _("Clone repository") + %strong= @project_wiki.full_path - = render "shared/clone_panel", project: @project_wiki + .pt-3.pt-lg-0.w-100 + = render "shared/clone_panel", project: @project_wiki .wiki-git-access %h3= s_("WikiClone|Install Gollum") diff --git a/app/views/projects/wikis/history.html.haml b/app/views/projects/wikis/history.html.haml index f8468ef9a78..d3a55c53649 100644 --- a/app/views/projects/wikis/history.html.haml +++ b/app/views/projects/wikis/history.html.haml @@ -1,6 +1,6 @@ - page_title _("History"), @page.human_title, _("Wiki") -.wiki-page-header.top-area.has-sidebar-toggle +.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml index f7999c3f1bd..275dc5dbd23 100644 --- a/app/views/projects/wikis/pages.html.haml +++ b/app/views/projects/wikis/pages.html.haml @@ -5,13 +5,13 @@ - sort_title = wiki_sort_title(params[:sort]) %div{ class: container_class } - .wiki-page-header.top-area + .wiki-page-header.top-area.flex-column.flex-lg-row .nav-text.flex-fill %h2.wiki-page-title = s_("Wiki|Wiki Pages") - .nav-controls + .nav-controls.pb-md-3.pb-lg-0 = link_to project_wikis_git_access_path(@project), class: 'btn' do = icon('cloud-download') = _("Clone repository") diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml index 1d649886331..c6197fe576e 100644 --- a/app/views/projects/wikis/show.html.haml +++ b/app/views/projects/wikis/show.html.haml @@ -4,7 +4,7 @@ - page_title @page.human_title, _("Wiki") - add_to_breadcrumbs _("Wiki"), project_wiki_path(@project, :home) -.wiki-page-header.top-area.has-sidebar-toggle +.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') @@ -15,7 +15,7 @@ = (_("Last edited by %{name}") % { name: "#{@page.last_version.author_name}" }).html_safe #{time_ago_with_tooltip(@page.last_version.authored_date)} - .nav-controls + .nav-controls.pb-md-3.pb-lg-0 = render 'main_links' - if @page.historical? diff --git a/changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml b/changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml new file mode 100644 index 00000000000..931e947f8ed --- /dev/null +++ b/changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml @@ -0,0 +1,5 @@ +--- +title: Fix broken git clone box on wiki git access page +merge_request: 31898 +author: +type: fixed