alchemy_cms 4.1.2 → 4.2.0.rc1

data/Rakefile

@@ -50,12 +50,12 @@ BASH
   end
 
   namespace :changelog do
-    desc "Update CHANGELOG from GitHub (Set GITHUB_ACCESS_TOKEN and PREVIOUS_VERSION to a version you want to write changelog changes for)"
+    desc "Update changelog"
     task :update do
       original_file = './CHANGELOG.md'
       new_file = original_file + '.new'
       backup = original_file + '.old'
-      changes = `git rev-list v#{ENV['PREVIOUS_VERSION']}..HEAD | bundle exec github_fast_changelog AlchemyCMS/alchemy_cms`
+      changes = `git rev-list v#{ENV['PREVIOUS_VERSION']}...master | bundle exec github_fast_changelog AlchemyCMS/alchemy_cms`
       File.open(new_file, 'w') do |fo|
         fo.puts changes
         File.foreach(original_file) do |li|

data/alchemy_cms.gemspec

@@ -10,15 +10,15 @@ Gem::Specification.new do |gem|
   gem.authors               = ['Thomas von Deyen', 'Robin Boening', 'Marc Schettke', 'Hendrik Mans', 'Carsten Fregin', 'Martin Meyerhoff']
   gem.email                 = ['alchemy@magiclabs.de']
   gem.homepage              = 'https://alchemy-cms.com'
-  gem.summary               = 'A powerful, userfriendly and flexible CMS for Rails 4'
-  gem.description           = 'Alchemy is a powerful, userfriendly and flexible Rails 4 CMS.'
+  gem.summary               = 'A powerful, userfriendly and flexible CMS for Rails 5'
+  gem.description           = 'Alchemy is a powerful, userfriendly and flexible Rails 5 CMS.'
   gem.requirements << 'ImageMagick (libmagick), v6.6 or greater.'
-  gem.required_ruby_version = '>= 2.2.2'
+  gem.required_ruby_version = '>= 2.3.0'
   gem.license               = 'BSD New'
   gem.files                 = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^spec/}) }
   gem.require_paths         = ['lib']
 
-  gem.add_runtime_dependency 'active_model_serializers',         ['~> 0.9.0']
+  gem.add_runtime_dependency 'active_model_serializers',         ['~> 0.10.0']
   gem.add_runtime_dependency 'acts_as_list',                     ['~> 0.3']
   gem.add_runtime_dependency 'awesome_nested_set',               ['~> 3.1']
   gem.add_runtime_dependency 'cancancan',                        ['~> 2.1']
@@ -33,7 +33,7 @@ Gem::Specification.new do |gem|
   gem.add_runtime_dependency 'originator',                       ['~> 3.1']
   gem.add_runtime_dependency 'non-stupid-digest-assets',         ['~> 1.0.8']
   gem.add_runtime_dependency 'rails',                            ['~> 5.0', '< 6.0']
-  gem.add_runtime_dependency 'ransack',                          ['>= 1.8', '< 3.0']
+  gem.add_runtime_dependency 'ransack',                          ['~> 2.0']
   gem.add_runtime_dependency 'request_store',                    ['~> 1.2']
   gem.add_runtime_dependency 'responders',                       ['~> 2.0']
   gem.add_runtime_dependency 'select2-rails',                    ['>= 3.5.9.1', '< 4.0']

data/app/assets/images/alchemy/icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -6 32 32" class="svg-inline--fa fa-lg fa-fw"><path fill="currentColor" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -6 32 32" class="svg-inline--fa fa-lg fa-fw"><path fill="currentColor" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/></svg>

data/app/assets/javascripts/alchemy/admin.js

@@ -9,6 +9,7 @@
 //= require jquery-ui/widgets/tabs
 //= require tinymce/tinymce.min
 //= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
+//= require flatpickr/flatpickr.min
 //= require clipboard.min
 //= require keymaster
 //= require requestAnimationFrame
