From 47ca7f8f30f8038d6f89dbc46832c5fd90454cc2 Mon Sep 17 00:00:00 2001 From: Chris Cormack Date: Mon, 25 Feb 2013 15:39:02 +1300 Subject: [PATCH] Bug 9704 : Adding persona login to the CCSR theme To test Enable the Persona login Enable the CCSR theme Login with a user that worked with the prog theme Signed-off-by: Bernardo Gonzalez Kriegel Comment: Works as described. Tested normal/persona log-in/out. No errors. Signed-off-by: Katrin Fischer Works nicely and gives good feedback (I forgot to add my email address to the patron at first). Passes all tests and QA script. http://bugs.koha-community.org/show_bug.cgi?id=9708 Signed-off-by: Jared Camins-Esakov --- .../opac-tmpl/ccsr/en/css/persona-buttons.css | 228 ++++++++++++++++++ .../ccsr/en/includes/doc-head-close.inc | 4 + .../opac-tmpl/ccsr/en/includes/masthead.inc | 2 +- .../ccsr/en/includes/opac-bottom.inc | 40 +++ 4 files changed, 273 insertions(+), 1 deletion(-) create mode 100644 koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css diff --git a/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css b/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css new file mode 100644 index 0000000000..d1acbb068d --- /dev/null +++ b/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css @@ -0,0 +1,228 @@ +/* Link body */ +.persona-button{ + color: #fff; + display: inline-block; + font-size: 14px; + font-family: Helvetica, Arial, sans-serif; + font-weight: bold; + line-height: 1.1; + overflow: hidden; + position: relative; + text-decoration: none; + text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2); + + background: #297dc3; + background: -moz-linear-gradient(top, #43a6e2, #287cc2); + background: -ms-linear-gradient(top, #43a6e2, #287cc2); + background: -o-linear-gradient(top, #43a6e2, #287cc2); + background: -webkit-linear-gradient(top, #43a6e2, #287cc2); + background: linear-gradient(top, #43a6e2, #287cc2); + + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2); + -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2); + -o-box-shadow: 0 1px 0 rgba(0,0,0,0.2); + -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2); + box-shadow: 0 1px 0 rgba(0,0,0,0.2); +} + +.persona-button:hover{ + background: #21669f; + background: -moz-linear-gradient(top, #3788b9, #21669f); + background: -ms-linear-gradient(top, #3788b9, #21669f); + background: -o-linear-gradient(top, #3788b9, #21669f); + background: -webkit-linear-gradient(top, #3788b9, #21669f); + background: linear-gradient(top, #3788b9, #21669f); +} + +.persona-button:active, .persona-button:focus{ + top: 1px; + -moz-box-shadow: none; + -ms-box-shadow: none; + -o-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.persona-button span{ + display: inline-block; + padding: 5px 10px 5px 40px; +} + +/* Icon */ +.persona-button span:after{ + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat; + content: ''; + display: block; + width: 31px; + + position: absolute; + bottom: 0; + left: -3px; + top: 0; + z-index: 10; +} + +/* Icon background */ +.persona-button span:before{ + content: ''; + display: block; + height: 100%; + width: 20px; + + position: absolute; + bottom: 0; + left: 0; + top: 0; + z-index: 1; + + background: #42a9dd; + background: -moz-linear-gradient(top, #50b8e8, #3095ce); + background: -ms-linear-gradient(top, #50b8e8, #3095ce); + background: -o-linear-gradient(top, #50b8e8, #3095ce); + background: -webkit-linear-gradient(top, #50b8e8, #3095ce); + background: linear-gradient(top, #50b8e8, #3095ce); + + -moz-border-radius: 3px 0 0 3px; + -ms-border-radius: 3px 0 0 3px; + -o-border-radius: 3px 0 0 3px; + -webkit-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + +/* Triangle */ +.persona-button:before{ + background: #42a9dd; + content: ''; + display: block; + height: 26px; + width: 26px; + + position: absolute; + left: 2px; + top: 50%; + margin-top: -13px; + z-index: 0; + + background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce); + background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce); + background: -o-linear-gradient(-45deg, #50b8e8, #3095ce); + background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce); + background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */ + + -moz-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); + -ms-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); + -o-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); + -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); + box-shadow: 1px -1px 1px rgba(0,0,0,0.1); + + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +/* Inset shadow (required here because the icon background clips it when on the `a` element) */ +.persona-button:after{ + content: ''; + display: block; + height: 100%; + width: 100%; + + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 10; + + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); + -ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); + -o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); +} + +/* ======================================================== + * Dark button + * ===================================================== */ +.persona-button.dark{ + background: #3c3c3c; + background: -moz-linear-gradient(top, #606060, #3c3c3c); + background: -ms-linear-gradient(top, #606060, #3c3c3c); + background: -o-linear-gradient(top, #606060, #3c3c3c); + background: -webkit-linear-gradient(top, #606060, #3c3c3c); + background: linear-gradient(top, #606060, #3c3c3c); +} +.persona-button.dark:hover{ + background: #2d2d2d; + background: -moz-linear-gradient(top, #484848, #2d2d2d); + background: -ms-linear-gradient(top, #484848, #2d2d2d); + background: -o-linear-gradient(top, #484848, #2d2d2d); + background: -webkit-linear-gradient(top, #484848, #2d2d2d); + background: linear-gradient(top, #484848, #2d2d2d); +} +.persona-button.dark span:before{ /* Icon BG */ + background: #d34f2d; + background: -moz-linear-gradient(top, #ebac45, #d34f2d); + background: -ms-linear-gradient(top, #ebac45, #d34f2d); + background: -o-linear-gradient(top, #ebac45, #d34f2d); + background: -webkit-linear-gradient(top, #ebac45, #d34f2d); + background: linear-gradient(top, #ebac45, #d34f2d); +} +.persona-button.dark:before{ /* Triangle */ + background: #d34f2d; + background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d); + background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d); + background: -o-linear-gradient(-45deg, #ebac45, #d34f2d); + background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d); + background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */ +} + +/* ======================================================== + * Orange button + * ===================================================== */ +.persona-button.orange{ + background: #ee731a; + background: -moz-linear-gradient(top, #ee731a, #d03116); + background: -ms-linear-gradient(top, #ee731a, #d03116); + background: -o-linear-gradient(top, #ee731a, #d03116); + background: -webkit-linear-gradient(top, #ee731a, #d03116); + background: linear-gradient(top, #ee731a, #d03116); +} +.persona-button.orange:hover{ + background: #cb6216; + background: -moz-linear-gradient(top, #cb6216, #b12a13); + background: -ms-linear-gradient(top, #cb6216, #b12a13); + background: -o-linear-gradient(top, #cb6216, #b12a13); + background: -webkit-linear-gradient(top, #cb6216, #b12a13); + background: linear-gradient(top, #cb6216, #b12a13); +} +.persona-button.orange span:before{ /* Icon BG */ + background: #e84a21; + background: -moz-linear-gradient(top, #f7ad27, #e84a21); + background: -ms-linear-gradient(top, #f7ad27, #e84a21); + background: -o-linear-gradient(top, #f7ad27, #e84a21); + background: -webkit-linear-gradient(top, #f7ad27, #e84a21); + background: linear-gradient(top, #f7ad27, #e84a21); +} +.persona-button.orange:before{ /* Triangle */ + background: #e84a21; + background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21); + background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21); + background: -o-linear-gradient(-45deg, #f7ad27, #e84a21); + background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21); + background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */ +} diff --git a/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc index b5255ad715..f99eb63924 100644 --- a/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc +++ b/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc @@ -26,6 +26,10 @@ [% IF ( OPACMobileUserCSS ) %][% END %] [% IF ( OPACUserCSS ) %][% END %] +[% IF persona %] + +[% END %] + diff --git a/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc index b1bfb29a38..1d8538e70e 100644 --- a/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc @@ -65,7 +65,7 @@ [% IF ( ShowOpacRecentSearchLink ) %]
  • Search history
    • [% END %] - [% IF ( loggedinusername ) %]
  • Log Out
    • [% END %] + [% IF ( loggedinusername ) %]
  • [% IF persona %][% ELSE %][% END %]Log Out
    • [% END %] [% END %] diff --git a/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc index d360feee37..0b368135d9 100644 --- a/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc +++ b/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc @@ -87,5 +87,45 @@ $(function() { +[% IF persona %] + + +[% END %] + + -- 2.39.5