styling of resources bin

edgware/static/css/editor.css

@@ -39,13 +39,15 @@ p {
 
 .newTextBox {
   background-color:grey;
-  padding-top:10px;
   border-style:solid;
   border-width:1px;
   height:13px;
-  width:140px;
+  width:78px;
   font-size: 11px;
+  float: left;
+  padding: 10px;
   cursor: move;
+  margin-left: 7px;
 }
 
 .arabic {
@@ -158,14 +160,21 @@ p {
   width: 16px;
 }
 
+.placeholder {
+  font-size: 11px;
+  color: #808080;
+  font-style: italic;
+}
 
 .navControls {
-	background-color:lightgrey;
 	border-bottom-style:solid;
 	border-bottom-width:1px;
-	font-size:13px;
+	font-size:11px;
   width: 100%;
   height: 30px;
+  font-weight: bold;
+  position: relative;
+  text-align: center;
 /*  margin-left: -10px; */
 }
 
@@ -174,7 +183,7 @@ p {
   border-width:1px;
   left: 850px;
   top: 20px;
-  width: 300px;
+  width: 224px;
   height: 90%;
   position:fixed;
 }
@@ -188,7 +197,6 @@ p {
 
 
 #searchCat {
-  background-color:lightgrey;
   margin-left: auto;
   margin-right: auto;
   padding-top:10px;
@@ -198,6 +206,7 @@ p {
 
 .searchBin {
 	margin-top:5px;
+  font-size: 11px;
 }
 
 #addElements a {
@@ -205,18 +214,41 @@ p {
   text-decoration:none;
 }
 
+.nextPage {
+  display: block;
+  position: absolute;
+  right: 4px;
+}
+
+.prevPage {
+  display: block;
+  position: absolute;
+  left: 4px;
+}
+
+#searchSelect {
+  width: 208px;
+  font-size: 12px;
+  margin-left: 7px;
+}
+
 #addElements {
-  width: 80%;
+/*  background-color:lightgrey; */
-  margin-left: auto;
-  margin-right: auto;
-  background-color:lightgrey;
   padding-left:0px;
   padding-top:15px;
   height:60px;
-  background-color:grey;	
+/*  background-color:grey;	*/
   color:white;
-  border-style:solid;
+}
-  border-width:1px;
+
+.addTextBoxWrapper {
+  width: 250px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.addTextBoxWrapper .english {
+
 }
 
 .resource {
@@ -256,7 +288,7 @@ p {
 }
 
 .binResources {
-  padding-top: 60px;
+  padding-top: 20px;
 }
 
 .textbox_canvas_toolbox a {

edgware/static/js/placeholder.js

@@ -0,0 +1,19 @@
+$(document).ready(function() {
+  $('.placeholder').each(function() {
+    var that = this;
+    $(this).data("placeholder", $(that).attr("data-placeholder"));
+    $(this).val($(this).data("placeholder"));
+    $(this).focus(function() {
+      if ($(this).val() == $(this).data("placeholder")) {
+        $(this).val('');
+        $(this).removeClass("placeholder");
+      } 
+    });
+    $(this).blur(function() {
+      if ($.trim($(this).val()) == '') {
+        $(this).val($(this).data("placeholder"));
+        $(this).addClass("placeholder");
+      }
+    });
+  });
+});

edgware/templates/editor.html

@@ -15,6 +15,7 @@
   <script type="text/javascript" src="/static/js/jquery.color.js"></script>
   <script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
   <script type="text/javascript" src="/static/js/editor.js"></script>
+  <script type="text/javascript" src="/static/js/placeholder.js"></script>
   <script type="text/javascript" src="/static/js/utils.js"></script>
   <script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
   <script type="text/javascript" src="/static/colorpicker/js/colorpicker.js"></script>
@@ -194,28 +195,32 @@
       <div id="bin">
         <div id="binTop">
 	        <div id="searchCat">
+            <div class="addTextBoxWrapper">
+				      <div class='newTextBox english' title="Drag to page to add an english textbox">
+				        + TEXTBOX
+				      </div>
+              <div class="newTextBox arabic" title="Drag to page to add an arabic textbox">
+          إضافة مربع
+      	      </div>
+            </div>
+	        </div>
+	        <div id="addElements">
 	          <select id="searchSelect" name="searchSelect">
-              <option value="0">Choose a Story</option>
+              <option value="0">Choose a Study</option>
 	            {% for c in categories %}
 	            <option value="{{c.id}}">{{c.name}}</option>
 	            {% endfor %}
 	          </select>
-	        </div>
+            <div style="clear:both;"></div>
-	        <div id="addElements">
-				    <div class='newTextBox english' title="Drag to page to add an english textbox">
-				      + TEXTBOX
-				    </div>
-            <div class="newTextBox arabic" title="Drag to page to add an arabic textbox">
-        إضافة مربع
-    	      </div>
             <div class="navControls">
               Displaying <span class="start_index">0</span> to <span class="end_index">0</span> of <span class="totalResources">0</span> resources<br />
               <a href="#" onclick='return false;' class="prevPage"><< Prev</a>
 		          <a href="#" onclick='return false;' class="nextPage">Next >></a>
 			        <br />
-              <input class="searchBin" />
+              <input class="searchBin placeholder" data-placeholder="Search" />
             </div>
           </div>
+         
           <div class="binResources">
 
           </div>