@@ -27,6 +28,7 @@
 //= require alchemy/alchemy.dragndrop
 //= require alchemy/alchemy.element_editors
 //= require alchemy/alchemy.elements_window
+//= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.growler
 //= require alchemy/alchemy.gui
 //= require alchemy/alchemy.hotkeys

data/app/assets/javascripts/alchemy/alchemy.base.js.coffee

@@ -76,30 +76,6 @@ $.extend Alchemy,
       dropdownAutoWidth: true
     return
 
-  # Selects cell tab for given name.
-  # Creates it if it's not present yet.
-  selectOrCreateCellTab: (cell_name, label) ->
-    $cells = $('#cells')
-    $tab = $("#cell_#{cell_name}")
-    if $tab.length == 0
-      $("<li><a href=\"#cell_#{cell_name}\">#{label}</a></li>")
-        .appendTo('#cells .ui-tabs-nav')
-      $tab = $("<div id=\"cell_#{cell_name}\" class=\"sortable_cell\"/>")
-      $cells.append($tab)
-      $cells.tabs().tabs('refresh')
-    $cells.tabs().tabs('option', 'active', $('#cells > div').index($tab))
-    return
-
-  # Inits the cell tabs
-  buildTabbedCells: (label) ->
-    $cells = $('<div id="cells"/>')
-    $('#cell_for_other_elements').wrap($cells)
-    $('#cells').prepend("<ul><li><a href=\"#cell_for_other_elements\">#{label}</a></li></ul>")
-    .tabs 'paging',
-      follow: true
-      followOnSelect: true
-    return
-
   # Logs exception to js console, if present.
   debug: (e) ->
     if window["console"]

data/app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee

@@ -3,7 +3,6 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 $.extend Alchemy,
 
   Datepicker: (scope) ->
-    $.datetimepicker.setLocale(Alchemy.locale);
     $datepicker_inputs = $('input[data-datepicker-type]', scope)
 
     # Initializes the datepickers on the text inputs and sets the proper type
@@ -15,13 +14,16 @@ $.extend Alchemy,
       $datepicker_inputs.each ->
         type = $(this).data('datepicker-type')
         options =
-          scrollInput: false
-          format: Alchemy.t("formats.#{type}")
-          timepicker: /time/.test(type)
-          datepicker: /date/.test(type)
-          dayOfWeekStart: Alchemy.t('formats.start_of_week')
-          onSelectDate: ->
-            Alchemy.setElementDirty $(this).closest(".element-editor")
-        $(this).datetimepicker(options)
+          # alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`)
+          locale: Alchemy.locale.slice(0, 2)
+          altInput: true
+          altFormat: Alchemy.t("formats.#{type}")
+          altInputClass: ""
+          enableTime: /time/.test(type)
+          noCalendar: type == "time"
+          time_24hr: Alchemy.t("formats.time_24hr")
+          onValueUpdate: (_selectedDates, _dateStr, instance) ->
+            Alchemy.setElementDirty $(instance.element).closest(".element-editor")
+        $(this).flatpickr(options)
 
     return

data/app/assets/javascripts/alchemy/alchemy.dragndrop.js.coffee

@@ -5,7 +5,7 @@ window.Alchemy = {} if typeof (window.Alchemy) is "undefined"
 
 $.extend Alchemy,
 
-  SortableElements: (page_id, form_token, selector = '#element_area .sortable_cell') ->
+  SortableElements: (page_id, form_token, selector = '#element_area .sortable-elements') ->
     Alchemy.initializedSortableElements = false
     $sortable_area = $(selector)
 
@@ -25,7 +25,7 @@ $.extend Alchemy,
       opacity: 0.5
       cursor: "move"
       containment: $('#element_area')
-      tolerance: "intersect"
+      tolerance: "pointer"
       update: (event, ui) ->
         # This callback is called twice for both elements, the source and the receiving
         # but, we only want to call ajax callback once on the receiving element.
