Style fixes: labels, breadcrumbs, record view.

themes/bootstrap3/less/bootstrap.less

@@ -48,10 +48,14 @@ mark {
   background: lighten(#FF0, 20%);
   padding: .1em .2em;
 }
+
+// Normalize
 img { max-width: 100%; }
-.label {
-  padding: .25rem .5rem;
-  font-size: 12px;
+
+// Bootstrap overrides
+.breadcrumb {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
 }
 .popover { width: 250px; }
 .resulthead { .clearfix(); }
@@ -82,14 +86,6 @@ h3 { font-size: 16px; }
   .form-control { max-width: 400px; }
   #modal .form-control { max-width: none; }
 }
-@media (max-width: 530px) {
-  .label {
-    display: inline-block;
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
 
 /* ------ Layout ------ */
 footer {

themes/bootstrap3/less/components/record.less

-.record .media-body h3 { margin-top: 0; }
-.recordcover { max-height: 300px; }
+.record .media-body h3 { margin-top: 0; } // Align title with top of image
+.recordcover { max-height: 300px; } // Keep the image from getting out of control
 @media (max-width: 767px) {
   .record .media-left,
   .record .media-right { display: block; }
+  .record .media-body { // Add a gap between the thumbnail and the info
+    display: block;
+    width: auto;
+    margin-top: 1rem;
+  }
 }
+// Comma-separate formatting
 .result .record .format::after,
 .record .format:last-child::after { content: ""; }
 .record .format::after { content: ", "; }
+.record-previews { margin-top: .5rem; }
 
 /* ------ Nav ------ */
 .record-nav.nav { margin-bottom: 1rem; }

themes/bootstrap3/less/components/search.less

@@ -46,11 +46,7 @@ header .container.navbar { margin-bottom: 0; }
 
 @media (min-width: 768px) {
   .search-header { display: flex; }
-  .search-stats {
-    flex-grow: 1;
-    padding: 0;
-    line-height: 2.5;
-  }
+  .search-stats { flex-grow: 1; }
   .search-controls { text-align: right; }
 }
 
@@ -110,14 +106,12 @@ header .container.navbar { margin-bottom: 0; }
       max-width: 100%;
       max-height: 300px;
     }
-    &.small,
-    &.medium,
-    &.large {
-      img {
-        display: inline-block;
-        width: @thumbnail-width-small;
-        max-width: none;
-      }
+    &.small img,
+    &.medium img,
+    &.large img {
+      display: inline-block;
+      width: @thumbnail-width-small;
+      max-width: none;
     }
   }
 
@@ -151,11 +145,18 @@ header .container.navbar { margin-bottom: 0; }
     }
   }
 }
+.record .media-left,
+.record .media-right {
+  &.small img,
+  &.medium img,
+  &.large img { width: auto; }
+}
 .result-body {
   padding: 0;
   padding-bottom: .25rem;
 }
 .result-links .alert { margin: 0; }
+.result-formats { margin-bottom: .5rem; }
 
 .btn-bookbag-toggle form { display: inline; }
 .btn-bookbag-toggle .fa { margin-right: .3rem; }

themes/bootstrap3/templates/RecordDriver/Pazpar2/result-list.phtml

@@ -94,14 +94,19 @@
         <? endif; ?>
       <? endif; ?>
 
-      <?=$this->record($this->driver)->getFormatList() ?>
+      <div class="result-formats">
+        <?=$this->record($this->driver)->getFormatList() ?>
 
-      <? if (!$openUrlActive && empty($urls) && $this->driver->supportsAjaxStatus()): ?>
-        <span class="status ajax-availability small">
-          <span class="label label-default"><?=$this->transEsc('Loading')?>...</span>
-        </span>
-      <? endif; ?>
-      <?=$this->record($this->driver)->getPreviews()?>
+        <? if (!$openUrlActive && empty($urls) && $this->driver->supportsAjaxStatus()): ?>
+          <span class="status ajax-availability small">
+            <span class="label label-default"><?=$this->transEsc('Loading')?>...</span>
+          </span>
+        <? endif; ?>
+      </div>
+
+      <div class="result-previews">
+        <?=$this->record($this->driver)->getPreviews()?>
+      </div>
 
       <?=$this->driver->supportsCoinsOpenUrl()?'<span class="Z3988" title="'.$this->escapeHtmlAttr($this->driver->getCoinsOpenUrl()).'"></span>':''?>
     </div>

themes/bootstrap3/templates/RecordDriver/SolrDefault/core.phtml

@@ -23,7 +23,11 @@
          // from this area of the record view, this can be split into
          // getPreviewData() (should stay here) and
          // getPreviewLink() (can go in your desired tab) ?>
-      <? if ($preview): ?><?=$preview?><? endif; ?>
+      <? if ($preview): ?>
+        <div class="record-previews">
+          <?=$preview?>
+        </div>
+      <? endif; ?>
     </div>
   <? endif; ?>
   <div class="media-body">

themes/bootstrap3/templates/RecordDriver/SolrDefault/result-grid.phtml

@@ -20,7 +20,9 @@ $urls = $this->record($this->driver)->getLinkDetails($openUrlActive);
     <?=$this->record($this->driver)->getCover('result-grid', 'small', $this->recordLink()->getUrl($this->driver)); ?>
     <? if (!$openUrlActive && empty($urls)): ?>
       <? if ($this->driver->supportsAjaxStatus()): ?>
-        <div class="status ajax-availability hidden"><span class="label label-default"><?=$this->transEsc('Loading')?>...</span></div>
+        <div class="result-formats status ajax-availability hidden">
+          <span class="label label-default"><?=$this->transEsc('Loading')?>...</span>
+        </div>
       <? endif; ?>
     <? endif; ?>
     <div>

themes/bootstrap3/templates/RecordDriver/SolrDefault/result-list.phtml

@@ -137,14 +137,19 @@
         <? endif; ?>
       <? endif; ?>
 
-      <?=$this->record($this->driver)->getFormatList() ?>
+      <div class="result-formats">
+        <?=$this->record($this->driver)->getFormatList() ?>
 
-      <? if (!$openUrlActive && empty($urls) && $this->driver->supportsAjaxStatus()): ?>
-        <span class="status ajax-availability hidden">
-          <span class="label label-default"><?=$this->transEsc('Loading')?>...</span>
-        </span>
-      <? endif; ?>
-      <?=$this->record($this->driver)->getPreviews()?>
+        <? if (!$openUrlActive && empty($urls) && $this->driver->supportsAjaxStatus()): ?>
+          <span class="status ajax-availability hidden">
+            <span class="label label-default"><?=$this->transEsc('Loading')?>...</span>
+          </span>
+        <? endif; ?>
+      </div>
+
+      <div class="result-previews">
+        <?=$this->record($this->driver)->getPreviews()?>
+      </div>
     </div>
     <div class="result-links hidden-print">
       <? /* Display qrcode if appropriate: */ ?>