Make rich text edit controls use as much space as possible

Use CSS3 calculations to set the width of a rich text edit control
to the maximum possible while still allowing space for the help.

Also set the subject/title fields to the same width.

Fixes #657

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 8b57a12fe4c5cb8f7f0fbc99167f44df096fbee4..b6745f809fcfa1e3661f1d8255506778f8f9433b 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -2110,14 +2110,32 @@ a.button {
 
 /* Rules for rich text editors */
 
 
 /* Rules for rich text editors */
 

+input.richtext_title[type="text"] {
+  width: 50%;
+  width: -moz-calc(100% - 235px);
+  width: -webkit-calc(100% - 235px);
+  width: calc(100% - 235px);
+
+  @media only screen and (max-width:768px) {
+    width: 100%;
+  }
+}
+

 .richtext_container {
   margin-bottom: $lineheight;
 
   .richtext_content {
     width: 50%;
 .richtext_container {
   margin-bottom: $lineheight;
 
   .richtext_content {
     width: 50%;

+    width: -moz-calc(100% - 235px);
+    width: -webkit-calc(100% - 235px);
+    width: calc(100% - 235px);

     display: inline-block;
     vertical-align: top;
 
     display: inline-block;
     vertical-align: top;
 

+    @media only screen and (max-width:768px) {
+      width: 100%;
+    }
+

     .richtext_preview {
       display: inline-block;
       padding: $lineheight;
     .richtext_preview {
       display: inline-block;
       padding: $lineheight;

diff --git a/app/views/diary_entry/edit.html.erb b/app/views/diary_entry/edit.html.erb
index af23262d52310fe437bf4ffc604a289f2562b0c5..c49573bec8da201f681e0b5e53e643d40be2759d 100644 (file)
--- a/app/views/diary_entry/edit.html.erb
+++ b/app/views/diary_entry/edit.html.erb
@@ -13,7 +13,7 @@
     <fieldset>
       <div class='form-row'>
         <label class="standard-label"><%= t 'diary_entry.edit.subject' -%></label>
     <fieldset>
       <div class='form-row'>
         <label class="standard-label"><%= t 'diary_entry.edit.subject' -%></label>

-        <%= f.text_field :title %>
+        <%= f.text_field :title, :class => "richtext_title" %>

       </div>
       <div class='form-row'>
         <label class="standard-label"><%= t 'diary_entry.edit.body' -%></label>
       </div>
       <div class='form-row'>
         <label class="standard-label"><%= t 'diary_entry.edit.body' -%></label>

diff --git a/app/views/message/new.html.erb b/app/views/message/new.html.erb
index ac8fe7f497709d10308de180f7bdd860448c12f7..b8af5aac922becac1e92a8cf155287efc632694e 100644 (file)
--- a/app/views/message/new.html.erb
+++ b/app/views/message/new.html.erb
@@ -8,7 +8,7 @@
   <fieldset>
     <div class='form-row'>
       <label class="standard-label"><%= t'message.new.subject' %></label>
   <fieldset>
     <div class='form-row'>
       <label class="standard-label"><%= t'message.new.subject' %></label>

-      <%= f.text_field :title, :size => 60, :value => @subject %>
+      <%= f.text_field :title, :size => 60, :value => @subject, :class => "richtext_title" %>

     </div>
     <div class='form-row'>
       <label class="standard-label"><%= t'message.new.body' %></label>
     </div>
     <div class='form-row'>
       <label class="standard-label"><%= t'message.new.body' %></label>