.tsort-row-break {
clear: both;
}
+.tsort {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+.tsort li {
+ margin: 0 3px 3px 3px;
+ padding: 0.3em;
+ padding-left: 1em;
+ font-size: 15px;
+ font-weight: bold;
+ cursor: move;
+}
+#z-sortable tr {
+ margin: 0 3px 3px 3px;
+ padding: 0.3em;
+ padding-left: 1em;
+ font-size: 15px;
+ font-weight: bold;
+ cursor: move;
+}
+.ui-slider .ui-slider-handle {
+ width: 1em;
+ height: 1em;
+}
+.ui-slider-horizontal {
+ height: 0.6em;
+}
+#elements-tabs {
+ font-size: 12px;
+}
+.ui-tabs-vertical {
+ width: 65em;
+}
+.ui-tabs-vertical .ui-tabs-nav {
+ padding: .2em .1em .2em .2em;
+ float: left; width: 220px;
+}
+.ui-tabs-vertical .ui-tabs-nav li {
+ clear: left; width: 100%;
+ border-bottom-width: 1px !important;
+ border-right-width: 0 !important;
+ margin: 0 -1px 0.2em 0;
+}
+.ui-tabs-vertical .ui-tabs-nav li a {
+ display:block;
+ width: 100%;
+}
+.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
+ padding-bottom: 0;
+ padding-right: .1em;
+ border-right-width: 1px;
+ border-right-width: 1px;
+}
+.ui-tabs-vertical .ui-tabs-panel {
+ padding: 1em;
+ float: right;
+ width: 35em;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+ margin-bottom: 0.2em;
+}
+.elements-tab {
+ width: 100%;
+}
+.elements-tab {
+ overflow: hidden;
+ height: auto;
+}
+
+.elements-tab img {
+ float: left;
+ margin: 0 1px 0 0 !important;
+ padding: 0 !important;
+ border: 0 !important;
+}
+
+.elements-tab p {
+ overflow: hidden;
+ height: auto;
+}
+.elements-tab-caption {
+ white-space: pre; /* CSS 2.0 */
+ white-space: pre-wrap; /* CSS 2.1 */
+ white-space: pre-line; /* CSS 3.0 */
+ white-space: -pre-wrap; /* Opera 4-6 */
+ white-space: -o-pre-wrap; /* Opera 7 */
+ white-space: -moz-pre-wrap; /* Mozilla */
+ white-space: -hp-pre-wrap; /* HP Printers */
+ word-wrap: break-word; /* IE 5+ */
+}
<ul>
<% @panel.panel_elements.each do |elm| %>
<li><a href="#elements-tabs-<%= elm.t -%>">
- <div>
+ <div class="elements-tab">
<% case elm.class.to_s %>
<% when 'PanelPicture' %>
- <%= tag(:img, elm.tmb_opt_img_tag) %>
- <div>
- <%= h(truncate(elm.caption, :length => 6)) %>
- </div>
+ <%= tag(:img, elm.tmb_opt_img_tag) %>
+ <p class="elements-tab-caption">
+ <% -%>
+ <%= h(truncate(elm.caption, :length => 15)) -%>
+ </p>
<% when 'SpeechBalloon' %>
- <%= tag(:img, elm.speech_balloon_template.system_picture.tmb_opt_img_tag) %>
- <div>
- <%= h(truncate(elm.speech.content, :length => 6)) %>
- </div>
+ <%= tag(:img, elm.speech_balloon_template.system_picture.tmb_opt_img_tag) %>
+ <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
+ <br><%= h(truncate(elm.speech.content, :length => 15)) -%>
+ </p>
<% when 'GroundPicture' %>
- <%= tag(:img, elm.tmb_opt_img_tag) -%>
- <div>
- <%= h(truncate(elm.caption, :length => 6)) %>
- </div>
+ <%= tag(:img, elm.tmb_opt_img_tag) -%>
+ <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
+ </p>
<% when 'GroundColor' %>
- <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
+ <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>; width: 48px; height: 48px; ">
<%= format("%06x", elm.code) %>
</div>
- <div>
- <%= h(truncate(elm.caption, :length => 6)) %>
- </div>
+ <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
+ </p>
<% end %>
</div>
</a></li>
</div>
<% end %>
-<style>
-<!--
-.tsort {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-.tsort li {
- margin: 0 3px 3px 3px;
- padding: 0.3em;
- padding-left: 1em;
- font-size: 15px;
- font-weight: bold;
- cursor: move;
-}
-#z-sortable tr {
- margin: 0 3px 3px 3px;
- padding: 0.3em;
- padding-left: 1em;
- font-size: 15px;
- font-weight: bold;
- cursor: move;
-}
-.ui-slider .ui-slider-handle {
- width: 1em;
- height: 1em;
-}
-.ui-slider-horizontal {
- height: 0.6em;
-}
-#elements-tabs {
- width: 50em;
- font-size: 12px;
-}
-.ui-tabs-vertical {
- width: 55em;
-}
-.ui-tabs-vertical .ui-tabs-nav {
- padding: .2em .1em .2em .2em;
- float: left; width: 12em;
-}
-.ui-tabs-vertical .ui-tabs-nav li {
- clear: left; width: 100%;
- border-bottom-width: 1px !important;
- border-right-width: 0 !important;
- margin: 0 -1px 0.2em 0;
-}
-.ui-tabs-vertical .ui-tabs-nav li a {
- display:block;
- width: 10em;
-}
-.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
- padding-bottom: 0;
- padding-right: .1em;
- border-right-width: 1px;
- border-right-width: 1px;
-}
-.ui-tabs-vertical .ui-tabs-panel {
- padding: 1em;
- float: right;
- width: 35em;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active {
- margin-bottom: 0.2em;
-}
--->
-</style>
<script>
<!--
var pettanr_current_panel_id = <%= @panel.tag_panel_id -%>;