Bugzilla – Attachment 87770 Details for
Bug 22638
Self checkin CSS update
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 22638: (follow-up) Convert SCI CSS to SCSS
Bug-22638-follow-up-Convert-SCI-CSS-to-SCSS.patch (text/plain), 22.06 KB, created by
Owen Leonard
on 2019-04-11 14:19:11 UTC
(
hide
)
Description:
Bug 22638: (follow-up) Convert SCI CSS to SCSS
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2019-04-11 14:19:11 UTC
Size:
22.06 KB
patch
obsolete
>From b410b1ae3d05ef2e6cdf37c04d9f19aa521aba52 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Thu, 11 Apr 2019 13:50:12 +0000 >Subject: [PATCH] Bug 22638: (follow-up) Convert SCI CSS to SCSS > >This patch makes a number of follow-up changes, including: > > - Covert remaining icons to Font Awesome > - Convert CSS to SCSS > - Move SCSS which is common to both the OPAC and SCI into separate > files to be including in each during compilation. > - Make minor correction to opac.scss to fix SCSS build warning > >To test, apply the patch and rebuild the OPAC CSS. Clear your browser >cache if necessary. > >- Enable the self checkin module using using the SelfCheckInModule > system preference. >- Open the self checkin interface and test the checkin process. > Everything should look correct. > - After submitting barcodes for checkin, the "Finish" button should > show a Font Awesome icon instead of an image icon. >- Enable multiple translations and set the OpacLangSelectorMode > preference to show the language menu in the footer. >- Confirm that the language menu looks correct. >- View the regular OPAC to make sure the changes to opac.scss didn't > result in unintended changes to the interface. >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 188 ++++++++++++ > koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss | 35 +++ > koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss | 6 +- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 202 +----------- > koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss | 340 +++++++++++++++++++++ > .../opac-tmpl/bootstrap/en/modules/sci/sci-main.tt | 6 +- > 6 files changed, 574 insertions(+), 203 deletions(-) > create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss > create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss > create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >new file mode 100644 >index 0000000..3fcea3a >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >@@ -0,0 +1,188 @@ >+// Sticky footer styles >+html, >+body { >+ height: 100%; >+ // The html and body elements cannot have any padding or margin. >+} >+ >+body { >+ background: #FCF9FC none; >+ font-family: sans-serif; >+ font-size: 16px; >+} >+ >+.fonts-loaded { >+ body { >+ font-family: "NotoSans"; >+ } >+} >+ >+.navbar { >+ .divider-vertical { >+ border-left-color: #FCF9FC; >+ border-right-color: #FCF9FC; >+ } >+ >+ .nav { >+ li { >+ &.dropdown { >+ > a { >+ &:focus { >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ >+ &:hover { >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ } >+ } >+ } >+ } >+} >+ >+.navbar-inverse { >+ .brand { >+ color: #9FE1FF; >+ font-weight: bold; >+ } >+ >+ .navbar-inner { >+ background: #FCF9FC none; >+ border-color: #FCF9FC; >+ box-shadow: none; >+ >+ li { >+ > a { >+ color: #727272; >+ font-weight: bold; >+ text-shadow: none; >+ >+ &:hover { >+ color: #85CA11; >+ } >+ >+ &:focus { >+ color: #85CA11; >+ } >+ } >+ >+ &.dropdown { >+ > a { >+ &:hover { >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ >+ &:focus { >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ } >+ >+ &.open { >+ > .dropdown-toggle { >+ background-color: transparent; >+ color: #85CA11; >+ >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ >+ &:hover { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ } >+ } >+ } >+ } >+ } >+} >+ >+.navbar-inner { >+ background: #FCF9FC none; >+} >+ >+.navbar-fixed-bottom { >+ &.navbar-static-bottom { >+ position: static; >+ } >+ >+ .navbar-inner { >+ box-shadow: none; >+ min-height: $footer-height; >+ } >+} >+ >+// Wrapper for page content to push down footer >+#wrap { >+ height: auto !important; >+ height: 100%; >+ margin: 0 auto -#{$footer-height + 1}; >+ // Negative indent footer by its height >+ min-height: 100%; >+ padding-left: 40px; >+ padding-right: 40px; >+} >+ >+#changelanguage { >+ clear: both; >+ // Set the fixed height of the footer here >+ min-height: $footer-height; >+ >+ .nav { >+ > .active { >+ > p { >+ padding: 0 15px; >+ } >+ } >+ } >+} >+ >+#i18nMenu { >+ margin-left: 1em; >+ >+ li { >+ font-size: 85%; >+ >+ li { >+ font-size: 100%; >+ >+ > a { >+ font-size: 100%; >+ } >+ >+ &:hover { >+ color: #FFF; >+ } >+ } >+ >+ a { >+ color: $links; >+ } >+ } >+ >+ .dropdown-menu { >+ li { >+ p { >+ clear: both; >+ display: block; >+ font-weight: normal; >+ line-height: 20px; >+ padding: 3px 20px; >+ white-space: nowrap; >+ } >+ } >+ } >+} >\ No newline at end of file >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss >new file mode 100644 >index 0000000..b0ebcd4 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss >@@ -0,0 +1,35 @@ >+@font-face { >+ font-family: "NotoSans"; >+ font-style: normal; >+ font-weight: 400; >+ src: local("Noto Sans Regular"), >+ url("fonts/NotoSans-Regular-webfont.woff2") format("woff2"), >+ url("fonts/NotoSans-Regular-webfont.woff") format("woff"); >+} >+ >+@font-face { >+ font-family: "NotoSans"; >+ font-style: bold; >+ font-weight: 700; >+ src: local("Noto Sans Bold"), >+ url("fonts/NotoSans-Bold-webfont.woff2") format("woff2"), >+ url("fonts/NotoSans-Bold-webfont.woff") format("woff"); >+} >+ >+@font-face { >+ font-family: "NotoSans"; >+ font-style: italic; >+ font-weight: 400; >+ src: local("Noto Sans Italic"), >+ url("fonts/NotoSans-Italic-webfont.woff2") format("woff2"), >+ url("fonts/NotoSans-Italic-webfont.woff") format("woff"); >+} >+ >+@font-face { >+ font-family: "NotoSans"; >+ font-style: italic; >+ font-weight: 700; >+ src: local("Noto Sans Bold Italic"), >+ url("fonts/NotoSans-BoldItalic-webfont.woff2") format("woff2"), >+ url("fonts/NotoSans-BoldItalic-webfont.woff") format("woff"); >+} >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss >index 73ee84c..3b529af 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss >@@ -1,5 +1,9 @@ > $color: #999999; > $links: #0076B2; >+$footer-height: 45px; >+ >+$sci-link-color: #0076B6; >+$sci-heading-color: #727272; > > @mixin shadowed { > box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 ); >@@ -7,4 +11,4 @@ $links: #0076B2; > > @mixin border-radius-all( $radius: 3px ) { > border-radius: $radius; >-} >\ No newline at end of file >+} >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index b0f99c9..1a60bfb 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -1,60 +1,9 @@ > @import "mixins"; >- >-@font-face { >- font-family: 'NotoSans'; >- font-style: normal; >- font-weight: 400; >- src: local('Noto Sans Regular'), >- url('fonts/NotoSans-Regular-webfont.woff2') format('woff2'), >- url('fonts/NotoSans-Regular-webfont.woff') format('woff'); >-} >- >-@font-face { >- font-family: 'NotoSans'; >- font-style: bold; >- font-weight: 700; >- src: local('Noto Sans Bold'), >- url('fonts/NotoSans-Bold-webfont.woff2') format('woff2'), >- url('fonts/NotoSans-Bold-webfont.woff') format('woff'); >-} >- >-@font-face { >- font-family: 'NotoSans'; >- font-style: italic; >- font-weight: 400; >- src: local('Noto Sans Italic'), >- url('fonts/NotoSans-Italic-webfont.woff2') format('woff2'), >- url('fonts/NotoSans-Italic-webfont.woff') format('woff'); >-} >- >-@font-face { >- font-family: 'NotoSans'; >- font-style: italic; >- font-weight: 700; >- src: local('Noto Sans Bold Italic'), >- url('fonts/NotoSans-BoldItalic-webfont.woff2') format('woff2'), >- url('fonts/NotoSans-BoldItalic-webfont.woff') format('woff'); >-} >+@import "fonts"; >+@import "common"; > > $footer-height: 45px; > >-body { >- background: #FCF9FC none; >- font-family: sans-serif; >- font-size: 16px; >-} >- >-.fonts-loaded body { >- font-family: 'NotoSans'; >-} >- >-/* Sticky footer styles */ >-html, >-body { >- height: 100%; >- /* The html and body elements cannot have any padding or margin. */ >-} >- > .no-js { > .dateformat { > display: inline; >@@ -76,35 +25,11 @@ body { > } > } > >-/* Wrapper for page content to push down footer */ >-#wrap { >- height: auto !important; >- height: 100%; >- min-height: 100%; >- padding-left: 40px; >- padding-right: 40px; >- /* Negative indent footer by its height */ >- margin: 0 auto -#{$footer-height + 1}; >-} >- > .fa.fa-icon-black, > .fa.fa-icon-white { > color: #000; > } > >-#changelanguage { >- clear: both; >- /* Set the fixed height of the footer here */ >- min-height: $footer-height; >- .nav { >- > .active { >- > p { >- padding: 0 15px; >- } >- } >- } >-} >- > .popup { > padding-left: 0; > padding-right: 0; >@@ -772,90 +697,6 @@ input[type="text"]:focus { > box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6) > } > >- .navbar { >- .divider-vertical { >- border-left-color: #fcf9fc; >- border-right-color: #fcf9fc; >- } >- .nav li.dropdown > a { >- &:focus .caret { >- border-top-color: #85ca11; >- border-bottom-color: #85ca11; >- } >- &:hover .caret { >- border-top-color: #85ca11; >- border-bottom-color: #85ca11; >- } >- } >-} >- >-.navbar-inverse { >- .brand { >- color: #9FE1FF; >- font-weight: bold; >- } >- >- .navbar-inner { >- background: #fcf9fc none; >- border-color: #fcf9fc; >- box-shadow: none; >- } >- >- .nav { >- > li { >- > a { >- color: #727272; >- font-weight: bold; >- text-shadow: none; >- &:hover { >- color: #85ca11; >- } >- &:focus { >- color: #85ca11; >- } >- } >- } >- li.dropdown { >- > a { >- &:hover .caret { >- border-top-color: #85ca11; >- border-bottom-color: #85ca11; >- } >- &:focus .caret { >- border-top-color: #85ca11; >- border-bottom-color: #85ca11; >- } >- } >- &.open > .dropdown-toggle { >- background-color: transparent; >- color: #85ca11; >- .caret { >- border-top-color: #85ca11; >- border-bottom-color: #85ca11; >- &:hover { >- border-top-color: #85ca11; >- border-bottom-color: #85ca11; >- } >- } >- } >- } >- } >-} >- >-.navbar-inner { >- background: #fcf9fc none; >-} >- >-.navbar-fixed-bottom { >- &.navbar-static-bottom { >- position: static; >- } >- .navbar-inner { >- box-shadow: none; >- min-height: $footer-height; >- } >-} >- > [class^="icon-"] { > vertical-align: 0; > } >@@ -1519,7 +1360,7 @@ div { > > #selections-toolbar, > .selections-toolbar { >- background: linear-gradient( top, #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% ); >+ background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% ); > margin: 0 0 1em; > padding-left: 10px; > padding-top: .5em; >@@ -2886,43 +2727,6 @@ button.closebtn { > float: right; > } > >-#i18nMenu { >- margin-left: 1em; >- >- li { >- font-size: 85%; >- >- li { >- font-size: 100%; >- >- > a { >- font-size: 100%; >- } >- >- &:hover { >- color: #FFF; >- } >- } >- >- a { >- color: $links; >- } >- } >- >- .dropdown-menu { >- li { >- p { >- clear: both; >- display: block; >- font-weight: normal; >- line-height: 20px; >- padding: 3px 20px; >- white-space: nowrap; >- } >- } >- } >-} >- > #subjectsList, > #authorSearch { > label { >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss >new file mode 100644 >index 0000000..0454175 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss >@@ -0,0 +1,340 @@ >+@import "mixins"; >+@import "fonts"; >+@import "common"; >+ >+body { >+ background-color: #FCF9FC; >+} >+ >+a { >+ color: $sci-link-color; >+ >+ &:visited { >+ color: $sci-link-color; >+ } >+ >+ &.title { >+ font-weight: bold; >+ } >+} >+ >+.ui-widget-content { >+ a, >+ a:visited { >+ color: $sci-link-color; >+ } >+} >+ >+h1 { >+ color: $sci-heading-color; >+ font-size: 140%; >+ line-height: 150%; >+} >+ >+h2 { >+ color: $sci-heading-color; >+ font-size: 130%; >+ line-height: 150%; >+} >+ >+h3 { >+ color: $sci-heading-color; >+ font-size: 120%; >+ line-height: 150%; >+} >+ >+h4 { >+ color: $sci-heading-color; >+ font-size: 110%; >+} >+ >+h5 { >+ color: $sci-heading-color; >+ font-size: 100%; >+} >+ >+caption { >+ color: $sci-heading-color; >+ font-size: 120%; >+ font-weight: bold; >+ margin: .5em 0; >+ text-align: left; >+} >+ >+input, >+textarea { >+ width: auto; >+} >+ >+// Search bar border glow >+input { >+ &[type="text"], >+ &[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: $sci-heading-color; >+ font-size: 110%; >+ font-weight: bold; >+} >+ >+th { >+ background-color: #E2E8E8; >+} >+ >+.main { >+ background-color: #FFF; >+ border-color: #F0F3F3; >+ margin: .5em 20px; >+ padding: .8em 0; >+} >+ >+.navbar-inverse { >+ .navbar-inner { >+ background: #FCF9FC none; >+ border-color: #FCF9FC; >+ box-shadow: none; >+ } >+ >+ .brand { >+ color: $sci-heading-color; >+ font-weight: bold; >+ } >+ >+ .nav { >+ li { >+ a, >+ a:hover, >+ a:focus { >+ color: $sci-heading-color; >+ font-weight: bold; >+ } >+ >+ &.dropdown { >+ >+ a { >+ &:hover, >+ &:focus { >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ } >+ >+ &.open { >+ &> .dropdown-toggle { >+ background-color: transparent; >+ color: #85CA11; >+ >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ >+ &:hover { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ } >+ } >+ } >+ } >+ } >+} >+ >+.navbar { >+ .nav { >+ li { >+ &.dropdown { >+ &> a { >+ &:focus, >+ &:hover { >+ .caret { >+ border-bottom-color: #85CA11; >+ border-top-color: #85CA11; >+ } >+ } >+ } >+ } >+ } >+ } >+} >+ >+// Dropdown menus in Header >+.dropdown-menu { >+ border-radius: 0; >+ >+ &> li { >+ &> a { >+ &:hover, >+ &:focus { >+ background: #85CA11 none; >+ color: #FFFFFF; >+ } >+ } >+ } >+} >+ >+ >+.table-striped tbody > tr:nth-child(odd) > td, >+.table-striped tbody > tr:nth-child(odd) > th { >+ background-color: #F0F3F3; >+} >+ >+.modal-header { >+ .closebtn { >+ margin-top: 2px; >+ } >+} >+ >+.closebtn { >+ color: #000000; >+ filter: alpha(opacity=20); >+ float: right; >+ font-size: 20px; >+ font-weight: bold; >+ line-height: 20px; >+ opacity: .2; >+ text-shadow: 0 1px 0 #FFFFFF; >+ >+ &:hover { >+ color: #000000; >+ cursor: pointer; >+ filter: alpha(opacity=40); >+ opacity: .4; >+ text-decoration: none; >+ } >+} >+ >+button { >+ &.closebtn { >+ background: transparent; >+ border: 0; >+ cursor: pointer; >+ padding: 0; >+ } >+} >+ >+.btn-group { >+ label, >+ select { >+ font-size: 13px; >+ } >+} >+ >+// Override Bootstrap alert >+.alert { >+ background: linear-gradient(to bottom, #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100%); >+ border-color: #D6C43B; >+ color: #333; >+ >+ // Redefine a new style for Bootstrap's class "close" since we use that already >+ // Use <a class="closebtn" href="#">×</a> >+ .closebtn { >+ line-height: 20px; >+ position: relative; >+ right: -21px; >+ top: -2px; >+ } >+} >+ >+// Override Bootstrap alert.alert-info >+.alert-info { >+ background: linear-gradient(to bottom, #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100%); >+ border-color: #C5D1E5; >+ color: #333; >+} >+ >+// Override Bootstrap alert.alert-success >+.alert-success { >+ background: linear-gradient(to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100%); >+ border-color: #9FBA35; >+ color: #333; >+} >+ >+ >+#members { >+ a { >+ &.logout { >+ color: #E8583C; >+ padding: 0 .3em 0 .3em; >+ } >+ } >+} >+ >+.inline { >+ display: inline; >+} >+ >+.table { >+ .sorting_asc { >+ background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE; >+ padding-right: 19px; >+ } >+ >+ .sorting_desc { >+ background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE; >+ padding-right: 19px; >+ } >+ >+ .sorting { >+ background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE; >+ padding-right: 19px; >+ } >+ >+ .nosort, >+ .nosort.sorting_asc, >+ .nosort.sorting_desc, >+ .nosort.sorting { >+ background: #E2E8E8 none; >+ padding-right: 19px; >+ } >+} >+ >+.table-bordered { >+ border-radius: 0; >+ >+ thead { >+ &:first-child { >+ tr { >+ &:first-child { >+ &> th { >+ &:first-child, >+ &:last-child { >+ border-radius: 0; >+ } >+ } >+ } >+ >+ &:last-child { >+ &> th { >+ &:first-child, >+ &:last-child { >+ border-radius: 0; >+ } >+ } >+ } >+ } >+ } >+ } >+} >+ >+#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/en/modules/sci/sci-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt >index 4e946d9..3a4adf0 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 >@@ -54,8 +54,8 @@ > <a class="brand" href="/cgi-bin/koha/sci/sci-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/sci/sci-main.pl" class="helpModal-trigger" role="button" data-toggle="modal"><i class="icon help"></i> Help</a></li> >- <li><a id="sci_logout" href="/cgi-bin/koha/sci/sci-main.pl?logout.x=1" class="logout">Logout</a></li> >+ <li><a href="/cgi-bin/koha/sci/sci-main.pl" class="helpModal-trigger" role="button" data-toggle="modal"><i class="fa fa-info-circle"></i> Help</a></li> >+ <li><a id="sci_logout" href="/cgi-bin/koha/sci/sci-main.pl?logout.x=1" class="logout">Log out</a></li> > </ul> > </div> > >@@ -122,7 +122,7 @@ > </table> > <div> > <form method="post" action="#" id="finish_form"> >- <button id="sci_finish_button" type="submit" class="btn"><i class="icon finish"></i> Finish</button> >+ <button id="sci_finish_button" type="submit" class="btn"><i class="fa fa-check"></i> Finish</button> > </form> > </div> > [% ELSE %] >-- >2.1.4
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 22638
:
87708
|
87710
|
87767
|
87769
|
87770
|
88086
|
88087
|
88088
|
88110
|
88111