Attachment 87780 Details for Bug 22274 – Bug 22274: (follow-up) Use one CSS file for SCO and SCI

[patch] Bug 22274: (follow-up) Use one CSS file for SCO and SCI

Bug-22274-follow-up-Use-one-CSS-file-for-SCO-and-S.patch (text/plain), 17.31 KB, created by Owen Leonard on 2019-04-11 16:16:29 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2019-04-11 16:16:29 UTC

Size: 17.31 KB

patch

obsolete

>From 1e5d8b3a25335724d53cf1b1d0726f1f118d9e2f Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 11 Apr 2019 15:12:30 +0000
>Subject: [PATCH] Bug 22274: (follow-up) Use one CSS file for SCO and SCI
>
>This patch makes the self-checkin CSS created in Bug 22638 the CSS for
>self-checkout as well. The interfaces have the same requirements.
>
>This patch also replaces some old image-based icons with Font Awesome
>icons.
>
>To test, apply the patch and rebuild the OPAC CSS. Clear your browser
>cache if necessary.
>
> - Enable both self checkout (WebBasedSelfCheck) and self checkin
>   (SelfCheckInModule).
> - Test both interfaces, confirming that the style is consistent for
>   each and looks correct.
>---
> koha-tmpl/opac-tmpl/bootstrap/css/sci.css          | 308 ---------------------
> .../bootstrap/css/src/{sci.scss => sco.scss}       |   0
> .../bootstrap/en/includes/masthead-sco.inc         |   2 +-
> .../opac-tmpl/bootstrap/en/modules/sci/sci-main.tt |   2 +-
> .../opac-tmpl/bootstrap/en/modules/sco/sco-main.tt |  15 +-
> 5 files changed, 10 insertions(+), 317 deletions(-)
> delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/sci.css
> rename koha-tmpl/opac-tmpl/bootstrap/css/src/{sci.scss => sco.scss} (100%)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/sci.css b/koha-tmpl/opac-tmpl/bootstrap/css/sci.css
>deleted file mode 100644
>index a905533..0000000
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/sci.css
>+++ /dev/null
>@@ -1,308 +0,0 @@
>-body {
>-    background-color: #fcf9fc;
>-}
>-
>-#wrap {
>-    padding-right: 40px;
>-    padding-left: 40px;
>-}
>-
>-a, a:visited,
>-.ui-widget-content a,
>-.ui-widget-content a:visited {
>-    color: #0076B2;
>-}
>-
>-a.title {
>-    font-weight: bold;
>-}
>-
>-h1 {
>-    color: #727272;
>-    font-size : 140%;
>-    line-height: 150%;
>-}
>-h2 {
>-    color: #727272;
>-    font-size : 130%;
>-    line-height: 150%;
>-}
>-h3 {
>-    color: #727272;
>-    font-size : 120%;
>-    line-height: 150%;
>-}
>-h4 {
>-    color: #727272;
>-    font-size : 110%;
>-}
>-h5 {
>-    color: #727272;
>-    font-size : 100%;
>-}
>-caption {
>-    color: #727272;
>-    font-size: 120%;
>-    font-weight: bold;
>-    margin : .5em 0;
>-    text-align: left;
>-}
>-
>-input,
>-textarea {
>-    width: auto;
>-}
>-
>-/*Search bar border glow*/
>-input[type="text"]:focus {
>-   border-color: #85ca11;
>-   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
>-}
>-
>-input[type="password"]:focus {
>-   border-color: #85ca11;
>-   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
>-}
>-
>-legend {
>-    color: #727272;
>-    font-size: 110%;
>-    font-weight: bold;
>-}
>-
>-th {
>-    background-color: #e2e8e8;
>-}
>-
>-.main {
>-    background-color: #FFF;
>-    border-color: #f0f3f3;
>-    margin: 0.5em 20px;
>-    padding: 0.8em 0;
>-}
>-
>-.navbar-inverse .navbar-inner {
>-    background: #fcf9fc none;
>-    border-color: #fcf9fc;
>-    box-shadow: none;
>-}
>-
>-.navbar-inverse .brand, .navbar-inverse .nav > li > a {
>-    color: #727272;
>-    font-weight: bold;
>-}
>-
>-/*Dropdown menus in Header*/
>-.dropdown-menu {
>-   border-radius: 0px;
>-}
>-
>-.dropdown-menu > li > a:hover {
>-   background: #85ca11 none;
>-   color: #FFFFFF;
>-}
>-
>-.dropdown-menu > li > a:focus {
>-   background: #85ca11 none;
>-   color: #FFFFFF;
>-}
>-
>-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
>-   border-top-color: #85ca11;
>-   border-bottom-color: #85ca11;
>-}
>-
>-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret:hover {
>-   border-top-color: #85ca11;
>-   border-bottom-color: #85ca11;
>-}
>-
>-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
>-   background-color: transparent;
>-   color: #85ca11;
>-}
>-
>-.navbar-inverse .nav li.dropdown > a:hover .caret {
>-   border-top-color: #85ca11;
>-   border-bottom-color: #85ca11;
>-}
>-
>-.navbar .nav li.dropdown > a:focus .caret {
>-   border-top-color: #85ca11;
>-   border-bottom-color: #85ca11;
>-}
>-
>-.navbar-inverse .nav li.dropdown > a:focus .caret {
>-   border-top-color: #85ca11;
>-   border-bottom-color: #85ca11;
>-}
>-
>-.navbar .nav li.dropdown > a:hover .caret {
>-   border-top-color: #85ca11;
>-   border-bottom-color: #85ca11;
>-}
>-
>-.navbar-inverse .nav > li > a {
>-   color: #727272;
>-}
>-
>-.navbar-inverse .nav > li > a:hover {
>-   color: #85ca11;
>-}
>-
>-.navbar-inverse .nav > li > a:focus {
>-   color: #85ca11;
>-}
>-
>-.table-striped tbody > tr:nth-child(odd) > td,
>-.table-striped tbody > tr:nth-child(odd) > th {
>-  background-color: #f0f3f3;
>-}
>-/* Redefine a new style for Bootstrap's class "close" since we use that already */
>-/* Use <a class="closebtn" href="#">&times;</a> */
>-.alert .closebtn{position:relative;top:-2px;right:-21px;line-height:20px;}
>-.modal-header .closebtn{margin-top:2px;}
>-.closebtn{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20);}.closebtn:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);}
>-button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}
>-.btn-group label,
>-.btn-group select {
>-    font-size: 13px;
>-}
>-
>-/* Override Bootstrap alert */
>-.alert {
>-    background: #fffbe5; /* Old browsers */
>-    background: -moz-linear-gradient(top,  #fffbe5 0%, #fff0b2 9%, #fff1a8 89%, #f7e665 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffbe5), color-stop(9%,#fff0b2), color-stop(89%,#fff1a8), color-stop(100%,#f7e665)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* IE10+ */
>-    background: linear-gradient(to bottom,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffbe5', endColorstr='#f7e665',GradientType=0 ); /* IE6-9 */
>-    border-color : #D6C43B;
>-    color: #333;
>-}
>-
>-/* Override Bootstrap alert.alert-info */
>-.alert-info {
>-    background: #f4f6fa; /* Old browsers */
>-    background: -moz-linear-gradient(top,  #f4f6fa 0%, #eaeef5 4%, #e8edf6 96%, #cddbf2 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f6fa), color-stop(4%,#eaeef5), color-stop(96%,#e8edf6), color-stop(100%,#cddbf2)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* IE10+ */
>-    background: linear-gradient(to bottom,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f6fa', endColorstr='#cddbf2',GradientType=0 ); /* IE6-9 */
>-    border-color : #C5D1E5;
>-    color: #333;
>-}
>-
>-/* Override Bootstrap alert.alert-success */
>-.alert-success {
>-    background: #f8ffe8; /* Old browsers */
>-    background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 4%, #dcf48d 98%, #9ebf28 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(4%,#e3f5ab), color-stop(98%,#dcf48d), color-stop(100%,#9ebf28)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* IE10+ */
>-    background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#9ebf28',GradientType=0 ); /* IE6-9 */
>-    border-color : #9FBA35;
>-    color: #333;
>-}
>-
>-
>-#members a.logout {
>-    color : #E8583C;
>-    padding : 0 .3em 0 .3em;
>-}
>-
>-.inline {
>-    display: inline;
>-}
>-
>-i.icon {
>-    background-repeat: no-repeat;
>-    display: inline-block;
>-    height: 16px;
>-    line-height: 16px;
>-    margin-right: 3px;
>-    vertical-align: text-top;
>-    width: 16px;
>-}
>-
>-i.back {
>-    background : transparent url("../lib/famfamfam/arrow_left.png") no-repeat 0 0;
>-}
>-
>-i.return {
>-    background : transparent url("../lib/famfamfam/book_previous.png") no-repeat 0 0;
>-}
>-
>-i.renew {
>-    background : transparent url("../lib/famfamfam/arrow_refresh.png") no-repeat 0 0;
>-}
>-
>-i.cancel {
>-    background : transparent url("../lib/famfamfam/cancel.png") no-repeat 0 0;
>-}
>-
>-i.finish {
>-    background : transparent url("../lib/famfamfam/stop.png") no-repeat 0 0;
>-}
>-
>-i.help {
>-    background : transparent url("../lib/famfamfam/help.png") no-repeat 0 0;
>-}
>-
>-.table .sorting_asc {
>-    padding-right: 19px;
>-    background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
>-}
>-.table .sorting_desc {
>-    padding-right: 19px;
>-    background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE;
>-}
>-.table .sorting {
>-    padding-right: 19px;
>-    background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
>-}
>-.table .nosort,
>-.table .nosort.sorting_asc,
>-.table .nosort.sorting_desc,
>-.table .nosort.sorting {
>-    padding-right: 19px;
>-    background: #e2e8e8 none;
>-}
>-
>-.table-bordered {
>-    border-radius: 0px;
>-}
>-
>-.table-bordered thead:first-child tr:first-child > th:last-child {
>-   border-radius: 0px;
>-}
>-
>-.table-bordered tbody:last-child tr:last-child > td:last-child {
>-   border-radius: 0px;
>-}
>-
>-.table-bordered tbody:last-child tr:last-child > td:first-child {
>-   border-radius: 0px;
>-}
>-
>-.table-bordered thead:first-child tr:first-child > th:first-child {
>-   border-radius: 0px;
>-}
>-
>-#sci_logout {
>-    color: #E8583C;
>-}
>-
>-#sci_checkin_button, #sci_refresh_button, #sci_append_button {
>-    margin-bottom: 10px;
>-}
>-
>-#sci_refresh_button {
>-    color: rgb(51, 51, 51);
>-}
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss
>similarity index 100%
>rename from koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss
>rename to koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
>index 73d64b7..bc65bdb 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
>@@ -8,7 +8,7 @@
>                 <a class="brand" href="/cgi-bin/koha/sco/sco-main.pl"><img src="[% interface | html %]/[% theme | html %]/images/koha-green-logo.png" alt=""></a>
>                 <div id="checkouthelp">
>                     <ul class="nav pull-right">
>-                        <li><a href="/cgi-bin/koha/sco/help.pl"><i class="icon help"></i> Help</a></li>
>+                        <li><a href="/cgi-bin/koha/sco/help.pl"><i class="fa fa-info-circle"></i> Help</a></li>
>                     </ul>
>                 </div>
> 
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
>index 3a4adf0..8d794a5 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
>@@ -33,7 +33,7 @@
> [% Asset.css("lib/bootstrap/css/bootstrap.min.css") | $raw %]
> [% Asset.css("lib/jquery/jquery-ui.css") | $raw %]
> [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
>-[% Asset.css("css/sci.css") | $raw %]
>+[% Asset.css("css/sco.css") | $raw %]
> [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
> [% IF ( Koha.Preference('SelfCheckInUserCSS') ) %]<style>[% Koha.Preference('SelfCheckInUserCSS') | $raw %]</style>[% END %]
> 
>                 </div> 
>                 [% IF ( display_patron_image ) %]
>                     <div class="span2">
>-                        <img src="/cgi-bin/koha/sco/sco-patron-image.pl?borrowernumber=[% borrowernumber | html %]&csrf_token=[% csrf_token | html %]" alt="" />
>+                        <img src="/cgi-bin/koha/sco/sco-patron-image.pl?borrowernumber=[% borrowernumber | uri %]&csrf_token=[% csrf_token | uri %]" alt="" />
>                     </div>
>                 [% END %]
>             </div> 
>-- 
>2.1.4

Actions: View | Diff | Splinter Review

Attachments on bug 22274: 84809 | 87712 | 87779 | 87780 | 88089 | 88090 | 88091 | 88112 | 88113