From e52f0721d8e29e084cc9edb3b475f45a69e24024 Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 02:09:34 +0000 Subject: Add badge link and adapt visual style to badges --- app/assets/stylesheets/framework/header.scss | 15 +++++++++++++++ app/views/layouts/header/_default.html.haml | 5 +++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index a6179e2a96e..9d6e77aa993 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -85,6 +85,21 @@ padding: 2px 8px; margin: 5px 2px 5px -8px; border-radius: $border-radius-default; + &.js-canary-badge { + padding: 0; + font-size: 12px; + border-radius: 100px; + margin-top: 6px; + &:hover, &:active, &:focus { + background-color: #1aaa55; + } + span { + line-height: 15px; + &:hover { + text-decoration: none; + } + } + } } .project-item-select { diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 319d0307f78..bcff69fc3cf 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -17,8 +17,9 @@ - if logo_text.present? %span.logo-text.d-none.d-lg-block.prepend-left-8 = logo_text - %span.js-canary-badge.badge.badge-pill.green-badge.align-self-center - = _('Next') + = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge badge badge-pill green-badge align-self-center', target: :_blank do + %span.badge.color-label.has-tooltip + = _('Next') - if current_user = render "layouts/nav/dashboard" -- cgit v1.2.3 From 8a2c3bc4adf50c78ca3de461e37d171794a10439 Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 02:35:20 +0000 Subject: Fix new lines --- app/assets/stylesheets/framework/header.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 9d6e77aa993..69e9b1d2cc4 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -85,16 +85,22 @@ padding: 2px 8px; margin: 5px 2px 5px -8px; border-radius: $border-radius-default; + &.js-canary-badge { padding: 0; font-size: 12px; border-radius: 100px; margin-top: 6px; - &:hover, &:active, &:focus { + + &:hover, + &:active, + &:focus { background-color: #1aaa55; } + span { line-height: 15px; + &:hover { text-decoration: none; } -- cgit v1.2.3 From a87e72c0bed37a669f812a752b6033e9f53262df Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 03:04:08 +0000 Subject: Remove whitespace --- app/assets/stylesheets/framework/header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 69e9b1d2cc4..127f42d22c9 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -92,8 +92,8 @@ border-radius: 100px; margin-top: 6px; - &:hover, - &:active, + &:hover, + &:active, &:focus { background-color: #1aaa55; } -- cgit v1.2.3 From a0c4c12102d875320abc519de4683b6a6148c2f7 Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 03:30:19 +0000 Subject: Remove trailing whitespaces --- app/assets/stylesheets/framework/header.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 127f42d22c9..d7b56670140 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -95,15 +95,14 @@ &:hover, &:active, &:focus { - background-color: #1aaa55; + background-color: $green-500; } span { line-height: 15px; - - &:hover { + } + span:hover { text-decoration: none; - } } } } -- cgit v1.2.3 From 0619e111a450722ea182a1373aa57604bedca2af Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 04:19:05 +0000 Subject: Adapt code to style guidelines --- app/assets/stylesheets/framework/header.scss | 14 +++++++------- app/views/layouts/header/_default.html.haml | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index d7b56670140..12b5251291b 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -85,23 +85,23 @@ padding: 2px 8px; margin: 5px 2px 5px -8px; border-radius: $border-radius-default; - - &.js-canary-badge { - padding: 0; + + &.badge { font-size: 12px; border-radius: 100px; margin-top: 6px; - + &:hover, &:active, &:focus { background-color: $green-500; } - - span { + + .color-label { line-height: 15px; } - span:hover { + + .color-label:hover { text-decoration: none; } } diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index bcff69fc3cf..a0c375c2379 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -17,8 +17,8 @@ - if logo_text.present? %span.logo-text.d-none.d-lg-block.prepend-left-8 = logo_text - = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge badge badge-pill green-badge align-self-center', target: :_blank do - %span.badge.color-label.has-tooltip + = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge badge badge-pill green-badge align-self-center p-0', target: :_blank do + %span.color-label.has-tooltip = _('Next') - if current_user -- cgit v1.2.3 From 596b01030ebe5d83815f1e8f3a67a70a50a9898d Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 05:04:17 +0000 Subject: Refactor badge with link layout --- app/assets/stylesheets/framework/header.scss | 36 +++++++++++++--------------- app/views/layouts/header/_default.html.haml | 4 ++-- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 12b5251291b..c8b05e59ee1 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -85,26 +85,6 @@ padding: 2px 8px; margin: 5px 2px 5px -8px; border-radius: $border-radius-default; - - &.badge { - font-size: 12px; - border-radius: 100px; - margin-top: 6px; - - &:hover, - &:active, - &:focus { - background-color: $green-500; - } - - .color-label { - line-height: 15px; - } - - .color-label:hover { - text-decoration: none; - } - } } .project-item-select { @@ -492,6 +472,22 @@ background-color: $blue-500; } } + + .canary-badge { + .badge { + font-size: 12px; + line-height: 16px; + padding: 0 8px; + } + + &:hover { + text-decoration: none; + + .badge { + text-decoration: none; + } + } + } } @include media-breakpoint-down(xs) { diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index a0c375c2379..563f6038c86 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -17,8 +17,8 @@ - if logo_text.present? %span.logo-text.d-none.d-lg-block.prepend-left-8 = logo_text - = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge badge badge-pill green-badge align-self-center p-0', target: :_blank do - %span.color-label.has-tooltip + = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge canary-badge bg-transparent', target: :_blank do + %span.color-label.has-tooltip.badge.badge-pill.green-badge = _('Next') - if current_user -- cgit v1.2.3 From 24845799009bf25f367b8f4bb26bd3b094b37112 Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 15:47:09 +0000 Subject: Change sizes from px to variables --- app/assets/stylesheets/framework/header.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index c8b05e59ee1..f2b433f7c42 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -475,9 +475,9 @@ .canary-badge { .badge { - font-size: 12px; - line-height: 16px; - padding: 0 8px; + font-size: $gl-font-size-small; + line-height: $gl-line-height; + padding: 0 $grid-size; } &:hover { @@ -486,7 +486,7 @@ .badge { text-decoration: none; } - } + } } } -- cgit v1.2.3 From 14687bb95e799ce24aa48b1a88b3a8816d51e6a5 Mon Sep 17 00:00:00 2001 From: Marcel van Remmerden Date: Tue, 7 May 2019 16:29:19 +0000 Subject: Resolve merge conflict --- app/views/layouts/header/_default.html.haml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 563f6038c86..1c1d1ea4645 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -17,9 +17,10 @@ - if logo_text.present? %span.logo-text.d-none.d-lg-block.prepend-left-8 = logo_text - = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge canary-badge bg-transparent', target: :_blank do - %span.color-label.has-tooltip.badge.badge-pill.green-badge - = _('Next') + - if Gitlab.com? + = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge canary-badge bg-transparent', target: :_blank do + %span.color-label.has-tooltip.badge.badge-pill.green-badge + = _('Next') - if current_user = render "layouts/nav/dashboard" -- cgit v1.2.3