alchemy_cms 7.0.11 → 7.1.0.pre.b1

data/app/views/alchemy/admin/pages/edit.html.erb

@@ -4,109 +4,98 @@
 
 <% content_for(:toolbar) do %>
 <div class="toolbar_buttons">
-  <div class="button_with_label">
-    <%= form_tag alchemy.unlock_admin_page_path(@page, redirect_to: @layoutpage ? alchemy.admin_layoutpages_path : alchemy.admin_pages_path), id: 'unlock_page_form' do %>
-      <button class="icon_button" title="<%= Alchemy.t(:explain_unlocking) %>" data-alchemy-hotkey="alt+x">
-        <%= render_icon('sign-out-alt', transform: 'flip-horizontal') %>
-      </button>
-      <label><%= Alchemy.t(:unlock_page) %></label>
-    <% end %>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t(:explain_unlocking) %>" placement="top-start">
+      <%= form_tag alchemy.unlock_admin_page_path(@page, redirect_to: @layoutpage ? alchemy.admin_layoutpages_path : alchemy.admin_pages_path), id: 'unlock_page_form' do %>
+        <button class="icon_button" data-alchemy-hotkey="alt+x">
+          <%= render_icon('expand-left') %>
+        </button>
+      <% end %>
+    </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
-  <div class="button_with_label">
-    <%= link_to_dialog(
-      render_icon('info-circle'),
-      alchemy.info_admin_page_path(@page),
-      {
-        title: Alchemy.t(:page_infos),
-        size: '520x320'
-      },
-      {
-        class: 'icon_button',
-        'data-alchemy-hotkey' => 'alt+i'
-      }
-    ) %>
-    <label><%= Alchemy.t(:page_infos) %></label>
-  </div>
-  <div class="button_with_label">
-    <% if @page.layoutpage? %>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t(:page_infos) %>">
       <%= link_to_dialog(
-        render_icon(:cog),
-        alchemy.edit_admin_layoutpage_path(@page),
+        render_icon(:information),
+        alchemy.info_admin_page_path(@page),
         {
-          title: Alchemy.t(:edit_page_properties),
-          size: '450x170'
+          title: Alchemy.t(:page_infos),
+          size: '520x320'
         },
-        class: :icon_button,
-        title: Alchemy.t(:edit_page_properties),
-        'data-alchemy-hotkey' => 'alt+e'
-      ) %>
-    <% else %>
-      <%= link_to_dialog(
-        render_icon(:cog),
-        alchemy.configure_admin_page_path(@page),
         {
-          title: Alchemy.t(:edit_page_properties),
-          size: '450x680'
-        },
-        class: :icon_button,
-        title: Alchemy.t(:edit_page_properties),
-        'data-alchemy-hotkey' => 'alt+e'
+          class: 'icon_button',
+          'data-alchemy-hotkey' => 'alt+i'
+        }
       ) %>
-    <% end %>
-    <label><%= Alchemy.t(:page_properties) %></label>
+    </sl-tooltip>
   </div>
-  <div class="button_with_label">
-    <%= form_tag alchemy.publish_admin_page_path(@page), id: 'publish_page_form' do %>
-      <%= button_tag class: 'icon_button', disabled: cannot?(:publish, @page) do %>
-        <%= render_icon('cloud-upload-alt') %>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t(:edit_page_properties) %>">
+      <% if @page.layoutpage? %>
+        <%= link_to_dialog(
+          render_icon("settings-3"),
+          alchemy.edit_admin_layoutpage_path(@page),
+          {
+            title: Alchemy.t(:page_properties),
+            size: '450x170'
+          },
+          class: :icon_button,
+          'data-alchemy-hotkey' => 'alt+e'
+        ) %>
+      <% else %>
+        <%= link_to_dialog(
+          render_icon("settings-3"),
+          alchemy.configure_admin_page_path(@page),
+          {
+            title: Alchemy.t(:page_properties),
+            size: '450x680'
+          },
+          class: :icon_button,
+          'data-alchemy-hotkey' => 'alt+e'
+        ) %>
       <% end %>
