diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index afa32402be8d98878ebfcb816ce45d1a5bd4a38c..83896cc5461d65d317ef85cf163dcb11c5ba6b2b 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -148,17 +148,17 @@ export default class Workplace extends PureComponent {
);
- const pageHeaderExtra = (
-
-
+ const extraContent = (
+
+
-
+
-
+
@@ -168,7 +168,7 @@ export default class Workplace extends PureComponent {
return (
diff --git a/src/routes/Dashboard/Workplace.less b/src/routes/Dashboard/Workplace.less
index 12c4d8150412876812db8c0b918fae14a844bccc..4c8752927e40435003aa0e3944e70ae8f3162801 100644
--- a/src/routes/Dashboard/Workplace.less
+++ b/src/routes/Dashboard/Workplace.less
@@ -40,25 +40,26 @@
}
}
-.pageHeaderExtra {
+.extraContent {
.clearfix();
float: right;
- & > div {
+ white-space: nowrap;
+ .statItem {
padding: 0 32px;
position: relative;
- float: left;
- & > p:first-child {
+ display: inline-block;
+ > p:first-child {
color: @text-color-secondary;
font-size: @font-size-base;
line-height: 22px;
margin-bottom: 4px;
}
- & > p {
+ > p {
color: @heading-color;
font-size: 30px;
line-height: 38px;
margin: 0;
- & > span {
+ > span {
color: @text-color-secondary;
font-size: 20px;
}
@@ -72,11 +73,11 @@
height: 40px;
content: '';
}
- }
- & > div:last-child {
- padding-right: 0;
- &:after {
- display: none;
+ &:last-child {
+ padding-right: 0;
+ &:after {
+ display: none;
+ }
}
}
}
@@ -163,12 +164,6 @@
color: @disabled-color;
}
-@media screen and (min-width: @screen-xl) {
- .pageHeaderExtra {
- min-width: 345px;
- }
-}
-
@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
.activeCard {
margin-bottom: 24px;
@@ -176,9 +171,9 @@
.members {
margin-bottom: 0;
}
- .pageHeaderExtra {
+ .extraContent {
margin-left: -44px;
- & > div {
+ .statItem {
padding: 0 16px;
}
}
@@ -191,10 +186,10 @@
.members {
margin-bottom: 0;
}
- .pageHeaderExtra {
+ .extraContent {
float: none;
margin-right: 0;
- & > div {
+ .statItem {
padding: 0 16px;
text-align: left;
&:after {
@@ -205,7 +200,7 @@
}
@media screen and (max-width: @screen-md) {
- .pageHeaderExtra {
+ .extraContent {
margin-left: -16px;
}
.projectList {
@@ -222,8 +217,8 @@
margin-left: 0;
}
}
- .pageHeaderExtra {
- & > div {
+ .extraContent {
+ .statItem {
float: none;
}
}