@@ -35,14 +35,11 @@ $.extend Alchemy,
         Alchemy.initializedSortableElements = true
         element_ids = $.map $this.children(), (child) ->
           $(child).attr("data-element-id")
-        cell_id = $this.data("cell-id")
         parent_element_id = ui.item.parent().closest("[data-element-id]").data('element-id')
         params =
           page_id: page_id
           authenticity_token: encodeURIComponent(form_token)
           element_ids: element_ids
-        if cell_id?
-          params['cell_id'] = cell_id
         if parent_element_id?
           params['parent_element_id'] = parent_element_id
         $(event.target).css("cursor", "progress")
@@ -63,6 +60,10 @@ $.extend Alchemy,
         $this.sortable('option', 'connectWith', $dropzone)
         $this.sortable('refresh')
         $dropzone.css('minHeight', 36)
+        ui.item.addClass('dragged')
+        if ui.item.hasClass('compact')
+          ui.placeholder.addClass('compact').css
+            height: ui.item.outerHeight()
         Alchemy.Tinymce.remove(ids)
         return
       stop: (event, ui) ->
@@ -70,6 +71,7 @@ $.extend Alchemy,
         name = ui.item.data('element-name')
         $dropzone = $("[data-droppable-elements~='#{name}']")
         $dropzone.css('minHeight', '')
+        ui.item.removeClass('dragged')
         Alchemy.Tinymce.init(ids)
         return
 
@@ -77,25 +79,6 @@ $.extend Alchemy,
     $sortable_area.find('.nested-elements').sortable(sortable_options)
     return
 
-  SortableContents: (selector, token) ->
-    $(selector).sortable
-      items: "div.draggable_picture"
-      handle: "div.picture_handle"
-      opacity: 0.5
-      cursor: "move"
-      tolerance: "pointer"
-      containment: "parent"
-      update: (event, ui) ->
-        ids = $.map $(this).children("div.draggable_picture"), (child) ->
-          child.id.replace /essence_picture_/, ""
-        $(event.originalTarget).css "cursor", "progress"
-        $.ajax
-          url: Alchemy.routes.order_admin_contents_path
-          type: "POST"
-          data: "authenticity_token=" + encodeURIComponent(token) + "&" + $.param(content_ids: ids)
-          complete: ->
-            $(event.originalTarget).css "cursor", "move"
-
   DraggableTrashItems: ->
     $("#trash_items div.draggable").each ->
       $this = $(this)

data/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee

@@ -55,12 +55,12 @@ Alchemy.ElementEditors =
   # Selects element
   # Scrolls to element
   # Unfold if folded
-  # Also chooses the right cell, if necessary.
+  # Also chooses the right fixed elements tab, if necessary.
   # Can be triggered through custom event 'FocusElementEditor.Alchemy'
   # Used by the elements on click events in the preview frame.
   focusElement: ($element) ->
     element_id = $element.attr('id').replace(/\D/g, "")
-    @selectCellForElement($element)
+    @selectTabForElement($element)
     # If we have folded parents we need to unfold each of them
     # and then finally scroll to or unfold ourself
     $folded_parents = $element.parents('.element-editor.folded')
@@ -72,12 +72,12 @@ Alchemy.ElementEditors =
       @scrollToOrUnfold(element_id)
     return
 
-  # Select cell for given element
-  selectCellForElement: ($element) ->
-    $cells = $("#cells .sortable_cell")
-    if $cells.size() > 0
-      $cell = $element.closest(".sortable_cell")
-      $("#cells").tabs("option", "active", $cells.index($cell))
+  # Selects tab for given element
+  selectTabForElement: ($element) ->
+    $tabs = $("#fixed-elements .sortable-elements")
+    if $tabs.size() > 0
+      $tab = $element.closest(".sortable-elements")
+      $("#fixed-elements").tabs("option", "active", $tabs.index($tab))
 
   # Marks an element as selected in the element window and scrolls to it.
   #
