#14 - responsive page blocks

modules/boonex/persons/template/block_picture.html

@@ -1 +1 @@
-<div class="bx-persons-preview"><img src="__url__" /></div>
+<div class="bx-persons-preview"><img class="bx-def-round-corners" src="__url__" /></div>

modules/boonex/persons/template/css/main.css

@@ -30,11 +30,9 @@
 /* view content */
 
 .bx-persons-preview {
+    max-width:278px;
     text-align:center;
 }
-
 .bx-persons-preview img {
-	border-radius:2px;
-	-moz-border-radius:2px;
-	-webkit-border-radius:2px;    
+    width:100%;
 }

template/_row_1_column.html

@@ -0,0 +1,7 @@
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-1-column-column1">
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
+                __cell_1__
+            </div>
+        </div>
+    </div>

template/css/common.css

@@ -47,6 +47,7 @@ blockquote {
 /* --------------- design boxes */
 
 .bx-db-container {
+    overflow:hidden;
 }
 
 .bx-db-title {

template/css/media-phone.css

@@ -1,4 +1,4 @@
-@media (max-width:520px) {
+@media (max-width:720px) {
 
 
 .bx-def-media-phone-hide {
@@ -34,5 +34,15 @@
     width:auto;
 }
 
+/* page layouts */
+
+.bx-layout-col {
+    float:none !important;
+    width:auto !important;
+}
+
+.bx-layout-cell {
+    padding:0 !important;
+}
 
 } /* @media end */

template/css/media-tablet.css

@@ -1,4 +1,4 @@
-@media (min-width:520px) and (max-width:1024px) {
+@media (min-width:720px) and (max-width:1024px) {
 
 
 .bx-def-media-tablet-hide {

template/css/page_layouts.css

@@ -1,35 +1,25 @@
 
 /* common styles */
 
-.bx-layout-wrapper {
-    border-collapse:collapse;
-    margin:0;
-    padding:0;
-    width:100%;
+.bx-layout-col {
+    float:left;
+    overflow:hidden;
 }
 
-.bx-layout-cell {
-    padding:0;
-    text-align:left;
-    vertical-align:top;
-}
-
-.bx-layout-box-wrapper:first-child {
-    padding-top:0;
-}
+/* layout 1 column */
 
-.bx-layout-bar-width {
-    width:280px;
+.bx-layout-1-column-column1 {
+    float:none;
 }
 
 /* layout 3 columns */
 
 .bx-layout-3-columns-column3,
 .bx-layout-3-columns-column1 {
-    width:33%;
+    width:33.3%;
 }
 .bx-layout-3-columns-column2 {
-    width:34%;
+    width:33.4%;
 }
 
 /* layout 2 columns */
@@ -41,24 +31,23 @@
     width:50%;
 }
 
-/* layout top area 3 columns */
+/* layout bar left */
 
-.bx-layout-top-area-3-columns-column3,
-.bx-layout-top-area-3-columns-column1 {
-    width:33%;
+.bx-layout-bar-left-bar {
+    width:25%;
 }
 
-.bx-layout-top-area-3-columns-column2 {
-    width:34%;
+.bx-layout-bar-left-content {
+    width:75%;
 }
 
-/* layout top area 2 columns */
+/* layout bar right */
 
-.bx-layout-top-area-2-columns-column1 {
-    width:50%;
+.bx-layout-bar-right-bar {
+    width:25%;
 }
 
-.bx-layout-top-area-2-columns-column2 {
-    width:50%;
+.bx-layout-bar-right-content {
+    width:75%;
 }
 

template/layout_1_column.html

@@ -1,7 +1,5 @@
 <!-- layout 1 column [ start ] -->
-<table class="bx-layout-wrapper bx-layout-1-column">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-1-column-column1"><div>__cell_1__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-1-column">
+    <bx_include_auto:_row_1_column.html />
+</div>
 <!-- layout 1 column [  end  ] -->

template/layout_2_columns.html

@@ -1,8 +1,16 @@
 <!-- layout 2 columns [ start ] -->
-<table class="bx-layout-wrapper bx-layout-2-columns">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-2-columns-column1"><div class="bx-def-padding-sec-right">__cell_1__</div></td>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-2-columns-column2"><div class="bx-def-padding-sec-left">__cell_2__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-2-columns">
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-2-columns-column1">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-1">
+                __cell_1__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-2-columns-column2">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+    </div>
+</div>
 <!-- layout 2 columns [  end  ] -->

template/layout_3_columns.html

@@ -1,9 +1,21 @@
 <!-- layout 3 columns [ start ] -->
-<table class="bx-layout-wrapper bx-layout-3-columns">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-3-columns-column1"><div class="bx-def-padding-sec-right">__cell_1__</div></td>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-3-columns-column2"><div class="bx-def-padding-sec-right bx-def-padding-sec-left">__cell_2__</div></td>
-        <td id="bx-layout-cell-3" class="bx-layout-cell bx-layout-3-columns-column3"><div class="bx-def-padding-sec-left">__cell_3__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-3-columns">
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-3-columns-column1">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-1">
+                __cell_1__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-3-columns-column2">
+            <div class="bx-layout-cell bx-def-padding-sec-right bx-def-padding-sec-left" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </td>
+        <div class="bx-layout-col bx-layout-3-columns-column3">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-3">
+                __cell_3__
+            </div>
+        </div>
+    </div>
+</div>
 <!-- layout 3 columns [  end  ] -->

template/layout_bar_left.html

@@ -1,8 +1,16 @@
 <!-- layout bar left [ start ] -->
-<table class="bx-layout-wrapper bx-layout-bar-left">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-bar-left-bar bx-layout-bar-width"><div>__cell_1__</div></td>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-bar-left-content"><div class="bx-def-padding-left">__cell_2__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-bar-left">
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-bar-left-bar">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-1">
+                __cell_1__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-bar-left-content">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+    </div>
+</div>
 <!-- layout bar left [  end  ] -->

template/layout_bar_right.html

@@ -1,8 +1,16 @@
 <!-- layout bar right [ start ] -->
-<table class="bx-layout-wrapper bx-layout-bar-right">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-bar-right-content"><div class="bx-def-padding-right">__cell_1__</div></td>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-bar-right-bar bx-layout-bar-width"><div>__cell_2__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-bar-right">
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-bar-right-content">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-1">
+                __cell_1__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-bar-right-bar">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+    </div>
+</div>
 <!-- layout bar right [  end  ] -->

template/layout_top_area_2_columns.html

@@ -1,11 +1,20 @@
 <!-- layout top area 2 columns [ start ] -->
-<table class="bx-layout-wrapper bx-layout-top-area-2-columns">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-top-area-2-columns-top" colspan="2"><div>__cell_1__</div></td>
-    </tr>
-    <tr>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-top-area-2-columns-column1"><div class="bx-def-padding-sec-right">__cell_2__</div></td>
-        <td id="bx-layout-cell-3" class="bx-layout-cell bx-layout-top-area-2-columns-column2"><div class="bx-def-padding-sec-left">__cell_3__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-top-area-2-columns">
+
+    <bx_include_auto:_row_1_column.html />
+
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-2-columns-column1">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-2-columns-column2">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-3">
+                __cell_3__
+            </div>
+        </div>
+    </div>
+
+</div>
 <!-- layout top area 2 columns [  end  ] -->

template/layout_top_area_3_columns.html

@@ -1,12 +1,25 @@
 <!-- layout top area 3 columns [ start ] -->
-<table class="bx-layout-wrapper bx-layout-top-area-3-columns">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-top-area-3-columns-top" colspan="3"><div>__cell_1__</div></td>
-    </tr>
-    <tr>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-top-area-3-columns-column1"><div class="bx-def-padding-sec-right">__cell_2__</div></td>
-        <td id="bx-layout-cell-3" class="bx-layout-cell bx-layout-top-area-3-columns-column2"><div class="bx-def-padding-sec-right bx-def-padding-sec-left">__cell_3__</div></td>
-        <td id="bx-layout-cell-4" class="bx-layout-cell bx-layout-top-area-3-columns-column3"><div class="bx-def-padding-sec-left">__cell_4__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-top-area-3-columns">
+
+    <bx_include_auto:_row_1_column.html />
+
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-3-columns-column1">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-3-columns-column2">
+            <div class="bx-layout-cell bx-def-padding-sec-right bx-def-padding-sec-left" id="bx-layout-cell-3">
+                __cell_3__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-3-columns-column3">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-4">
+                __cell_4__
+            </div>
+        </div>
+    </div>
+
+</div>
 <!-- layout top area 3 columns [  end  ] -->

template/layout_top_area_bar_left.html

@@ -1,11 +1,20 @@
 <!-- layout top area bar left [ start ] -->
-<table class="bx-layout-wrapper bx-layout-top-area-bar-left">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-top-area-bar-left-top" colspan="2"><div>__cell_1__</div></td>
-    </tr>
-    <tr>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-top-area-bar-left-bar bx-layout-bar-width"><div>__cell_2__</div></td>
-        <td id="bx-layout-cell-3" class="bx-layout-cell bx-layout-top-area-bar-left-content"><div class="bx-def-padding-left">__cell_3__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-top-area-bar-left">
+
+    <bx_include_auto:_row_1_column.html />
+
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-bar-left-bar">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-bar-left-content">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-3">
+                __cell_3__
+            </div>
+        </div>
+    </div>
+
+</div>
 <!-- layout top area bar left [  end  ] -->

template/layout_top_area_bar_right.html

@@ -1,11 +1,20 @@
 <!-- layout top area bar right [ start ] -->
-<table class="bx-layout-wrapper bx-layout-top-area-bar-right">
-    <tr>
-        <td id="bx-layout-cell-1" class="bx-layout-cell bx-layout-top-area-bar-right-top" colspan="2"><div>__cell_1__</div></td>
-    </tr>
-    <tr>
-        <td id="bx-layout-cell-2" class="bx-layout-cell bx-layout-top-area-bar-right-content"><div class="bx-def-padding-right">__cell_2__</div></td>
-        <td id="bx-layout-cell-3" class="bx-layout-cell bx-layout-top-area-bar-right-bar bx-layout-bar-width"><div>__cell_3__</div></td>
-    </tr>
-</table>
+<div class="bx-layout-wrapper bx-layout-top-area-bar-right">
+
+    <bx_include_auto:_row_1_column.html />
+
+    <div class="bx-layout-row">
+        <div class="bx-layout-col bx-layout-bar-right-content">
+            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-2">
+                __cell_2__
+            </div>
+        </div>
+        <div class="bx-layout-col bx-layout-bar-right-bar">
+            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-3">
+                __cell_3__
+            </div>
+        </div>
+    </div>
+
+</div>
 <!-- layout top area bar right [  end  ] -->