Permalink
Browse files

fix(media component): code improvements

  • Loading branch information...
lara-aigmueller committed Sep 15, 2016
1 parent 264b3cc commit aa8330486b4f50174bfd8f6baf99a6f3576e13d7
View
@@ -11,13 +11,13 @@ The Groundhog **media component** is a combination of any type of media (img, vi
## Including a media component
1. To include a media component create a wrapping `div` with a `.media` class and the desired alignment-class (horiontal or vertical, [see below][mediaClass]).
1. To include a media component create a wrapping `div` with a `.media` class and the desired alignment-class (horizontal or vertical, [see below][mediaClass]).
```html
<div class="media media--vertical">
...
</div>
```
2. The media element is put in a `div` with a `.media__item` class, the content in a `div` with a `.media__content` class.
2. The media element itself is put into a `div` with a `.media__item` class, the content in a `div` with a `.media__content` class.
```html
<div class="media media--vertical">
<div class="media__item">
@@ -28,7 +28,7 @@ The Groundhog **media component** is a combination of any type of media (img, vi
</div>
</div>
```
3. The order of the inner `div` elements can be reversed.
3. The order of the inner `div` elements can be reversed, if the media item should be on the right or below the text.
```html
<div class="media media--vertical">
<div class="media__content">
@@ -41,7 +41,7 @@ The Groundhog **media component** is a combination of any type of media (img, vi
```
4. Media components can be nested.
```html
<div class="media media--vertical">
<div class="media media--horizontal">
<div class="media__item">
...
</div>
View
@@ -1,13 +1,12 @@
@import "../common/variables";
.media {
background-color: $gray-100;
display: flex;
flex-direction: column;
padding: 1.5rem;
}
.media__item {
.media > div:first-child {
margin: 0 0 1.5rem;
}
@@ -19,21 +18,22 @@
flex-grow: 2;
}
.media .media {
padding: 0;
}
@media (min-width: $screen-sm) {
.media--horizontal {
flex-direction: row;
}
.media--horizontal .media__item {
.media--horizontal > div:first-child {
margin: 0 1.5rem 0 0;
}
.media__item--right {
flex-direction: row-reverse;
}
.media__item--right .media__item {
margin: 0 0 0 1.5rem;
}
}
@@ -6,11 +6,11 @@
</div>
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Full stack monitoring</li>
<li>Single transaction analysis</li>
<li>Broadest technology coverage</li>
<li>ut enim ad minim veniam</li>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat</li>
</ul>
</div>
</div>
@@ -1,14 +1,14 @@
<div class="media media--horizontal">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
<img src="http://placehold.it/350x350" alt="image placeholder">
</div>
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Full stack monitoring</li>
<li>Single transaction analysis</li>
<li>Broadest technology coverage</li>
<li>ut enim ad minim veniam</li>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat</li>
</ul>
</div>
</div>
@@ -1,14 +1,14 @@
<div class="media media--horizontal media__item--right">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
</div>
<div class="media media--horizontal">
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Full stack monitoring</li>
<li>Single transaction analysis</li>
<li>Broadest technology coverage</li>
<li>ut enim ad minim veniam</li>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat</li>
</ul>
</div>
<div class="media__item">
<img src="http://placehold.it/350x250" alt="image placeholder">
</div>
</div>
@@ -1,19 +1,21 @@
<div class="media media--horizontal">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
<img src="http://placehold.it/350x450" alt="image placeholder">
</div>
<div class="media__content">
<div class="media media--vertical">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
<svg role="img" class="icon icon--green icon--big">
<use xlink:href="#ruxit"></use>
</svg>
</div>
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Full stack monitoring</li>
<li>Single transaction analysis</li>
<li>Broadest technology coverage</li>
<li>ut enim ad minim veniam</li>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat</li>
</ul>
</div>
</div>

0 comments on commit aa83304

Please sign in to comment.