Merge branch 'wiki-limited-width' into 'master'

Limit wiki container width

Closes #23734

See merge request !12089

app/assets/stylesheets/framework/forms.scss

@@ -148,7 +148,8 @@ label {
   margin-top: 35px;
 }
 
-.form-group .control-label {
+.form-group .control-label,
+.form-group .control-label-full-width {
   font-weight: normal;
 }
 

app/assets/stylesheets/framework/layout.scss

@@ -51,6 +51,10 @@ body {
   &.limit-container-width {
     max-width: $limited-layout-width;
   }
+
+  &.limit-container-width-sm {
+    max-width: 790px;
+  }
 }
 
 .alert-wrapper {

app/assets/stylesheets/pages/wiki.scss

@@ -42,9 +42,7 @@
   }
 
   .git-access-header {
-    padding: 16px 40px 11px 0;
-    line-height: 28px;
-    font-size: 18px;
+    padding: $gl-padding 0 $gl-padding-top;
   }
 
   .git-clone-holder {
@@ -66,6 +64,7 @@
 
     .git-clone-holder {
       width: 480px;
+      padding-bottom: $gl-padding;
     }
 
     .nav-controls {
@@ -89,9 +88,9 @@
   margin: $gl-padding 0;
 
   h3 {
-    font-size: 22px;
+    font-size: 19px;
     font-weight: normal;
-    margin-top: 1.4em;
+    margin: $gl-padding 0;
   }
 }
 

app/views/projects/wikis/_form.html.haml

@@ -5,13 +5,13 @@
 
   = f.hidden_field :title, value: @page.title
   .form-group
-    = f.label :format, class: 'control-label'
-    .col-sm-10
+    .col-sm-12= f.label :format, class: 'control-label-full-width'
+    .col-sm-12
       = f.select :format, options_for_select(ProjectWiki::MARKUPS, {selected: @page.format}), {}, class: "form-control"
 
   .form-group
-    = f.label :content, class: 'control-label'
-    .col-sm-10
+    .col-sm-12= f.label :content, class: 'control-label-full-width'
+    .col-sm-12
       = render layout: 'projects/md_preview', locals: { url: namespace_project_wiki_preview_markdown_path(@project.namespace, @project, @page.slug) } do
         = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: 'Write your content or drag files here...'
         = render 'shared/notes/hints'
@@ -29,8 +29,8 @@
           = link_to 'documentation', help_page_path("user/markdown", anchor: "wiki-specific-markdown")
 
   .form-group
-    = f.label :commit_message, class: 'control-label'
-    .col-sm-10= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
+    .col-sm-12= f.label :commit_message, class: 'control-label-full-width'
+    .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
 
   .form-actions
     - if @page && @page.persisted?

app/views/projects/wikis/_new.html.haml

-- @no_container = true
-
-%div{ class: container_class }
-  #modal-new-wiki.modal
+#modal-new-wiki.modal
   .modal-dialog
     .modal-content
       .modal-header

app/views/projects/wikis/edit.html.haml

-- @no_container = true
+- @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
 - page_title "Edit", @page.title.capitalize, "Wiki"
 
-%div{ class: container_class }
-  .wiki-page-header.has-sidebar-toggle
+.wiki-page-header.has-sidebar-toggle
   %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
@@ -30,6 +29,6 @@
         = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger" do
           Delete
 
-  = render 'form'
+= render 'form'
 
 = render 'sidebar'

app/views/projects/wikis/git_access.html.haml

-- @no_container = true
+- @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
 - page_title "Git Access", "Wiki"
 
-%div{ class: container_class }
-  .wiki-page-header.has-sidebar-toggle
+.wiki-page-header.has-sidebar-toggle
   %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
@@ -12,7 +11,7 @@
 
   = render "shared/clone_panel", project: @project_wiki
 
-  .wiki-git-access
+.wiki-git-access
   %h3 Install Gollum
   %pre.dark
     :preserve

app/views/projects/wikis/history.html.haml

 - page_title "History", @page.title.capitalize, "Wiki"
 
-%div{ class: container_class }
-  .wiki-page-header.has-sidebar-toggle
+.wiki-page-header.has-sidebar-toggle
   %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
@@ -12,7 +11,7 @@
         ·
         History
 
-  .table-holder
+.table-holder
   %table.table
     %thead
       %tr

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

-- @no_container = true
+- @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
 - page_title @page.title.capitalize, "Wiki"
 
-%div{ class: container_class }
-  .wiki-page-header.has-sidebar-toggle
+.wiki-page-header.has-sidebar-toggle
   %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
@@ -20,12 +19,12 @@
   .nav-controls
     = render 'main_links'
 
-  - if @page.historical?
+- if @page.historical?
   .warning_message
     This is an old version of this page.
     You can view the #{link_to "most recent version", namespace_project_wiki_path(@project.namespace, @project, @page)} or browse the #{link_to "history", namespace_project_wiki_history_path(@project.namespace, @project, @page)}.
 
-  .wiki-holder.prepend-top-default.append-bottom-default
+.wiki-holder.prepend-top-default.append-bottom-default
   .wiki
     = render_wiki_content(@page)
 

app/views/shared/_clone_panel.html.haml

@@ -19,7 +19,7 @@
 
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: 'Project clone URL' }
   .input-group-btn
-    = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"))
+    = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"), class: "btn-default btn-clipboard")
 
 :javascript
   $('ul.clone-options-dropdown a').on('click',function(e){