Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 22638: (follow-up) Convert SCI CSS to SCSS

Browse source 
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.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2019-04-11 13:50:12 +00:00 committed by Nick Clemens
parent fa64402384
commit 93d130f357
6 changed files with 582 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss Normal file
View file

@ -0,0 +1,196 @@
// 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;
}
}
}
}
#koha_url {
p {
color: #666666;
float: right;
margin: 0;
}
}

35
koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss Normal file
View file

@ -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");
}

6
koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss
View file

@ -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;
}
}

210
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View file

@ -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;
@ -482,14 +407,6 @@ th {
}
}
#koha_url {
p {
color: #666666;
float: right;
margin: 0;
}
}
#moresearches {
margin: .5em 0;
padding: 0 .8em;
@ -772,90 +689,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 +1352,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 +2719,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 {

340
koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss Normal file
View file

@ -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="#">&times;</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);
}

6
koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
View file

@ -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 %]