Responsive elements window and sidebar

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

@@ -8,7 +8,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())

app/assets/stylesheets/alchemy/_variables.scss

@@ -136,7 +136,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;
 
@@ -158,3 +159,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;

app/assets/stylesheets/alchemy/admin.scss

@@ -19,6 +19,7 @@
 @import "alchemy/dashboard";
 @import "alchemy/elements";
 @import "alchemy/errors";
+@import "alchemy/filter_field";
 @import "alchemy/flash";
 @import "alchemy/fonts";
 @import "alchemy/forms";

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;

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;

app/assets/stylesheets/alchemy/elements.scss

@@ -3,12 +3,12 @@
   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);
@@ -18,12 +18,18 @@
   .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 {
     min-height: 100px;
@@ -389,6 +395,7 @@
   }
 
   .picture_thumbnail {
+    display: inline-block;
     width: 160px;
     margin: $default-margin 0;
     padding-bottom: 28px;
@@ -536,8 +543,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;
@@ -557,7 +564,7 @@ select.long {
 
   &.essence_select {
 
-    label { margin-bottom: 4px }
+    label { margin-bottom: 2*$default-margin }
 
     .select2-container {
       width: 100%;

app/assets/stylesheets/alchemy/filter_field.scss

@@ -0,0 +1,30 @@
+.js_filter_field_box {
+  position: relative;
+  margin: $form-field-margin;
+
+  > .icon {
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .js_filter_field {
+    width: 100%;
+    padding-left: 28px;
+    padding-right: 24px;
+    margin: 0;
+  }
+
+  .js_filter_field_clear {
+    display: none;
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    line-height: 14px;
+    text-align: center;
+  }
+}

app/assets/stylesheets/alchemy/forms.scss

@@ -160,10 +160,14 @@ form {
 
   .control_group {
     width: $form-right-width;
-    padding-top: 0.6em;
+    padding-top: $default-margin;
     float: right;
   }
 
+  .check_boxes .control_group {
+    padding-top: 0.6em;
+  }
+
   .input .hint {
     @include form-hint;
     margin-left: $form-left-width;

app/assets/stylesheets/alchemy/frame.scss

@@ -82,24 +82,16 @@ div#overlay_text_box {
 }
 
 #main_content {
-  padding: 84px 8px 8px $main-menu-width + 10px;
+  padding-top: 84px;
+  padding-right: 8px;
+  padding-bottom: 8px;
+  padding-left: $collapsed-main-menu-width + 8px;
   z-index: 0;
   width: 100%;
   height: 100%;
-}
-
-#archive_all {
-  height: 100%;
-
-  &.with_tag_filter {
 
-    table {
-      padding-right: 242px;
-    }
-
-    > .info {
-      margin-right: 242px;
-    }
+  @media screen and (min-width: $large-screen-break-point) {
+    padding-left: $main-menu-width + 8px;
   }
 }