the user account "dashboard"/mini-myopac works on every page now
authorsenator <lebbeous@esilibrary.com>
Thu, 10 Feb 2011 21:11:37 +0000 (16:11 -0500)
committersenator <lebbeous@esilibrary.com>
Thu, 10 Feb 2011 21:11:37 +0000 (16:11 -0500)
Open-ILS/web/css/skin/default/opac/style.css
Open-ILS/web/templates/default/opac/parts/base.tt2
Open-ILS/web/templates/default/opac/parts/topnav.tt2

index b3a8bbc..07eac9d 100644 (file)
@@ -102,10 +102,47 @@ div.select-wrapper:hover {
 }
 
 #dash_user {
-       font-weight:bold;
-       text-transform:capitalize;
-}
-
+       font-weight: bold;
+       text-transform: capitalize;
+    position: relative;
+    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; }
+#dash_holds { color: #ffcc33; }
+#dash_pickup { color: #1dd93c; }
+#dash_fines { color: #f41d36; }
 #header {
        color: #fff;
        padding: 26px 0px 26px 0px;
@@ -169,6 +206,12 @@ div.select-wrapper:hover {
        padding-left:0px;
 }
 
+#gold-links-home {
+       margin:auto;
+       width:694px;
+       padding-left:0px;
+}
+
 #util-bar {
        margin:auto;
        width:974px;
@@ -441,7 +484,7 @@ div.select-wrapper:hover {
 #hp-buttons {
        margin: auto;
        margin-top: 6px;
-       width: 974px;
+       width: 694px; /* 974px; */
 }
 
 #hp-welcome {
@@ -467,7 +510,7 @@ div.select-wrapper:hover {
 
 #hp-banner {
        margin: auto;
-       width:974px;
+       width: 694px; /* formerly 974px */
        height: 213px;
 }
 
index 881b46e..ae1dac0 100644 (file)
@@ -6,11 +6,9 @@
             href="[% ctx.media_prefix %]/css/skin/default/opac/semiauto.css" />
         <link rel="stylesheet" type="text/css"
             href="[% ctx.media_prefix %]/css/skin/default/opac/style.css" />
-        <link rel="stylesheet" type="text/css"
-            href="[% ctx.media_prefix %]/css/skin/default/opac/contentslider.css" />
+        [%# <link rel="unapi-server" type="application/xml" title="unAPI"
+            href="/opac/extras/unapi" />%]
         <title>Catalog - King County Library - [% ctx.page_title %]</title>
-        <link rel="unapi-server" type="application/xml" title="unAPI"
-            href="/opac/extras/unapi" />
         [% BLOCK html_head; END; # provide a default that can be overridden %]
         [% PROCESS html_head %]
     </head>
index 8918b6b..0da00a4 100644 (file)
@@ -1,3 +1,4 @@
+[% USE money = format('$%.2f'); %]
 <div id="header">
     <div class="float-left">
         <a href="http://www.kcls.org"><img
@@ -5,6 +6,7 @@
             src="[% ctx.media_prefix %]/images/KCLS_logo_horiz.gif" /></a>
     </div>
     <div class="float-right">
+        [% IF !ctx.user %]
         <div id="your-acct-login">
             <a href="[% skin_root %]login" id="home_myopac_link"><img
                 alt="Your Account Log in"
                 onmouseover="this.src='[% ctx.media_prefix %]/images/login-btn-hover.png';"
                 onmouseout="this.src='[% ctx.media_prefix %]/images/login-btn.png';" /></a>
         </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">
+                                [%  # XXX TODO: some kind of standard helper
+                                    # function in TT2 to render human names,
+                                    # i18n aware.
+                                    ctx.user.first_given_name %]
+                                [% ctx.user.family_name %]
+                            </span>
+                        </td>
+                        <td id="dash_corner_mid1b">
+                            <img src="[% ctx.media_prefix %]/images/dash-divider.jpg" />
+                        </td>
+                        <td id="dash_corner_mid1c">
+                            <a href="[% skin_root %]myopac/main" class="pos-rel-top4"><img
+                                alt="[% l('My Account') %]"
+                                src="[% ctx.media_prefix %]/images/acct-btn.png"
+                                onmouseover="this.src='[% ctx.media_prefix %]/images/acct-btn-hover.png';"
+                                onmouseout="this.src='[% ctx.media_prefix %]/images/acct-btn.png';" /></a>
+                            <a href="[% skin_root %]logout" class="pos-rel-top4"
+                                id="logout_link"><img
+                                alt="[% l('Logout') %]"
+                                src="[% ctx.media_prefix %]/images/logout-btn.png"
+                                onmouseover="this.src='[% ctx.media_prefix %]/images/logout-btn-hover.png';"
+                                onmouseout="this.src='[% ctx.media_prefix %]/images/logout-btn.png';" /></a>
+                        </td>
+                        <td>
+                            <img src="[% ctx.media_prefix %]/images/dash-corner-right1.png" />
+                        </td>
+                    </tr>
+                </table>
+            </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">
+                                                    <span id="dash_checked">[% ctx.user_stats.checkouts.out %]</span> [% l("Checked Out") %]
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="pos-abs">
+                                            <div class="dash-pos-holds">
+                                                <div class="dash-align-holds">
+                                                    <span id="dash_holds">[% ctx.user_stats.holds.total %]</span> [% l("On Hold") %]
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="pos-abs">
+                                            <div class="dash-pos-pickup">
+                                                <div class="dash-align-pickup">
+                                                    <span id="dash_pickup">[% ctx.user_stats.holds.ready %]</span> [% l("Ready for Pickup") %]
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="pos-abs">
+                                            <div class="dash-pos-fines">
+                                                <div class="dash-align-fines">
+                                                    <span id="dash_fines">[% money(ctx.user_stats.fines.balance_owed) %]</span> [% l("Fines") %]
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td>
+                                    <img src="[% ctx.media_prefix %]/images/dash-corner-right2.png" />
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        [% END %]
     </div>
     <div class="common-no-pad"></div>
 </div>