Merge pull request ezsystems#28 from dew326/ezp-26999-misaligned-on-s…

…mall-screen

EZP-26999: Misaligned elements in content-on-the-fly when on smaller screens

bundle/Resources/public/css/theme/views/discovery-create.css

@@ -9,6 +9,10 @@
     border-radius: 3px;
 }
 
+.ez-view-universaldiscoverycreateview .cof-pagination {
+    overflow: auto;
+}
+
 @media (max-width: 1400px) {
     .ez-view-universaldiscoverycreateview .ez-selection-filter-item-selected:before {
         left: 46.8rem;

bundle/Resources/public/css/views/content-creation.css

@@ -10,6 +10,11 @@
     box-sizing: border-box;
 }
 
+.ez-view-contentcreationview .cof-content-creation__wrapper {
+    overflow: auto;
+    height: 100%
+}
+
 .ez-view-contentcreationview.on-page-two .cof-content-creation__page-one,
 .ez-view-contentcreationview.on-page-two .cof-content-creation__page-two {
     transform: translateX(-100%);

bundle/Resources/public/css/views/discovery-create.css

@@ -3,10 +3,6 @@
  * For full copyright and license information view LICENSE file distributed with this source code.
  */
 
-.ez-view-universaldiscoverycreateview .ez-view-contentcreationview {
-    margin: .7rem 0 0 0;
-}
-
 @media (max-width: 1400px) {
     .ez-view-universaldiscoverycreateview {
         position: relative;
@@ -20,8 +16,7 @@
 
     .ez-view-universaldiscoverycreateview .ez-view-contentcreationview {
         height: 100%;
-        margin: .5rem auto;
-        padding: 0 2rem;
+        padding: 0 2rem 1rem;
     }
 
     .ez-view-universaldiscoverycreateview .cof-content-creation__page-one,

bundle/Resources/public/templates/content-creation.hbt

@@ -1,33 +1,35 @@
-<div class="cof-content-creation__content">
-    <div class="cof-content-creation__page-one">
-        <div class="cof-content-creation__header">
-            <ul class="cof-content-creation__header__list">
-                <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Choose a Content Type</li>
-                <li class="cof-content-creation__header__text">Select Location</li>
-            </ul>
+<div class="cof-content-creation__wrapper">
+    <div class="cof-content-creation__content">
+        <div class="cof-content-creation__page-one">
+            <div class="cof-content-creation__header">
+                <ul class="cof-content-creation__header__list">
+                    <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Choose a Content Type</li>
+                    <li class="cof-content-creation__header__text">Select Location</li>
+                </ul>
+            </div>
+            <div class="cof-content-creation__content-type-selector"></div>
         </div>
-        <div class="cof-content-creation__content-type-selector"></div>
-    </div>
-    <div class="cof-content-creation__page-two">
-        <div class="cof-content-creation__header">
-            <ul class="cof-content-creation__header__list">
-                <li class="cof-content-creation__header__text">Choose a Content Type
-                    <button class="cof-btn cof-btn--rounded cof-btn--change-content-type"></button>
-                </li>
-                <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Select Location</li>
-            </ul>
+        <div class="cof-content-creation__page-two">
+            <div class="cof-content-creation__header">
+                <ul class="cof-content-creation__header__list">
+                    <li class="cof-content-creation__header__text">Choose a Content Type
+                        <button class="cof-btn cof-btn--rounded cof-btn--change-content-type"></button>
+                    </li>
+                    <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Select Location</li>
+                </ul>
+            </div>
+            <button class="cof-btn cof-btn--big cof-btn--rounded cof-btn--edit-location">Select Location</button>
+            <span class="cof-content-creation__separator">or</span>
+            <button class="cof-btn cof-btn--big cof-btn--select">Select from Suggested Locations</button>
+            <ul class="cof-content-creation__suggested-locations cof-content-creation__suggested-locations--is-hidden"></ul>
+            <h4 class="cof-content-creation__location__title">Selected Location:</h4>
+            <span class="cof-content-creation__location"></span>
         </div>
-        <button class="cof-btn cof-btn--big cof-btn--rounded cof-btn--edit-location">Select Location</button>
-        <span class="cof-content-creation__separator">or</span>
-        <button class="cof-btn cof-btn--big cof-btn--select">Select from Suggested Locations</button>
-        <ul class="cof-content-creation__suggested-locations cof-content-creation__suggested-locations--is-hidden"></ul>
-        <h4 class="cof-content-creation__location__title">Selected Location:</h4>
-        <span class="cof-content-creation__location"></span>
     </div>
+    <div class="cof-pagination">
+        <button class="cof-btn cof-btn--rounded cof-btn--back">Back</button>
+        <button class="cof-btn cof-btn--rounded cof-btn--next cof-btn--disabled">Next</button>
+        <button class="cof-btn cof-btn--rounded cof-btn--finish cof-btn--disabled">{{finishBtnText}}</button>
+    </div>
+    <div class="cof-content-creation__creator cof-is-hidden"></div>
 </div>
-<div class="cof-pagination">
-    <button class="cof-btn cof-btn--rounded cof-btn--back">Back</button>
-    <button class="cof-btn cof-btn--rounded cof-btn--next cof-btn--disabled">Next</button>
-    <button class="cof-btn cof-btn--rounded cof-btn--finish cof-btn--disabled">{{finishBtnText}}</button>
-</div>
-<div class="cof-content-creation__creator cof-is-hidden"></div>