-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Dashboard and Alert headers with the Query one #4710
Conversation
.alert-actions { | ||
flex-grow: 1; | ||
display: flex; | ||
justify-content: flex-end; | ||
align-items: center; | ||
margin-right: -15px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From this file I just moved this to Title.less
, the rest is on Prettier.
.page-header--query { | ||
.page-title { | ||
display: block; | ||
} | ||
|
||
.tags-control a { | ||
opacity: 0; | ||
transition: opacity 0.2s ease-in-out; | ||
} | ||
|
||
&:hover { | ||
.tags-control a { | ||
opacity: 1; | ||
} | ||
} | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not used anymore.
// Responsive fixes | ||
@media (max-width: 767px) { | ||
.query-page-wrapper { | ||
h3 { | ||
font-size: 18px; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved to QueryPageHeader.less
{showShareButton && ( | ||
<Tooltip title="Dashboard Sharing Options"> | ||
<Button | ||
className="icon-button m-l-5" | ||
type={buttonType(dashboard.publicAccessEnabled)} | ||
onClick={showShareDashboardDialog} | ||
data-test="OpenShareForm"> | ||
<i className="zmdi zmdi-share" /> | ||
</Button> | ||
</Tooltip> | ||
)} | ||
{showMoreOptionsButton && <DashboardMoreOptionsButton dashboardOptions={dashboardOptions} />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now that the controls are wrapped for mobiles, I'm not hiding those buttons anymore (I saw no reason to keep doing it)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's continue hiding the full screen button as it's meaningless on mobile.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That one is still hidden, only the Share and the Dropdown were changes.
margin: 0; | ||
|
||
@media (max-width: 767px) { | ||
font-size: 18px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Copied this behavior from the Query Page to have more room for tags.
@@ -2,7 +2,7 @@ | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: stretch; | |||
margin: -5px 0; | |||
margin-bottom: -5px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change keeps a margin on the top of the Query Page (to be more consistent with other pages).
What type of PR is this? (check all applicable)
Description
Following #4694, this PR updates Dashboard and Alert headers to behave similar to the Query Page one (e.g: wrapping the controls)
Related Tickets & Documents
#2796
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Dashboard Page
Alert Page