@@ -117,6 +117,7 @@ Alchemy.ElementEditors =
   #
   scrollToElement: (el) ->
     $("#element_area").scrollTo el,
+      axis: 'y',
       duration: 400
       offset: -6
 

data/app/assets/javascripts/alchemy/alchemy.fixed_elements.js

@@ -0,0 +1,38 @@
+window.Alchemy = Alchemy || {};
+
+Alchemy.FixedElements = {
+  WRAPPER: '<div id="fixed-elements"></div>',
+  TABS: '<ul><li><a href="#main-content-elements">{{label}}</a></li></ul>',
+
+  // Builds fixed elements tabs
+  buildTabs: function(label) {
+    var $wrapper = $(this.WRAPPER),
+        $tabs = $(this.TABS.replace(/{{label}}/, label));
+
+    $('#main-content-elements').wrap($wrapper);
+    $('#fixed-elements').prepend($tabs).tabs('paging', {
+      follow: true,
+      followOnSelect: true
+    });
+  },
+
+  // Creates a fixed element tab.
+  createTab: function(element_id, label) {
+    var $fixed_elements = $('#fixed-elements'),
+        $tab;
+
+    $('> ul', $fixed_elements).append('<li><a href="#fixed-element-' + element_id + '">' + label + '</a></li>');
+    $tab = $('<div id="fixed-element-' + element_id + '" class="sortable-elements" />');
+    $fixed_elements.append($tab);
+    $fixed_elements.tabs().tabs('refresh');
+    $fixed_elements.tabs('option', 'active', $('#fixed-elements > div').index($tab));
+  },
+
+  removeTab: function(element_id) {
+    var $fixed_elements = $('#fixed-elements');
+
+    $fixed_elements.find('a[href="#fixed-element-' + element_id + '"]').parent().remove();
+    $fixed_elements.find('div#fixed-element-' + element_id).remove();
+    $fixed_elements.tabs().tabs('refresh');
+  }
+};

data/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee

@@ -1,5 +1,3 @@
-#= require date-formatter
-
 window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 
 # The admin sitemap Alchemy module
@@ -8,7 +6,7 @@ Alchemy.Sitemap =
   # Storing some objects.
   init: (options) ->
     @search_field = $(".search_input_field")
-    @filter_field_clear = $('.js_filter_field_clear')
+    @filter_field_clear = $('.search_field_clear')
     @display = $('#page_filter_result')
     @sitemap_wrapper = $('#sitemap-wrapper p.loading')
     @template = Handlebars.compile($('#sitemap-template').html())
@@ -111,7 +109,7 @@ Alchemy.Sitemap =
         now = new Date()
         if $checkbox.is(':checked')
           $publication_date_fields.removeClass('hidden')
-          $public_on_field.val Date.format(now, format)
+          $public_on_field[0]._flatpickr.setDate(now)
         else
           $publication_date_fields.addClass('hidden')
           $public_on_field.val('')

data/app/assets/javascripts/alchemy/alchemy.translations.js.coffee

@@ -26,4 +26,4 @@ Alchemy.translations =
       datetime: "Y-m-d H:i"
       date: "Y-m-d"
       time: "H:i"
-      start_of_week: 0
+      time_24hr: false

data/app/assets/stylesheets/alchemy/_mixins.scss

@@ -182,11 +182,12 @@
   cursor: zoom-in;
 }
 
