Просмотр исходного кода

Remove the jump effect on run query button

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
Dominik Prokop 7 лет назад
Родитель
Сommit
96be5fe8a3
2 измененных файлов с 2 добавлено и 2 удалено
  1. 1 1
      public/app/features/explore/Explore.tsx
  2. 1 1
      public/sass/pages/_explore.scss

+ 1 - 1
public/app/features/explore/Explore.tsx

@@ -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>

+ 1 - 1
public/sass/pages/_explore.scss

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