Commit aba449f03a56ef43208e2cc04e83d9b748fe9ded
1 parent
bdc93696
Exists in
master
and in
28 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,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 | } |