From 4585f358b923bb9b4ab36a0c3e4682b060e088a7 Mon Sep 17 00:00:00 2001 From: Mayra Cabrera Date: Thu, 2 Nov 2017 15:08:10 -0600 Subject: Add styles for branch & tags boxes - Create a partial for limit exceeded message - Modifies specs to adjust new scenarios --- app/assets/stylesheets/framework/wells.scss | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 5f9756bf58a..556485c2f3b 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -52,6 +52,47 @@ .label.label-gray { background-color: $well-expand-item; } + + .limit-box-branch { + width: 160px; + } + + .limit-box-tag { + width: 125px; + } + + .branches { + display: inline; + } + + .limit-box { + background: $blue-100; + border-radius: 3px; + display: inline-block; + margin-left: 5px; + padding: 1px 1px 0.5px 0; + text-align: center; + vertical-align: bottom; + + &:hover { + background: $blue-200; + } + + .limit-icon { + float: left; + width: 15%; + } + + .limit-message { + background: $white-light; + border-radius: 0 3px 3px 0; + font-family: $regular_font; + font-size: 12px; + float: right; + margin-top: 1px; + width: 85%; + } + } } .light-well { -- cgit v1.2.1 From 7ebf03319881a853405662a390fff13ffb6aefb0 Mon Sep 17 00:00:00 2001 From: Mayra Cabrera Date: Mon, 6 Nov 2017 19:37:07 +0100 Subject: Addresses front & backend comments - Improves CSS files by reusing existing code - Changes logic in views to avoid future problems in translations --- app/assets/stylesheets/framework/wells.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 556485c2f3b..1a5da56cba0 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -67,10 +67,9 @@ .limit-box { background: $blue-100; - border-radius: 3px; + border-radius: $border-radius-default; display: inline-block; - margin-left: 5px; - padding: 1px 1px 0.5px 0; + padding: 1px 1px 0.5px; text-align: center; vertical-align: bottom; -- cgit v1.2.1 From a438231616bd2fad748cc6d68350c4091c26b89b Mon Sep 17 00:00:00 2001 From: Mayra Cabrera Date: Tue, 7 Nov 2017 11:02:03 +0100 Subject: Address discussions on the ME - Fixes thinner right border on the limit box - Adds and 'elsif' on @branches for the scenario in which a commit is not related to a branch - Fixes small details on limit_exceeded_for_message partial --- app/assets/stylesheets/framework/wells.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 1a5da56cba0..175b2ee7152 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -69,7 +69,7 @@ background: $blue-100; border-radius: $border-radius-default; display: inline-block; - padding: 1px 1px 0.5px; + padding: 1px 2px 0.5px; text-align: center; vertical-align: bottom; -- cgit v1.2.1 From 719cdd3a9d7a5dc604a89bb4e63904e4eaeaa290 Mon Sep 17 00:00:00 2001 From: kushalpandya Date: Tue, 7 Nov 2017 16:50:19 +0530 Subject: Update CSS to use flexbox for branch and tag labels --- app/assets/stylesheets/framework/wells.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 175b2ee7152..8e1092c6df8 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -66,30 +66,30 @@ } .limit-box { + display: inline-flex; + align-items: center; + padding: 1px; background: $blue-100; border-radius: $border-radius-default; - display: inline-block; - padding: 1px 2px 0.5px; text-align: center; - vertical-align: bottom; &:hover { background: $blue-200; } .limit-icon { - float: left; width: 15%; } .limit-message { + flex: 1; + height: 16px; + margin-right: 2px; background: $white-light; - border-radius: 0 3px 3px 0; + border-top-right-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; font-family: $regular_font; font-size: 12px; - float: right; - margin-top: 1px; - width: 85%; } } } -- cgit v1.2.1 From bb112f0fe3eed7a2200e30ab766c67c57e0461d6 Mon Sep 17 00:00:00 2001 From: Mayra Cabrera Date: Tue, 7 Nov 2017 13:40:24 +0100 Subject: Ensure enough space between branch links --- app/assets/stylesheets/framework/wells.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 8e1092c6df8..e4703db773d 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -65,6 +65,10 @@ display: inline; } + .branch-link { + margin-bottom: 2px; + } + .limit-box { display: inline-flex; align-items: center; -- cgit v1.2.1 From 28fcf777c84ed5204719247fc5d7499de9305986 Mon Sep 17 00:00:00 2001 From: Mayra Cabrera Date: Tue, 7 Nov 2017 18:33:58 +0100 Subject: Addresses frontend comments. Make small improvements over well.css files --- app/assets/stylesheets/framework/wells.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index e4703db773d..d3c116920ce 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -73,26 +73,26 @@ display: inline-flex; align-items: center; padding: 1px; - background: $blue-100; + background-color: $blue-100; border-radius: $border-radius-default; text-align: center; &:hover { - background: $blue-200; + background-color: $blue-200; } .limit-icon { - width: 15%; + width: 20px; } .limit-message { + @include str-truncated(100%); flex: 1; - height: 16px; + line-height: 16px; margin-right: 2px; - background: $white-light; + background-color: $white-light; border-top-right-radius: $border-radius-default; border-bottom-right-radius: $border-radius-default; - font-family: $regular_font; font-size: 12px; } } -- cgit v1.2.1 From 2acfb6141e5f8f8335a62b7ce46f0383b7763765 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Tue, 7 Nov 2017 12:36:07 -0800 Subject: Simplify design for no tags, branches --- app/assets/stylesheets/framework/wells.scss | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index d3c116920ce..cae10f20b7a 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -53,14 +53,6 @@ background-color: $well-expand-item; } - .limit-box-branch { - width: 160px; - } - - .limit-box-tag { - width: 125px; - } - .branches { display: inline; } @@ -72,27 +64,22 @@ .limit-box { display: inline-flex; align-items: center; - padding: 1px; - background-color: $blue-100; + background-color: $red-100; border-radius: $border-radius-default; text-align: center; &:hover { - background-color: $blue-200; + background-color: $red-200; } .limit-icon { - width: 20px; + margin: 0 8px; } .limit-message { @include str-truncated(100%); - flex: 1; line-height: 16px; - margin-right: 2px; - background-color: $white-light; - border-top-right-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; + margin-right: 8px; font-size: 12px; } } -- cgit v1.2.1 From a613b19baaf075d1566c6247e8c21f2e0fe1487c Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Tue, 7 Nov 2017 12:38:51 -0800 Subject: Change cursor to pointer on hover --- app/assets/stylesheets/framework/wells.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index cae10f20b7a..40020ee6331 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -62,6 +62,7 @@ } .limit-box { + cursor: pointer; display: inline-flex; align-items: center; background-color: $red-100; -- cgit v1.2.1 From fb41187b7ff6154675ab07b75c8be1067efa8f69 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 7 Nov 2017 14:03:01 -0700 Subject: Remove truncate mixin --- app/assets/stylesheets/framework/wells.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 40020ee6331..68824ff8418 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -78,7 +78,6 @@ } .limit-message { - @include str-truncated(100%); line-height: 16px; margin-right: 8px; font-size: 12px; -- cgit v1.2.1