TPAC: Replace dashboard images with CSS

Also gets rid of a number of tables and a bunch of CSS definitions with
hard-coded widths that will cause trouble when longer translated terms
get dropped into place.

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/opac/parts/topnav.tt2 b/Open-ILS/src/templates/opac/parts/topnav.tt2
index bdb9d54..db1f2a4 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/topnav.tt2
+++ b/Open-ILS/src/templates/opac/parts/topnav.tt2
@@ -14,81 +14,33 @@
         </div>
         [% ELSE %]
         <div id="dash_wrapper">
-            <div class="float-right">
-                <table cellpadding="0" cellspacing="0" border="0">
-                    <tr>
-                        <td>
-                            <img src="[% ctx.media_prefix %]/images/dash-corner-left1.png" />
-                        </td>
-                        <td id="dash_corner_mid1a">
-                            <span id="dash_user">
-                                [%  l('[_1] [_2]', ctx.user.first_given_name, ctx.user.family_name) | html %]
-                            </span>
-                        </td>
-                        <td id="dash_corner_mid1b">
-                            <img src="[% ctx.media_prefix %]/images/dash-divider.jpg" />
-                        </td>
-                        <td id="dash_corner_mid1c">
+            <div id="dash_identity">
+                <span id="dash_user">
+                    [%  l('[_1] [_2]', ctx.user.first_given_name, ctx.user.family_name) | html %]
+                </span>
+                <span class="dash_divider">|</span>
+                <a href="[% ctx.opac_root %]/myopac/main" 
+                    class="opac-button">[% l('My Account') %]</a>
 
-                            <a href="[% ctx.opac_root %]/myopac/main" 
-                                class="opac-button">[% l('My Account') %]</a>
-
-                            <a href="[% ctx.opac_root %]/logout" class="opac-button"
-                                id="logout_link">[% l('Logout') %]</a>
-                        </td>
-                        <td>
-                            <img src="[% ctx.media_prefix %]/images/dash-corner-right1.png" />
-                        </td>
-                    </tr>
-                </table>
+                <a href="[% ctx.opac_root %]/logout" class="opac-button"
+                    id="logout_link">[% l('Logout') %]</a>
             </div>
             <div id="dashboard">
-                <div class="pos-abs">
-                    <div class="pos-rel-top4">
-                        <table cellpadding="0" cellspacing="0" border="0">
-                            <tr>
-                                <td>
-                                    <img src="[% ctx.media_prefix %]/images/dash-corner-left2.png" />
-                                </td>
-                                <td id="dash_corner_mid2a">
-                                    <div id="dash_number_row">
-                                        <div class="pos-abs">
-                                            <div class="dash-pos-out">
-                                                <div class="dash-align-out">
-                                                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/circs"><span id="dash_checked">[% ctx.user_stats.checkouts.total_out %]</span> [% l("Checked Out") %]</a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="pos-abs">
-                                            <div class="dash-pos-holds">
-                                                <div class="dash-align-holds">
-                                                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/holds"><span id="dash_holds">[% ctx.user_stats.holds.total %]</span> [% l("On Hold") %]</a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="pos-abs">
-                                            <div class="dash-pos-pickup">
-                                                <div class="dash-align-pickup">
-                                                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/holds?available=1"><span id="dash_pickup">[% ctx.user_stats.holds.ready %]</span> [% l("Ready for Pickup") %]</a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="pos-abs">
-                                            <div class="dash-pos-fines">
-                                                <div class="dash-align-fines">
-                                                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/main"><span id="dash_fines">[% money(ctx.user_stats.fines.balance_owed) %]</span> [% l("Fines") %]</a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td>
-                                    <img src="[% ctx.media_prefix %]/images/dash-corner-right2.png" />
-                                </td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
+                <span class="dash-align">
+                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/circs"><span id="dash_checked">[% ctx.user_stats.checkouts.total_out %]</span> [% l("Checked Out") %]</a>
+                </span>
+                <span class="dash_divider">|</span>
+                <span class="dash-align">
+                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/holds"><span id="dash_holds">[% ctx.user_stats.holds.total %]</span> [% l("On Hold") %]</a>
+                </span>
+                <span class="dash_divider">|</span>
+                <span class="dash-align">
+                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/holds?available=1"><span id="dash_pickup">[% ctx.user_stats.holds.ready %]</span> [% l("Ready for Pickup") %]</a>
+                </span>
+                <span class="dash_divider">|</span>
+                <span class="dash-align">
+                    <a class="dash-link" href="[% ctx.opac_root %]/myopac/main"><span id="dash_fines">[% money(ctx.user_stats.fines.balance_owed) %]</span> [% l("Fines") %]</a>
+                </span>
             </div>
         </div>
         [% END %]

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index e90a0ef..9d18010 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -79,21 +79,39 @@ div.select-wrapper:hover {
 }
 
 #dash_wrapper {