-      <label>
-        <% if @page.language.public? %>
-          <%= Alchemy.t(:explain_publishing) %>
-        <% elsif @page.editable_by?(current_alchemy_user) %>
-          <%= Alchemy.t(:publish_page_language_not_public) %>
-        <% else %>
-          <%= Alchemy.t(:publish_page_not_allowed) %>
+    </sl-tooltip>
+  </div>
+  <div class="toolbar_button">
+    <%= content_tag "sl-tooltip", content: @page.language.public? ? Alchemy.t(:explain_publishing) : @page.editable_by?(current_alchemy_user) ? Alchemy.t(:publish_page_language_not_public) : Alchemy.t(:publish_page_not_allowed) do %>
+      <%= form_tag alchemy.publish_admin_page_path(@page), id: 'publish_page_form' do %>
+        <%= button_tag class: 'icon_button please_wait', disabled: cannot?(:publish, @page) do %>
+          <%= render_icon('upload-cloud-2') %>
         <% end %>
-      </label>
+      <% end %>
     <% end %>
   </div>
   <% unless @page.layoutpage? %>
-    <div class="button_with_label">
+    <div class="toolbar_button">
       <% if @page.public? %>
-        <%= link_to show_page_url(
+        <sl-tooltip content="<%= Alchemy.t("Visit page") %>">
+          <%= link_to show_page_url(
               urlname: @page.urlname,
               locale: prefix_locale? ? @page.language_code : nil,
               host: @page.site.host == "*" ? request.host : @page.site.host,
             ),
-            title: Alchemy.t("Visit page"),
             data: { turbo: false },
             target: "_blank",
             class: 'icon_button' do %>
-          <%= render_icon('external-link-alt') %>
-        <% end %>
-        <label><%= Alchemy.t("Visit page") %></label>
+            <%= render_icon('external-link') %>
+          <% end %>
+        </sl-tooltip>
       <% else %>
-        <%= content_tag "a",
-            title: Alchemy.t(:cannot_visit_unpublic_page),
-            class: 'disabled icon_button' do %>
-          <%= render_icon('external-link-alt') %>
-        <% end %>
-        <label><%= Alchemy.t(:cannot_visit_unpublic_page) %></label>
+        <sl-tooltip content="<%= Alchemy.t(:cannot_visit_unpublic_page) %>">
+          <%= content_tag "a", class: "disabled icon_button" do %>
+            <%= render_icon('external-link') %>
+          <% end %>
+        </sl-tooltip>
       <% end %>
     </div>
   <% end %>
-  <% if @page.has_hint? %>
-    <div class="toolbar_spacer"></div>
-    <%= render_hint_for(@page) %>
-  <% end %>
   <div class="toolbar_spacer"></div>
   <div class="select_with_label">
     <label><%= Alchemy.t(:preview_size) %></label>
     <%= select_tag 'preview_size',
       preview_sizes_for_select,
-      class: 'alchemy_selectbox medium' %>
+      class: 'medium', is: 'alchemy-select' %>
   </div>
   <div class="toolbar_spacer"></div>
   <% if @preview_urls.many? %>
@@ -114,25 +103,26 @@
       <label><%= Alchemy.t(:preview_url) %></label>
       <%= select_tag 'preview_url',
         options_for_select(@preview_urls),
-        class: 'alchemy_selectbox large' %>
+        class: 'large', is: 'alchemy-select' %>
     </div>
   <% end %>
-  <div class="button_with_label">
-    <%= link_to render_icon(:redo), nil, {
-      title: Alchemy.t('Reload Preview'),
-      class: 'icon_button',
-      id: 'reload_preview_button'
-    } %>
-    <label><%= Alchemy.t('Reload Preview') %></label>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t('Reload Preview') %>">
+      <%= link_to render_icon(:refresh), nil, {
+        class: 'icon_button',
+        id: 'reload_preview_button'
+      } %>
+    </sl-tooltip>
   </div>
 </div>
 <div class="toolbar_buttons right">
-  <div class="button_with_label" id="element_window_button">
-    <%= link_to render_icon(:bars), nil, {
-      title: Alchemy.t(:hide_elements),
-      class: 'icon_button'
-    } %>
-    <label><%= Alchemy.t(:hide_elements) %></label>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t(:hide_elements) %>">
+      <%= link_to render_icon("menu-unfold"), nil, {
+        id: "element_window_button",
+        class: "icon_button"
+      } %>
+    </sl-tooltip>
   </div>
 </div>
 <% end %>
@@ -164,10 +154,10 @@
       },
       toolbarButtons: [
         {
-          title: '<%= Alchemy.t("New Element") %>',
           label: '<%= Alchemy.t("New Element") %>',
           hotkey: 'alt+n',
-          iconClass: 'plus',
+          iconClass: 'add-line',
+          align: 'start',
           onClick: function() {
             Alchemy.openDialog('<%= alchemy.new_admin_element_path(page_version_id: @page_version.id) %>', {
               title: '<%= Alchemy.t("New Element") %>',
@@ -176,9 +166,8 @@
           }
         },
         {
-          title: '<%= Alchemy.t("Clipboard") %>',
           label: '<%= Alchemy.t("Show clipboard") %>',
-          iconClass: '<%= clipboard_empty?("elements") ? "clipboard" : "paste" %>',
+          iconClass: '<%= clipboard_empty?("elements") ? "clipboard-line" : "clipboard-fill" %>',
           buttonId: 'clipboard_button',
           onClick: function() {
             Alchemy.openDialog('<%= alchemy.admin_clipboard_path(remarkable_type: "elements") %>', {
@@ -189,18 +178,6 @@
         }
       ]
     }, function() {
-      Alchemy.ImageLoader('#element_area');
-      Alchemy.SortableElements(<%= @page.id %>, '<%= form_authenticity_token %>');
-      Alchemy.ElementEditors.init();
-      Alchemy.SelectBox('.element-editor');
-      Alchemy.Tinymce.init(<%= @page.richtext_ingredients_ids.to_json %>);
-      $('#fixed-elements').tabs().tabs('paging', {
-        follow: true,
-        followOnSelect: true,
-        prevButton: '<i class="fas fa-angle-double-left"></i>',
-        nextButton: '<i class="fas fa-angle-double-right"></i>'
-      });
-      Alchemy.ElementDirtyObserver('#element_area');
       if (window.location.hash) {
         $(window.location.hash).trigger('FocusElementEditor.Alchemy');
       }

data/app/views/alchemy/admin/pages/info.html.erb

@@ -1,6 +1,6 @@
 <div class="resource_info">
   <% if @page.has_hint? %>
-  <%= render_message do %>
+  <%= render_message(:hint) do %>
     <%= @page.hint %>
   <% end %>
   <% end %>
@@ -20,13 +20,28 @@
   <div class="value">
     <label><%= Alchemy.t(:page_status) %></label>
     <p>
+      <% if @page.locked? %>
+        <span class="page_status">
+          <%= render_icon(:edit, size: "1x") %>
+          <%= Alchemy.t(:currently_edited_by) %>
+          <%= @page.locker_name %>
+        </span>
+      <% end %>
       <span class="page_status">
-        <%= render_icon(:compass, transform: 'shrink-2', class: @page.public? ? nil : 'disabled') %>
-        <%= @page.status_title(:public) %>
+        <% if @page.public? %>
+          <%= render_icon(:cloud, size: "1x") %>
+        <% else %>
+          <%= render_icon("cloud-off", size: "1x") %>
+        <% end %>
+        <%= @page.status_message(:public) %>
       </span>
       <span class="page_status">
-        <%= render_icon(:lock, transform: 'shrink-2', class: @page.restricted? ? nil : 'disabled') %>
-        <%= @page.status_title(:restricted) %>
+        <% if @page.restricted? %>
+          <%= render_icon(:lock, size: "1x") %>
+        <% else %>
+          <%= render_icon("lock-unlock", size: "1x") %>
+        <% end %>
+        <%= @page.status_message(:restricted) %>
       </span>
     </p>
   </div>
@@ -38,10 +53,4 @@
     <label><%= Alchemy.t(:page_was_updated) %></label>
     <p><%= Alchemy.t(:from_at) % {by: @page.updater_name, at: l(@page.updated_at, format: :'alchemy.page_status')} %></p>
   </div>
-  <% if @page.locked? %>
-  <div class="value">
-    <label><%= Alchemy.t(:currently_edited_by) %></label>
-    <p><%= @page.locker_name %></p>
-  </div>
-  <% end %>
 </div>

data/app/views/alchemy/admin/pages/link.html.erb

@@ -1,20 +1,26 @@
-<div id="overlay_tabs">
-  <ul>
-    <li><a href="#overlay_tab_internal_link"><%= Alchemy.t('link_overlay_tab_label.internal') %></a></li>
-    <li><a href="#overlay_tab_anchor_link"><%= Alchemy.t('link_overlay_tab_label.anchor') %></a></li>
-    <li><a href="#overlay_tab_external_link"><%= Alchemy.t('link_overlay_tab_label.external') %></a></li>
-    <li><a href="#overlay_tab_file_link"><%= Alchemy.t('link_overlay_tab_label.file') %></a></li>
-  </ul>
-  <div id="overlay_tab_internal_link">
+<sl-tab-group id="overlay_tabs">
+  <sl-tab slot="nav" panel="overlay_tab_internal_link">
+    <%= Alchemy.t('link_overlay_tab_label.internal') %>
+  </sl-tab>
+  <sl-tab slot="nav" panel="overlay_tab_anchor_link">
+    <%= Alchemy.t('link_overlay_tab_label.anchor') %>
+  </sl-tab>
+  <sl-tab slot="nav" panel="overlay_tab_external_link">
+    <%= Alchemy.t('link_overlay_tab_label.external') %>
+  </sl-tab>
+  <sl-tab slot="nav" panel="overlay_tab_file_link">
+    <%= Alchemy.t('link_overlay_tab_label.file') %>
+  </sl-tab>
+  <sl-tab-panel name="overlay_tab_internal_link">
     <%= render partial: 'internal_link' %>
-  </div>
-  <div id="overlay_tab_anchor_link">
+  </sl-tab-panel>
+  <sl-tab-panel name="overlay_tab_anchor_link">
     <%= render partial: 'anchor_link' %>
-  </div>
-  <div id="overlay_tab_external_link">
+  </sl-tab-panel>
+  <sl-tab-panel name="overlay_tab_external_link">
     <%= render partial: 'external_link' %>
-  </div>
-  <div id="overlay_tab_file_link">
+  </sl-tab-panel>
+  <sl-tab-panel name="overlay_tab_file_link">
     <%= render partial: 'file_link' %>
-  </div>
-</div>
+  </sl-tab-panel>
+</sl-tab-group>

data/app/views/alchemy/admin/pages/new.html.erb

@@ -1,26 +1,24 @@
 <%- if @clipboard_items.blank? -%>
   <%= render 'new_page_form' %>
 <%- else -%>
-<div id="overlay_tabs">
-  <ul>
-    <li><a href="#create_page_tab"><%= Alchemy.t('New page') %></a></li>
-    <li><a href="#paste_page_tab"><%= Alchemy.t('Paste from clipboard') %></a></li>
-  </ul>
-  <div id="create_page_tab">
+<sl-tab-group id="overlay_tabs">
+  <sl-tab slot="nav" panel="create_page_tab"><%= Alchemy.t('New page') %></sl-tab>
+  <sl-tab slot="nav" panel="paste_page_tab"><%= Alchemy.t('Paste from clipboard') %></sl-tab>
+  <sl-tab-panel name="create_page_tab">
     <%= render 'new_page_form' %>
-  </div>
-  <div id="paste_page_tab">
+  </sl-tab-panel>
+  <sl-tab-panel name="paste_page_tab">
     <%= alchemy_form_for [:admin, @page] do |f| %>
       <%= f.hidden_field(:parent_id) %>
       <div class="input select">
         <label for="paste_from_clipboard" class="control-label"><%= Alchemy.t("Page") %></label>
         <%= select_tag 'paste_from_clipboard',
           clipboard_select_tag_options(@clipboard_items),
-          class: 'alchemy_selectbox' %>
+          is: 'alchemy-select' %>
       </div>
       <%= f.input :name %>
       <%= f.submit Alchemy.t(:paste) %>
     <% end %>
-  </div>
-</div>
+  </sl-tab-panel>
+</sl-tab-group>
 <%- end -%>

data/app/views/alchemy/admin/pages/unlock.js.erb

@@ -1,13 +1,20 @@
 (function() {
+  var locked_page_icon_content
   var locked_page_tab = document.querySelector('#locked_page_<%= @page.id -%>')
   var locked_page_icon = document.querySelector(
-    '#page_<%= @page.id -%> > .sitemap_page > .sitemap_left_images .with-hint'
-  ) || document.querySelector('[data-page-id="<%= @page.id -%>"] > .icon')
+    '#page_<%= @page.id -%> > .sitemap_page > .sitemap_left_images .like-hint-tooltip'
+  ) || document.querySelector('[data-page-id="<%= @page.id -%>"] i.icon')
   if (locked_page_tab) {
     locked_page_tab.remove()
   }
   if (locked_page_icon) {
-    locked_page_icon.innerHTML = '<i class="icon far fa-file fa-lg"></i>'
+    if (locked_page_icon.parentElement.classList.contains("handle")) {
+      locked_page_icon_content = '<span class="handle"><i class="icon ri-file-line ri-fw ri-xl"></i></span>'
+    } else {
+      locked_page_icon_content = '<i class="icon ri-file-line ri-fw ri-xl"></i>'
+    }
+    locked_page_icon.outerHTML = locked_page_icon_content
   }
+  document.querySelector("#page_<%= @page.id -%> .page_status.locked").remove()
   Alchemy.growl('<%= flash[:notice] -%>')
 })()

data/app/views/alchemy/admin/partials/_language_tree_select.html.erb

@@ -1,18 +1,20 @@
 <% languages = Alchemy::Language.on_current_site %>
 <% if can?(:switch_language, Alchemy::Page) && languages.many? %>
-<div class="button_with_label">
-  <%= form_tag switch_admin_languages_path, method: 'get' do %>
-    <%= select_tag(
-      'language_id',
-      options_for_select(
-        languages.map { |l| [l.name, l.id] },
-        Alchemy::Language.current.id
-      ),
-      class: 'alchemy_selectbox short',
-      data: {'auto-submit' => true}
-    ) %>
-  <% end %>
-  <label><%= Alchemy.t("Language tree") %></label>
+<div class="toolbar_button">
+  <sl-tooltip content="<%= Alchemy.t("Language tree") %>">
+    <%= form_tag switch_admin_languages_path, method: 'get' do %>
+      <%= select_tag(
+        'language_id',
+        options_for_select(
+          languages.map { |l| [l.name, l.id] },
+          Alchemy::Language.current.id
+        ),
+        class: 'short',
+        is: 'alchemy-select',
+        data: {'auto-submit' => true}
+      ) %>
+    <% end %>
+  </sl-tooltip>
 </div>
 <div class="toolbar_spacer"></div>
 <% end %>

data/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb

@@ -4,13 +4,11 @@
       <% if navigation["image"] %>
         <%= image_tag(navigation["image"]) %>
       <% elsif navigation["inline_image"] %>
-        <span class="icon fa-fw">
-          <%== navigation["inline_image"] %>
-        </span>
+        <%== navigation["inline_image"] %>
       <% elsif navigation["icon"] %>
-        <i class="module icon fas fa-<%= navigation["icon"] %> fa-lg fa-fw"></i>
+        <i class="icon ri-<%= navigation["icon"] %>"></i>
       <% else %>
-        <i class="module icon fas fa-table fa-lg fa-fw"></i>
+        <i class="icon ri-table-line"></i>
       <% end %>
       <label><%= Alchemy.t(navigation['name']) %></label>
     <% end %>

data/app/views/alchemy/admin/partials/_routes.html.erb

@@ -9,8 +9,16 @@
       return '<%= alchemy.url_admin_picture_path(id: 1) %>'.replace(/1/, id);
     },
 
-    fold_admin_element_path: function(id) {
-      return '<%= alchemy.fold_admin_element_path(id: 1) %>'.replace(/1/, id);
+    collapse_admin_element_path: function(id) {
+      return '<%= alchemy.collapse_admin_element_path(id: 1) %>'.replace(/1/, id);
+    },
+
+    expand_admin_element_path: function(id) {
+      return '<%= alchemy.expand_admin_element_path(id: 1) %>'.replace(/1/, id);
+    },
+
+    publish_admin_element_path: function(id) {
+      return '<%= alchemy.publish_admin_element_path(id: 1) %>'.replace(/1/, id);
     },
 
     node: {

data/app/views/alchemy/admin/partials/_site_select.html.erb

@@ -1,9 +1,10 @@
 <%- if multi_site? -%>
-<div class="button_with_label">
-  <%= select_tag 'change_site',
-    options_for_select(sites_for_select, Alchemy::Site.current.id),
-    class: 'alchemy_selectbox' %>
-  <label><%= Alchemy.t("Current site") %></label>
+<div class="toolbar_button">
+  <sl-tooltip content="<%= Alchemy.t("Current site") %>">
+    <%= select_tag 'change_site',
+      options_for_select(sites_for_select, Alchemy::Site.current.id),
+      is: 'alchemy-select' %>
+  </sl-tooltip>
 </div>
 <div class="toolbar_spacer"></div>
 <%- end -%>

data/app/views/alchemy/admin/partials/_toolbar_button.html.erb

@@ -1,25 +1,30 @@
-<div class="button_with_label<%= options[:active] ? ' active' : '' %>">
-<% if options[:dialog] %>
-  <%= link_to_dialog(
-    render_icon(options[:icon]),
-    options[:url],
-    options[:dialog_options],
-    {
-      class: 'icon_button',
-      title: options[:title],
-      'data-alchemy-hotkey' => options[:hotkey]
-    }.merge(options[:link_options])
-  ) %>
-<% else %>
-  <%= link_to(
-    options[:url], {
-      class: "icon_button#{options[:loading_indicator] ? ' please_wait' : ''}",
-        title: options[:title],
-        'data-alchemy-hotkey' => options[:hotkey]
-      }.merge(options[:link_options])
-  ) do %>
-    <%= render_icon(options[:icon]) %>
+<div class="toolbar_button">
+  <%= content_tag "sl-tooltip", content: options[:label], placement: options[:tooltip_placement] do %>
+    <% if options[:dialog] %>
+      <%= link_to_dialog(
+        render_icon(options[:icon]),
+        options[:url],
+        options[:dialog_options],
+        {
+          class: ["icon_button", options[:active] && "active"].compact,
+          title: options[:title],
+          "data-alchemy-hotkey" => options[:hotkey]
+        }.merge(options[:link_options])
+      ) %>
+    <% else %>
+      <%= link_to(
+        options[:url], {
+          class: [
+            "icon_button",
+            options[:loading_indicator] && "please_wait",
+            options[:active] && "active",
+          ].compact,
+          title: options[:title],
+          "data-alchemy-hotkey" => options[:hotkey]
+        }.merge(options[:link_options])
+      ) do %>
+        <%= render_icon(options[:icon]) %>
+      <% end %>
+    <% end %>
   <% end %>
-<% end %>
-  <label><%= options[:label] %></label>
 </div>

data/app/views/alchemy/admin/pictures/_archive.html.erb

@@ -9,17 +9,17 @@
 </div>
 
 <%= form_tag delete_multiple_admin_pictures_path, method: :delete do %>
-  <div class="selected_item_tools">
+  <div class="selected_item_tools hidden">
     <h3><%= Alchemy.t(:edit_selected_pictures) %></h3>
     <%= link_to(
-      render_icon(:edit, size: 'xs') + Alchemy.t("Edit"),
+      render_icon(:edit, size: '1x') + Alchemy.t("Edit"),
       edit_multiple_admin_pictures_path,
       class: 'button with_icon',
       title: Alchemy.t('Edit multiple pictures'),
       id: 'edit_multiple_pictures',
       style: 'float: none'
     ) %>
-    <%= button_tag render_icon(:minus, size: 'xs') + Alchemy.t("Delete"), 'data-alchemy-confirm' => {
+    <%= button_tag render_icon("delete-bin-2", size: '1x') + Alchemy.t("Delete"), 'data-alchemy-confirm' => {
       title: Alchemy.t(:please_confirm),
       message: Alchemy.t(:confirm_to_delete_images_from_server),
       ok_label: Alchemy.t("Yes"),
@@ -27,7 +27,7 @@
     }.to_json, class: 'button with_icon' %>
     &nbsp;<%= Alchemy.t(:or) %>&nbsp;
     <%= link_to(
-      render_icon(:times, size: 'xs') + Alchemy.t("Clear selection"),
+      render_icon(:close) + Alchemy.t("Clear selection"),
       admin_pictures_path(
         q: search_filter_params[:q],
         tagged_with: search_filter_params[:tagged_with],
@@ -38,7 +38,7 @@
       style: 'float: none'
     ) %>
   </div>
-  <div id="pictures">
+  <div id="pictures" class="picture-size--<%= @size %>">
   <% if @pictures.blank? and @recent_pictures.blank? and search_filter_params[:q].blank? %>
     <%= render_message do %>
       <%= Alchemy.t(:no_images_in_archive) %>

data/app/views/alchemy/admin/pictures/_archive_overlay.html.erb

@@ -8,7 +8,7 @@
       <%= render 'tag_list' %>
     </div>
   </div>
-  <div id="overlay_picture_list">
+  <div id="overlay_picture_list" class="picture-size--<%= @size %>">
     <%= render 'overlay_picture_list' %>
   </div>
 </div>