-@mixin truncate($max-width, $display: inline-block) {
+@mixin truncate($max-width, $display: inline-block, $wrap: normal) {
   display: $display;
   max-width: $max-width;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: $wrap;
 }
 
 @mixin hint-hover-style {

data/app/assets/stylesheets/alchemy/_variables.scss

@@ -76,6 +76,7 @@ $button-text-shadow: none !default;
 $button-box-shadow: 0px 1px 1px -1px #333 !default;
 $button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
 $button-padding: 0.55em 2em !default;
+$small-button-padding: 0.4em 1.25em !default;
 $button-margin: $form-field-margin !default;
 
 $secondary-button-bg-color: transparent !default;
@@ -112,12 +113,13 @@ $sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
 
 $main-menu-width: 150px !default;
 $collapsed-main-menu-width: 48px !default;
+$collapsed-main-menu-entry-max-width: 300px !default;
 $main-menu-bg-color: $dark-blue !default;
 $main-menu-active-bg-color: $dark-orange !default;
 $main-menu-active-text-color: $dark-blue !default;
 $main-menu-text-color: $white !default;
 $main-menu-icon-color: $white !default;
-$main-menu-entry-max-width: 100px !default;
+$main-menu-entry-max-width: 110px !default;
 $toolbar-bg-color: $medium-gray !default;
 $toolbar-height: 46px !default;
 $element-toolbar-height: 37px !default;
@@ -135,7 +137,8 @@ $table-row-even-background-color: $white !default;
 $table-row-odd-background-color: rgba($white, 0.5) !default;
 $table-row-hover-color: rgba($light_yellow, 0.5) !default;
 
-$elements-window-width: 400px !default;
+$elements-window-width: 22.5vw !default;
+$elements-window-min-width: 400px !default;
 $element-header-bg-color: $medium-gray !default;
 $top-menu-height: 75px !default;
 
@@ -157,3 +160,5 @@ $select-hover-bg-color: $dark-blue !default;
 $select-hover-text-color: $white !default;
 
 $thumbnail-background-color: opacify($default-border-color, 1) !default;
+$medium-screen-break-point: 700px;
+$large-screen-break-point: 1000px;

data/app/assets/stylesheets/alchemy/admin.scss

@@ -19,7 +19,9 @@
 @import "alchemy/dashboard";
 @import "alchemy/elements";
 @import "alchemy/errors";
+@import "alchemy/filter_field";
 @import "alchemy/flash";
+@import "alchemy/flatpickr";
 @import "alchemy/fonts";
 @import "alchemy/forms";
 @import "alchemy/form_fields";
@@ -43,4 +45,3 @@
 @import "alchemy/upload";
 @import "alchemy/jquery-ui";
 @import "jquery.Jcrop.min";
-@import "jquery.datetimepicker";

data/app/assets/stylesheets/alchemy/archive.scss

@@ -1,3 +1,15 @@
+.resources-header {
+  padding: 2*$default-padding;
+}
+
+.resources-table-wrapper {
+  padding-bottom: 60px;
+
+  &.with_tag_filter {
+    padding-right: 242px;
+  }
+}
+
 div#image_assign_filter_and_image_sizing {
   width: 100%;
   height: 40px;
@@ -27,7 +39,6 @@ div#image_assign_filter_and_image_sizing {
 .picture_thumbnail {
   margin: 2*$default-margin;
   background-color: #fff;
-  display: inline-block;
   position: relative;
   box-shadow: 0 0 0 1px $default-border-color;
   width: 160px;
@@ -77,10 +88,13 @@ div#image_assign_filter_and_image_sizing {
   }
 }
 
+#pictures,
+#overlay_picture_list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 #pictures {
-  margin-right: 232px;
-  padding-bottom: 60px;
-  overflow: hidden;
 
   .thumbnail_background {
     @include zoom-in;

data/app/assets/stylesheets/alchemy/buttons.scss

@@ -21,7 +21,7 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &.small {
-    padding: $default-padding 3*$default-padding;
+    padding: $small-button-padding;
     vertical-align: inherit;
     line-height: 4*$default-padding;
     font-size: inherit;

data/app/assets/stylesheets/alchemy/dialogs.scss

@@ -59,7 +59,7 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog,
 .alchemy-image-overlay-dialog {
   position: relative;
-  max-width: 100%;
+  max-width: calc(100vw - 16px);
   display: inline-block;
   vertical-align: middle;
   text-align: left;

data/app/assets/stylesheets/alchemy/elements.scss

@@ -3,26 +3,36 @@
   right: 0;
   top: $top-menu-height;
   z-index: 20;
-  width: $elements-window-width;
+  width: calc(100vw - #{$collapsed-main-menu-width});
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
   background-color: $light-gray;
   transition: $transition-duration ease-in-out;
-  transform: translate3d($elements-window-width - $default-border-width, 0, 0);
+  transform: translate3d(100%, 0, 0);
 
   .elements-window-visible & {
     transform: translate3d(0, 0, 0);
   }
+
+  // Fix for Tinymce fullscreen window positioning issues (GH#1511)
+  .mce-fullscreen & {
+    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
+  }
+
+  @media screen and (min-width: $large-screen-break-point) {
+    width: $elements-window-width;
+    min-width: $elements-window-min-width;
+  }
 }
 
 #element_area {
   height: calc(100vh - #{$top-menu-height + $toolbar-height});
   overflow-x: hidden;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
-  .sortable_cell {
+  .sortable-elements {
     min-height: 100px;
-    padding: 2*$default-padding $default-padding 2px;
   }
 
   textarea {
@@ -35,6 +45,11 @@
   }
 }
 
+#main-content-elements,
+.element-editor.is-fixed .nestable-elements {
+  padding: 2*$default-padding $default-padding 2px;
+}
+
 .element-title {
   overflow: hidden;
   white-space: nowrap;
@@ -99,40 +114,6 @@
   }
 }
 
-.add_picture {
-  float: left;
-  margin: 1px;
-  width: 119px;
-  border: 1px solid #c0c0c0;
-  border-radius: $default-border-radius;
-  height: 123px;
-
-  a {
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    text-decoration: none;
-    overflow: hidden;
-    text-align: center;
-    line-height: 104px;
-    border-radius: $default-border-radius;
-    background-color: $light-gray;
-
-    &:hover {
-      background-color: $medium-gray;
-    }
-
-    .icon {
-      font-size: 1.5em;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}
-
 .element-editor {
   border: 1px solid $default-border-color;
   border-radius: $default-border-radius;
@@ -140,6 +121,11 @@
   margin-bottom: 2*$default-margin;
   transition: box-shadow $transition-duration;
 
+  &.is-fixed {
+    border-width: 0;
+    border-radius: 0;
+  }
+
   &.not-draggable {
     opacity: 0.5;
   }
@@ -152,7 +138,7 @@
     }
   }
 
-  &.selected {
+  &.selected:not(.is-fixed) {
     border-color: #c3c3c3;
     box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
   }
@@ -166,9 +152,12 @@
 
   &.dragged {
     border-style: dotted;
-    height: 36px;
+    overflow: hidden;
 
-    * { display: none }
+    &:not(.compact) {
+      height: 36px !important;
+      transition: height 0.2s;
+    }
   }
 
   &.with-contents, &.without-contents.not-nestable {
@@ -273,7 +262,6 @@
 .element-toolbar {
   padding: $default-padding 0;
   height: $element-toolbar-height;
-  // background-color: #f0f0f0;
 
   .element_tools {
     float: left;
@@ -297,23 +285,6 @@
   flex-wrap: wrap;
 }
 
-.picture_gallery_images {
-  overflow: hidden;
-  margin: $default-margin 0;
-  border: 1px solid $default-border-color;
-  border-radius: $default-border-radius;
-  background-color: $medium-gray;
-  padding: 1px;
-
-  .essence_picture {
-    margin: 1px;
-    float: left;
-    height: 148px;
-
-    .picture_thumbnail { margin: 0 }
-  }
-}
-
 .picture_thumbnail .picture_image {
   overflow: hidden;
 
@@ -322,7 +293,7 @@
   }
 }
 
-#cells {
+#fixed-elements {
   min-height: 100px;
 }
 
@@ -432,6 +403,7 @@
   }
 
   .picture_thumbnail {
+    display: inline-block;
     width: 160px;
     margin: $default-margin 0;
     padding-bottom: 28px;
@@ -462,25 +434,6 @@
   }
 }
 
-.draggable_picture {
-  float: left;
-
-  .picture_handle {
-    cursor: move;
-  }
-}
-
-.picture_thumbnail .picture_handle {
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  height: 97px;
-  top: 0;
-  left: 0;
-  background-color: transparent;
-  @extend .disable-user-select;
-}
-
 .content_editor.essence_file {
 
   .file {
@@ -598,8 +551,8 @@ select.long {
   }
 
   label {
-    display: inline-block;
-    margin-bottom: 2px;
+    display: block;
+    margin: $default-margin 0;
     font-size: $small-font-size;
     line-height: 15px;
     text-indent: 1px;
@@ -619,7 +572,7 @@ select.long {
 
   &.essence_select {
 
-    label { margin-bottom: 4px }
+    label { margin-bottom: 2*$default-margin }
 
     .select2-container {
       width: 100%;
@@ -731,31 +684,142 @@ textarea.has_tinymce {
   top: -1px;
 }
 
-.nestable-elements {
+.not-fixed .nestable-elements {
   box-shadow: inset 0 4px 8px -2px darken($medium-gray, 15%);
   background-color: $medium-gray;
 
   .expanded.element-editor > & {
-    padding: 16px 8px 8px;
+    padding: 8px 4px 4px;
+  }
+
+  .add-nestable-element-button {
+    width: calc(50% - 8px);
+    margin: 4px;
+    text-align: center;
+  }
+}
+
+.is-fixed {
+  &.with-contents {
+    > .element-footer {
+      border-top: 0;
+      border-bottom: 1px solid $medium-gray;
+    }
+  }
+
+  > .nestable-elements .add-nestable-element-button {
+    width: 100%;
+    text-align: center;
   }
 }
 
-.nested-elements {
+.not-fixed .nested-elements {
+  display: flex;
+  flex-wrap: wrap;
+
+  .element-editor,
+  .droppable_element_placeholder {
+    width: calc(100% - 8px);
+    margin: 4px;
+
+    &.compact {
+      width: calc(50% - 8px);
+    }
+  }
+
+  .element-editor {
+    position: relative;
+
+    &.compact {
+      .element-toolbar {
+        visibility: hidden;
+        position: absolute;
+        height: 35px;
+        padding: 2px 0;
+        opacity: 0;
+        z-index: 1;
+        border-bottom: $default-border;
+        background-color: $light-gray;
+        transition: all $transition-duration;
+      }
+
+      .element-header:hover + .element-toolbar,
+      .element-toolbar:hover {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .element-footer {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+
+        .button {
+          padding: $small-button-padding;
+        }
+      }
+
+      .element-title {
+        max-width: 75%;
+      }
+
+      &:not(.folded) .ajax-folder {
+        pointer-events: none;
+
+        i:before {
+          content: fa-content($fa-var-ellipsis-v);
+        }
+      }
+
+      .element_tools {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        margin-left: 0;
+      }
+
+      .element-content {
+        padding: 4px 8px;
+      }
+
+      .button_with_label {
+        margin: 0 4px;
+      }
+
+      .content_editor,
+      .picture_thumbnail {
+        width: 100%;
+      }
+
+      .picture_thumbnail {
+        margin: 0;
+      }
+
+      .thumbnail_background {
+        height: 115px;
+      }
+
+      textarea,
+      input[type="url"],
+      input[type="text"],
+      input[type="email"],
+      input[type="password"] {
+        padding: 0.5em;
+        height: auto;
+      }
+    }
+  }
 
   .element-header {
     background-color: transparent;
   }
 
   .element-toolbar {
-    background-color: transparent;
+    width: 100%;
     border-top: 1px solid $medium-gray;
   }
 }
 
-.add-nestable-element-button {
-  margin-top: 0;
-}
-
 .essence_date--label {
   position: absolute;
   right: 7px;