Commit 1f78c5d4 authored by Andrey's avatar Andrey

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

parent 03fd5919
......@@ -93,46 +93,89 @@
}
h1 {
margin-top: 45px;
font-size: 2.5em;
font-size: 1.3em;
font-weight: 600;
margin: 24px 0 12px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #e7e9ed;
color: #313236;
}
h2 {
margin-top: 40px;
font-size: 2em;
font-size: 1.2em;
font-weight: 600;
margin: 24px 0 12px 0;
color: #313236;
}
h3 {
margin-top: 35px;
font-size: 1.5em;
margin: 24px 0 12px 0;
font-size: 1.25em;
}
h4 {
margin-top: 30px;
font-size: 1.2em;
margin: 24px 0 12px 0;
font-size: 1.1em;
}
h5 {
margin: 24px 0 12px 0;
font-size: 1em;
}
h6 {
margin: 24px 0 12px 0;
font-size: 0.90em;
}
blockquote {
color: #888;
padding: 8px 21px;
margin: 12px 0 12px;
border-left: 3px solid #e7e9ed;
}
blockquote p {
color: #7f8fa4 !important;
font-size: 15px;
line-height: 1.5;
}
p {
color:#5c5d5e;
margin:6px 0 0 0;
}
table {
@extend .table;
@extend .table-bordered;
margin: 12px 0 12px 0;
color: #5c5d5e;
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 {
font-size: inherit;
font-weight: inherit;
}
ul {
color: #5c5d5e;
}
li {
line-height: 1.5;
line-height: 1.6em;
}
a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] {
......@@ -152,6 +195,7 @@
}
}
@mixin str-truncated($max_width: 82%) {
display: inline-block;
overflow: hidden;
......@@ -183,7 +227,7 @@
&.active {
background: #f9f9f9;
a {
font-weight: bold;
font-weight: 600;
}
}
......@@ -199,6 +243,11 @@
}
}
.pull-right .light .fa-pencil {
top: 20px;
position: relative;
}
@mixin input-big {
height: 36px;
padding: 5px 10px;
......@@ -250,4 +299,4 @@
color: #78a;
}
}
}
}
\ No newline at end of file
......@@ -12,8 +12,8 @@ $sidebar_width: 230px;
$avatar_radius: 50%;
$code_font_size: 13px;
$code_line_height: 1.5;
$border-color: #E7E9ED;
$background-color: #F8FAFC;
$border-color: #dce0e6;
$background-color: #F7F8FA;
$header-height: 58px;
$fixed-layout-width: 1200px;
$gl-gray: #7f8fa4;
......
......@@ -28,6 +28,7 @@
&.s48 { width: 48px; height: 48px; margin-right: 10px; }
&.s60 { width: 60px; height: 60px; margin-right: 12px; }
&.s90 { width: 90px; height: 90px; margin-right: 15px; }
&.s110 { width: 110px; height: 110px; margin-right: 15px; }
&.s140 { width: 140px; height: 140px; margin-right: 20px; }
&.s160 { width: 160px; height: 160px; margin-right: 20px; }
}
......@@ -42,6 +43,7 @@
&.s32 { font-size: 22px; line-height: 32px; }
&.s60 { font-size: 32px; line-height: 60px; }
&.s90 { font-size: 36px; line-height: 90px; }
&.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
&.s140 { font-size: 72px; line-height: 140px; }
&.s160 { font-size: 96px; line-height: 160px; }
}
......@@ -2,11 +2,17 @@
* Headers
*
*/
body {
text-rendering: optimizeLegibility
}
.page-title {
margin-top: 0px;
line-height: 1.5;
font-weight: normal;
margin-bottom: 5px;
line-height: 1.3;
font-size: 1.25em;
font-weight: 600;
margin: 12px 7px 12px 7px;
}
h1, h2, h3, h4, h5, h6 {
......@@ -55,6 +61,7 @@ a > code {
@include md-typography;
word-wrap: break-word;
padding: 7px;
/* Link to current header. */
h1, h2, h3, h4, h5, h6 {
......@@ -83,9 +90,12 @@ a > code {
}
}
ul {
ul,ol {
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 {
.strikethrough {
text-decoration: line-through;
}
}
\ No newline at end of file
......@@ -19,10 +19,10 @@
background: #f7f8fa;
margin: -$gl-padding;
padding: $gl-padding;
padding-top: 40px;
padding: 44px 0 17px 0;
.project-identicon-holder {
margin-bottom: 15px;
margin-bottom: 16px;
.avatar, .identicon {
margin: 0 auto;
......@@ -40,23 +40,26 @@
.project-home-desc {
h1 {
color: #313236;
margin: 0;
margin-bottom: 10px;
margin-bottom: 6px;
font-size: 23px;
font-weight: normal;
}
p {
color: #7f8fa4;
color: #5c5d5e;
}
}
.git-clone-holder {
max-width: 600px;
margin: 20px auto;
max-width: 498px;
.form-control {
background: #FFF;
font-size: 14px;
height: 42px;
margin-left: -2px;
}
}
......@@ -66,30 +69,66 @@
color: inherit;
}
}
.input-group {
display: inline-table;
position: relative;
top: 17px;
margin-bottom: 44px;
}
.project-repo-buttons {
margin-top: $gl-padding;
margin-bottom: 25px;
margin-top: 12px;
margin-bottom: 0px;
.btn {
@extend .btn-info;
@include border-radius(2px);
background-color: #f0f2f5;
border: 1px solid #dce0e5;
text-transform: uppercase;
font-size: 15px;
line-height: 20px;
padding: 8px 14px;
border-radius: 3px;
margin-left: 10px;
color: #313236;
font-size: 13px;
font-weight: 600;
line-height: 18px;
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 {
padding-left: 7px;
display: inline-block;
margin-left: 7px;
}
}
}
}
.split-one {
display: inline-table;
a {
margin: -1px !important;
}
}
.git-clone-holder {
.project-home-dropdown + & {
margin-right: 45px;
......@@ -103,7 +142,7 @@
}
.input-group-addon {
background: #FAFAFA;
background: #f7f8fa;
&.git-protocols {
padding: 0;
......@@ -111,11 +150,157 @@
.input-group-btn:last-child > .btn {
@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 {
.radio {
margin-bottom: 10px;
......@@ -232,15 +417,48 @@ table.table.protected-branches-list tr.no-border {
.project-stats {
text-align: center;
margin-top: 0;
margin-top: 15px;
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 0;
padding-top: 10px;
padding-bottom: 4px;
ul.nav-pills {
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 {
display:inline;
}
......@@ -251,11 +469,11 @@ table.table.protected-branches-list tr.no-border {
}
li.missing a {
color: #bbb;
border: 1px dashed #ccc;
color: #5a6069;
border: 1px dashed #dce0e5;
&:hover {
background-color: #FAFAFA;
background-color: #f0f2f5;
}
}
}
......@@ -273,6 +491,36 @@ pre.light-well {
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
*/
......
......@@ -16,18 +16,19 @@
.project-repo-buttons
= render 'projects/buttons/star'
- 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
= icon('download fw')
Download
.split-one
= render 'projects/buttons/star'
- unless empty_repo
= render 'projects/buttons/fork'
= render "shared/clone_panel"
.split-repo-buttons
- 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/dropdown'
= render "shared/clone_panel"
......@@ -8,6 +8,5 @@
- else
= link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn' do
= icon('code-fork fw')
Fork
%span.count
= @project.forks_count
- if current_user
= link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star', method: :post, remote: true do
= icon('star fw')
- if current_user.starred?(@project)
Unstar
- else
Star
%span.count
= @project.star_count
......@@ -17,6 +13,5 @@
- else
= 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')
Star
%span.count
= @project.star_count
......@@ -24,4 +24,4 @@
.input-group-addon
.visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(project.visibility_level)} project" }
= 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