Limit wiki container width

Closes #23734

Limit wiki container width
Closes #23734
4f678641 · Phil Hughes · 578f4606 · 4f678641 · 4f678641 · 4f678641
Commit 4f678641 authored Jun 12, 2017 by Phil Hughes
10 changed files
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/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;
 }

--- a/app/assets/stylesheets/framework/layout.scss
+++ b/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 {

--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -42,9 +42,7 @@
  }
  .git-access-header {
-    padding: 16px 40px 11px 0;
+    padding: $gl-padding 0 $gl-padding-top;
-    line-height: 28px;
-    font-size: 18px;
  }
  .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;
  }
 }

--- a/app/views/projects/wikis/_form.html.haml
+++ b/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-12= f.label :format, class: 'control-label-full-width'
-    .col-sm-10
+    .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-12= f.label :content, class: 'control-label-full-width'
-    .col-sm-10
+    .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-12= f.label :commit_message, class: 'control-label-full-width'
-    .col-sm-10= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
+    .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
  .form-actions
    - if @page && @page.persisted?

--- a/app/views/projects/wikis/_new.html.haml
+++ b/app/views/projects/wikis/_new.html.haml
- @no_container = true
+#modal-new-wiki.modal
+  .modal-dialog
-%div{ class: container_class }
+    .modal-content
-  #modal-new-wiki.modal
+      .modal-header
-    .modal-dialog
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-      .modal-content
+        %h3.page-title New Wiki Page
-        .modal-header
+      .modal-body
-          %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %form.new-wiki-page
-          %h3.page-title New Wiki Page
+          .form-group
-        .modal-body
+            = label_tag :new_wiki_path do
-          %form.new-wiki-page
+              %span Page slug
-            .form-group
+            = 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
-              = label_tag :new_wiki_path do
+            %span.new-wiki-page-slug-tip
-                %span Page slug
+              = icon('lightbulb-o')
-              = 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
+              Tip: You can specify the full path for the new file.
-              %span.new-wiki-page-slug-tip
+              We will automatically create any missing directories.
-                = icon('lightbulb-o')
+          .form-actions
-                Tip: You can specify the full path for the new file.
+            = button_tag 'Create page', class: 'build-new-wiki btn btn-create'
-                We will automatically create any missing directories.
-            .form-actions
-              = button_tag 'Create page', class: 'build-new-wiki btn btn-create'
--- a/app/views/projects/wikis/edit.html.haml
+++ b/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" }
-    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
-      = icon('angle-double-left')
-    .nav-text
+  .nav-text
-      %h2.wiki-page-title
+    %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
+        &middot;
        - if @page.persisted?
-          = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+          Edit Page
        - else
-          = @page.title.capitalize
+          Create Page
-        %span.light
-          &middot;
-          - if @page.persisted?
-            Edit Page
-          - else
-            Create Page
-    .nav-controls
+  .nav-controls
-      - if can?(current_user, :create_wiki, @project)
+    - if can?(current_user, :create_wiki, @project)
-        = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
+      = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
-          New page
+        New page
-      - if @page.persisted?
+    - if @page.persisted?
-        = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
+      = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
-          Page history
+        Page history
-        - if can?(current_user, :admin_wiki, @project)
+      - 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
+        = 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
+          Delete
-  = render 'form'
+= render 'form'
 = render 'sidebar'
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/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" }
-    %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
-      = icon('angle-double-left')
-    .git-access-header
+  .git-access-header
-      Clone repository
+    Clone repository
-      %strong= @project_wiki.path_with_namespace
+    %strong= @project_wiki.path_with_namespace
-    = render "shared/clone_panel", project: @project_wiki
+  = render "shared/clone_panel", project: @project_wiki
-  .wiki-git-access
+.wiki-git-access
-    %h3 Install Gollum
+  %h3 Install Gollum
-    %pre.dark
+  %pre.dark
-      :preserve
+    :preserve
-        gem install gollum
+      gem install gollum
-    %p
+  %p
-      It is recommended to install
+    It is recommended to install
-      %code github-markdown
+    %code github-markdown
-      so that GFM features render locally:
+    so that GFM features render locally:
-    %pre.dark
+  %pre.dark
-      :preserve
+    :preserve
-        gem install github-markdown
+      gem install github-markdown
-    %h3 Clone your wiki
+  %h3 Clone your wiki
-    %pre.dark
+  %pre.dark
-      :preserve
+    :preserve
-        git clone #{ content_tag(:span, h(default_url_to_repo(@project_wiki)), class: 'clone')}
+      git clone #{ content_tag(:span, h(default_url_to_repo(@project_wiki)), class: 'clone')}
-        cd #{h @project_wiki.path}
+      cd #{h @project_wiki.path}
-    %h3 Start Gollum and edit locally
+  %h3 Start Gollum and edit locally
-    %pre.dark
+  %pre.dark
-      :preserve
+    :preserve
-        gollum
+      gollum
-        == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
+      == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
-        >> Thin web server (v1.5.0 codename Knife)
+      >> Thin web server (v1.5.0 codename Knife)
-        >> Maximum connections set to 1024
+      >> Maximum connections set to 1024
-        >> Listening on 0.0.0.0:4567, CTRL+C to stop
+      >> Listening on 0.0.0.0:4567, CTRL+C to stop
 = render 'sidebar'
--- a/app/views/projects/wikis/history.html.haml
+++ b/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" }
-    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
-      = icon('angle-double-left')
-    .nav-text
+  .nav-text
-      %h2.wiki-page-title
+    %h2.wiki-page-title
-        = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+      = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
-        %span.light
+      %span.light
-          &middot;
+        &middot;
-          History
+        History
-  .table-holder
+.table-holder
-    %table.table
+  %table.table
-      %thead
+    %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
+          %td
-          %th Author
+            = link_to project_wiki_path_with_version(@project, @page,
-          %th Commit Message
+                                                     commit.id, index == 0) do
-          %th Last updated
+              = truncate_sha(commit.id)
-          %th Format
+          %td
-      %tbody
+            = commit.author.name
-        - @page.versions.each_with_index do |version, index|
+          %td
-          - commit = version
+            = commit.message
-          %tr
+          %td
-            %td
+            #{time_ago_with_tooltip(version.authored_date)}
-              = link_to project_wiki_path_with_version(@project, @page,
+          %td
-                                                       commit.id, index == 0) do
+            %strong
-                = truncate_sha(commit.id)
+              = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
-            %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'
--- a/app/views/projects/wikis/show.html.haml
+++ b/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" }
-    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')
-      = icon('angle-double-left')
-    .wiki-breadcrumb
+  .wiki-breadcrumb
-      %span= breadcrumb(@page.slug)
+    %span= breadcrumb(@page.slug)
-    .nav-text
+  .nav-text
-      %h2.wiki-page-title= @page.title.capitalize
+    %h2.wiki-page-title= @page.title.capitalize
-      %span.wiki-last-edit-by
+    %span.wiki-last-edit-by
-        Last edited by
+      Last edited by
-        %strong
+      %strong
-          #{@page.commit.author.name}
+        #{@page.commit.author.name}
-        #{time_ago_with_tooltip(@page.commit.authored_date)}
+      #{time_ago_with_tooltip(@page.commit.authored_date)}
-    .nav-controls
+  .nav-controls
-      = render 'main_links'
+    = render 'main_links'
-  - if @page.historical?
+- if @page.historical?
-    .warning_message
+  .warning_message
-      This is an old version of this page.
+    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)}.
+    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
+  .wiki
-      = render_wiki_content(@page)
+    = render_wiki_content(@page)
 = render 'sidebar'
--- a/app/views/shared/_clone_panel.html.haml
+++ b/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){