summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortauriedavis <taurie@gitlab.com>2017-11-03 15:55:17 -0700
committertauriedavis <taurie@gitlab.com>2017-11-03 15:55:17 -0700
commit609d49bcf88310507e39885add138121a6536001 (patch)
tree2909b405942f8a3f7967f908a66343b35cc98750
parentae470ae2b52491c283639c4c3006145909c7c27b (diff)
downloadgitlab-ce-609d49bcf88310507e39885add138121a6536001.tar.gz
34768 Fix problem with issuable header wrapping when content is too long34768-fix-issuable-header-wrapping
-rw-r--r--app/assets/stylesheets/framework/avatar.scss3
-rw-r--r--app/assets/stylesheets/pages/detail_page.scss1
-rw-r--r--app/assets/stylesheets/pages/issuable.scss12
-rw-r--r--app/assets/stylesheets/pages/issues.scss19
-rw-r--r--changelogs/unreleased/34768-fix-issuable-header-wrapping.yml5
5 files changed, 32 insertions, 8 deletions
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index f1aedc227f3..a1755e32142 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -42,8 +42,7 @@
&.avatar-inline {
float: none;
display: inline-block;
- margin-left: 4px;
- margin-bottom: 2px;
+ margin-left: 2px;
flex-shrink: 0;
-webkit-flex-shrink: 0;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 3d9eff35583..538e50ee306 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -3,6 +3,7 @@
border-bottom: 1px solid $border-color;
color: $gl-text-color;
line-height: 34px;
+ display: flex;
a {
color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7059a4cfe85..0df16da3c86 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -613,6 +613,8 @@
float: none;
display: inline-block;
margin-top: 0;
+ height: auto;
+ align-self: center;
@media (max-width: $screen-xs-max) {
position: absolute;
@@ -626,6 +628,8 @@
padding-left: 45px;
padding-right: 45px;
line-height: 35px;
+ display: flex;
+ flex-grow: 1;
@media (min-width: $screen-sm-min) {
float: left;
@@ -637,11 +641,12 @@
.issuable-actions {
@include new-style-dropdown;
- padding-top: 10px;
+ align-self: center;
+ flex-shrink: 0;
+ flex: 0 0 auto;
@media (min-width: $screen-sm-min) {
float: right;
- padding-top: 0;
}
}
@@ -655,8 +660,9 @@
.issuable-meta {
display: inline-block;
- line-height: 18px;
font-size: 14px;
+ line-height: 24px;
+ align-self: center;
}
.js-issuable-selector-wrap {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index e8ca5cedaee..8bb68ad2425 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -134,11 +134,24 @@ ul.related-merge-requests > li {
}
@media (max-width: $screen-xs-max) {
- .issue-btn-group {
- width: 100%;
+ .detail-page-header,
+ .issuable-header {
+ display: block;
+
+ .issuable-meta {
+ line-height: 18px;
+ }
+ }
- .btn {
+ .issuable-actions {
+ margin-top: 10px;
+
+ .issue-btn-group {
width: 100%;
+
+ .btn {
+ width: 100%;
+ }
}
}
}
diff --git a/changelogs/unreleased/34768-fix-issuable-header-wrapping.yml b/changelogs/unreleased/34768-fix-issuable-header-wrapping.yml
new file mode 100644
index 00000000000..49195bd4168
--- /dev/null
+++ b/changelogs/unreleased/34768-fix-issuable-header-wrapping.yml
@@ -0,0 +1,5 @@
+---
+title: Fix problem with issuable header wrapping when content is too long
+merge_request:
+author:
+type: fixed