IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Remove the jump effect on run query button

Browse Source 
Caused by the return and loading spinner icons having different widths. Used fa-fw helper class to ensure fixed width on icons. Also, made the spacing between icon and button label slightly smaller, as the rotated level-down icon used as return icon has significantly smaller width compared to the loading spinner and it looked oddly far from the label as compared to timepicker's icon
This commit is contained in:
Dominik Prokop 2019-01-07 15:07:08 +01:00 committed by Dominik Prokop
parent cfd1467a76
commit 96be5fe8a3
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/explore/Explore.tsx
View File

@ -944,7 +944,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
<div className="navbar-buttons relative">
<button className="btn navbar-button navbar-button--primary" onClick={this.onSubmit}>
Run Query{' '}
{loading ? <i className="fa fa-spinner fa-spin run-icon" /> : <i className="fa fa-level-down run-icon" />}
{loading ? <i className="fa fa-spinner fa-fw fa-spin run-icon" /> : <i className="fa fa-level-down fa-fw run-icon" />}
</button>
</div>
</div>

2
public/sass/pages/_explore.scss
View File

@ -160,7 +160,7 @@
}
.run-icon {
margin-left: 0.5em;
margin-left: 0.25em;
transform: rotate(90deg);
}