[2556] Update class names on the media component

ckan · Jun 21, 2012 · a8bdd9b · a8bdd9b
1 parent 4a6ff60
commit a8bdd9b
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 53 deletions.
diff --git a/ckan/public/base/less/media.less b/ckan/public/base/less/media.less
@@ -3,29 +3,31 @@
   overflow: hidden;
 }
 
-.media .content {
+.media-content {
 }
 
-.media .content:before,
-.media .content:after {
+.media-content:before,
+.media-content:after {
 }
 
-.media .content > :last-child {
+.media-content > :last-child {
   margin-bottom: 0;
 }
 
-.media .content > .heading {
+.media-heading {
   font-size: 14px;
+  line-height: 1.3em;
+  margin: 5px 0;
 }
 
-.media .image {
+.media-image {
   position: relative;
   float: left;
   margin-right: 10px;
   overflow: hidden;
 }
 
-.media .image:after {
+.media-image:after {
   .box-shadow(inset 0 0 2px rgba(0, 0, 0, 0.3));
   content: "";
   position: absolute;
@@ -36,18 +38,18 @@
   z-index: 1;
 }
 
-.media .image img {
+.media-image img {
   display: block;
   margin: 0 auto;
 }
 
-.media-vertical .image,
-.media-vertical .content {
+.media-vertical .media-image,
+.media-vertical .media-content {
   float: none;
   display: block;
 }
 
-.media-vertical .image {
+.media-vertical .media-image {
   margin-right: 0;
   max-height: 125px;
 }
@@ -71,7 +73,7 @@ ol.media-grid {
   clear: left;
 }
 
-.media-grid .media > .content {
+.media-grid .media .media-content {
   min-height: 63px;
 }
 
@@ -90,28 +92,19 @@ ol.media-grid {
   position: relative;
 }
 
-.media-overlay .heading {
+.media-overlay .media-heading {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 3px 10px;
+  padding: 7px 10px;
+  margin: 0;
   background-color: #000;
   background-color: rgba(0, 0, 0, 0.8);
   font-size: 14px;
   color: #fff;
 }
 
-// Module
-
-.media.module {
-  padding: 0;
-}
-
-.media.module > .heading {
-  background: none;
-}
-
 // Banner
 .transform (@func) {
   -webkit-transform: @arguments;
@@ -126,6 +119,7 @@ ol.media-grid {
   -o-transform-origin: @arguments;
   transform-origin: @arguments;
 }
+
 .banner {
   .transform(rotate(45deg));
   .transform-origin(center, center);

diff --git a/ckan/templates/group/snippets/group_item.html b/ckan/templates/group/snippets/group_item.html
@@ -1,8 +1,8 @@
 {% set url = h.url_for(group.type ~ '_read', action='read', id=group.name) %}
 <li class="media media-vertical{% if first %} first{% endif %}{% if last %} last{% endif %}">
-  <a class="image" href="{{ url }}"><img src="{{ group.image_url or '/base/images/placeholder-group.png' }}" /></a>
-  <div class="content">
-    <h3 class="heading">
+  <a class="media-image" href="{{ url }}"><img src="{{ group.image_url or '/base/images/placeholder-group.png' }}" /></a>
+  <div class="media-content">
+    <h3 class="media-heading">
       <a href="{{ url }}" title="{{ _('View {name}').format(name=group.display_name) }}">
         {{ group.display_name }}
       </a>

diff --git a/ckan/templates/home/index.html b/ckan/templates/home/index.html
@@ -30,7 +30,7 @@ <h1 class="page-heading">{{ _("Welcome to CKAN") }}</h1>
       </header>
 
       <section class="featured media-overlay">
-        <h2 class="module-heading">{{ _("This is a featured section") }}</h2>
+        <h2 class="media-heading">{{ _("This is a featured section") }}</h2>
         <a class="image" href="#">
           <img src="http://placehold.it/420x220" />
         </a>

diff --git a/ckan/templates/snippets/group.html b/ckan/templates/snippets/group.html
@@ -13,11 +13,11 @@
 {% with truncate=truncate or 0, url=h.url_for(controller='group', action='read', id=group.name) %}
   <section class="module module-narrow module-shallow group">
     <div class="module-content media media-vertical">
-      <a class="image" href="{{ url }}">
+      <a class="media-image" href="{{ url }}">
         <img src="{{ group.image_url or h.url_for('/base/images/placeholder-group.png') }}" width="200" height="125" />
       </a>
-      <div class="content">
-        <h3><a href={{ url }}>{{ group.title or group.name }}</a></h3>
+      <div class="media-content">
+        <h3 class="media-heading"><a href={{ url }}>{{ group.title or group.name }}</a></h3>
         {% if group.description %}
           {% if truncate_description %}
             <p>{{ group.description }}</p>

diff --git a/ckan/templates/snippets/related.html b/ckan/templates/snippets/related.html
@@ -1,21 +1,22 @@
-{% set item = pkg.related | first %}
-<section class="module module-narrow module-shallow related{{ " related-empty" if not item }}">
-  <h2 class="module-heading"><i class="icon-medium icon-picture"></i> Related <a class="action" href="{{ h.url_for(controller='related', action='new', id=pkg.name) }}">Add Related</a></h2>
-  <div class="module-content media">
-    {% if item %}
-      {% with url = h.url_for(controller='related', action='list', id=pkg.name) %}
-      <a class="logo" href="{{ url }}">
-          <img src="{{ item.image_url or "http://placehold.it/200x125" }}" width="200" height="125" />
-        </a>
-        <div class="content">
-          <h3 class="heading"><a href="{{ url }}">{{ item.title }}</a></h3>
-          <p>{{ h.markdown_extract(item.description, 70) }}</p>
-        </div>
-      {% endwith %}
-    {% else %}
-      <p>No apps, ideas, news stories or images have been
-      related to this dataset yet, why not add one now?</p>
-      <p class="action"><a class="btn" href="{{ h.url_for(controller='related', action='new', id=pkg.name) }}">Add Item</a></p>
-    {% endif %}
-  </div>
-</section>
+{% with item = item or pkg.related|first %}
+  <section class="module module-narrow module-shallow related{{ " related-empty" if not item }}">
+    <h2 class="module-heading"><i class="icon-medium icon-picture"></i> Related <a class="action" href="{{ h.url_for(controller='related', action='new', id=pkg.name) }}">Add Related</a></h2>
+    <div class="module-content media">
+      {% if item %}
+        {% with url = h.url_for(controller='related', action='list', id=pkg.name) %}
+          <a class="image logo" href="{{ url }}">
+            <img src="{{ item.image_url or "http://placehold.it/200x125" }}" width="200" height="125" />
+          </a>
+          <div class="media-content">
+            <h3 class="media-heading"><a href="{{ url }}">{{ item.title }}</a></h3>
+            <p>{{ h.markdown_extract(item.description, 70) }}</p>
+          </div>
+        {% endwith %}
+      {% else %}
+        <p>No apps, ideas, news stories or images have been
+        related to this dataset yet, why not add one now?</p>
+        <p class="action"><a class="btn" href="{{ h.url_for(controller='related', action='new', id=pkg.name) }}">Add Item</a></p>
+      {% endif %}
+    </div>
+  </section>
+{% endwith %}
diff --git a/ckan/templates/user/read.html b/ckan/templates/user/read.html
@@ -19,7 +19,7 @@
   <article class="module profile">
     <div class="module-content profile-info">
       <header class="media">
-        <span class="image">{{ h.linked_gravatar(user.email_hash, 150) }}</span>
+        <span class="media-image">{{ h.linked_gravatar(user.email_hash, 150) }}</span>
         <div class="description">
           <h1 class="heading">{{ user.fullname or _('No full name provided') }}</h1>
           {% if user.about_formatted %}