caboose-cms 0.9.208 → 0.9.209

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c38ca1dd899315b1bb4ea1ef3473b6eff70b26d3a7d1c59665aa61012fcf4c2f
-  data.tar.gz: 60baa129bba6f0cab07bb699fc727a5b6944e0b0d6abe8fae7ea1c2e7dfe2736
+  metadata.gz: 3f240b8f7e43d86233a5fbe560e9ee1050f991d30982dbad188412742619969d
+  data.tar.gz: 676146fb8424d3236d64a0373002ea0bf0bba9a84a6d407cfeac607a67b283cb
 SHA512:
-  metadata.gz: 991ff197c5e0b4b30f883dab98c71cbada05c2407b0904c97b726182afac86564b16b83ba62624edbb0b4d8e4aad81d343a7bad249dfe76c5f1705841384853a
-  data.tar.gz: 122b91f53f3899eea5ecffebb57229393540ab427fa305ea9dfb91392c0955b51191e138ff8ade4d60ede8724893bcf4e947dd177624efc2e176dac0a36c346e
+  metadata.gz: faf13344ea43cb3262b6b915048c8b8a196e52b33a2bafc9ce62dbbe46f4451e1fa0f628d43d0e01654a19828088d1faff8166eeb5175cda9c60ca0a9475543c
+  data.tar.gz: '09efeee1d9f86edb50d910fab362d518a82dd8a124500385f14d520543469dbf232b4e48a70a32e8f2f1eeb1eaf762a4813dc0c34dc61b132d513a288944a167'

data/app/assets/javascripts/caboose/block_content_controller_dragdrop.js

