Merge pull request #938 from hgiesel/editorflex

Small refactor of topbar buttons

qt/aqt/data/web/css/editor.scss

@@ -34,12 +34,28 @@ body {
 }
 
 #topbutsOuter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
     position: sticky;
     top: 0;
     left: 0;
     padding: 2px;
 }
 
+.topbuts > * {
+    margin: 0 1px;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
 .topbut {
     width: 16px;
     height: 16px;
@@ -59,6 +75,7 @@ body {
 
 button.linkb {
     -webkit-appearance: none;
+    margin-bottom: -3px;
     border: 0;
     box-shadow: none;
     padding: 0px 2px;
@@ -79,12 +96,12 @@ button:focus {
 }
 
 button.highlighted {
-    .nightMode #topbutsleft & {
-        background: linear-gradient(0deg, #333333 0%, #434343 100%);
-    }
-
     #topbutsleft & {
         background-color: lightgrey;
+
+        .nightMode & {
+            background: linear-gradient(0deg, #333333 0%, #434343 100%);
+        }
     }
 
     #topbutsright & {

qt/aqt/editor.py

@@ -76,10 +76,8 @@ html { background: %s; }
 </style>
 <div>
     <div id="topbutsOuter">
-        <div id="topbuts" class="clearfix">
         %s
     </div>
-    </div>
     <div id="fields">
     </div>
 </div>
@@ -206,10 +204,10 @@ class Editor:
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
         topbuts = """
-            <div id="topbutsleft" style="float:left;">
+            <div id="topbutsleft" class="topbuts">
                 %(leftbts)s
             </div>
-            <div id="topbutsright" style="float:right;">
+            <div id="topbutsright" class="topbuts">
                 %(rightbts)s
             </div>
         """ % dict(
@@ -330,7 +328,7 @@ class Editor:
             class_ = ""
         if not disables:
             class_ += " perm"
-        return """ <button tabindex=-1
+        return """<button tabindex=-1
                         {id}
                         class="{class_}"
                         type="button"