t#31741:modify panel when change text

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 1a8a61d..e909acf 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -257,16 +257,18 @@ $ ->
       handles: 'all',\r
       autoHide: true\r
     }\r
-  $('.pettanr-comic-balloon span' ).map ->\r
-    p = $(@).parent()\r
-    sb = p.parent()\r
-    sb.mouseover -> \r
-      trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
+  $('.pettanr-comic-speech-inner' ).map ->\r
+    $(@).mouseover -> \r
+      outer = $(@).parent()\r
+      sb = outer.parent()\r
+      trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
       img = $(trace)\r
       $('.ui-resizable-handle', img.parent()).map ->\r
         $(@).css('display', 'block')\r
-    sb.mouseout -> \r
-      trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
+    $(@).mouseout -> \r
+      outer = $(@).parent()\r
+      sb = outer.parent()\r
+      trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
       img = $(trace)\r
       $('.ui-resizable-handle', img.parent()).map ->\r
         $(@).css('display', 'none')\r
@@ -320,7 +322,7 @@ $ ->
             wf_sel = $(trace + 'writing_format_id')\r
             wf_id = parseInt(wf_sel.val())\r
             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
-            $(trace).html(v)\r
+            $(trace).html('<p>' + v + '</p>')\r
           )\r
 \r
   \r

diff --git a/app/assets/stylesheets/test.css.scss b/app/assets/stylesheets/test.css.scss
index a0961df..bd7f0e0 100644 (file)
--- a/app/assets/stylesheets/test.css.scss
+++ b/app/assets/stylesheets/test.css.scss
@@ -35,43 +35,45 @@ div.md5 {
 .pettanr-comic-balloon img {
   width:     100%;
   height:     100%;    }
-.pettanr-comic-balloon p {
-  margin:     0 !important;
-  padding:    0 !important;      display:    table;
-  position:    absolute;
-  top:     0;
-  left:     16.6%;
-  width:     66.6%;
-  height:     100%;
-  *height:    auto;
-  *top:     50% !important;
-}
-.pettanr-comic-balloon p span,
-.pettanr-comic-balloon p strong,
-.pettanr-comic-balloon p em,
-.pettanr-comic-balloon p i,
-.pettanr-comic-balloon p samp,
-.pettanr-comic-balloon p code {
-  vertical-align:   middle;
-  text-align:    center;
-  font-size:    14px;
-  display:    table-cell;
-  *display:    block;
-  zoom:     1;
-  *position:    relative;
-  *top: -50%;
-}
-.pettanr-comic-balloon p strong {
-  font-weight: bold;
-}
-.pettanr-comic-balloon p em,
-.pettanr-comic-balloon p i {
-  font-style: italic;
-}
-.pettanr-comic-balloon p samp,
-.pettanr-comic-balloon p code {
-  font-family: monospace;
+
+
+.pettanr-comic-speech {
+margin : 0 !important;
+padding : 0 !important;
+display : table;
+table-layout : fixed;
+position : absolute;
+top : 0;
+left : 16.6%;
+width : 66.6%;
+height : 100%;
+*height : auto;
+*top : 50% !important;
+}
+.pettanr-comic-speech-inner {
+vertical-align : middle;
+display : table-cell;
+*display : block;
+zoom : 1;
+*position : relative;
+*top : -50%;
+}
+.pettanr-comic-speech p {
+padding : 0.5em 0 !important;
+margin : 0 !important;
+}
+.pettanr-comic-speech strong {
+font-weight : bold;
+}
+.pettanr-comic-speech em,
+.pettanr-comic-speech i {
+font-style : italic;
+}
+.pettanr-comic-speech samp,
+.pettanr-comic-speech code {
+font-family : monospace;
 }
+
 .ui-resizable-handle {
   background-color:#f8b87c;
 }

diff --git a/app/views/speech_balloons/_element.html.erb b/app/views/speech_balloons/_element.html.erb
index b092c3d..dbecc1e 100644 (file)
--- a/app/views/speech_balloons/_element.html.erb
+++ b/app/views/speech_balloons/_element.html.erb
@@ -1,6 +1,8 @@
-<div id="<%= elm.tag_id -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>" balloon_id="<%= elm.balloon.tag_element_id -%>" speech_id="<%= elm.speech.tag_element_id -%>" class="pettanr-comic-balloon" style="width:<%= elm.balloon.width -%>px; height:<%= elm.balloon.height -%>px; top:<%= elm.balloon.y -%>px; left:<%= elm.balloon.x -%>px; z-index:<%= elm.z -%>; ">
+<div id="<%= elm.tag_id -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>" balloon_id="<%= elm.balloon.tag_element_part_id -%>" speech_id="<%= elm.speech.tag_element_part_id -%>" class="pettanr-comic-balloon" style="width:<%= elm.balloon.width -%>px; height:<%= elm.balloon.height -%>px; top:<%= elm.balloon.y -%>px; left:<%= elm.balloon.x -%>px; z-index:<%= elm.z -%>; ">
   <img id="<%= elm.balloon.tag_id -%>" panel_id="<%= elm.balloon.tag_panel_id -%>" element_id="<%= elm.balloon.tag_element_id -%>" element_type="<%= elm.balloon.tag_element_type -%>" element_part_id="<%= elm.balloon.tag_element_part_id -%>" element_part_type="<%= elm.balloon.tag_element_part_type -%>" class="pettanr-balloon" src="<%= elm.balloon.system_picture.url -%>" alt="<%= elm.caption -%>">
-  <p style="top:<%= elm.speech.y -%>%; left:<%= elm.speech.x -%>%;width:<%= elm.speech.width -%>%; height:<%= elm.speech.height -%>%;">
-    <span id="<%= elm.speech.tag_id -%>" panel_id="<%= elm.speech.tag_panel_id -%>" element_id="<%= elm.speech.tag_element_id -%>" element_type="<%= elm.speech.tag_element_type -%>" element_part_id="<%= elm.speech.tag_element_part_id -%>" element_part_type="<%= elm.speech.tag_element_part_type -%>"><%= sanitize(h(elm.speech.content).gsub(/\n/, '<br>'), :tags => %w(a p br)) -%></span>
-  </p>
+  <div class="pettanr-comic-speech" style="top:<%= elm.speech.y -%>%; left:<%= elm.speech.x -%>%;width:<%= elm.speech.width -%>%; height:<%= elm.speech.height -%>%;">
+    <div class="pettanr-comic-speech-inner" id="<%= elm.speech.tag_id -%>" panel_id="<%= elm.speech.tag_panel_id -%>" element_id="<%= elm.speech.tag_element_id -%>" element_type="<%= elm.speech.tag_element_type -%>" element_part_id="<%= elm.speech.tag_element_part_id -%>" element_part_type="<%= elm.speech.tag_element_part_type -%>">
+      <%= simple_format(elm.speech.content) -%>
+    </div>
+  </div>
 </div>