Formats the page's title and table in a consistent manner with other
pages in the bootstrap opac's myopac pages. Also adds CSS so that
the correct labels are displayed on smallish screens.
To test.
1. Set ctx.show_reservations_tab in config.tt2 to true.
2. Create a couple of bookings for a patron and login to the opac as that
patron.
3. In the opac go to the reservations screen and notice the formatting.
Resize the screen to view the display on a small scale.
4. Apply the patch
5. Repeat 3 and now notice the page title and the table formatting. View
the table in a small screen.
6. Also view the reservations page as a patron with no bookings.
Signed-off-by: Garry Collum <gcollum@gmail.com>
Signed-off-by: Jennifer Pringle <jennifer.pringle@bc.libraries.coop>
Signed-off-by: Jane Sandberg <sandbergja@gmail.com>
.bucketTable td:nth-of-type(2):before { content: "Title"; display: flex; text-align:left; }
.bucketTable td:nth-of-type(3):before { content: "Author"; display: flex; text-align:left; }
.bucketTable td:nth-of-type(4):before { content: "Call Number"; display: flex; text-align:left; }
+ .reservationsTable td:nth-of-type(1):before { content: "Resource type"; display: flex; }
+ .reservationsTable td:nth-of-type(2):before { content: "Start time"; display: flex; }
+ .reservationsTable td:nth-of-type(3):before { content: "End time"; display: flex; }
+ .reservationsTable td:nth-of-type(4):before { content: "Pickup location"; display: flex; }
+ .reservationsTable td:nth-of-type(5):before { content: "Status"; display: flex; }
/*Media Style Additions*/
.fullRow{
myopac_page = "reservations";
%]
<h3 class="sr-only">[% l('Reservations') %]</h3>
+<h3>[% l("Reservations") %]</h3>
[% IF ctx.reservations.size %]
- <table id="acct_reservations_main_header" class="table_no_border_space table_no_cell_pad item_list_padding">
+ <table id="acct_reservations_main_header" class="table table-hover table-bordered miniTable reservationsTable">
<tr>
<th scope="col">[% l('Resource type') %]</th>
<th scope="col">[% l('Start time') %]</th>