diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-12-07 17:11:42 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-12-07 17:11:42 +0300 |
commit | 75496059a1c36c2139bf29fa20fd4370c511fdd1 (patch) | |
tree | 5280f0a090b8bc445e03a7c6e74ff06d6d4edbce /app/assets/stylesheets/pages/projects.scss | |
parent | 61d91f640b94d6e273dee502b77e723b599ab86c (diff) |
Further design iteration on project overview
Continues the iteration on the project overview UI:
- moved star, fork and new clone button
(copy SSH/HTTPS URLs) to top right,
made them smaller
- avatar is now larger (64px)
- 'Request access' is now a link instead
of a button
- overview comes before the description +
changed styling and added icons
- description font-size is now 16px (large-paragraph)
- quick links to files are moved downwards
below the commit/pipeline info
- margins changed to group content into
4 groups to clean up the interface
- visibility info reduced to icon-only and
moved to the right of the title
Diffstat (limited to 'app/assets/stylesheets/pages/projects.scss')
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 187 |
1 files changed, 138 insertions, 49 deletions
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 6cc21072acd..278800aba95 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -144,7 +144,6 @@ .group-home-panel { padding-top: 24px; padding-bottom: 24px; - border-bottom: 1px solid $border-color; .group-avatar { float: none; @@ -155,7 +154,6 @@ } } - .project-title, .group-title { margin-top: 10px; margin-bottom: 10px; @@ -195,25 +193,69 @@ } .project-home-panel { - padding-top: $gl-padding-8; - padding-bottom: $gl-padding-24; - - .project-title-row { - margin-right: $gl-padding-8; - } + padding-top: $gl-padding; + padding-bottom: $gl-padding; .project-avatar { width: $project-title-row-height; height: $project-title-row-height; flex-shrink: 0; flex-basis: $project-title-row-height; - margin: 0 $gl-padding-8 0 0; + margin: 0 $gl-padding 0 0; } .project-title { + margin-top: 8px; + margin-bottom: 5px; font-size: 20px; - line-height: $project-title-row-height; + line-height: $gl-line-height-24; font-weight: bold; + + .icon { + font-size: $gl-font-size-large; + } + + .project-visibility { + color: $gl-text-color-secondary; + } + + .project-tag-list { + font-size: $gl-font-size; + font-weight: $gl-font-weight-normal; + + .icon { + position: relative; + top: 3px; + margin-right: $gl-padding-4; + } + } + } + + .project-title-row { + @include media-breakpoint-down(sm) { + .project-avatar { + width: $project-avatar-mobile-size; + height: $project-avatar-mobile-size; + flex-basis: $project-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .project-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + + .project-tag-list, + .project-metadata { + font-size: $gl-font-size-small; + } + } } .project-metadata { @@ -222,16 +264,6 @@ line-height: $gl-btn-line-height; color: $gl-text-color-secondary; - .icon { - margin-right: $gl-padding-4; - font-size: 16px; - } - - .project-visibility, - .project-license, - .project-tag-list { - margin-right: $gl-padding-8; - } .project-license { .btn { @@ -240,12 +272,22 @@ } } - .project-tag-list, - .project-license { - .icon { - position: relative; - top: 2px; - } + .access-request-link, + .project-tag-list { + padding-left: $gl-padding-8; + border-left: 1px solid $gl-text-color-secondary; + } + } + + .project-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } + + .notifications-btn { + .fa-bell { + margin-right: 0; } } } @@ -298,14 +340,6 @@ vertical-align: top; margin-top: $gl-padding; - .count-badge { - height: $input-height; - - .icon { - top: -1px; - } - } - .count-badge-count, .count-badge-button { border: 1px solid $border-color; @@ -319,29 +353,25 @@ .count-badge-count { padding: 0 12px; - border-right: 0; - border-radius: $border-radius-base 0 0 $border-radius-base; background: $gray-light; + border-radius: 0 $border-radius-base $border-radius-base 0; } .count-badge-button { - border-radius: 0 $border-radius-base $border-radius-base 0; + border-right: 0; + border-radius: $border-radius-base 0 0 $border-radius-base; } } .project-clone-holder { display: inline-block; - margin: $gl-padding $gl-padding-8 0 0; + margin: $gl-padding 0 0; input { height: $input-height; } } - .clone-dropdown-btn { - background-color: $white-light; - } - .clone-options-dropdown { min-width: 240px; @@ -355,6 +385,31 @@ } } +.project-repo-buttons { + .icon { + top: 0; + } + + .count-badge, + .btn-xs { + height: 24px; + } + + .dropdown-toggle, + .clone-dropdown-btn { + .fa { + color: unset; + } + } + + .btn { + .notifications-icon { + top: 1px; + margin-right: 0; + } + } +} + .split-one { display: inline-table; margin-right: 12px; @@ -715,10 +770,10 @@ border-bottom: 1px solid $border-color; } -.project-stats { +.project-stats, +.project-buttons { font-size: 0; text-align: center; - border-bottom: 1px solid $border-color; .scrolling-tabs-container { .scrolling-tabs { @@ -786,23 +841,43 @@ font-size: $gl-font-size; line-height: $gl-btn-line-height; color: $gl-text-color-secondary; - white-space: nowrap; + white-space: pre-wrap; } .stat-link { border-bottom: 0; + color: $black; &:hover, &:focus { - color: $gl-text-color; text-decoration: underline; border-bottom: 0; } + + .project-stat-value { + color: $gl-text-color; + } + + .icon { + color: $gl-text-color-secondary; + } + + .add-license-link { + &, + .icon { + color: $blue-600; + } + } } .btn { - padding: $gl-btn-vert-padding $gl-btn-horz-padding; + margin-top: $gl-padding; + padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; + + .icon { + top: 0; + } } .btn-missing { @@ -811,6 +886,13 @@ } } +.project-buttons { + .stat-text { + @extend .btn; + @extend .btn-default; + } +} + .repository-languages-bar { height: 8px; margin-bottom: $gl-padding-8; @@ -934,8 +1016,6 @@ pre.light-well { } .git-clone-holder { - width: 320px; - .btn-clipboard { border: 1px solid $border-color; } @@ -958,6 +1038,15 @@ pre.light-well { } } +.git-clone-holder, +.mobile-git-clone { + .btn { + .icon { + fill: $white; + } + } +} + .cannot-be-merged, .cannot-be-merged:hover { color: $red-500; |