diff options
| -rw-r--r-- | app/assets/stylesheets/base/mixins.scss | 81 | ||||
| -rw-r--r-- | app/assets/stylesheets/base/variables.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/avatar.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/typography.scss | 22 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 296 | ||||
| -rw-r--r-- | app/views/projects/_home_panel.html.haml | 29 | ||||
| -rw-r--r-- | app/views/projects/buttons/_fork.html.haml | 1 | ||||
| -rw-r--r-- | app/views/projects/buttons/_star.html.haml | 5 | ||||
| -rw-r--r-- | app/views/shared/_clone_panel.html.haml | 2 |
9 files changed, 373 insertions, 69 deletions
diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss index a2f6c3e21f4..cdebe498914 100644 --- a/app/assets/stylesheets/base/mixins.scss +++ b/app/assets/stylesheets/base/mixins.scss @@ -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 diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index 2fc7bf1720a..f6bdea9a897 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -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; diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss index 221cb6a04a5..36e582d4854 100644 --- a/app/assets/stylesheets/generic/avatar.scss +++ b/app/assets/stylesheets/generic/avatar.scss @@ -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; } } diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss index d5f0d86a307..bfb559c294b 100644 --- a/app/assets/stylesheets/generic/typography.scss +++ b/app/assets/stylesheets/generic/typography.scss @@ -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 diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index a986fafff07..621ba2fe2c8 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -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 */ diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index 6e53f55b0ab..8c0980369fd 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -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" + diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml index 854c154824d..8f2f631eb7d 100644 --- a/app/views/projects/buttons/_fork.html.haml +++ b/app/views/projects/buttons/_fork.html.haml @@ -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 diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml index 5d7df5ae099..3501dddefbe 100644 --- a/app/views/projects/buttons/_star.html.haml +++ b/app/views/projects/buttons/_star.html.haml @@ -1,10 +1,6 @@ - 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 diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml index 2cd422e772a..b23b2f0d5eb 100644 --- a/app/views/shared/_clone_panel.html.haml +++ b/app/views/shared/_clone_panel.html.haml @@ -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 + |