@@ -144,7 +144,7 @@ BlockContentController.prototype = {
 
   render_block: function(block_id) {
     var that = this;
-  //  console.log("rendering block " + block_id + "...");
+    // console.log("rendering block " + block_id + "...");
     var url = that.base_url() + '/' + block_id + '/render';
     that.is_modified();
     $.ajax({

data/app/assets/javascripts/caboose/block_modal_controllers/block_dd_modal_controller.js

@@ -88,7 +88,6 @@ var BlockModalController = ModalController.extend({
       {        
         var separate_children = that.block.block_type.allow_child_blocks && that.block.block_type.default_child_block_type_id;
         var separate_child_id = separate_children ? that.block.block_type.default_child_block_type_id : false;
-    
         $.each(that.block.children, function(i, b) {
           if (separate_children && b.block_type.id == separate_child_id) return;                    
           var div_id = 'block_' + b.id + (that.complex_field_types.indexOf(b.block_type.field_type) == -1 ? '_value' : '');
@@ -127,14 +126,14 @@ var BlockModalController = ModalController.extend({
   {    
     var that = this;
     var p = $('<p/>').css('clear', 'both')
-      .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Close').click(function() { that.close(); that.parent_controller.render_blocks(); })).append(' ');
-    if (!that.block.name)                        
+      .append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('close').val('Close').click(function() { that.close(); /* that.parent_controller.render_blocks(); */ })).append(' ');
+    if (!that.block.name && that.block.block_type.name.indexOf('_header') < 0)                        
     {
-      p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Delete Block').click(function() { that.delete_block(); })).append(' ');
-      p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Duplicate Block').click(function() { that.duplicate_block(); })).append(' ');
-    }
-    p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Move Up'   ).click(function() { that.move_up();         })).append(' ');
-    p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Move Down' ).click(function() { that.move_down();       })).append(' ');    
+      p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('delete').val('Delete Block').click(function() { that.delete_block(); })).append(' ');
+      p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('duplicate').val('Duplicate Block').click(function() { that.duplicate_block(); })).append(' ');
+      p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('moveup').val('Move Up'   ).click(function() { that.move_up();         })).append(' ');
+      p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('movedown').val('Move Down' ).click(function() { that.move_down();       })).append(' '); 
+    }   
     //p.append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Advanced'  ).attr('id', 'btn_advanced').click(function() { that.print_advanced();  }));
     $('#modal_controls').empty().append(p);    
   },
@@ -208,7 +207,12 @@ var BlockModalController = ModalController.extend({
     var that = this;
     if (that.block.block_type.field_type != 'block' && that.block.children.length == 0)
       return;
-    $.each(that.block.children, function(i, b) { if ( b.name != null || that.block.block_type.default_child_block_type_id == b.block_type.id ) { that.render_child_block(b); } });        
+    $.each(that.block.children, function(i, b) { 
+      if ( b.name != null || that.block.block_type.default_child_block_type_id == b.block_type.id )
+        that.render_child_block(b);
+      else
+        $("#modal_content #block_" + b.id).remove();
+    });        
   },
   
   render_child_block: function(b)
@@ -417,7 +421,7 @@ var BlockModalController = ModalController.extend({
       that.modal(div, 780);
       return;
     }    
-    that.autosize("<p class='loading'>Adding block...</p>");
+    that.autosize("<p class='note loading'>Adding block...</p>");
     
     bt = false;
     $.ajax({      
@@ -463,7 +467,7 @@ var BlockModalController = ModalController.extend({
       that.autosize(p);
       return;
     }
-    that.autosize("<p class='loading'>Deleting block...</p>");
+    that.autosize("<p class='note loading'>Deleting block...</p>");
     that.parent_controller.delete_block(that.block.id, true);
     that.close();
   },
@@ -471,7 +475,7 @@ var BlockModalController = ModalController.extend({
   duplicate_block: function()
   {
     var that = this;
-    that.autosize("<p class='loading'>Duplicating...</p>");
+    that.autosize("<p class='note loading'>Duplicating...</p>");
     that.parent_controller.duplicate_block(that.block.id);
     that.autosize("<p class='note success'>Duplicated block.</p>");
   },
@@ -479,7 +483,7 @@ var BlockModalController = ModalController.extend({
   move_up: function()
   {
     var that = this;
-    that.autosize("<p class='loading'>Moving up...</p>");
+    that.autosize("<p class='note loading'>Moving up...</p>");
     $.ajax({
       url: that.block_url(that.block) + '/move-up',
       type: 'put',    
@@ -497,7 +501,7 @@ var BlockModalController = ModalController.extend({
   move_down: function()
   {
     var that = this;
-    that.autosize("<p class='loading'>Moving down...</p>");
+    that.autosize("<p class='note loading'>Moving down...</p>");
     $.ajax({
       url: that.block_url(that.block) + '/move-down',
       type: 'put',    

data/app/assets/javascripts/caboose/block_modal_controllers/block_modal_controller.js

@@ -381,7 +381,7 @@ var BlockModalController = ModalController.extend({
       that.modal(div, 780);
       return;
     }    
-    that.autosize("<p class='loading'>Adding block...</p>");
+    that.autosize("<p class='note loading'>Adding block...</p>");
     
     bt = false;
     $.ajax({      
@@ -429,7 +429,7 @@ var BlockModalController = ModalController.extend({
       that.autosize(p);
       return;
     }
-    that.autosize("<p class='loading'>Deleting block...</p>");
+    that.autosize("<p class='note loading'>Deleting block...</p>");
     $.ajax({
       url: that.block_url(that.block),
       type: 'delete',    
@@ -448,7 +448,7 @@ var BlockModalController = ModalController.extend({
   duplicate_block: function()
   {
     var that = this;
-    that.autosize("<p class='loading'>Duplicating...</p>");
+    that.autosize("<p class='note loading'>Duplicating...</p>");
     $.ajax({
       url: that.block_url(that.block) + '/duplicate',
       type: 'put',
@@ -465,7 +465,7 @@ var BlockModalController = ModalController.extend({
   move_up: function()
   {
     var that = this;
-    that.autosize("<p class='loading'>Moving up...</p>");
+    that.autosize("<p class='note loading'>Moving up...</p>");
     $.ajax({
       url: that.block_url(that.block) + '/move-up',
       type: 'put',    
@@ -484,7 +484,7 @@ var BlockModalController = ModalController.extend({
   move_down: function()
   {
     var that = this;
-    that.autosize("<p class='loading'>Moving down...</p>");
+    that.autosize("<p class='note loading'>Moving down...</p>");
     $.ajax({
       url: that.block_url(that.block) + '/move-down',
       type: 'put',    

data/app/assets/javascripts/caboose/block_modal_controllers/media_modal_controller.js

@@ -207,8 +207,10 @@ var MediaModalController = BlockModalController.extend({
         else if (m.original_name) {
           var ext = m.original_name.match(/\.[0-9a-z]+$/i);
           li.addClass('empty');
-          if (ext && ext.length > 0)
+          if (ext && ext.length > 0) {
+            li.addClass(ext[0].replace(".","").toLowerCase());
             li.append($('<img/>').attr('src', that.assets_path + 'caboose/file_types/' + ext[0].replace(".","").toLowerCase() + '.png').addClass('file-icon').attr("width","80").attr("height","80"));
+          }
         }   
 
         //if (that.selected_media.indexOf(m.id) > -1)
@@ -251,7 +253,7 @@ var MediaModalController = BlockModalController.extend({
           var d = Date.parse(resp['last_upload_processed']);        
           if (d > that.last_upload_processed) {
             console.log("new processed image, refreshing");
-            that.refresh_media();      
+            that.refresh_media(function() { that.print_media(); });          
           }      
           else {
             console.log("no new processed images, waiting");
@@ -286,7 +288,7 @@ var MediaModalController = BlockModalController.extend({
     // }
     
     $('#top_controls').empty();
-    var img_tag = m.media_type == 'image' ? ($('<img/>').attr('id', 'detail_image').attr('src', m.image_urls ? m.image_urls.thumb_url : 'https://cabooseit.s3.amazonaws.com/assets/select_image.png')) : ( $('<p/>').text(m.original_name) );
+    var img_tag = m.media_type == 'image' ? ($('<img/>').attr('id', 'detail_image').attr('src', m.image_urls ? m.image_urls.thumb_url : 'https://cabooseit.s3.amazonaws.com/assets/select_image.png')) : ( $('<p/>').addClass("filename").text(m.original_name) );
     $('#the_modal #media').empty()
       .append( $("<div />").addClass("img-wrap").append(img_tag) );
       // .append($('<p/>').append($('<div/>').attr('id', 'media_' + media_id + '_media_category_id' ))) 
@@ -296,13 +298,13 @@ var MediaModalController = BlockModalController.extend({
     var select_text = m.media_type == 'image' ? 'Select this Image' : 'Select this File';
     $('#modal_controls').empty()
       .append($('<p/>').css('clear', 'both')
-        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val(select_text ).click(function(e) { that.select_media(media_id)                           }))     
-        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Back'            ).click(function(e) { 
+        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('select').val(select_text ).click(function(e) { that.select_media(media_id)                           }))     
+        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('back').val('Back'            ).click(function(e) { 
           that.print_top_controls();
           that.print_media();
           that.print_controls();
         }))   
-        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Close'             ).click(function(e) { that.parent_controller.render_blocks(); that.close(); }))
+  //      .append($('<input/>').attr('type', 'button').addClass('caboose-btn').addClass('close').val('Close'             ).click(function(e) { that.parent_controller.render_blocks(); that.close(); }))
       );
     
     // var m = new ModelBinder({

data/app/assets/javascripts/caboose/modal_controller.js

@@ -36,7 +36,7 @@ var ModalController = Class.extend({
     var that = this;
     if (that.before_close) that.before_close();
     $("#caboose_sidebar_holder").removeClass("visible");
-    setTimeout(function(){ $("#caboose_sidebar_holder").html("") }, 500); 
+    setTimeout(function(){ $("#caboose_sidebar_holder").html("") }, 500);
   },
 
   /*****************************************************************************

data/app/assets/stylesheets/caboose/admin_block_edit_image.css.scss

@@ -145,6 +145,7 @@
       border: #b5b5b5 1px solid;
       border-radius: 2px;
       cursor: pointer;
+      overflow: hidden;
       img {
         display: none;
       }

data/app/assets/stylesheets/caboose/admin_edit_page_content_dragdrop.scss

@@ -179,6 +179,7 @@ body.editing .footer-wrapper #footer-msg {
         display: block;
         width: 100%;
         text-align: center;
+        padding: 10px;
       }
     }
     h1, h2, h3, h4, h5, h6 {
@@ -187,6 +188,12 @@ body.editing .footer-wrapper #footer-msg {
       margin-bottom: 5px;
       color: #252525;
     }
+    h6 { font-size: 14px; }
+    h5 { font-size: 15px; }
+    h4 { font-size: 16px; }
+    h3 { font-size: 17px; }
+    h2 { font-size: 18px; }
+    h1 { font-size: 19px; }
     #modal_content {
       & > div {
         margin-bottom: 8px;
@@ -232,6 +239,21 @@ body.editing .footer-wrapper #footer-msg {
             }
           }
         }
+        .caboose-btn.remove {
+          background-size: 11px;
+          background-repeat: no-repeat;
+          background-position: 8px 7px;
+          background-image: url('/assets/caboose/icons/delete.png');
+          background-color: #6f3030;
+          &:hover { background-color: shade(#6f3030, 20%);  }
+        }
+        .filename {
+          background: #ecebe8;
+          margin: 0;
+          padding: 5px;
+          width: 190px;
+          display: block;
+        }
       }
       .mb_container {
         padding-top: 18px;
@@ -266,22 +288,30 @@ body.editing .footer-wrapper #footer-msg {
           min-height: 80px;
         }
         .mb_bound_textarea_controls {
-          top: 18px !important;
+          top: 0 !important;
           left: auto !important;
-          right: 0;
-          width: 148px;
+          right: -2px;
+          width: 128px !important;
+          & > div {
+            width: 128px !important;
+          }
           a {
-            height: 30px;
+            height: 22px;
             background: #ecebe8;
             border: 1px solid #c5c5c5;
-            padding: 6px 0 0 0;
+            padding: 0;
             margin: 0 0 0 3px;
-            width: 70px;
+            width: 60px !important;
+            font-size: 12px;
+            line-height: 20px;
+            &:hover {
+              background: #d8d7d6;
+            }
           }
         }
         select.mb_fake {
           top: 18px;
-          height: 30px !important;
+          height: 27px !important;
           border: 0;
           width: 100% !important;
           font-family: 'Roboto' !important;
@@ -351,6 +381,11 @@ body.editing .footer-wrapper #footer-msg {
             &:hover span.name {
               opacity: 1;
             }
+            &.pdf, &.doc, &.docx {
+              span.name {
+                opacity: 1;
+              }
+            }
           }
         }
       }
@@ -435,6 +470,44 @@ body.editing .footer-wrapper #footer-msg {
       p {
         .caboose-btn {
           margin: 0 0 4px 0;
+          background-size: 11px;
+          background-repeat: no-repeat;
+          background-position: 8px 7px;
+          &.select {
+            background-image: url('/assets/caboose/icons/right.png');
+            background-color: #2f562f;
+            &:hover { background-color: shade(#2f562f, 20%);  }
+          }
+          &.back {
+            background-image: url('/assets/caboose/icons/left.png');
+            background-color: #484848;
+            &:hover { background-color: shade(#484848, 20%);  }
+          }
+          &.close {
+            background-image: url('/assets/caboose/icons/left.png');
+            background-color: #3e3e71;
+            &:hover { background-color: shade(#3e3e71, 20%);  }
+          }
+          &.delete {
+            background-image: url('/assets/caboose/icons/delete.png');
+            background-color: #6f3030;
+            &:hover { background-color: shade(#6f3030, 20%);  }
+          }
+          &.duplicate {
+            background-image: url('/assets/caboose/icons/copy.png');
+            background-color: #2f562f;
+            &:hover { background-color: shade(#2f562f, 20%);  }
+          }
+          &.moveup {
+            background-image: url('/assets/caboose/icons/up.png');
+            background-color: #7d673d;
+            &:hover { background-color: shade(#7d673d, 20%);  }
+          }
+          &.movedown {
+            background-image: url('/assets/caboose/icons/down.png');
+            background-color: #7d673d;
+            &:hover { background-color: shade(#7d673d, 20%);  }
+          } 
         }
       }
     }

data/app/assets/stylesheets/caboose/admin_media_index.css.scss

@@ -130,8 +130,8 @@
       display: block;
       overflow: hidden;
       text-align: center;
-    //  padding: 8px;
       border: 1px solid #dadada;
+      opacity: 1;
       &.png {
         background-image: url('/assets/caboose/grid.png');
         background-size: 16px;

data/app/controllers/caboose/block_type_categories_controller.rb

@@ -14,6 +14,30 @@ module Caboose
       render :json => BlockTypeCategory.tree
     end
 
+    # @route GET /admin/block-type-categories/new
+    def admin_new
+      render :layout => 'caboose/admin'
+    end
+
+    # @route POST /admin/block-type-categories
+    def admin_create
+      render :json => false and return if !logged_in_user.is_super_admin?
+      resp = StdClass.new
+      if params[:name].blank?   
+        resp.error = "Name is required."
+      else
+        par = BlockTypeCategory.where(:name => 'Content').first
+        max = BlockTypeCategory.where(:parent_id => par.id).maximum(:sort_order) if par
+        btc = BlockTypeCategory.new
+        btc.name = params[:name]
+        btc.parent_id = par.id if par
+        btc.sort_order = max + 1 if max
+        btc.save
+        resp.redirect = "/admin/block-type-categories/#{btc.id}"
+      end
+      render :json => resp
+    end
+
     # @route GET /admin/block-type-categories/:id
     def admin_edit
       redirect_to '/admin' and return if !logged_in_user.is_super_admin?

data/app/views/caboose/block_type_categories/admin_edit.html.erb

@@ -32,7 +32,7 @@ $(document).ready(function() {
     authenticity_token: '<%= form_authenticity_token %>',
     attributes: [
       { name: 'name' , nice_name: 'Name', type: 'text'     , value: <%= raw Caboose.json(@btc.name) %>, width: 400 },
-      { name: 'parent_id' , nice_name: 'Parent', type: 'text'     , value: <%= raw Caboose.json(@btc.parent_id) %>, width: 400 },
+      { name: 'parent_id' , nice_name: 'Parent', type: 'select'     , value: <%= raw Caboose.json(@btc.parent_id) %>, options_url: '/admin/block-type-categories/tree-options', width: 400 },
       { name: 'sort_order' , nice_name: 'Sort Order', type: 'text'     , value: <%= raw Caboose.json(@btc.sort_order) %>, width: 400 },
       { name: 'show_in_sidebar' , nice_name: 'Show in Sidebar', type: 'checkbox'     , value: <%= raw Caboose.json(@btc.show_in_sidebar) %>, width: 400 }
     ]    

data/app/views/caboose/block_type_categories/admin_index.html.erb

@@ -20,4 +20,6 @@
 			</ul>
 		</li>
 	<% end %>
-</ul>
+</ul>
+<br /><br />
+<a href="/admin/block-type-categories/new" class="caboose-btn">New Category</a>

data/app/views/caboose/block_type_categories/admin_new.html.erb

@@ -0,0 +1,32 @@
+
+<h1>New Block Type Category</h1>
+
+<p><input type='text' id='name' name='name' placeholder='Name' style="width: 400px;" /></p>
+<div id='message'></div>
+<p><input type='submit' value='Add Block Type Category' onclick='add_btc();' /></p>
+
+<% content_for :caboose_js do %>
+<%= javascript_include_tag "caboose/model/all" %>
+<script type='text/javascript'>
+
+function add_btc()
+{
+  $("#message").html("<p class='note loading'>Adding block type category...</p>");
+  $.ajax({
+    url: '/admin/block-type-categories',
+    type: 'post',
+    data: {
+      authenticity_token: "<%= form_authenticity_token %>",
+      name: $('#name').val(),
+    },
+    success: function(resp) {
+      if (resp.error)
+        $("#message").html("<p class='note error'>" + resp.error + "</p>");
+      if (resp.redirect)
+        window.location = resp.redirect
+    }
+  });
+}
+
+</script>
+<% end %>

data/app/views/caboose/pages/_new_block_header.html.erb

@@ -1,7 +1,7 @@
 <%
-btsm = Caboose::BlockTypeSiteMembership.where(:site_id => @site.id).pluq(:block_type_id)
+cats = Caboose::BlockTypeCategory.where(:show_in_sidebar => true).order(:sort_order).all
 grid = Caboose::BlockType.where(:name => 'flex_grid').first
-@block_types = Caboose::BlockType.where(:parent_id => nil, :block_type_category_id => 2).where(:id => btsm).order(:description)
+seen_btids = [0]
 %>
 
 <div class='icons' id='new_blocks_container2'>
@@ -27,12 +27,27 @@ grid = Caboose::BlockType.where(:name => 'flex_grid').first
     		<span class='bname'>5 Column Row</span>
     	</li>
     <% end %>
-  	<li class='title'><span>Content</span></li>
-    <% @block_types.each do |block_type| %>
-    	<li class='blocktype bt' id='new_block_<%= block_type.id %>' data-btid='<%= block_type.id %>'>
-    		<span class='icon icon-<%= block_type.icon %>'></span>
-    		<span class='bname'><%= block_type.description %></span>
-    	</li>
+  	<% cats.each do |cat| %>
+        <% block_types = Caboose::BlockType.joins(:sites).where(:parent_id => nil, :block_type_category_id => cat.id).where("sites.id = ?", @site.id).order(:description) %>
+        <% next if block_types.count == 0 %>
+        <li class='title'><span><%= cat.name %></span></li>
+        <% block_types.each do |block_type| %>
+            <li class='blocktype bt' id='new_block_<%= block_type.id %>' data-btid='<%= block_type.id %>'>
+                <span class='icon icon-<%= block_type.icon %>'></span>
+                <span class='bname'><%= block_type.description %></span>
+            </li>
+            <% seen_btids << block_type.id %>
+        <% end %>
+    <% end %>
+    <% all_bts = Caboose::BlockType.joins(:sites).where(:parent_id => nil, :block_type_category_id => 2).where("sites.id = ?", @site.id).where("block_types.id not in (?)", seen_btids).order(:description) %>
+    <% if all_bts.count > 0 %>
+      <li class='title'><span>All Blocks</span></li>
+      <% all_bts.each do |block_type| %>
+         <li class='blocktype bt' id='new_block_<%= block_type.id %>' data-btid='<%= block_type.id %>'>
+            <span class='icon icon-<%= block_type.icon %>'></span>
+            <span class='bname'><%= block_type.description %></span>
+        </li>
+      <% end %>
     <% end %>
   </ul>
 </div>

data/lib/caboose/version.rb

@@ -1,3 +1,3 @@
 module Caboose
-  VERSION = '0.9.208'
+  VERSION = '0.9.209'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: caboose-cms
 version: !ruby/object:Gem::Version
-  version: 0.9.208
+  version: 0.9.209
 platform: ruby
 authors:
 - William Barry
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-11-28 00:00:00.000000000 Z
+date: 2018-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pg
@@ -502,6 +502,12 @@ files:
 - app/assets/images/caboose/file_types/xlsx.png
 - app/assets/images/caboose/file_types/zip.png
 - app/assets/images/caboose/grid.png
+- app/assets/images/caboose/icons/copy.png
+- app/assets/images/caboose/icons/delete.png
+- app/assets/images/caboose/icons/down.png
+- app/assets/images/caboose/icons/left.png
+- app/assets/images/caboose/icons/right.png
+- app/assets/images/caboose/icons/up.png
 - app/assets/images/caboose/loading2.gif
 - app/assets/images/caboose/loading_black_on_white.gif
 - app/assets/images/caboose/loading_black_on_yellow.gif