Commit aba449f03a56ef43208e2cc04e83d9b748fe9ded
1 parent
bdc93696
Exists in
master
and in
29 other branches
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.
Showing
3 changed files
with
15 additions
and
16 deletions
Show diff stats
app/views/cms/_text_editor_sidebar.rhtml
| ... | ... | @@ -16,10 +16,10 @@ |
| 16 | 16 | <% end %> |
| 17 | 17 | <% end %> |
| 18 | 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 | 20 | <%= render :partial => 'drag_and_drop_note' %> |
| 21 | - <ul> | |
| 22 | - </ul> | |
| 21 | + <div class='items'> | |
| 22 | + </div> | |
| 23 | 23 | <p><%= link_to(_('Upload more files ...'), '#', :id => 'media-upload-more-files')%></p> |
| 24 | 24 | </div> |
| 25 | 25 | </div> |
| ... | ... | @@ -33,10 +33,10 @@ |
| 33 | 33 | <%= submit_button :search, _('Search'), :id => 'media-search-button' %> |
| 34 | 34 | <% end %> |
| 35 | 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 | 37 | <%= render :partial => 'drag_and_drop_note' %> |
| 38 | - <ul> | |
| 39 | - </ul> | |
| 38 | + <div class='items'> | |
| 39 | + </div> | |
| 40 | 40 | </div> |
| 41 | 41 | </div> |
| 42 | 42 | </div> | ... | ... |
public/javascripts/article.js
| ... | ... | @@ -27,13 +27,13 @@ jQuery(function($) { |
| 27 | 27 | var html_for_items = ''; |
| 28 | 28 | $.each(items, function(i, item) { |
| 29 | 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 | 31 | return; |
| 32 | 32 | } |
| 33 | 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 | 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 | 39 | $(selector).html(html_for_items); |
| ... | ... | @@ -43,7 +43,7 @@ jQuery(function($) { |
| 43 | 43 | var $button = $(this); |
| 44 | 44 | $('#media-search-box').toggleClass('icon-loading'); |
| 45 | 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 | 47 | if (data.length && data.length > 0) { |
| 48 | 48 | $('#media-search-results').slideDown(); |
| 49 | 49 | } |
| ... | ... | @@ -61,7 +61,7 @@ jQuery(function($) { |
| 61 | 61 | }, |
| 62 | 62 | success: |
| 63 | 63 | function(data) { |
| 64 | - insert_items(data, '#media-upload-results ul'); | |
| 64 | + insert_items(data, '#media-upload-results .items'); | |
| 65 | 65 | if (data.length && data.length > 0) { |
| 66 | 66 | $('#media-upload-results').slideDown(); |
| 67 | 67 | } | ... | ... |
public/stylesheets/application.css
| ... | ... | @@ -3380,11 +3380,10 @@ div.with_media_panel .formfield input { |
| 3380 | 3380 | .text-editor-sidebar .icon-loading { |
| 3381 | 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 | 3387 | background-repeat: no-repeat; |
| 3389 | 3388 | background-position: 0px 0px; |
| 3390 | 3389 | padding-left: 20px; |
| ... | ... | @@ -3393,7 +3392,7 @@ div.with_media_panel .formfield input { |
| 3393 | 3392 | border: none; |
| 3394 | 3393 | margin-bottom: 2px; |
| 3395 | 3394 | } |
| 3396 | -.text-editor-sidebar .media-list-results li:hover { | |
| 3395 | +.text-editor-sidebar .items :hover { | |
| 3397 | 3396 | background-color: transparent; |
| 3398 | 3397 | border: none; |
| 3399 | 3398 | } | ... | ... |