Bug 22638: (follow-up) Convert SCI CSS to SCSS
authorOwen Leonard <oleonard@myacpl.org>
Thu, 11 Apr 2019 13:50:12 +0000 (13:50 +0000)
committerNick Clemens <nick@bywatersolutions.com>
Wed, 17 Apr 2019 10:24:25 +0000 (10:24 +0000)
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>
koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss [new file with mode: 0644]
koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss [new file with mode: 0644]
koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss [new file with mode: 0644]
koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt

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 (file)
index 0000000..e182db3
--- /dev/null
@@ -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;
+    }
+}
\ 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 (file)
index 0000000..b0ebcd4
--- /dev/null
@@ -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");
+}
index 73ee84c..3b529af 100644 (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;
-}
\ No newline at end of file
+}
index b0f99c9..8d6b967 100644 (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 {
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 (file)
index 0000000..0454175
--- /dev/null
@@ -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);
+}
index 4e946d9..3a4adf0 100644 (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>
 
                                 </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 %]