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-dialog
-      .modal-content
-        .modal-header
-          %a.close{ href: "#", "data-dismiss" => "modal" } ×
-          %h3.page-title New Wiki Page
-        .modal-body
-          %form.new-wiki-page
-            .form-group
-              = label_tag :new_wiki_path do
-                %span Page slug
-              = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
-              %span.new-wiki-page-slug-tip
-                = icon('lightbulb-o')
-                Tip: You can specify the full path for the new file.
-                We will automatically create any missing directories.
-            .form-actions
-              = button_tag 'Create page', class: 'build-new-wiki btn btn-create'
+#modal-new-wiki.modal
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %h3.page-title New Wiki Page
+      .modal-body
+        %form.new-wiki-page
+          .form-group
+            = label_tag :new_wiki_path do
+              %span Page slug
+            = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
+            %span.new-wiki-page-slug-tip
+              = icon('lightbulb-o')
+              Tip: You can specify the full path for the new file.
+              We will automatically create any missing directories.
+          .form-actions
+            = button_tag 'Create page', class: 'build-new-wiki btn btn-create'

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
-    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
-      = icon('angle-double-left')
+.wiki-page-header.has-sidebar-toggle
+  %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
 
-    .nav-text
-      %h2.wiki-page-title
+  .nav-text
+    %h2.wiki-page-title
+      - if @page.persisted?
+        = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+      - else
+        = @page.title.capitalize
+      %span.light
+        ·
         - if @page.persisted?
-          = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+          Edit Page
         - else
-          = @page.title.capitalize
-        %span.light
-          ·
-          - if @page.persisted?
-            Edit Page
-          - else
-            Create Page
+          Create Page
 
-    .nav-controls
-      - if can?(current_user, :create_wiki, @project)
-        = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
-          New page
-      - if @page.persisted?
-        = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
-          Page history
-        - if can?(current_user, :admin_wiki, @project)
-          = 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
+  .nav-controls
+    - if can?(current_user, :create_wiki, @project)
+      = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
+        New page
+    - if @page.persisted?
+      = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
+        Page history
+      - if can?(current_user, :admin_wiki, @project)
+        = 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
-    %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
-      = icon('angle-double-left')
+.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')
 
-    .git-access-header
-      Clone repository
-      %strong= @project_wiki.path_with_namespace
+  .git-access-header
+    Clone repository
+    %strong= @project_wiki.path_with_namespace
 
-    = render "shared/clone_panel", project: @project_wiki
+  = render "shared/clone_panel", project: @project_wiki
 
-  .wiki-git-access
-    %h3 Install Gollum
-    %pre.dark
-      :preserve
-        gem install gollum
-    %p
-      It is recommended to install
-      %code github-markdown
-      so that GFM features render locally:
-    %pre.dark
-      :preserve
-        gem install github-markdown
+.wiki-git-access
+  %h3 Install Gollum
+  %pre.dark
+    :preserve
+      gem install gollum
+  %p
+    It is recommended to install
+    %code github-markdown
+    so that GFM features render locally:
+  %pre.dark
+    :preserve
+      gem install github-markdown
 
-    %h3 Clone your wiki
-    %pre.dark
-      :preserve
-        git clone #{ content_tag(:span, h(default_url_to_repo(@project_wiki)), class: 'clone')}
-        cd #{h @project_wiki.path}
+  %h3 Clone your wiki
+  %pre.dark
+    :preserve
+      git clone #{ content_tag(:span, h(default_url_to_repo(@project_wiki)), class: 'clone')}
+      cd #{h @project_wiki.path}
 
-    %h3 Start Gollum and edit locally
-    %pre.dark
-      :preserve
-        gollum
-        == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
-        >> Thin web server (v1.5.0 codename Knife)
-        >> Maximum connections set to 1024
-        >> Listening on 0.0.0.0:4567, CTRL+C to stop
+  %h3 Start Gollum and edit locally
+  %pre.dark
+    :preserve
+      gollum
+      == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
+      >> Thin web server (v1.5.0 codename Knife)
+      >> Maximum connections set to 1024
+      >> Listening on 0.0.0.0:4567, CTRL+C to stop
 
 = render 'sidebar'

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

 - page_title "History", @page.title.capitalize, "Wiki"
 
-%div{ class: container_class }
-  .wiki-page-header.has-sidebar-toggle
-    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
-      = icon('angle-double-left')
+.wiki-page-header.has-sidebar-toggle
+  %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
 
-    .nav-text
-      %h2.wiki-page-title
-        = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
-        %span.light
-          ·
-          History
+  .nav-text
+    %h2.wiki-page-title
+      = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+      %span.light
+        ·
+        History
 
-  .table-holder
-    %table.table
-      %thead
+.table-holder
+  %table.table
+    %thead
+      %tr
+        %th Page version
+        %th Author
+        %th Commit Message
+        %th Last updated
+        %th Format
+    %tbody
+      - @page.versions.each_with_index do |version, index|
+        - commit = version
         %tr
-          %th Page version
-          %th Author
-          %th Commit Message
-          %th Last updated
-          %th Format
-      %tbody
-        - @page.versions.each_with_index do |version, index|
-          - commit = version
-          %tr
-            %td
-              = link_to project_wiki_path_with_version(@project, @page,
-                                                       commit.id, index == 0) do
-                = truncate_sha(commit.id)
-            %td
-              = commit.author.name
-            %td
-              = commit.message
-            %td
-              #{time_ago_with_tooltip(version.authored_date)}
-            %td
-              %strong
-                = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
+          %td
+            = link_to project_wiki_path_with_version(@project, @page,
+                                                     commit.id, index == 0) do
+              = truncate_sha(commit.id)
+          %td
+            = commit.author.name
+          %td
+            = commit.message
+          %td
+            #{time_ago_with_tooltip(version.authored_date)}
+          %td
+            %strong
+              = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
 
 = render 'sidebar'

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
-    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
-      = icon('angle-double-left')
+.wiki-page-header.has-sidebar-toggle
+  %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
 
-    .wiki-breadcrumb
-      %span= breadcrumb(@page.slug)
+  .wiki-breadcrumb
+    %span= breadcrumb(@page.slug)
 
-    .nav-text
-      %h2.wiki-page-title= @page.title.capitalize
-      %span.wiki-last-edit-by
-        Last edited by
-        %strong
-          #{@page.commit.author.name}
-        #{time_ago_with_tooltip(@page.commit.authored_date)}
+  .nav-text
+    %h2.wiki-page-title= @page.title.capitalize
+    %span.wiki-last-edit-by
+      Last edited by
+      %strong
+        #{@page.commit.author.name}
+      #{time_ago_with_tooltip(@page.commit.authored_date)}
 
-    .nav-controls
-      = render 'main_links'
+  .nav-controls
+    = render 'main_links'
 
-  - 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)}.
+- 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
-      = render_wiki_content(@page)
+.wiki-holder.prepend-top-default.append-bottom-default
+  .wiki
+    = render_wiki_content(@page)
 
 = render 'sidebar'

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){