Skip to content

G
gitlab-ce
Commit 1f78c5d4 authored by Andrey's avatar Andrey
Browse files
Options

UI changes to the project view, empty project and project list new project button

parent 03fd5919
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 69 deletions
app/assets/stylesheets/base/mixins.scss
View file @ 1f78c5d4
...@@ -93,46 +93,89 @@ ...@@ -93,46 +93,89 @@
} }
h1 { h1 {
margin-top: 45px; font-size: 1.3em;
font-size: 2.5em; font-weight: 600;
margin: 24px 0 12px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #e7e9ed;
color: #313236;
} }
h2 { h2 {
margin-top: 40px; font-size: 1.2em;
font-size: 2em; font-weight: 600;
margin: 24px 0 12px 0;
color: #313236;
} }
h3 { h3 {
margin-top: 35px; margin: 24px 0 12px 0;
font-size: 1.5em; font-size: 1.25em;
} }
h4 { h4 {
margin-top: 30px; margin: 24px 0 12px 0;
font-size: 1.2em; font-size: 1.1em;
}
h5 {
margin: 24px 0 12px 0;
font-size: 1em;
}
h6 {
margin: 24px 0 12px 0;
font-size: 0.90em;
} }
blockquote { blockquote {
color: #888; padding: 8px 21px;
margin: 12px 0 12px;
border-left: 3px solid #e7e9ed;
}
blockquote p {
color: #7f8fa4 !important;
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
} }
p {
color:#5c5d5e;
margin:6px 0 0 0;
}
table { table {
@extend .table; @extend .table;
@extend .table-bordered; @extend .table-bordered;
margin: 12px 0 12px 0;
color: #5c5d5e;
th { th {
background: #EEE; background: #f8fafc;
} }
}
pre {
@include border-radius(2px);
margin: 12px 0 12px 0 !important;
background-color: #f8fafc !important;
font-size: 13px !important;
color: #5b6169 !important;
line-height: 1.6em !important;
} }
p > code { p > code {
font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
ul {
color: #5c5d5e;
}
li { li {
line-height: 1.5; line-height: 1.6em;
} }
a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] { a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] {
...@@ -152,6 +195,7 @@ ...@@ -152,6 +195,7 @@
} }
} }
@mixin str-truncated($max_width: 82%) { @mixin str-truncated($max_width: 82%) {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
...@@ -183,7 +227,7 @@ ...@@ -183,7 +227,7 @@
&.active { &.active {
background: #f9f9f9; background: #f9f9f9;
a { a {
font-weight: bold; font-weight: 600;
} }
} }
...@@ -199,6 +243,11 @@ ...@@ -199,6 +243,11 @@
} }
} }
.pull-right .light .fa-pencil {
top: 20px;
position: relative;
}
@mixin input-big { @mixin input-big {
height: 36px; height: 36px;
padding: 5px 10px; padding: 5px 10px;
...@@ -250,4 +299,4 @@ ...@@ -250,4 +299,4 @@
color: #78a; color: #78a;
} }
} }
} }
\ No newline at end of file
app/assets/stylesheets/base/variables.scss
View file @ 1f78c5d4
...@@ -12,8 +12,8 @@ $sidebar_width: 230px; ...@@ -12,8 +12,8 @@ $sidebar_width: 230px;
$avatar_radius: 50%; $avatar_radius: 50%;
$code_font_size: 13px; $code_font_size: 13px;
$code_line_height: 1.5; $code_line_height: 1.5;
$border-color: #E7E9ED; $border-color: #dce0e6;
$background-color: #F8FAFC; $background-color: #F7F8FA;
$header-height: 58px; $header-height: 58px;
$fixed-layout-width: 1200px; $fixed-layout-width: 1200px;
$gl-gray: #7f8fa4; $gl-gray: #7f8fa4;
......
app/assets/stylesheets/generic/avatar.scss
View file @ 1f78c5d4
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
&.s48 { width: 48px; height: 48px; margin-right: 10px; } &.s48 { width: 48px; height: 48px; margin-right: 10px; }
&.s60 { width: 60px; height: 60px; margin-right: 12px; } &.s60 { width: 60px; height: 60px; margin-right: 12px; }
&.s90 { width: 90px; height: 90px; margin-right: 15px; } &.s90 { width: 90px; height: 90px; margin-right: 15px; }
&.s110 { width: 110px; height: 110px; margin-right: 15px; }
&.s140 { width: 140px; height: 140px; margin-right: 20px; } &.s140 { width: 140px; height: 140px; margin-right: 20px; }
&.s160 { width: 160px; height: 160px; margin-right: 20px; } &.s160 { width: 160px; height: 160px; margin-right: 20px; }
} }
...@@ -42,6 +43,7 @@ ...@@ -42,6 +43,7 @@
&.s32 { font-size: 22px; line-height: 32px; } &.s32 { font-size: 22px; line-height: 32px; }
&.s60 { font-size: 32px; line-height: 60px; } &.s60 { font-size: 32px; line-height: 60px; }
&.s90 { font-size: 36px; line-height: 90px; } &.s90 { font-size: 36px; line-height: 90px; }
&.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
&.s140 { font-size: 72px; line-height: 140px; } &.s140 { font-size: 72px; line-height: 140px; }
&.s160 { font-size: 96px; line-height: 160px; } &.s160 { font-size: 96px; line-height: 160px; }
} }
app/assets/stylesheets/generic/typography.scss
View file @ 1f78c5d4
...@@ -2,11 +2,17 @@ ...@@ -2,11 +2,17 @@
* Headers * Headers
* *
*/ */
body {
text-rendering: optimizeLegibility
}
.page-title { .page-title {
margin-top: 0px; margin-top: 0px;
line-height: 1.5; line-height: 1.3;
font-weight: normal; font-size: 1.25em;
margin-bottom: 5px; font-weight: 600;
margin: 12px 7px 12px 7px;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
...@@ -55,6 +61,7 @@ a > code { ...@@ -55,6 +61,7 @@ a > code {
@include md-typography; @include md-typography;
word-wrap: break-word; word-wrap: break-word;
padding: 7px;
/* Link to current header. */ /* Link to current header. */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
...@@ -83,9 +90,12 @@ a > code { ...@@ -83,9 +90,12 @@ a > code {
} }
} }
ul { ul,ol {
padding: 0; padding: 0;
margin: 0 0 9px 25px !important; margin: 6px 0 6px 18px !important;
}
ol {
color: #5c5d5e;
} }
} }
...@@ -111,4 +121,4 @@ textarea.js-gfm-input { ...@@ -111,4 +121,4 @@ textarea.js-gfm-input {
.strikethrough { .strikethrough {
text-decoration: line-through; text-decoration: line-through;
} }
\ No newline at end of file
app/assets/stylesheets/pages/projects.scss
View file @ 1f78c5d4
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
background: #f7f8fa; background: #f7f8fa;
margin: -$gl-padding; margin: -$gl-padding;
padding: $gl-padding; padding: $gl-padding;
padding-top: 40px; padding: 44px 0 17px 0;
.project-identicon-holder { .project-identicon-holder {
margin-bottom: 15px; margin-bottom: 16px;
.avatar, .identicon { .avatar, .identicon {
margin: 0 auto; margin: 0 auto;
...@@ -40,23 +40,26 @@ ...@@ -40,23 +40,26 @@
.project-home-desc { .project-home-desc {
h1 { h1 {
color: #313236;
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 6px;
font-size: 23px; font-size: 23px;
font-weight: normal; font-weight: normal;
} }
p { p {
color: #7f8fa4; color: #5c5d5e;
} }
} }
.git-clone-holder { .git-clone-holder {
max-width: 600px; max-width: 498px;
margin: 20px auto;
.form-control { .form-control {
background: #FFF; background: #FFF;
font-size: 14px;
height: 42px;
margin-left: -2px;
} }
} }
...@@ -66,30 +69,66 @@ ...@@ -66,30 +69,66 @@
color: inherit; color: inherit;
} }
} }
.input-group {
display: inline-table;
position: relative;
top: 17px;
margin-bottom: 44px;
}
.project-repo-buttons { .project-repo-buttons {
margin-top: $gl-padding; margin-top: 12px;
margin-bottom: 25px; margin-bottom: 0px;
.btn { .btn {
@extend .btn-info; @extend .btn-info;
@include border-radius(2px);
background-color: #f0f2f5;
border: 1px solid #dce0e5;
text-transform: uppercase; text-transform: uppercase;
font-size: 15px; color: #313236;
line-height: 20px; font-size: 13px;
padding: 8px 14px; font-weight: 600;
border-radius: 3px; line-height: 18px;
margin-left: 10px; padding: 11px 16px;
margin-left: 12px;
&:hover {
@include border-radius(2px);
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
}
&:focus {
@include border-radius(2px);
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
color: #313236 !important;
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
}
.count { .count {
padding-left: 7px;
display: inline-block; display: inline-block;
margin-left: 7px;
} }
} }
} }
} }
.split-one {
display: inline-table;
a {
margin: -1px !important;
}
}
.git-clone-holder { .git-clone-holder {
.project-home-dropdown + & { .project-home-dropdown + & {
margin-right: 45px; margin-right: 45px;
...@@ -103,7 +142,7 @@ ...@@ -103,7 +142,7 @@
} }
.input-group-addon { .input-group-addon {
background: #FAFAFA; background: #f7f8fa;
&.git-protocols { &.git-protocols {
padding: 0; padding: 0;
...@@ -111,11 +150,157 @@ ...@@ -111,11 +150,157 @@
.input-group-btn:last-child > .btn { .input-group-btn:last-child > .btn {
@include border-radius-right(0); @include border-radius-right(0);
border-left: 1px solid #c6cacf;
margin-left: -2px !important;
}
input-group-btn:first-child > .btn {
@include border-radius-left(0);
} }
} }
} }
} }
.projects-search-form {
.input-group .btn-success {
background-color: #2ebf6b !important;
border: 1px solid #28b061 !important;
color: #fff !important;
&:hover {
background-color: #2eb867 !important;
}
&:focus {
background-color: #2eb867 !important;
}
&:active {
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
background-color: #28b061 !important;
border: 1px solid #26a65c !important;
color: #fff !important;
}
}
.input-group .form-control {
height: 39px !important;
}
}
.input-group-btn > .btn {
background-color: #f0f2f5;
border: 1px solid #dce0e5;
text-transform: uppercase;
color: #313236;
font-size: 13px;
font-weight: 600;
&:focus {
outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
}
&:hover {
outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
color: #313236 !important;
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
}
}
.input-group-btn > .btn.active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
color: #313236 !important;
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
}
.split-repo-buttons {
display: inline-table;
margin-left: 12px;
.btn {
margin: 0 !important;
}
.dropdown {
margin: 0 !important;
}
.dropdown-toggle {
margin: -5px !important;
}
}
#notification-form {
margin-left: 5px;
}
.open > .dropdown-toggle.btn {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
text-transform: uppercase;
color: #313236;
font-size: 13px;
font-weight: 600;
color: #313236 !important;
}
.dropdown-menu {
@include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
@include border-radius (0px);
border: none;
padding: 16px 0;
font-size: 14px;
font-weight: 100;
li a {
color: #5f697a;
line-height: 30px;
&:hover {
background-color: #3084bb !important;
}
}
.fa-fw {
margin-right: 8px;
}
}
.fa-bell {
margin-right: 6px;
}
.fa-angle-down {
margin-left: 6px;
}
.project-home-panel .project-home-dropdown {
margin: 13px 0px 0;
}
.project-visibility-level-holder { .project-visibility-level-holder {
.radio { .radio {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -232,15 +417,48 @@ table.table.protected-branches-list tr.no-border { ...@@ -232,15 +417,48 @@ table.table.protected-branches-list tr.no-border {
.project-stats { .project-stats {
text-align: center; text-align: center;
margin-top: 0; margin-top: 15px;
margin-bottom: 0; margin-bottom: 0;
padding-top: 5px; padding-top: 10px;
padding-bottom: 0; padding-bottom: 4px;
ul.nav-pills { ul.nav-pills {
display:inline-block; display:inline-block;
} }
.nav-pills li {
display:inline;
}
.nav > li > a {
border: 1px solid transparent;
color: #313236;
font-size: 13px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
margin: 0 8px 0 0;
padding: 10px 16px 10px 16px;
&:hover {
@include border-radius(2px);
border: 1px solid #dce0e5;
background-color: #f0f2f5;
}
&:focus {
@include border-radius(2px);
border: 1px solid #dce0e5;
background-color: #f0f2f5;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border: 1px solid #c6cacf;
background-color: #e4e7ed;
}
}
li { li {
display:inline; display:inline;
} }
...@@ -251,11 +469,11 @@ table.table.protected-branches-list tr.no-border { ...@@ -251,11 +469,11 @@ table.table.protected-branches-list tr.no-border {
} }
li.missing a { li.missing a {
color: #bbb; color: #5a6069;
border: 1px dashed #ccc; border: 1px dashed #dce0e5;
&:hover { &:hover {
background-color: #FAFAFA; background-color: #f0f2f5;
} }
} }
} }
...@@ -273,6 +491,36 @@ pre.light-well { ...@@ -273,6 +491,36 @@ pre.light-well {
border-bottom: 1px solid #e7e9ed; border-bottom: 1px solid #e7e9ed;
} }
.git-empty {
margin: 0 7px 0 7px;
h5 {
color: #5c5d5e;
}
.light-well {
@include border-radius (2px);
color: #5b6169 !important;
font-size: 13px !important;
line-height: 1.6em !important;
}
}
.prepend-top-20 {
margin: 20px 8px 20px 8px;
.btn-remove {
@include border-radius (2px);
font-size: 13px;
font-weight: 600px;
text-transform: uppercase;
float: left !important;
margin-bottom: 14px;
}
}
/* /*
* Projects list rendered on dashboard and user page * Projects list rendered on dashboard and user page
*/ */
......
app/views/projects/_home_panel.html.haml
View file @ 1f78c5d4
...@@ -16,18 +16,19 @@ ...@@ -16,18 +16,19 @@
.project-repo-buttons .project-repo-buttons
= render 'projects/buttons/star' .split-one
= render 'projects/buttons/star'
- unless empty_repo
= render 'projects/buttons/fork' - unless empty_repo
= render 'projects/buttons/fork'
- if can? current_user, :download_code, @project
= link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do = render "shared/clone_panel"
= icon('download fw') .split-repo-buttons
Download - unless empty_repo
- if can? current_user, :download_code, @project
= link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
= icon('download fw')
= render 'projects/buttons/dropdown'
= render 'projects/buttons/notifications' = render 'projects/buttons/notifications'
= render 'projects/buttons/dropdown'
= render "shared/clone_panel"
app/views/projects/buttons/_fork.html.haml
View file @ 1f78c5d4
...@@ -8,6 +8,5 @@ ...@@ -8,6 +8,5 @@
- else - else
= link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn' do = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn' do
= icon('code-fork fw') = icon('code-fork fw')
Fork
%span.count %span.count
= @project.forks_count = @project.forks_count
app/views/projects/buttons/_star.html.haml
View file @ 1f78c5d4
- if current_user - if current_user
= link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star', method: :post, remote: true do = link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star', method: :post, remote: true do
= icon('star fw') = icon('star fw')
- if current_user.starred?(@project)
Unstar
- else
Star
%span.count %span.count
= @project.star_count = @project.star_count
...@@ -17,6 +13,5 @@ ...@@ -17,6 +13,5 @@
- else - else
= link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do = link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do
= icon('star fw') = icon('star fw')
Star
%span.count %span.count
= @project.star_count = @project.star_count
app/views/shared/_clone_panel.html.haml
View file @ 1f78c5d4
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
.input-group-addon .input-group-addon
.visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(project.visibility_level)} project" } .visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(project.visibility_level)} project" }
= visibility_level_icon(project.visibility_level) = visibility_level_icon(project.visibility_level)
= visibility_level_label(project.visibility_level).downcase
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7