Commit 858e8903 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'ui/gl-padding' into 'master'

UI: More consistent alignment and padding

See the commits for more details, the messages mostly speak for themselves.

# Highlights:

## Merge request form bottom

Before:

![mr_before](/uploads/de2ae608d300784b61818bc33538ac64/mr_before.png)

After: 

![mr_after](/uploads/9b1568d8287704ee9497cc029e827778/mr_after.png)

## Issue header

Before:

![issue_before](/uploads/e8cc4fb316219f025ff7bd74c7da8677/issue_before.png)

After:

![issue_after](/uploads/5fbad99f038571196c3c3c2bea304381/issue_after.png)

## Empty repository message

Before:

![empty_before](/uploads/f6ab80aea9af9111c3dc260d5fa98cd6/empty_before.png)

After:

![empty_after](/uploads/40a528f5a45f4e47776356c88aab24c4/empty_after.png)

Fixes #3742 and https://dev.gitlab.org/gitlab/gitlabhq/issues/2594

See merge request !1953
parents 5453eb7d 1fb3c099
@import "framework/fonts";
@import "framework/variables";
@import "framework/mixins";
@import "framework/layout";
@import 'framework/tw_bootstrap_variables';
@import 'framework/tw_bootstrap';
@import "framework/layout";
@import "framework/avatar.scss";
@import "framework/blocks.scss";
......@@ -25,6 +25,7 @@
@import "framework/markdown_area.scss";
@import "framework/mobile.scss";
@import "framework/pagination.scss";
@import "framework/panels.scss";
@import "framework/selects.scss";
@import "framework/sidebar.scss";
@import "framework/tables.scss";
......
......@@ -68,6 +68,10 @@
.oneline {
line-height: 42px;
}
> p:last-child {
margin-bottom: 0;
}
}
.cover-block {
......@@ -114,3 +118,7 @@
right: 10px;
}
}
.block-connector {
margin-top: -1px;
}
......@@ -7,7 +7,7 @@
/** COMMON CLASSES **/
.prepend-top-10 { margin-top:10px }
.prepend-top-default { margin-top: $gl-padding; }
.prepend-top-default { margin-top: $gl-padding !important; }
.prepend-top-20 { margin-top:20px }
.prepend-left-10 { margin-left:10px }
.prepend-left-20 { margin-left:20px }
......@@ -52,6 +52,10 @@ pre {
}
}
hr {
margin: $gl-padding 0;
}
.dropdown-menu > li > a {
text-shadow: none;
}
......@@ -433,3 +437,7 @@ table {
.space-right {
margin-right: 10px;
}
.alert, .progress {
margin-bottom: $gl-padding;
}
......@@ -8,7 +8,6 @@
border: none;
border-top: 1px solid #E7E9EE;
border-bottom: 1px solid #E7E9EE;
margin-bottom: 1em;
&.readme-holder {
border-bottom: 0;
......@@ -25,7 +24,7 @@
text-shadow: 0 1px 1px #fff;
margin: 0;
text-align: left;
padding: 10px 15px;
padding: 10px $gl-padding;
.file-actions {
float: right;
......@@ -171,4 +170,3 @@
}
}
}
......@@ -22,9 +22,10 @@ input[type='text'].danger {
}
.form-actions {
padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
margin: -$gl-padding;
margin-top: 0;
margin-bottom: -$gl-padding;
padding: $gl-padding;
background-color: $background-color;
border-top: 1px solid $border-color;
}
......@@ -73,6 +74,8 @@ label {
.form-control {
@include box-shadow(none);
height: 42px;
padding: 8px $gl-padding;
}
.wiki-content {
......@@ -92,3 +95,7 @@ label {
background-color: #f7f8fa;
}
}
.help-block {
margin-bottom: 0;
}
......@@ -7,8 +7,9 @@
.issue-box {
@include border-radius(2px);
display: inline-block;
padding: 10px $gl-padding;
display: block;
float: left;
padding: 0 $gl-padding;
font-weight: normal;
margin-right: 10px;
font-size: $gl-font-size;
......
.panel {
margin-bottom: $gl-padding;
.panel-heading {
padding: 10px $gl-padding;
}
.panel-body {
padding: $gl-padding;
.form-actions {
margin: -$gl-padding;
margin-top: $gl-padding;
}
}
}
......@@ -6,6 +6,8 @@
table {
&.table {
margin-bottom: $gl-padding;
.dropdown-menu a {
text-decoration: none;
}
......
......@@ -181,6 +181,10 @@ body {
line-height: 1.3;
font-size: 1.25em;
font-weight: 600;
&:last-child {
margin-bottom: 0;
}
}
.page-title-empty {
......
......@@ -108,16 +108,3 @@
z-index: 2;
}
}
.commit-ci-menu {
padding: 0;
margin: 0;
list-style: none;
margin-top: 5px;
height: 56px;
margin: -16px;
padding: 16px;
text-align: center;
margin-top: 0px;
margin-bottom: 2px;
}
......@@ -19,48 +19,38 @@
color: #B94A48;
}
}
.commit-button-annotation {
display: inline-block;
margin: 0;
padding: 2px;
> * {
float: left;
}
.message {
display: inline-block;
margin: 5px 8px 0 8px;
}
}
.file-title {
@extend .monospace;
line-height: 42px;
padding-top: 7px;
padding-bottom: 7px;
}
.editor-ref {
background: $background-color;
padding: 11px 15px;
padding-right: $gl-padding;
border-right: 1px solid $border-color;
display: inline-block;
margin: -5px -5px;
display: block;
float: left;
margin-right: 10px;
}
.editor-file-name {
.new-file-name {
display: inline-block;
width: 450px;
}
@extend .monospace;
float: left;
margin-right: 10px;
}
.form-control {
margin-top: -3px;
}
.new-file-name {
display: inline-block;
width: 450px;
float: left;
}
.form-actions {
margin: -$gl-padding;
margin-top: 0;
padding: $gl-padding
.select2 {
float: right;
}
}
......@@ -51,11 +51,12 @@
.issuable-details {
.page-title {
margin-top: -15px;
padding: 10px 0;
margin-top: -$gl-padding;
padding: 7px 0;
margin-bottom: 0;
color: #5c5d5e;
font-size: 16px;
line-height: 42px;
.author {
color: #5c5d5e;
......
......@@ -4,7 +4,6 @@
*/
.mr-state-widget {
background: #F7F8FA;
margin-bottom: 20px;
color: $gl-gray;
border: 1px solid #dce0e6;
@include border-radius(2px);
......@@ -87,7 +86,7 @@
.mr-widget-body,
.ci_widget,
.mr-widget-footer {
padding: 15px;
padding: $gl-padding;
}
.normal {
......@@ -116,26 +115,8 @@
}
}
.merge-request .merge-request-tabs {
@include nav-menu;
margin: -$gl-padding;
padding: $gl-padding;
text-align: center;
margin-bottom: 1px;
}
// Mobile
@media (max-width: 480px) {
.merge-request .merge-request-tabs {
margin: 0;
padding: 0;
li {
a {
padding: 0;
}
}
}
.merge-request-details {
margin-bottom: $gl-padding;
}
.mr_source_commit,
......
......@@ -7,6 +7,7 @@
}
.reply-btn {
@extend .btn-primary;
margin: 10px $gl-padding;
}
.diff-file .diff-content {
tr.line_holder:hover {
......@@ -38,9 +39,8 @@
}
.new_note, .edit_note {
.buttons {
margin-top: 8px;
margin-bottom: 3px;
.note-form-actions {
margin-top: $gl-padding;
}
.note-preview-holder {
......@@ -79,8 +79,8 @@
padding: $gl-padding;
margin-left: -$gl-padding;
margin-right: -$gl-padding;
border-right: 1px solid #ECEEF1;
border-top: 1px solid #ECEEF1;
border-right: 1px solid $border-color;
border-top: 1px solid $border-color;
margin-bottom: -$gl-padding;
}
......@@ -150,7 +150,6 @@
.discussion-reply-holder {
background: $background-color;
padding: 10px 15px;
border-top: 1px solid $border-color;
}
}
......
......@@ -18,10 +18,6 @@
}
}
.project-edit-content {
padding: 7px;
}
.project-name-holder {
.help-inline {
vertical-align: top;
......@@ -30,12 +26,6 @@
}
.project-home-panel {
text-align: center;
background: #f7f8fa;
margin: -$gl-padding;
padding: $gl-padding;
padding: 44px 0 17px 0;
.project-identicon-holder {
margin-bottom: 16px;
......@@ -105,7 +95,6 @@
display: inline-table;
position: relative;
top: 17px;
margin-bottom: 44px;
}
.project-repo-buttons {
......@@ -376,7 +365,7 @@ table.table.protected-branches-list tr.no-border {
.project-stats {
text-align: center;
margin-top: 15px;
margin-top: $gl-padding;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 4px;
......
......@@ -27,56 +27,22 @@
}
.snippet-holder {
.snippet-details {
.page-title {
margin-top: -15px;
padding: 10px 0;
margin-bottom: 0;
color: #5c5d5e;
font-size: 16px;
.author {
color: #5c5d5e;
}
.snippet-id {
color: #5c5d5e;
}
}
.snippet-title {
margin: 0;
font-size: 23px;
color: #313236;
}
@media (max-width: $screen-md-max) {
.new-snippet-link {
display: none;
}
}
@media (max-width: $screen-sm-max) {
.creator,
.page-title .btn-close {
display: none;
}
}
}
margin-bottom: -$gl-padding;
.file-holder {
border-top: 0;
}
}
.snippet-box {
@include border-radius(2px);
display: inline-block;
padding: 10px $gl-padding;
display: block;
float: left;
padding: 0 $gl-padding;
font-weight: normal;
margin-right: 10px;
font-size: $gl-font-size;
border: 1px solid;
line-height: 40px;
}
......@@ -8,8 +8,8 @@
= link_to new_group_path, class: "btn btn-new" do
%i.fa.fa-plus
New Group
.title Welcome to the groups!
Group members have access to all group projects.
.oneline
Group members have access to all group projects.
%ul.content-list
- @group_members.each do |group_member|
......
......@@ -15,24 +15,25 @@
.pull-right
= link_to 'New Application', new_oauth_application_path, class: 'btn btn-success'
- if @applications.any?
%table.table.table-striped
%thead
%tr
%th Name
%th Callback URL
%th Clients
%th
%th
%tbody
- @applications.each do |application|
%tr{:id => "application_#{application.id}"}
%td= link_to application.name, oauth_application_path(application)
%td
- application.redirect_uri.split.each do |uri|
%div= uri
%td= application.access_tokens.count
%td= link_to 'Edit', edit_oauth_application_path(application), class: 'btn btn-link btn-sm'
%td= render 'doorkeeper/applications/delete_form', application: application
.table-holder
%table.table.table-striped
%thead
%tr
%th Name
%th Callback URL
%th Clients
%th
%th
%tbody
- @applications.each do |application|
%tr{:id => "application_#{application.id}"}
%td= link_to application.name, oauth_application_path(application)
%td
- application.redirect_uri.split.each do |uri|
%div= uri
%td= application.access_tokens.count
%td= link_to 'Edit', edit_oauth_application_path(application), class: 'btn btn-link btn-sm'
%td= render 'doorkeeper/applications/delete_form', application: application
.oauth-authorized-applications.prepend-top-20
- if user_oauth_applications?
......@@ -40,29 +41,30 @@
Authorized applications
- if @authorized_tokens.any?
%table.table.table-striped
%thead
%tr
%th Name
%th Authorized At
%th Scope
%th
%tbody
- @authorized_apps.each do |app|
- token = app.authorized_tokens.order('created_at desc').first
%tr{:id => "application_#{app.id}"}
%td= app.name
%td= token.created_at
%td= token.scopes
%td= render 'doorkeeper/authorized_applications/delete_form', application: app
- @authorized_anonymous_tokens.each do |token|
.table-holder
%table.table.table-striped
%thead
%tr
%td
Anonymous
%div.help-block
%em Authorization was granted by entering your username and password in the application.
%td= token.created_at
%td= token.scopes
%td= render 'doorkeeper/authorized_applications/delete_form', token: token
%th Name
%th Authorized At
%th Scope
%th
%tbody
- @authorized_apps.each do |app|
- token = app.authorized_tokens.order('created_at desc').first
%tr{:id => "application_#{app.id}"}
%td= app.name
%td= token.created_at
%td= token.scopes
%td= render 'doorkeeper/authorized_applications/delete_form', application: app
- @authorized_anonymous_tokens.each do |token|
%tr
%td
Anonymous
%div.help-block
%em Authorization was granted by entering your username and password in the application.
%td= token.created_at
%td= token.scopes
%td= render 'doorkeeper/authorized_applications/delete_form', token: token
- else
%p.light You don't have any authorized applications
- is_admin = defined?(admin) ? true : false
.panel.panel-default
- if @keys.any?
- if @keys.any?
.table-holder
%table.table
%thead.panel-heading
%tr
......@@ -11,9 +11,9 @@
%tbody
- @keys.each do |key|
= render 'profiles/keys/key', key: key, is_admin: is_admin
- else
.nothing-here-block
- if is_admin
User has no ssh keys
- else
There are no SSH keys with access to your account.
- else
.nothing-here-block
- if is_admin
User has no ssh keys
- else
There are no SSH keys with access to your account.
......@@ -50,12 +50,10 @@
Watch
%p You will receive notifications for any activity
.form-actions
.gray-content-block
= f.submit 'Save changes', class: "btn btn-create"
.clearfix
%hr
.row.all-notifications
.row.all-notifications.prepend-top-default
.col-md-6
%p
You can also specify notification level per group or per project.
......
......@@ -7,15 +7,16 @@
= cache(readme_cache_key) do
= render_readme(readme)
- else
%h3.page-title
This project does not have README yet
- if can?(current_user, :push_code, @project)
%p.slead
A
%code README
file contains information about other files in a repository and is commonly
distributed with computer software, forming part of its documentation.
%br
We recommend you to
= link_to "add README", new_readme_path, class: 'underlined-link'
file to the repository and GitLab will render it here instead of this message.
.gray-content-block.second-block.center
%h3.page-title
This project does not have README yet
- if can?(current_user, :push_code, @project)
%p
A
%code README
file contains information about other files in a repository and is commonly
distributed with computer software, forming part of its documentation.
%p
We recommend you to
= link_to "add README", new_readme_path, class: 'underlined-link'
file to the repository and GitLab will render it here instead of this message.
.file-holder.file
.file-title
.file-holder.file.append-bottom-default
.file-title.clearfix
.editor-ref
%i.fa.fa-code-fork
= icon('code-fork')
= ref
%span.editor-file-name
- if @path
%span.monospace
= @path
= @path
- if current_action?(:new) || current_action?(:create)
- if current_action?(:new) || current_action?(:create)
%span.editor-file-name
\/
= text_field_tag 'file_name', params[:file_name], placeholder: "File name",
required: true, class: 'form-control new-file-name js-quick-submit'
.pull-right
= select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
= text_field_tag 'file_name', params[:file_name], placeholder: "File name",
required: true, class: 'form-control new-file-name js-quick-submit'
.pull-right
= select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
.file-content.code
%pre.js-edit-mode-pane#editor
......
%ul.center-top-menu.commit-ci-menu
%ul.center-top-menu.no-top.no-bottom.commit-ci-menu
= nav_link(path: 'commit#show') do
= link_to namespace_project_commit_path(@project.namespace, @project, @commit.id) do
Changes
......
- page_title "#{@commit.title} (#{@commit.short_id})", "Commits"
= render "projects/commits/header_title"
= render "commit_box"
= render "ci_menu" if @ci_commit
- if @ci_commit
= render "ci_menu"
- else
%div.block-connector
= render "projects/diffs/diffs", diffs: @diffs, project: @project
= render "projects/notes/notes_with_form"
......@@ -7,11 +7,11 @@
= render "form"
- if @commits.present?
.prepend-top-20
.prepend-top-default
= render "projects/commits/commit_list"
= render "projects/diffs/diffs", diffs: @diffs, project: @project
- else
.light-well.prepend-top-20
.light-well.prepend-top-default
.center
%h4
There isn't anything to compare.
......
......@@ -3,7 +3,7 @@
- diff_files = safe_diff_files(diffs)
.gray-content-block.second-block.oneline-block
.gray-content-block.middle-block.oneline-block
.inline-parallel-buttons
.btn-group
= inline_diff_btn
......
......@@ -5,17 +5,16 @@
= render "home_panel"
.gray-content-block.center
.gray-content-block.second-block.center
%h3.page-title
The repository for this project is empty
- if can?(current_user, :download_code, @project)
- if can?(current_user, :push_code, @project)
%p
If you already have files you can push them using command line instructions below.
%br
- if can?(current_user, :push_code, @project)
Otherwise you can start with
= link_to "adding README", new_readme_path, class: 'underlined-link'
file to this project.
%p
Otherwise you can start with
= link_to "adding README", new_readme_path, class: 'underlined-link'
file to this project.
- if can?(current_user, :download_code, @project)
.prepend-top-20
......
......@@ -7,7 +7,7 @@
= render 'shared/show_aside'
.gray-content-block.second-block.oneline-block
.gray-content-block.middle-block.oneline-block
.row
.col-md-9
.votes-holder.pull-right
......
......@@ -37,7 +37,7 @@
%h4 Compare failed
%p We can't compare selected branches. It may be because of huge diff. Please try again or select different branches.
- else
.light-well.append-bottom-10
.light-well.append-bottom-default
.center
%h4
There isn't anything to merge.
......@@ -86,4 +86,3 @@
return;
}
});
......@@ -19,7 +19,7 @@
= f.hidden_field :target_branch
.mr-compare.merge-request
%ul.merge-request-tabs
%ul.merge-request-tabs.center-top-menu.no-top.no-bottom
%li.commits-tab
= link_to url_for(params), data: {target: '#commits', action: 'commits', toggle: 'tab'} do
Commits
......@@ -31,7 +31,7 @@
.tab-content
#commits.commits.tab-pane
= render "projects/commits/commits", project: @project
= render "projects/merge_requests/show/commits"
#diffs.diffs.tab-pane.active
- if @diffs.present?
= render "projects/diffs/diffs", diffs: @diffs, project: @project
......@@ -57,4 +57,3 @@
diffs_loaded: true,
commits_loaded: true
});
......@@ -8,7 +8,7 @@
.merge-request-details.issuable-details
= render "projects/merge_requests/show/mr_title"
= render "projects/merge_requests/show/mr_box"
.append-bottom-20.mr-source-target.prepend-top-default
.append-bottom-default.mr-source-target.prepend-top-default
- if @merge_request.open?
.pull-right
- if @merge_request.source_branch_exists?
......@@ -40,7 +40,7 @@
= link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
- if @commits.present?
%ul.merge-request-tabs
%ul.merge-request-tabs.center-top-menu.no-top.no-bottom
%li.notes-tab
= link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: '#notes', action: 'notes', toggle: 'tab'} do
Discussion
......
.gray-content-block.second-block.oneline-block
.gray-content-block.middle-block.oneline-block
= icon("sort-amount-desc")
Most recent commits displayed first
......
......@@ -14,6 +14,6 @@
= render 'projects/zen', f: f, attr: :description, classes: 'description js-quick-submit form-control'
= render 'projects/notes/hints'
.error-alert
.prepend-top-default
.form-actions.prepend-top-default
= f.submit 'Save changes', class: 'btn btn-save'
= link_to "Cancel", namespace_project_tag_path(@project.namespace, @project, @tag.name), class: "btn btn-default btn-cancel"
......@@ -11,7 +11,7 @@
= render "home_panel"
.project-stats.gray-content-block
.project-stats.gray-content-block.second-block
%ul.nav.nav-pills
%li
= link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
......
= form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
%div.prepend-top-20
%div.prepend-top-default
.issuable-context-title
%label
Assignee:
......@@ -11,7 +11,7 @@
- if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
= users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true)
%div.prepend-top-20.clearfix
%div.prepend-top-default.clearfix
.issuable-context-title
%label
Milestone:
......@@ -31,7 +31,7 @@
- if current_user
- subscribed = issuable.subscribed?(current_user)
%div.prepend-top-20.clearfix
%div.prepend-top-default.clearfix
.issuable-context-title
%label
Subscription:
......
......@@ -93,7 +93,8 @@
%p.help-block
= link_to 'Change branches', mr_change_branches_path(@merge_request)
.form-actions
- is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
.gray-content-block{class: (is_footer ? "footer-block" : "middle-block")}
- if !issuable.project.empty_repo? && (guide_url = contribution_guide_path(issuable.project)) && !issuable.persisted?
%p
Please review the
......
.snippet-details
.issuable-details
.page-title
.snippet-box{class: visibility_level_color(@snippet.visibility_level)}
= visibility_level_icon(@snippet.visibility_level)
= visibility_level_label(@snippet.visibility_level)
%span.snippet-id Snippet ##{@snippet.id}
Snippet ##{@snippet.id}
%span.creator
· created by #{link_to_member(@project, @snippet.author, size: 24)}
·
......@@ -19,6 +19,7 @@
= render "projects/snippets/actions"
- else
= render "snippets/actions"
.gray-content-block.middle-block
%h2.snippet-title
%h2.issue-title
= gfm escape_once(@snippet.title)
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment