Make rich text edit controls use as much space as possible
authorTom Hughes <tom@compton.nu>
Thu, 12 Dec 2013 08:55:26 +0000 (08:55 +0000)
committerTom Hughes <tom@compton.nu>
Thu, 12 Dec 2013 09:04:46 +0000 (09:04 +0000)
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

app/assets/stylesheets/common.css.scss
app/views/diary_entry/edit.html.erb
app/views/message/new.html.erb

index 8b57a12fe4c5cb8f7f0fbc99167f44df096fbee4..b6745f809fcfa1e3661f1d8255506778f8f9433b 100644 (file)
@@ -2110,14 +2110,32 @@ a.button {
 
 /* 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%;
+    width: -moz-calc(100% - 235px);
+    width: -webkit-calc(100% - 235px);
+    width: calc(100% - 235px);
     display: inline-block;
     vertical-align: top;
 
+    @media only screen and (max-width:768px) {
+      width: 100%;
+    }
+
     .richtext_preview {
       display: inline-block;
       padding: $lineheight;
index af23262d52310fe437bf4ffc604a289f2562b0c5..c49573bec8da201f681e0b5e53e643d40be2759d 100644 (file)
@@ -13,7 +13,7 @@
     <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>
index ac8fe7f497709d10308de180f7bdd860448c12f7..b8af5aac922becac1e92a8cf155287efc632694e 100644 (file)
@@ -8,7 +8,7 @@
   <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>