ff ui : updating to latest template layout; extracting css
authorBill Erickson <berick@esilibrary.com>
Mon, 4 Nov 2013 15:02:20 +0000 (10:02 -0500)
committerBill Erickson <berick@esilibrary.com>
Mon, 4 Nov 2013 15:02:20 +0000 (10:02 -0500)
Signed-off-by: Bill Erickson <berick@esilibrary.com>
Open-ILS/src/templates/staff/fulfillment/index.tt2
Open-ILS/src/templates/staff/fulfillment/t_actions.tt2
Open-ILS/src/templates/staff/fulfillment/t_item_table.tt2
Open-ILS/src/templates/staff/fulfillment/t_pending.tt2
Open-ILS/src/templates/staff/t_base.tt2
Open-ILS/src/templates/staff/t_base_js.tt2
Open-ILS/web/css/skin/default/staff/fulfillment.css [new file with mode: 0644]

index 8d52ba7..ccfb705 100644 (file)
-<!doctype html>
+[%
+  WRAPPER "staff/t_base.tt2";
+  ctx.page_title = l("FulfILLment"); 
+  ctx.page_app = "ffMain";
+  ctx.page_ctrl = "FFMainCtrl";
+  ctx.page_no_navbar = 1;
+%]
 
-<!--
-    TODO:
-    extract CSS
-    i18n 
-    use ../index.tt2 as base (pending)
--->
-<html ng-app="ffMain" ng-controller="FFMainCtrl" lang="en">
-  <head>
-    <title>[% l('FulfILLment') %]</title>
-    <base href="/eg/staff/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
-    <style type="text/css">
-      body {
-        background-color:#b7bbc3;
-      }
-      #mainhead {
-        height:120px;
-        background-color:#1d57aa;
-      }
-      #wrap {
-        width:950px;
-        margin-left: auto;
-        margin-right: auto;
-        border:1px solid #8396d3;
-        min-height:750px;
-        background-color:white;
-        margin-top:0px;
-      }
-      .mainNav {
-        text-decoration:none;
-        color:#8396d3;
-        padding-right:1em;
-      }
-      .thispage {
-        color:white;
-      }
-      a.mainNav:hover {
-        color:white;
-        text-decoration:none;
-      }
-      #subhead{
-        background-color:#00396a;
-        padding-left:30px;
-        height:30px;
-        line-height:30px;
-        font-size:1em;
-        margin-bottom: 20px;
-      }
-      .caret { 
-        color : white;
-        border-top-color: white;
-        border-bottom-color: white;
-      }
-      .command-bar {
-        padding-left: 5px;
-        padding-right: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="wrap"> 
-      <div id="mainhead"> 
-        <a href="http://fulfillment-ill.org" target="_blank">
-          <img src="/images/FulfillmentHomePageBanner.png" border="0" 
-            alt="[% l('Open Source Integrated Interlibrary Lending System') %]" /></a> 
-      </div> 
+[% BLOCK APP_CSS %]
+<link rel="stylesheet" href="[% ctx.media_prefix %]/css/skin/default/staff/fulfillment.css" />
+[% END %]
 
-      <div id="subhead" style='width:100%'> 
-        <div style='float:left'>
-          <a href="./fulfillment/pending" class="thispage mainNav">[% l('Manage ILL') %]</a> 
-          <a href="./fulfillment/records" class="thispage mainNav">[% l('Manage Bibliographic Records') %]</a> 
-        </div>
-        <div style='float:left'>
-          <div class="dropdown" ng-cloak>
-            <a href="javascript:;" 
-              class="dropdown-toggle mainNav thispage" data-toggle="dropdown">
-              [% l('Location: {{orgSelector.current().shortname()}}') %]
-              <b class="caret"></b>
-            </a>
-            <ul class="dropdown-menu" role="menu">
-              <li role="presentation" ng-repeat="org in orgSelector.all()">
-                <a role="menuitem" tabindex="-1" ng-click="selectOrg(org.id())">
-                  <div style="padding-left:{{org.ou_type().depth() * 10}}px">
-                    {{org.shortname()}}
-                  </div>
-                </a>
-             </li>
-            </ul>
-          </div>
-        </div>
-        <div style='float:right'>
-          <a href="./login" target="_self"
-            ng-click="logout()" class="mainNav thispage">Log Out</a> 
-        </div>
-      </div> 
+[% BLOCK APP_JS %]
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/list.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/ui.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/user.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/fulfillment/app.js"></script>
+[% END %]
+
+<div id="wrap"> 
+  <div id="mainhead"> 
+    <a href="http://fulfillment-ill.org" target="_blank">
+      <img src="/images/FulfillmentHomePageBanner.png" border="0" 
+        alt="[% l('Open Source Integrated Interlibrary Lending System') %]" /></a> 
+  </div> 
 
-      <div ng-view></div>
+  <div id="subhead" style='width:100%'> 
+    <div style='float:left'>
+      <a href="./fulfillment/pending" class="thispage mainNav">[% l('Manage ILL') %]</a> 
+      <a href="./fulfillment/records" class="thispage mainNav">[% l('Manage Bibliographic Records') %]</a> 
+    </div>
+    <div style='float:left'>
+      <div class="dropdown" ng-cloak>
+        <a href="javascript:;" 
+          class="dropdown-toggle mainNav thispage" data-toggle="dropdown">
+          [% l('Location: {{orgSelector.current().shortname()}}') %]
+          <b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu" role="menu">
+          <li role="presentation" ng-repeat="org in orgSelector.all()">
+            <a role="menuitem" tabindex="-1" ng-click="selectOrg(org.id())">
+              <div style="padding-left:{{org.ou_type().depth() * 10}}px">
+                {{org.shortname()}}
+              </div>
+            </a>
+         </li>
+        </ul>
+      </div>
     </div>
-  </body>
-  [% INCLUDE "staff/t_base_js.tt2" %]
-  <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/user.js"></script>
-  <script src="[% ctx.media_prefix %]/js/ui/default/staff/fulfillment/app.js"></script>
-</html>
+    <div style='float:right'>
+      <a href="./login" target="_self"
+        ng-click="logout()" class="mainNav thispage">Log Out</a> 
+    </div>
+  </div> 
+
+  <div ng-view></div>
+</div>
+
+[% END %]
index 17a9039..e5c1d62 100644 (file)
@@ -22,7 +22,7 @@
         ng-class="{disabled : action_pending}" data-toggle="dropdown">
       [% l('Actions') %] <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu pull-right">
       <li><a href="javascript:;" ng-click="checkin()"
         ng-show="tab_pending && orientation_lender">[% l('Capture Item') %]</a></li>
       <li><a href="javascript:;" ng-click="retarget()"
index c457a59..098e2a8 100644 (file)
@@ -1,8 +1,11 @@
 
-<div class="container" ng-hide="itemList.items.length">
-  <div class="alert alert-info">[% l('No Items To Display') %]</div>
+<div class="row" ng-hide="itemList.items.length">
+    <div class="col-lg-10 col-lg-offset-1">
+      <div class="alert alert-info">[% l('No Items To Display') %]</div>
+  </div>
 </div>
-<table class="table table-striped table-hover" ng-show="itemList.items.length">
+
+<table class="table table-striped table-hover table-condensed" ng-show="itemList.items.length">
   <thead>
     <tr>
       <th><a href="javascript:;" ng-click="itemList.selectAll()">&#x2713;</a></th>
index 0fae7c0..1dc247e 100644 (file)
     </div>
   </div>
 
-  <div ng-hide="itemList.items.length" class="container">
-    <br/>
-    <div class="alert alert-info">[% l('No Items To Display') %]</div>
+  <br/>
+
+  <div class="row" ng-hide="itemList.items.length">
+    <div class="col-lg-10 col-lg-offset-1">
+      <div class="alert alert-info">[% l('No Items To Display') %]</div>
+    </div>
   </div>
 
-  <table class="table table-striped table-hover" ng-show="itemList.items.length">
+  <table class="table table-striped table-hover table-condensed" ng-show="itemList.items.length">
     <thead>
       <tr>
         <th><a href="javascript:;" ng-click="itemList.selectAll()">&#x2713;</a></th>
index 325f1d9..22059b7 100644 (file)
     <!-- TODO: remote hosted CSS should be hosted locally instead -->
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" />
     <link rel="stylesheet" href="[% ctx.media_prefix %]/css/skin/default/staff/base.css" />
+    [% 
+        # App-specific CSS imports
+        PROCESS APP_CSS;
+    %]
   </head>
   <body>
-    [% INCLUDE "staff/t_navbar.tt2" %]
+    [% INCLUDE "staff/t_navbar.tt2" UNLESS ctx.page_no_navbar %]
     <div id="top-content-container" class="container">[% content %]</div>
   </body>
   [% 
index 09c129e..974eeea 100644 (file)
@@ -3,7 +3,7 @@
 
 <!-- Bootstrap JS -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
 
 <!-- angular -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
diff --git a/Open-ILS/web/css/skin/default/staff/fulfillment.css b/Open-ILS/web/css/skin/default/staff/fulfillment.css
new file mode 100644 (file)
index 0000000..83ff5ed
--- /dev/null
@@ -0,0 +1,46 @@
+body {
+    background-color:#b7bbc3;
+}
+#mainhead {
+    height:120px;
+    background-color:#1d57aa;
+}
+#wrap {
+    width:950px;
+    margin-left: auto;
+    margin-right: auto;
+    border:1px solid #8396d3;
+    min-height:750px;
+    background-color:white;
+    margin-top:0px;
+}
+.mainNav {
+    text-decoration:none;
+    color:#8396d3;
+    padding-right:1em;
+}
+.thispage {
+    color:white;
+}
+    a.mainNav:hover {
+    color:white;
+    text-decoration:none;
+}
+    #subhead{
+    background-color:#00396a;
+    padding-left:30px;
+    height:30px;
+    line-height:30px;
+    font-size:1em;
+    margin-bottom: 20px;
+}
+.caret { 
+    color : white;
+    border-top-color: white;
+    border-bottom-color: white;
+}
+.command-bar {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+