Use flexbox for toolbars

AlchemyCMS · Dec 6, 2023 · c38116e · c38116e
1 parent daffbe6
commit c38116e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -25,11 +25,6 @@
   }
 }
 
-div#image_assign_filter_and_image_sizing {
-  width: 100%;
-  height: 40px;
-}
-
 .selected_item_tools {
   margin: -2 * $default-padding;
   border-bottom: 1px solid $default-border-color;

diff --git a/app/assets/stylesheets/alchemy/toolbar.scss b/app/assets/stylesheets/alchemy/toolbar.scss
@@ -1,4 +1,7 @@
 #toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2 * $default-padding;
   z-index: 10;
   @extend %gradiated-toolbar;
   margin-right: 0px;
@@ -22,24 +25,25 @@
 
 .toolbar_buttons {
   display: flex;
-  margin-right: 8px;
+  flex-grow: 1;
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: visible;
-  max-width: calc(100vw - #{$collapsed-main-menu-width + 65px});
   -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $medium-screen-break-point) {
     overflow: visible;
   }
 
   &.right {
-    position: absolute;
-    right: -8px;
-    top: 0;
-    margin-left: 8px;
+    flex-grow: 0;
     padding: 8px 0;
-    background-color: $toolbar-bg-color;
+
+    .button_with_label {
+      &:last-child {
+        margin-right: $default-margin;
+      }
+    }
 
     label {
       left: auto;

diff --git a/app/views/alchemy/admin/attachments/_archive_overlay.html.erb b/app/views/alchemy/admin/attachments/_archive_overlay.html.erb
@@ -1,14 +1,16 @@
 <div id="overlay_toolbar">
-  <% if can? :create, Alchemy::Attachment %>
-    <%= render 'alchemy/admin/uploader/button',
-      object: Alchemy::Attachment.new,
-      dropzone: '#assign_file_list',
-      file_attribute: 'file',
-      in_dialog: true,
-      redirect_url: admin_attachments_path(
-        form_field_id: @form_field_id
-      ) %>
-  <% end %>
+  <div class="toolbar_buttons">
+    <% if can? :create, Alchemy::Attachment %>
+      <%= render 'alchemy/admin/uploader/button',
+        object: Alchemy::Attachment.new,
+        dropzone: '#assign_file_list',
+        file_attribute: 'file',
+        in_dialog: true,
+        redirect_url: admin_attachments_path(
+          form_field_id: @form_field_id
+        ) %>
+    <% end %>
+  </div>
   <%= render 'alchemy/admin/partials/remote_search_form' %>
 </div>
 

diff --git a/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb b/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb
@@ -1,4 +1,4 @@
-<div id="image_assign_filter_and_image_sizing">
+<div class="toolbar_buttons">
   <% if can? :create, Alchemy::Picture %>
     <%= render 'alchemy/admin/uploader/button',
       object: Alchemy::Picture.new,