Styled buttons and pager

diff --git a/root/css/style.css b/root/css/style.css
index a90f064..15b3ffb 100644 (file)
--- a/root/css/style.css
+++ b/root/css/style.css
@@ -53,7 +53,25 @@ div.button:hover {
 div.button:hover span {
   background-position: bottom left;
 }
-
+#stemma_pager_buttons {
+    height: 28px;
+}
+div.pager_left_button {
+  width: 28px;
+  height: 28px;
+  float: left;
+  background: transparent url('../images/button_left_28.png') no-repeat;    
+}
+div.pager_left_button:hover, div.pager_right_button:hover {
+  opacity: 0.8;
+}
+div.pager_right_button {
+  width: 28px;
+  height: 28px;
+  float: left;
+  margin-left: 10px;
+  background: transparent url('../images/button_right_28.png') no-repeat;
+}
 #topbanner {
        width: 100%;
 }
@@ -137,19 +155,24 @@ div.button:hover span {
 #stemma_graph img {
        margin-top: expression(( 450 - this.height ) / 2);
 }
-#stexaminer_button {
-       bottom: 0;
-       margin-top: 13px;
-}
-#relater_button {
-}
 #textinfo_container_buttons {
     float: right;
+    left: -18px;
+    position: relative;
+    top: 15px;
 }
-#run_stexaminer, #run_relater, #open_stemma_add, #open_stemma_edit, #stemma_pager, #open_textinfo_edit {
+#run_stexaminer, #run_relater, #open_stemma_add, #open_stemma_edit {
+    height: 18px;
+}
+#stemma_pager {
+    height: 38px;
+}
+#open_textinfo_edit {
+    float: right;
     height: 30px;
-    left: -10px;
     position: relative;
+    top: -34px;
+    left: -8px;
 }
 #upload-collation-dialog {
     overflow: hidden;

diff --git a/root/images/button_left_28.png b/root/images/button_left_28.png
new file mode 100644 (file)
index 0000000..3e08b8c
Binary files /dev/null and b/root/images/button_left_28.png differ

diff --git a/root/images/button_right_28.png b/root/images/button_right_28.png
new file mode 100644 (file)
index 0000000..1289bac
Binary files /dev/null and b/root/images/button_right_28.png differ

diff --git a/root/src/index.tt b/root/src/index.tt
index c0f3d57..cc0f725 100644 (file)
--- a/root/src/index.tt
+++ b/root/src/index.tt
@@ -250,6 +250,12 @@ $(document).ready( function() {
     <div id="textinfo_container">
       <div id="textinfo_load_status"></div>
       <h2>Text <span class="texttitle"></span></h2>
+      <form id="open_textinfo_edit" action="" method="GET" name="edit_textinfo">
+        <div class="button" id="edit_textinfo_button"
+               onClick="$('#textinfo-edit-dialog').dialog('open')">
+         <span>Modify information about this tradition</span>
+        </div>
+      </form>
       <ul>
          <li>is owned by <span id="owner_id"></span></li>
          <li>is <span id="not_public"></span>public</li>
@@ -257,17 +263,11 @@ $(document).ready( function() {
              <li>has <span id="witness_num"></span> witnesses: <span id="witness_list"></span></li>
       </ul>
       
-      <!-- TODO buttons on either side of the graph div to flip through the stemmata -->
       <div id="textinfo_container_buttons">
-          <form id="open_textinfo_edit" action="" method="GET" name="edit_textinfo">
-            <div class="button" id="edit_textinfo_button"
-               onClick="$('#textinfo-edit-dialog').dialog('open')">
-                 <span>Modify information about this tradition</span>
-            </div>
-          </form>
           <form id="stemma_pager" action="" method="GET" name="stemma_pager">
-            <div class="button" id="stemma_pager_button" onClick="$('#stemma_pager').submit()">
-                 <span>Left &amp; right go here</span>
+            <div id="stemma_pager_buttons">
+              <div class="pager_left_button" id="stemma_pager_left_button" onClick="$('#stemma_pager').submit()"></div>
+              <div class="pager_right_button" id="stemma_pager_right_button" onClick="$('#stemma_pager').submit()"></div>
             </div>
           </form>
           <form id="open_stemma_add" action="" method="GET" name="add_new_stemma">