Introduced order footer.

An fixed element to present article meta data and other stuff.

app/views/ordering/order.rhtml

@@ -11,7 +11,6 @@
           <tr>
             <th>Name</th>
             <th></th>
-            <th>Herstellerin</th>
             <th style="width:7em;">Gebinde</th>
             <th style="width:4.5em;">Preis</th>
             <th id="col_packages"><acronym title="insgesamt bestellte Gebinde">Best</acronym></th>
@@ -39,16 +38,10 @@
               end
               total += article_total
               -%>
-          <tr class="<%= cycle('even', 'odd', :name => 'articles') %>" valign="top">
+            <tr class="<%= cycle('even', 'odd', :name => 'articles') %>" valign="top" 
-              <td class="name">
+                onmouseover="$('article-info_<%= order_article.id %>').show();" onmouseout="$('article-info_<%= order_article.id %>').hide();">
-                <% unless order_article.article.note.blank? %>
+                <td class="name"><%= order_article.article.name %></td>
-                    <%= order_article.article.name %> <%= image_tag "lamp_grey.png", {:alt => "Notiz zeigen", :size => "15x16", :border => "0", :onmouseover => "$('note_#{i}').show();", :onmouseout => "$('note_#{i}').hide();" }%>
-                <% else %>
-                  <%= order_article.article.name %>
-                <% end %>
-              </td>
                 <td><%=h order_article.article.origin %></td>
-              <td><%=h truncate order_article.article.manufacturer, :length => 11 %></td>
                 <td><%= @order.stockit? ? order_article.article.quantity_available : @unit[i] %> * <%=h order_article.article.unit %></td>
                 <td><%= number_to_currency(@price[i]) %></td>
                 <td id="units_<%= i %>"><%= order_article.units_to_order %></td>
@@ -72,53 +65,59 @@
                 </td>
                 <td id="td_price_<%= i %>" style="text-align:right; padding-right:10px; width:4em"><span id="price_<%= i %>_display"><%= number_to_currency(article_total, :unit => "") %></span> €</td>
               </tr>
-          <% unless order_article.article.note.blank? -%>
+        <div class="article-info" id="article-info_<%= order_article.id %>" style="display:none">
-          <tr id="note_<%= i %>" class="note" style="display:none">
+          <b><%= order_article.article.name -%></b>
-            <td colspan="10"><%=h order_article.article.note %> | <%=h order_article.article.manufacturer %></td>
+          <p>
-          </tr>
+            Hersteller: <%= order_article.article.manufacturer -%><br />
-            	<% end -%>
+            Notiz: <%= order_article.article.note -%><br />
+          </p>
+        </div>
               <%- i = i + 1
             end
           end -%>
         </tbody>
-        <tfoot>
-          <tr>
-              <td colspan="6"></td>
-              <td colspan="3" class="currency">Gesamtbetrag: <span id="total_price"><%= total %></span> €</td>
-          </tr>
-          <tr>
-              <td colspan="6"></td>
-              <td colspan="3" class="currency">Verfügbares Guthaben: <%= number_to_currency(@availableFunds) %></td>
-          </tr>
-          <tr>
-              <td colspan="6"></td>
-              <td colspan="3" class="currency">Neuer Kontostand: <strong><span id="new_balance"><%= @ordergroup.account_balance - total %></span> €</strong></td>
-          </tr>
-          <tr>
-              <td style="text-align:left;"><%= link_to_top %></td>
-              <td colspan="5"></td>
-              <td colspan="3" style="text-align:right;"><span style="font-size:1.2em"><%= submit_tag( "Bestellung speichern", :id => 'submit_button' ) %></span> | <%= link_to "Abbrechen", :controller => 'ordering' %></td>
-          </tr>
-        </tfoot>
       </table>
     </div>
+  <div id="order-footer">
+      <div id="info-box">
+      </div>
+      <div id="total-sum">
+        <table>
+          <tr>
+            <td>Gesamtbetrag:</td>
+            <td class="currency"><span id="total_price"><%= total %></span> €</td>
+          </tr>
+          <tr>
+            <td>Verfügbares Guthaben:</td>
+            <td class="currency"><%= number_to_currency(@availableFunds) %></td>
+          </tr>
+          <tr>
+            <td>Neuer Kontostand:</td>
+            <td class="currency"><strong><span id="new_balance"><%= @ordergroup.account_balance - total %></span> €</strong></td>
+          </tr>
+        </table>
+        <div id="order-button">
+          <%= submit_tag( "Bestellung speichern", :id => 'submit_button' ) %></span> oder <%= link_to "abbrechen", :controller => 'ordering' %>
+        </div>
+      </div>
+    </div>
     <input type="hidden" id="total_balance" name="total_balance" value="<%= @ordergroup.account_balance - total %>"/>
     <input type="hidden" name="version" value="<%= @version %>"/>
   <% end %>
 </div>
 
 <script type="text/javascript">
