Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #14799: Add vertical alignment of image in media component #14801

Merged
merged 2 commits into from
Oct 26, 2014
Merged

Fixes #14799: Add vertical alignment of image in media component #14801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
919b4cc
Fixes #14799: Add vertical alignment of image in media component
stubbornella Oct 14, 2014
e8643ed
Remove .media-object from docs.
jenndodd Oct 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions dist/css/bootstrap.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

112 changes: 84 additions & 28 deletions docs/_includes/components/media.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,27 @@ <h1 id="media" class="page-header">Media object</h1>
<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>

<h3 id="media-default">Default media</h3>
<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
<div class="bs-example">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
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.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
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.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Expand All @@ -33,42 +33,107 @@ <h4 class="media-heading">Nested media heading</h4>
</div>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
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.
</div>
<a class="media-right" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media">
<a class="pull-right" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<a class="pull-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Deprecated pull-right pull-left example</h4>
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.
</div>
</div>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
{% endhighlight %}

<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
<h3 id="media-alignment">Media alignment</h3>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<div class="bs-example">
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/40x40" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
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.
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img data-src="holder.js/40x40" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
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.
</div>
</div>
<div class="media">
<a class="media-left media-bottom" href="#">
<img data-src="holder.js/40x40" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Bottom aligned media</h4>
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.
</div>
</div>
</div>
{% highlight html %}
<div class="media">
<a class="media-left media-middle" href="#">
<img data-src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
{% endhighlight %}

<h3 id="media-list">Media list</h3>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-example">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</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>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
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.
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Expand All @@ -79,8 +144,8 @@ <h4 class="media-heading">Nested media heading</h4>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Expand All @@ -89,22 +154,13 @@ <h4 class="media-heading">Nested media heading</h4>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
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.
</div>
</li>
</ul>
</div>
{% highlight html %}
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Expand Down
35 changes: 20 additions & 15 deletions docs/dist/css/bootstrap.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 30 additions & 37 deletions less/media.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,43 @@
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------


// Common styles
// -------------------------

// Clear the floats
.media,
.media-body {
overflow: hidden;
zoom: 1;
}

// Proper spacing between instances of .media
.media,
.media .media {
.media {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from the alignment for the legacy .media > .pull-left, none of this needs to be nested under .media. The .media, .media-right, .media-body, etc can all be top level selectors here to avoid unnecessary specificity.

// Proper spacing between instances of .media
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}

// For images and videos, set to block
.media-object {
display: block;
}
// Proper spacing of .media-right
.media-right,
.pull-right {
padding-left: 10px;
}

// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Proper spacing of .media-left
.media-left,
.pull-left {
padding-right: 10px;
}

&:first-child {
margin-top: 0;
}

// Media image alignment
// -------------------------
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}

.media {
> .pull-left {
margin-right: 10px;
.media-middle {
vertical-align: middle;
}
> .pull-right {
margin-left: 10px;

.media-bottom {
vertical-align: bottom;
}
}

// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of replacing all four values, can you do something like:

margin-top: 0;
margin-bottom: 5px;

That way we know we're explicitly overriding a couple of values, and not all four of the margin directions.

}

// Media list variation
// -------------------------
Expand Down