#14 - constraining content of note depending of screen size

inc/classes/BxDolTemplate.php

@@ -299,6 +299,7 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton {
             'general.css',
             'icons.css',
             'colors.css',
+            'media-desktop.css',
             'media-tablet.css',
             'media-phone.css',
             'media-print.css',

modules/boonex/notes/template/css/main.css

@@ -17,7 +17,7 @@
 
 /* enity view */
 
-.bx-notes-entity-content * {
-    max-width:100%;
-    overflow:hidden;
+.bx-notes-entity-content > p {
+    max-width:95% !important;
+    overflow:scroll !important;
 }

modules/boonex/notes/template/entry-text.html

@@ -1,5 +1,5 @@
 
-<div class="bx-notes-entity-content">
+<div class="bx-notes-entity-content bx-def-constraint-list bx-def-constraint-pre bx-def-constraint-object bx-def-constraint-iframe bx-def-constraint-img">
 
     <h1>__title__</h1>
 

template/css/media-phone.css

@@ -8,6 +8,26 @@
     display:block;
 }
 
+
+.bx-def-constraint-all *,
+.bx-def-constraint-list ol, .bx-def-constraint-list ul,
+.bx-def-constraint-pre pre,
+.bx-def-constraint-object object,
+.bx-def-constraint-iframe iframe,
+.bx-def-constraint-img img {
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    max-width:300px !important;
+    overflow:hidden !important;
+}
+.bx-def-constraint-pre pre {
+    overflow:scroll !important;
+}
+
+
 /* default.css */ 
 
 .bx-def-page-width {

template/css/media-tablet.css

@@ -8,7 +8,27 @@
     display:block;
 }
 
-/* default.css */ 
+
+.bx-def-constraint-all *,
+.bx-def-constraint-list ol, .bx-def-constraint-list ul,
+.bx-def-constraint-pre pre,
+.bx-def-constraint-object object,
+.bx-def-constraint-iframe iframe,
+.bx-def-constraint-img img {
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    max-width:500px !important;
+    overflow:hidden !important;
+}
+.bx-def-constraint-pre pre {
+    overflow:scroll !important;
+}
+
+
+/* default.css */
 
 .bx-def-page-width {
     width:auto;