-//<![CDATA[
+  //<![CDATA[
   // preset data
 <% if Foodsoft.config[:tolerance_is_costly]
   for i in 0...@price.size -%>
       addData(<%= @price[i] %>, <%= @unit[i] %>, <%= @price[i] * (@tolerance[i] + @quantity[i])%>, <%= @others_quantity[i] %>, <%= @others_tolerance[i] %>, <%= @used_quantity[i] %>, 0);
-<%     end
+  <%     end
-    else
+else
   for j in 0...@price.size -%>
       addData(<%= @price[j] %>, <%= @unit[j] %>, <%= @price[j] * @quantity[j]%>, <%= @others_quantity[j] %>, <%= @others_tolerance[j] %>, <%= @used_quantity[j] %>, 0);
-<%    end
+  <%    end
-    end%>
+end%>
   setGroupBalance(<%= @availableFunds %>);
 
   // localization
@@ -129,5 +128,10 @@
     
   // initialize javascript
   updateBalance();
-//]]>
+
+  // show article info on row hover
+  <%#*$$('tbody tr').observer('hover', function() {%>
+
+  <%#*});%>
+  //]]>
 </script>

public/stylesheets/main.css

@@ -389,7 +389,7 @@ table#order {
   table#order input {
     font-size: 80%; }
   table#order th#col_required, table#order th#col_tolerance {
-    width: 145px; }
+    width: 165px; }
   table#order th#col_packages, table#order th#col_left_units {
     width: 50px; }
   table#order td#col_left_units {
@@ -410,6 +410,30 @@ table#order {
     table#order tr.note td {
       padding-left: 20px; }
 
+#order-footer, .article-info {
+  z-index: 1;
+  position: fixed;
+  bottom: 0;
+  width: 97.5%;
+  background-color: #E4EED6;
+  border-top: 2px solid #78B74E; }
+  #order-footer #total-sum, .article-info #total-sum {
+    width: 22em;
+    margin: .5em 2em 0 0;
+    float: right; }
+    #order-footer #total-sum #order-button, .article-info #total-sum #order-button {
+      margin: .5em 0; }
+      #order-footer #total-sum #order-button input, .article-info #total-sum #order-button input {
+        background-color: #78B74E;
+        color: #fff; }
+
+.article-info {
+  z-index: 2;
+  width: 30em;
+  height: 8em;
+  border: none;
+  left: 30px; }
+
 #newComment {
   margin: 1em; }
 

public/stylesheets/print.css

@@ -389,7 +389,7 @@ table#order {
   table#order input {
     font-size: 80%; }
   table#order th#col_required, table#order th#col_tolerance {
-    width: 145px; }
+    width: 165px; }
   table#order th#col_packages, table#order th#col_left_units {
     width: 50px; }
   table#order td#col_left_units {
@@ -410,6 +410,30 @@ table#order {
     table#order tr.note td {
       padding-left: 20px; }
 
+#order-footer, .article-info {
+  z-index: 1;
+  position: fixed;
+  bottom: 0;
+  width: 97.5%;
+  background-color: #E4EED6;
+  border-top: 2px solid #78B74E; }
+  #order-footer #total-sum, .article-info #total-sum {
+    width: 22em;
+    margin: .5em 2em 0 0;
+    float: right; }
+    #order-footer #total-sum #order-button, .article-info #total-sum #order-button {
+      margin: .5em 0; }
+      #order-footer #total-sum #order-button input, .article-info #total-sum #order-button input {
+        background-color: #78B74E;
+        color: #fff; }
+
+.article-info {
+  z-index: 2;
+  width: 30em;
+  height: 8em;
+  border: none;
+  left: 30px; }
+
 #newComment {
   margin: 1em; }
 

public/stylesheets/sass/main.sass

@@ -430,7 +430,7 @@ table#order
   input
     :font-size 80% 
   th#col_required, th#col_tolerance
-    :width 145px 
+    :width 165px
   th#col_packages,  th#col_left_units
     :width 50px 
   td#col_left_units
@@ -451,7 +451,28 @@ table#order
     :border-bottom 1px solid #DDDDDD 
     td
       :padding-left 20px
-      
+#order-footer, .article-info
+  z-index: 1
+  position: fixed
+  bottom: 0
+  width: 97.5%
+  background-color: #E4EED6
+  border-top: 2px solid #78B74E
+  #total-sum
+    width: 22em
+    margin: .5em 2em 0 0
+    float: right
+    #order-button
+      margin: .5em 0
+      input
+        background-color: #78B74E
+        color: #fff
+.article-info
+  z-index: 2
+  width: 30em
+  height: 8em
+  border: none
+  left: 30px
 // ********* Comments
 #newComment
   :margin 1em