From bf21cdef5190cb1c9c1ce2486c2514f3a802c301 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 6 Mar 2018 13:16:21 +0000
Subject: [PATCH] Bug 20322: (follow-up) Circulation page layout and design
 update

This follow-up makes some suggestions about how to push this further:

- Put content in four columns which reduces to two on smaller screens
- Adjust font size of large links
- Move Offline Circulation links into its own column
- Add image icons to the Firefox extension and Windows application
  download links
- Improve indentation in template

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
---
 koha-tmpl/intranet-tmpl/prog/css/staff-global.css  |  15 +-
 .../prog/en/modules/circ/circulation-home.tt       | 193 +++++++++++++--------
 koha-tmpl/intranet-tmpl/prog/img/firefox-icon.png  | Bin 0 -> 852 bytes
 koha-tmpl/intranet-tmpl/prog/img/windows-icon.png  | Bin 0 -> 336 bytes
 4 files changed, 132 insertions(+), 76 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/img/firefox-icon.png
 create mode 100644 koha-tmpl/intranet-tmpl/prog/img/windows-icon.png

diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index 0210b31..9b7d040 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -1239,6 +1239,8 @@ div.alert strong {
 a.document {
 	background-position : left middle;
 	background-repeat : no-repeat;
+    display: inline-block;
+    min-height: 20px;
 	padding-left : 20px;
 }
 
@@ -3175,16 +3177,15 @@ ul.buttons-list li a.circ-button {
     display: block;
     box-sizing: content-box;
     max-width : 260px;
-    margin: 10px;
+    margin: .5em 0;
     padding:8px;
 
     border: solid 2px #b9d8d9;
     border-radius: 6px;
 
     text-decoration: none;
-    font-family: verdana, arial;
     font-weight: bold;
-    font-size: large;
+    font-size: 110%;
     color: #000000;
 
     background-color:#f4f8f9;
@@ -3198,6 +3199,14 @@ ul.buttons-list li a:hover.circ-button {
     border-color: #538200;
 }
 
+.firefox-link {
+    background-image: url("../img/firefox-icon.png");
+}
+
+.windows-link {
+    background-image: url("../img/windows-icon.png");
+}
+
 /* ==== MODULE LINKS - End ==== */
 
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt
index 9df3807..5746dfb 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation-home.tt
@@ -11,83 +11,130 @@
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; Circulation</div>
 
     <div class="main container-fluid">
+
         <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-
-<div class="row">
-
-<div class="col-xs-6">
-<h1>Circulation</h1>
-
-    <ul class="buttons-list">
-        <li><a class="circ-button" href="/cgi-bin/koha/circ/circulation.pl"><i class="fa fa-upload"></i> Check out</a></li>
-        <li><a class="circ-button" href="/cgi-bin/koha/circ/returns.pl"><i class="fa fa-download"></i> Check in</a></li>
-        <li><a class="circ-button" href="/cgi-bin/koha/circ/renew.pl"><i class="fa fa-retweet"></i> Renew</a></li>
-    [% UNLESS IndependentBranches %]<li><a class="circ-button" href="/cgi-bin/koha/circ/selectbranchprinter.pl">Set library</a></li>[% END %]
-        [% IF ( fast_cataloging ) %]
-            [% IF ( CAN_user_editcatalogue_fast_cataloging ) %]
-                <li><a class="circ-button" href="/cgi-bin/koha/cataloguing/addbiblio.pl?frameworkcode=FA"><i class="fa fa-plus"></i> Fast cataloging</a></li>
-            [% END %]
-        [% END %]
-
-    </ul>
-<h1>Holds management</h1>
-<ul class="buttons-list">
-    <li>    <a class="circ-button" href="/cgi-bin/koha/circ/view_holdsqueue.pl"><i class="fa fa-tasks"></i> Holds queue</a></li>
-    <li>    <a class="circ-button" href="/cgi-bin/koha/circ/pendingreserves.pl"><i class="fa fa-hand-grab-o"></i> Holds to pull</a></li>
-    <li>    <a class="circ-button" href="/cgi-bin/koha/circ/waitingreserves.pl"><i class="fa fa-calendar"></i> Holds awaiting pickup</a></li>
-    <li>    <a class="circ-button" href="/cgi-bin/koha/circ/reserveratios.pl"><i class="fa fa-line-chart"></i> Hold ratios</a></li>
-</ul>
-
-</div>
-<div class="col-xs-6">
-<h1>Patron request management</h1>
-<ul class="buttons-list">
-    [% IF Koha.Preference('ArticleRequests') %]
-    <li>
-        <a class="circ-button" href="/cgi-bin/koha/circ/article-requests.pl" title="Article requests"><i class="fa fa-newspaper-o"></i> Article requests</a>
-    </li>
-    [% END %]
-</ul>
-<h1>Transfers management</h1>
-<ul class="buttons-list">
-    [% IF Branches.InIndependentBranchesMode %]
-        <li><a class="circ-button" href="/cgi-bin/koha/circ/branchtransfers.pl"><i class="fa fa-exchange"></i> Transfer</a></li>
-    [% END %]
-    <li>    <a class="circ-button" href="/cgi-bin/koha/circ/transferstoreceive.pl"><i class="fa fa-sign-in"></i> Transfers to receive</a></li>
-</ul>
-<h1>Overdues management</h1>
-<ul class="buttons-list">
-     [% IF ( CAN_user_circulate_overdues_report ) %]<li>    <a class="circ-button" href="/cgi-bin/koha/circ/overdue.pl"><i class="fa fa-clock-o"></i> Overdues</a></li>[% END %]
-	<li>    <a class="circ-button" href="/cgi-bin/koha/circ/branchoverdues.pl"><i class="fa fa-clock-o"></i> Overdues with fines</a> </li>
-        Limited to your library.  See report help for other details.
-    [% IF Koha.Preference('OnSiteCheckouts') %]
-        <li><a class="circ-button" href="/cgi-bin/koha/circ/on-site_checkouts.pl">Pending on-site checkouts</a></li>
-    [% END %]
-</ul>
-
-	</div>
-</div>
-
-    <div class="row" id="intranet-circulation-home-html">
-        <div class="col-md-12">
-            [% Koha.Preference('IntranetCirculationHomeHTML') %]
-        <h5>Offline circulation</h5>
-                <ul>
-            [% IF (AllowOfflineCirculation) %]
-            <li><a href="/cgi-bin/koha/circ/offline.pl">Built-in offline circulation interface</a></li>
-            [% END %]
-            <li><a href="/cgi-bin/koha/offline_circ/process_koc.pl">Upload offline circulation file (.koc)</a></li>
-            <li><a href="/cgi-bin/koha/offline_circ/list.pl">Pending offline circulation actions</a>
-            <ul>
-                <li><a href="https://github.com/bywatersolutions/koha-offline-circulation/releases">Get desktop application</a></li>
-                <li><a href="https://addons.mozilla.org/[% lang %]/firefox/addon/koct/">Get Firefox add-on</a></li>
-            </ul>
+
+            <div class="col-sm-6 col-md-3">
+                <h3>Circulation</h3>
+
+                <ul class="buttons-list">
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/circulation.pl"><i class="fa fa-upload"></i> Check out</a>
+                    </li>
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/returns.pl"><i class="fa fa-download"></i> Check in</a>
+                    </li>
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/renew.pl"><i class="fa fa-retweet"></i> Renew</a>
+                    </li>
+                    [% UNLESS IndependentBranches %]
+                        <li>
+                            <a class="circ-button" href="/cgi-bin/koha/circ/selectbranchprinter.pl"><i class="fa fa-home"></i> Set library</a>
+                        </li>
+                    [% END %]
+                    [% IF ( fast_cataloging ) %]
+                        [% IF ( CAN_user_editcatalogue_fast_cataloging ) %]
+                            <li>
+                                <a class="circ-button" href="/cgi-bin/koha/cataloguing/addbiblio.pl?frameworkcode=FA"><i class="fa fa-plus"></i> Fast cataloging</a>
+                            </li>
+                        [% END %]
+                    [% END %]
+                </ul>
+            </div>
+
+            <div class="col-sm-6 col-md-3">
+                <h3>Holds management</h3>
+
+                <ul class="buttons-list">
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/view_holdsqueue.pl"><i class="fa fa-tasks"></i> Holds queue</a>
+                    </li>
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/pendingreserves.pl"><i class="fa fa-hand-grab-o"></i> Holds to pull</a>
+                    </li>
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/waitingreserves.pl"><i class="fa fa-calendar"></i> Holds awaiting pickup</a>
+                    </li>
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/reserveratios.pl"><i class="fa fa-line-chart"></i> Hold ratios</a>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Add the extra clearfix for only the required viewport -->
+            <div class="clearfix visible-sm-block"></div>
+
+            <div class="col-sm-6 col-md-3">
+                [% IF Koha.Preference('ArticleRequests') %]
+                    <h3>Patron request management</h3>
+                    <ul class="buttons-list">
+                        <li>
+                            <a class="circ-button" href="/cgi-bin/koha/circ/article-requests.pl" title="Article requests"><i class="fa fa-newspaper-o"></i> Article requests</a>
+                        </li>
+                    </ul>
+                [% END %]
+
+                <h3>Transfers management</h3>
+
+                <ul class="buttons-list">
+                    [% IF Branches.InIndependentBranchesMode %]
+                        <li>
+                            <a class="circ-button" href="/cgi-bin/koha/circ/branchtransfers.pl"><i class="fa fa-exchange"></i> Transfer</a>
+                        </li>
+                    [% END %]
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/transferstoreceive.pl"><i class="fa fa-sign-in"></i> Transfers to receive</a>
+                    </li>
                 </ul>
 
+                <h3>Overdues management</h3>
+
+                <ul class="buttons-list">
+                     [% IF ( CAN_user_circulate_overdues_report ) %]
+                        <li>
+                            <a class="circ-button" href="/cgi-bin/koha/circ/overdue.pl"><i class="fa fa-clock-o"></i> Overdues</a>
+                        </li>
+                    [% END %]
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/circ/branchoverdues.pl"><i class="fa fa-clock-o"></i> Overdues with fines</a>
+                    </li>
+                    [% IF Koha.Preference('OnSiteCheckouts') %]
+                        <li>
+                            <a class="circ-button" href="/cgi-bin/koha/circ/on-site_checkouts.pl">Pending on-site checkouts</a>
+                        </li>
+                    [% END %]
+                </ul>
+            </div>
+
+            <div class="col-sm-6 col-md-3">
+                <h3>Offline circulation</h3>
+
+                <ul class="buttons-list">
+                    [% IF (AllowOfflineCirculation) %]
+                        <li>
+                            <a class="circ-button" href="/cgi-bin/koha/circ/offline.pl">Built-in offline circulation interface</a>
+                        </li>
+                    [% END %]
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/offline_circ/process_koc.pl">Upload offline circulation file (.koc)</a>
+                    </li>
+                    <li>
+                        <a class="circ-button" href="/cgi-bin/koha/offline_circ/list.pl">Pending offline circulation actions</a>
+                    </li>
+                </ul>
+
+                <p><a class="document windows-link" href="https://github.com/bywatersolutions/koha-offline-circulation/releases">Get desktop application</a></p>
+
+                <p><a class="document firefox-link" href="https://addons.mozilla.org/[% lang %]/firefox/addon/koct/">Get Firefox add-on</a></p>
+
+            </div>
+        </div>
+
+        <div class="row" id="intranet-circulation-home-html">
+            <div class="col-md-12">
+                [% Koha.Preference('IntranetCirculationHomeHTML') %]
+            </div>
         </div>
     </div>
-</div>
-</div>
 
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/img/firefox-icon.png b/koha-tmpl/intranet-tmpl/prog/img/firefox-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f47897154c1c4b84772178502504e89c4a04f08
GIT binary patch
literal 852
zcmV-a1FQUrP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0009UNkl<Zc-n1~
zYe-XJ7{~wbc6PS2t=URXTbf#~D9LJm=q8C5l$sIwK@3syLMBF$kyJtvgj7`2m&%}0
zx}fzXjKb6q2PT3M)~tbsnJHeH*InG%&d%w$NM-cG`{CvJzdxSm|2z-Df6l7tjYeZ)
zTAC(0c7vQIa1Rd-jC8fNO%C>rhHA<3hc41&+;;Nn4XxRd>vDop=qOMcIRu{oHRs`{
ztnXg*KD|^qJG=x60uIL0sWzF}%N9O*6;Q8Qqg%m2sS3cYVHe@NlfypI3PS0}A78v=
zao9h6S_CxZ>zgNx*(pESO|(+sM^4mh6wW<>n>H*00`oi!{xMYTsYA!euE}Q?D))V}
zP1u8gj|Ji16BC3uLdgJ1j!v%`Rm^3~idy(UFV!dnaQ{FZ_8QvJ@K$Il$m_O{U6C^L
zhf-~~oFa0_{{o!j8mPB#L5)8Zw+AyI@;n5u7os2_Y106n7hH$Ww}xMBvc-}|7UjcY
zGhGt=EGNOsD-5`zsYb0`2T`T~L=gdx3xT;AY+uiz`D`_aHVr#6yN;1JhnbeFI7J3z
zL=qD?XH<Ak#pC>38Jy58dElCoe3-?x(ovKocSry;GLLlKC+*qVj^s!xX+h+jSHR;^
z!s5Sx9|3l;$KnFO<B-aj#+{<CIBFS#0|wl>X00JNcB}86PGHJ|9ti|Q%EEyaX!dMH
zeApObx6I%~PYzmb3|O5T)(R_(I~Ykkh1}zPr6heVeW)>A-?)6B+#H2DQ26X*adTo1
z?1+(U;8B=p!=1cdAdJVr5XZ;o4w(o=pz5};{V^IU3d>TyH@X@3W>er687PSldB%R6
zP3cAi>w#Y>qNGmO{__2o)L@zW4XXUwo#9VHN1GEVjQF)MFdnR2DFwp>h-v{tqKYr7
zAI|C-^tAl@Ku*Pl-8^H`SC9}$Fev##r1px8fZs}Cy0UYkylueS5V}kxi`AA@nZm2X
zX-Xdo;YET@w`}yB?MLPm=j;9NHZB}SMk2Bzbj67}Cdo)s>!$g@<QT{Qvb(*XS|?rg
eUO{v$*Z%<ze>S5_4&EF90000<MNUMnLSTYYXprv!

literal 0
HcmV?d00001

diff --git a/koha-tmpl/intranet-tmpl/prog/img/windows-icon.png b/koha-tmpl/intranet-tmpl/prog/img/windows-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..042b1c19639cb1ae232e040aa72016c481b2d404
GIT binary patch
literal 336
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbK}U4T!Bt50Sj!~g#btNt@=`_HiF
z3&YND410bs?ElHI56Jk=u=gv&J|OzWuoujQi-5RbL7)OSd*64k7Kmc7dZ1pQEJO`l
z8At?*-uel;09~S4666=mz{tifE~}(r?da<t92paznpIL(-rUhOdB)6Tt2XS|ed_An
zC(qt~{_!Wwc<UmdrU*|L$B>F!$q5aNX=ZwYnw6po-JNrzJEDCeg_$ItOfhMgvSW>!
z4}(*nngTOh&7lM@FRv~~E}jY&#Vt!DLURH`+=UYoQl5$kJf0fR%zc1?n|=R^ElpYs
YyY%FDA7Sfo1lqyi>FVdQ&MBb@00P5`D*ylh

literal 0
HcmV?d00001

-- 
2.1.4