Commit aba449f03a56ef43208e2cc04e83d9b748fe9ded

Authored by Antonio Terceiro
1 parent bdc93696

Use <div> instead of <li> for media items

When you drag and drop, Firefox brings the outer element together with
the link or image. A <div> is less weird than a <li>, though.
app/views/cms/_text_editor_sidebar.rhtml
@@ -16,10 +16,10 @@ @@ -16,10 +16,10 @@
16 <% end %> 16 <% end %>
17 <% end %> 17 <% end %>
18 </div> 18 </div>
19 - <div id='media-upload-results' class='media-list-results' style='display: none'> 19 + <div id='media-upload-results' style='display: none'>
20 <%= render :partial => 'drag_and_drop_note' %> 20 <%= render :partial => 'drag_and_drop_note' %>
21 - <ul>  
22 - </ul> 21 + <div class='items'>
  22 + </div>
23 <p><%= link_to(_('Upload more files ...'), '#', :id => 'media-upload-more-files')%></p> 23 <p><%= link_to(_('Upload more files ...'), '#', :id => 'media-upload-more-files')%></p>
24 </div> 24 </div>
25 </div> 25 </div>
@@ -33,10 +33,10 @@ @@ -33,10 +33,10 @@
33 <%= submit_button :search, _('Search'), :id => 'media-search-button' %> 33 <%= submit_button :search, _('Search'), :id => 'media-search-button' %>
34 <% end %> 34 <% end %>
35 </p> 35 </p>
36 - <div id='media-search-results' class='media-list-results' style='display: none'> 36 + <div id='media-search-results' style='display: none'>
37 <%= render :partial => 'drag_and_drop_note' %> 37 <%= render :partial => 'drag_and_drop_note' %>
38 - <ul>  
39 - </ul> 38 + <div class='items'>
  39 + </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
public/javascripts/article.js
@@ -27,13 +27,13 @@ jQuery(function($) { @@ -27,13 +27,13 @@ jQuery(function($) {
27 var html_for_items = ''; 27 var html_for_items = '';
28 $.each(items, function(i, item) { 28 $.each(items, function(i, item) {
29 if (item.error) { 29 if (item.error) {
30 - html_for_items += '<li class="media-upload-error">' + item.error + '</li>'; 30 + html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
31 return; 31 return;
32 } 32 }
33 if (item.content_type && item.content_type.match(/^image/)) { 33 if (item.content_type && item.content_type.match(/^image/)) {
34 - html_for_items += '<li class="icon-photos"><img src="' + item.url + '"/><br/><a href="' + item.url + '">' + item.title + '</a></li>'; 34 + html_for_items += '<div class="icon-photos"><img src="' + item.url + '"/><br/><a href="' + item.url + '">' + item.title + '</a></div>';
35 } else { 35 } else {
36 - html_for_items += '<li class="' + item.icon + '"><a href="' + item.url + '">' + item.title + '</a></li>'; 36 + html_for_items += '<div class="' + item.icon + '"><a href="' + item.url + '">' + item.title + '</a></div>';
37 } 37 }
38 }); 38 });
39 $(selector).html(html_for_items); 39 $(selector).html(html_for_items);
@@ -43,7 +43,7 @@ jQuery(function($) { @@ -43,7 +43,7 @@ jQuery(function($) {
43 var $button = $(this); 43 var $button = $(this);
44 $('#media-search-box').toggleClass('icon-loading'); 44 $('#media-search-box').toggleClass('icon-loading');
45 $.get($(this).parent().attr('action'), { 'q': query }, function(data) { 45 $.get($(this).parent().attr('action'), { 'q': query }, function(data) {
46 - insert_items(data, '#media-search-results ul'); 46 + insert_items(data, '#media-search-results .items');
47 if (data.length && data.length > 0) { 47 if (data.length && data.length > 0) {
48 $('#media-search-results').slideDown(); 48 $('#media-search-results').slideDown();
49 } 49 }
@@ -61,7 +61,7 @@ jQuery(function($) { @@ -61,7 +61,7 @@ jQuery(function($) {
61 }, 61 },
62 success: 62 success:
63 function(data) { 63 function(data) {
64 - insert_items(data, '#media-upload-results ul'); 64 + insert_items(data, '#media-upload-results .items');
65 if (data.length && data.length > 0) { 65 if (data.length && data.length > 0) {
66 $('#media-upload-results').slideDown(); 66 $('#media-upload-results').slideDown();
67 } 67 }
public/stylesheets/application.css
@@ -3380,11 +3380,10 @@ div.with_media_panel .formfield input { @@ -3380,11 +3380,10 @@ div.with_media_panel .formfield input {
3380 .text-editor-sidebar .icon-loading { 3380 .text-editor-sidebar .icon-loading {
3381 background-image: url(../images/loading-small.gif); 3381 background-image: url(../images/loading-small.gif);
3382 } 3382 }
3383 -.text-editor-sidebar .media-list-results ul {  
3384 - padding: 0px;  
3385 - list-style: none; 3383 +.text-editor-sidebar .items {
  3384 + margin-bottom: 10px;
3386 } 3385 }
3387 -.text-editor-sidebar .media-list-results li { 3386 +.text-editor-sidebar .items div {
3388 background-repeat: no-repeat; 3387 background-repeat: no-repeat;
3389 background-position: 0px 0px; 3388 background-position: 0px 0px;
3390 padding-left: 20px; 3389 padding-left: 20px;
@@ -3393,7 +3392,7 @@ div.with_media_panel .formfield input { @@ -3393,7 +3392,7 @@ div.with_media_panel .formfield input {
3393 border: none; 3392 border: none;
3394 margin-bottom: 2px; 3393 margin-bottom: 2px;
3395 } 3394 }
3396 -.text-editor-sidebar .media-list-results li:hover { 3395 +.text-editor-sidebar .items :hover {
3397 background-color: transparent; 3396 background-color: transparent;
3398 border: none; 3397 border: none;
3399 } 3398 }