Added Medias code and documentation

Fix for Issue #1711

Added media.less and edited bootstrap.less and responsive.less to
manage media components.

Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos

Signed-off-by: Giuliano Velli <wpbrains@giusi.org>

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index d9fa91d6c156fb1153ab6f256bb0e0693bae7636..d87edf50967d165696ce50af5bce6194d376ab1e 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -114,6 +114,18 @@
     padding-left: 10px;
     padding-right: 10px;
   }
+  .media .pull-left,
+  .media .pull-right {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  .media .pull-left {
+    margin-right: 0;
+  }
+  .media .pull-right {
+    margin-left: 0;
+  }
   .modal {
     position: absolute;
     top: 10px;
@@ -169,9 +181,9 @@
     width: 100%;
     min-height: 28px;
     /* Make inputs at least the height of their button counterpart */
-
+  
     /* Makes inputs behave like true block-level elements */
-
+  
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 495188af7faca02cfd553ebb7c809ee469cf1a8b..69cc2f0bcd7b6a16fa65a1d02c04c226c5215be1 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3562,6 +3562,57 @@ a.thumbnail:hover {
 .thumbnail .caption {
   padding: 9px;
 }
+.media,
+.media-body {
+  overflow: hidden;
+  *overflow: visible;
+  zoom: 1;
+}
+.media {
+  margin-bottom: 10px;
+}
+.media .media {
+  margin-top: 20px;
+}
+.media .pull-left {
+  margin-right: 10px;
+}
+.media .pull-right {
+  margin-left: 10px;
+}
+.media .media-object {
+  display: block;
+}
+.medias {
+  margin-top: 20px;
+  margin-left: 0;
+  list-style-type: none;
+}
+.medias .media {
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+.medias > .media:last-child {
+  margin: 0;
+  border-bottom: none;
+}
+.medias > .media .media {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.media-box {
+  margin-bottom: 19px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.09);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
 .label {
   padding: 1px 4px 2px;
   font-size: 10.998px;

diff --git a/docs/components.html b/docs/components.html
index 10b2aec20235a7b205e9c6eaa3a196ed7bbd892e..f30a3348d37ede8fbc85e0ee084956680f3912f7 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -101,6 +101,7 @@
       <li><a href="#badges">Badges</a></li>
       <li><a href="#typography">Typography</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
+      <li><a href="#medias">Medias</a></li>
       <li><a href="#alerts">Alerts</a></li>
       <li><a href="#progress">Progress bars</a></li>
       <li><a href="#misc">Miscellaneous</a></li>
@@ -1680,6 +1681,165 @@
 
 
 
+<!-- Medias
+================================================== -->
+<section id="medias">
+  <div class="page-header">
+    <h1>Medias <small>Layout tool for media objects</small></h1>
+  </div>
+
+  <div class="row">
+    <div class="span6">
+      <h2>Default media</h2>
+      <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block</p>
+      <div class="media">
+       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+       <div class="media-body">
+               <h4>This is the title</h4>
+               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+       </div>
+      </div>
+      <div class="media">
+       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+       <div class="media-body">
+               <h4>This is the title</h4>
+               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                       <div class="media">
+                               <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                               <div class="media-body">
+                                       <h4>This is the title</h4>
+                                       <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                               </div>
+                       </div>
+       </div>          
+      </div>
+    </div>
+    <div class="span6">
+      <h2>Media list</h2>
+      <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
+      <ul class="medias">
+       <li class="media">
+               <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+               <div class="media-body">
+                       <h4>This is the title</h4>
+                       <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+                       <div class="media">
+                               <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                               <div class="media-body">
+                                       <h4>This is the title</h4>
+                                       <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+                               </div>
+                       </div>
+               </div>
+       </li>
+       <li class="media">
+               <a class="pull-right" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+               <div class="media-body">
+                       <h4>This is the title</h4>
+                       <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+               </div>                  
+       </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="row">
+       <div class="span6">
+         <h2>Media Box</h2>
+         <p>Wrap your medias and media lists inside a simple box.</p>
+         <div class="media-box">
+               <div class="media">
+                       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                       <div class="media-body">
+                               <h4>This is the title</h4>
+                               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                               <div class="media">                                     
+                                       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                                       <div class="media-body">
+                                               <h4>This is the title</h4>
+                                               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+         </div>
+         
+         
+         
+         <ul class="medias media-box">
+               <li class="media">
+                       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                       <div class="media-body">
+                               <h4>This is the title</h4>
+                               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                               <div class="media">
+                                       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                                       <div class="media-body">
+                                               <h4>This is the title</h4>
+                                               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                                       </div>
+                               </div>
+                       </div>
+               </li>
+               <li class="media">
+                       <a class="pull-right" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                       <div class="media-body">
+                               <h4>This is the title</h4>
+                               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                       </div>
+               </li>
+               <li class="media">
+                       <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+                       <div class="media-body">
+                               <h4>This is the title</h4>
+                               <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                       </div>
+               </li>
+         </ul>
+       </div>
+    <div class="span6">
+      <h2>The markup</h2>
+      <p>The required markup for medias is light and straightforward. Here's a look at the default setup:</p>
+<pre class="prettyprint linenums">
+&lt;div class="media"&gt;
+       &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
+       &lt;div class="media-body"&gt;
+               &lt;h4&gt;This is the title&lt;/h4&gt;
+               &lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
+       &lt;/div&gt;    
+&lt;/div&gt;
+</pre>
+      <p>The HTML content needed for a media list</p>
+<pre class="prettyprint linenums">
+&lt;ul class="medias"&gt;
+       &lt;li class="media"&gt;
+               &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
+               &lt;div class="media-body"&gt;
+                       &lt;h4&gt;This is the title&lt;/h4&gt;
+                       &lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
+               &lt;/div&gt;
+       &lt;/li&gt;
+&lt;/ul&gt;    
+</pre>
+                       <p>Use a <code>&lt;div&gt;</code> with a class <code>.media-box</code> to wrap your media (works with media lists too) in a styled box.</p>
+<pre class="prettyprint linenums">
+&lt;div class="media-box"&gt;
+       &lt;div class="media"&gt;
+               &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
+               &lt;div class="media-body"&gt;
+                       &lt;h4&gt;This is the title&lt;/h4&gt;
+                       &lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
+               &lt;/div&gt;
+       &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    
+  </div>
+</section>
+
+
+
 <!-- Alerts & Messages
 ================================================== -->
 <section id="alerts">

diff --git a/less/bootstrap.less b/less/bootstrap.less
index d115e956711de1527de7c0c57a27709aca4497ab..4802fb4f6214e417ef6ec8bf022478aa0c12b7a5 100644 (file)
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -52,6 +52,7 @@
 
 // Components: Misc
 @import "thumbnails.less";
+@import "media.less";
 @import "labels.less";
 @import "badges.less";
 @import "progress-bars.less";

diff --git a/less/media.less b/less/media.less
new file mode 100644 (file)
index 0000000..87ea1bc
--- /dev/null
+++ b/less/media.less
@@ -0,0 +1,68 @@
+// COMMON STYLES
+// -------------
+
+.media, .media-body {
+       overflow:hidden;
+       *overflow:visible;
+       zoom:1;
+}
+.media {
+       margin-bottom: 10px;
+}
+.media .media {
+       margin-top: 20px;
+}
+.media .pull-left {
+       margin-right: 10px;
+}
+.media .pull-right {
+       margin-left: 10px;
+}
+.media .media-object {
+       display: block;
+}
+
+// Media list
+.medias {
+       margin-top: 20px;
+       margin-left: 0;
+       list-style-type: none;
+}
+.medias .media {
+       padding-bottom: 10px;
+       border-bottom: 1px solid rgba(0, 0, 0, .07);
+}
+.medias > .media:last-child {
+       margin: 0;
+       border-bottom: none;
+}
+.medias > .media .media {
+       margin-bottom: 0;
+       padding-bottom: 0;
+       border-bottom: none;
+} 
+
+// Media box
+.media-box {
+       margin-bottom: 19px;
+       padding: 10px;
+       background-color: #fff;
+       border: 1px solid rgba(0,0,0,.09);
+       .border-radius(4px);
+       .box-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+@media (max-width: 480px) {
+    .media .pull-left,
+    .media .pull-right  {
+       float: none;
+       display: block;
+       margin-bottom: 10px;
+    }
+    .media .pull-left {
+        margin-right: 0;    
+    }
+    .media .pull-right {
+        margin-left: 0;    
+    }
+}
\ No newline at end of file

diff --git a/less/responsive.less b/less/responsive.less
index 98485eebd8f677ba6823359236a2f3245be88ad7..b72aa90e2e8bbd44249d4e3d28e6dd8e4bcaee06 100644 (file)
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -106,6 +106,20 @@
     padding-left: 10px;
     padding-right: 10px;
   }
+  
+  // Medias
+  .media .pull-left,
+  .media .pull-right {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  .media .pull-left {
+    margin-right: 0;
+  }
+  .media .pull-right {
+    margin-left: 0;
+  }
 
   // Modals
   .modal {