[#2781] Fix display of homepage when image fails to load

ckan · Aug 9, 2012 · 7c86e31 · 7c86e31
1 parent 8769233
commit 7c86e31
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/ckan/public/base/css/main.css b/ckan/public/base/css/main.css
@@ -4809,6 +4809,7 @@ ol.media-grid:after {
 }
 .media-overlay {
   position: relative;
+  min-height: 35px;
 }
 .media-overlay .media-heading {
   position: absolute;
@@ -4821,6 +4822,12 @@ ol.media-grid:after {
   background-color: rgba(0, 0, 0, 0.8);
   font-size: 13px;
   color: #fff;
+  z-index: 1;
+}
+.media-overlay .media-image {
+  float: none;
+  display: block;
+  margin-right: 0;
 }
 .banner {
   -webkit-transform: rotate(45deg);
@@ -7002,6 +7009,23 @@ li .icon-large:before {
   background: url("../images/ckan-logo-footer.png") no-repeat top left;
   text-indent: -900em;
 }
+.lang-select {
+  *zoom: 1;
+}
+.lang-select:before,
+.lang-select:after {
+  display: table;
+  content: "";
+}
+.lang-select:after {
+  clear: both;
+}
+.lang-select label,
+.lang-select select,
+.lang-select .lang-container {
+  float: left;
+  margin-top: 0;
+}
 .lang-dropdown {
   color: #000;
 }

diff --git a/ckan/public/base/less/media.less b/ckan/public/base/less/media.less
@@ -95,6 +95,7 @@ ol.media-grid {
 
 .media-overlay {
   position: relative;
+  min-height: 35px; // Min height for the heading.
 }
 
 .media-overlay .media-heading {
@@ -108,6 +109,13 @@ ol.media-grid {
   background-color: rgba(0, 0, 0, 0.8);
   font-size: 13px;
   color: #fff;
+  z-index: 1;
+}
+
+.media-overlay .media-image {
+  float: none;
+  display: block;
+  margin-right: 0;
 }
 
 // Banner

diff --git a/ckan/templates/home/index.html b/ckan/templates/home/index.html
@@ -44,7 +44,7 @@ <h1 class="page-heading">{% block home_primary_heading %}{{ _("Welcome to CKAN")
         <section class="featured media-overlay">
           <h2 class="media-heading">{% block home_image_caption %}{{ _("This is a featured section") }}{% endblock %}</h2>
           {% block home_image_content %}
-            <a class="image" href="#">
+            <a class="media-image" href="#">
               <img src="http://placehold.it/420x220" alt="Placeholder" width="420" height="220" />
             </a>
           {% endblock %}