From 8bb25e5cb015560b004445383daea0ac92e78de9 Mon Sep 17 00:00:00 2001
From: yasushiito <yas@pen-chan.jp>
Date: Fri, 12 Jul 2013 18:47:19 +0900
Subject: [PATCH] t#31706:change element tab

---
 app/assets/stylesheets/test.css |  91 ++++++++++++++++++++++++++++++++++++
 app/views/panels/_form.html.erb | 100 +++++++---------------------------------
 2 files changed, 107 insertions(+), 84 deletions(-)

diff --git a/app/assets/stylesheets/test.css b/app/assets/stylesheets/test.css
index 80045233..e7602e95 100644
--- a/app/assets/stylesheets/test.css
+++ b/app/assets/stylesheets/test.css
@@ -122,3 +122,94 @@ div.md5 {
 .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+ */
+}
diff --git a/app/views/panels/_form.html.erb b/app/views/panels/_form.html.erb
index 53d610fe..09f3d443 100644
--- a/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@ -43,30 +43,29 @@
       <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>
@@ -207,73 +206,6 @@
   </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 -%>;
-- 
2.11.0