-       width:500px;
-       position:relative;
-       top:-26px;
+       position: relative;
+    top: -2em;
+}
+
+#dash_wrapper div {
+       position: relative;
+    vertical-align: middle;
+    background: #252525;
+    border-radius: 5px;
+    height: 3em;
+    padding: 0em 1em 0em 1em;
+}
+
+span.dash_divider {
+    margin: 0em 1em 0em 1em;
+       position: relative;
+    top: 10px;
+    color: black;
 }
 
 #dashboard {
        clear:both;
        float:right;
-       width:384px;
+    margin-top: 1em;
+    background: #252525;
+    border-radius: 5px;
+    height: 3em;
 }
 
-#dashboard span {
-       font-weight:bold;
-       position:relative;
-       left:-1px;
+#dashboard span.dash-align a {
+       font-weight: bold;
+       position: relative;
+    top: 10px;
 }
 
 #dash_user {
@@ -103,35 +121,6 @@ div.select-wrapper:hover {
     top: 10px;
 }
 
-#dash_corner_mid1a {
-    vertical-align: top;
-    background: url('/images/dash-corner-mid1.png') repeat-x;
-    padding-left: 8px;
-}
-#dash_corner_mid1b {
-    background: url('/images/dash-corner-mid1.png') repeat-x;
-    padding: 0px 8px 0px 10px;
-}
-#dash_corner_mid1b img { position: relative; top: -1px; }
-#dash_corner_mid1c {
-    background: url('/images/dash-corner-mid1.png') repeat-x;
-    vertical-align: top;
-}
-#dash_corner_mid2a {
-    vertical-align: top;
-    width: 372px;
-    background: url('/images/dash-corner-mid2.png') repeat-x;
-}
-.dash-pos-out { position: relative; left: 3px; }
-.dash-pos-holds { position: relative; left: 100px; }
-.dash-align-out { text-align: right; width: 86px; }
-.dash-align-holds { text-align: right; width: 62px; }
-.dash-pos-pickup { position: relative; left: 170px; }
-.dash-align-pickup { text-align: right; width: 111px; }
-.dash-pos-fines { position: relative; left: 284px; }
-.dash-align-fines { text-align: right; width: 76px; }
-.pos-rel-top4 { position: relative; top: 4px; }
-#dash_number_row { position: relative; top: 6px; }
 #logout_link { left: 1px; }
 
 #dash_checked { color: #ffcc33; }

diff --git a/Open-ILS/web/images/dash-corner-left1.png b/Open-ILS/web/images/dash-corner-left1.png
deleted file mode 100644 (file)
index 9559e8b..0000000
Binary files a/Open-ILS/web/images/dash-corner-left1.png and /dev/null differ

diff --git a/Open-ILS/web/images/dash-corner-left2.png b/Open-ILS/web/images/dash-corner-left2.png
deleted file mode 100644 (file)
index 5bc8112..0000000
Binary files a/Open-ILS/web/images/dash-corner-left2.png and /dev/null differ

diff --git a/Open-ILS/web/images/dash-corner-mid1.png b/Open-ILS/web/images/dash-corner-mid1.png
deleted file mode 100644 (file)
index 546b8a8..0000000
Binary files a/Open-ILS/web/images/dash-corner-mid1.png and /dev/null differ

diff --git a/Open-ILS/web/images/dash-corner-mid2.png b/Open-ILS/web/images/dash-corner-mid2.png
deleted file mode 100644 (file)
index 15af112..0000000
Binary files a/Open-ILS/web/images/dash-corner-mid2.png and /dev/null differ

diff --git a/Open-ILS/web/images/dash-corner-right1.png b/Open-ILS/web/images/dash-corner-right1.png
deleted file mode 100644 (file)
index 061afc9..0000000
Binary files a/Open-ILS/web/images/dash-corner-right1.png and /dev/null differ

diff --git a/Open-ILS/web/images/dash-corner-right2.png b/Open-ILS/web/images/dash-corner-right2.png
deleted file mode 100644 (file)
index 8663e0c..0000000
Binary files a/Open-ILS/web/images/dash-corner-right2.png and /dev/null differ

diff --git a/Open-ILS/web/images/dash-divider.jpg b/Open-ILS/web/images/dash-divider.jpg
deleted file mode 100644 (file)
index 19dda7d..0000000
Binary files a/Open-ILS/web/images/dash-divider.jpg and /dev/null differ