Move controls and vector properties above board.

vectordraw/public/css/vectordraw.css

@@ -21,35 +21,36 @@
 }
 
 .vectordraw_block .menu {
-    float: left;
-    width: 160px;
-    margin-left: 15px;
+    width: 100%;
 }
 
 .vectordraw_block .menu .controls {
-    display: table;
-    margin-bottom: 20px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    border-top: 2px solid rgb(31, 98, 141);
+    border-left: 2px solid #1f628d;
+    border-right: 2px solid #1f628d;
+    padding: 3px;
+    background-color: rgb(224, 224, 224);
     font-size: 0;
 }
 
 .vectordraw_block .menu .controls select {
     width: 160px;
-    margin-bottom: 8px;
+    margin-right: 3px;
     font-size: 18px;
 }
 
 .vectordraw_block .menu .controls button {
-    display: inline-block;
-    background-color: #c2e0f4;
+    border: 1px solid #1f628d;
     border-radius: 5px;
+    margin: 4px 0;
+    padding: 5px 10px 5px 10px;
     box-shadow: 0 1px 3px #666;
+    background-color: #c2e0f4;
     color: #1f628d;
     font-size: 14px;
-    padding: 5px 10px 5px 10px;
-    margin: 4px 0;
-    border: 2px solid #1f628d;
     text-decoration: none;
-    width: 160px;
 }
 
 .vectordraw_block .menu .controls button:hover {
@@ -62,17 +63,21 @@
     text-decoration: none;
 }
 
+.vectordraw_block .menu .controls button.reset,
 .vectordraw_block .menu .controls button.undo,
 .vectordraw_block .menu .controls button.redo {
-    display: table-cell;
-    width: 50%;
+    float: right;
 }
 
 .vectordraw_block .menu .vector-properties {
+    border-top: 2px solid rgb(31, 98, 141);
+    border-left: 2px solid rgb(31, 98, 141);
+    border-right: 2px solid rgb(31, 98, 141);
+    border-bottom: 0px none;
     padding: 10px;
-    border: 1px solid #1f628d;
     font-size: 16px;
     line-height: 1.25;
+    background-color: rgba(239, 239, 239, 0.5);
 }
 
 .vectordraw_block .menu .vector-properties h3 {

vectordraw/templates/html/vectordraw.html

+{% load i18n %}
 <div class="vectordraw_block">
 
   <h2>{{ self.display_name }}</h2>
@@ -9,7 +10,6 @@
   {% endif %}
 
   <div id="vectordraw">
-    <div class="jxgboard" style="width: {{ self.width }}px; height: {{ self.height }}px;"></div>
     <div class="menu">
       <div class="controls">
         <select>
@@ -30,27 +30,28 @@
           {{ self.add_vector_label }}
         </button>
         <button class="reset">Reset</button>
+        <button class="redo" title="Redo"><span class="fa fa-repeat" /></button>
         <button class="undo" title="Undo"><span class="fa fa-undo" /></button>
-        <button class="redo" title="redo"><span class="fa fa-repeat" /></button>
       </div>
       {% if self.show_vector_properties %}
       <div class="vector-properties">
         <h3>{{ self.vector_properties_label }}</h3>
         <div class="vector-prop-name">
-          name: <span class="value vector-prop-bold">-</span>
+          {% trans "name" %}: <span class="value vector-prop-bold">-</span>
         </div>
         <div class="vector-prop-length">
-          length: <span class="value">-</span>
+          {% trans "length" %}: <span class="value">-</span>
         </div>
         <div class="vector-prop-angle">
-          angle: <span class="value">-</span>&deg;
+          {% trans "angle" %}: <span class="value">-</span>&deg;
         </div>
         <div class="vector-prop-slope">
-          slope: <span class="value">-</span>
+          {% trans "slope" %}: <span class="value">-</span>
         </div>
       </div>
       {% endif %}
     </div>
+    <div class="jxgboard" style="width: {{ self.width }}px; height: {{ self.height }}px;"></div>
   </div>
 
   <div class="vectordraw-status">
@@ -60,8 +61,8 @@
 
   <div class="action">
     <button class="check">
-      <span class="check-label">Check</span>
-      <span class="sr"> your answer</span>
+      <span class="check-label">{% trans "Check" %}</span>
+      <span class="sr"> {% trans "your answer" %}</span>
     </button>
   </div>