Bug 25242: Improve column wrapping and overflow for tables

[srvgit] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 2cadc63..e59ab8d 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -25,6 +25,7 @@ $footer-height: 45px;
 
 .js {
     .dateformat,
+    #sortsubmit,
     #sorting-form {
         display: none;
     }
@@ -57,14 +58,18 @@ $footer-height: 45px;
 }
 
 a {
-    color: $links;
+    &:link,
+    &:visited {
+        color: $links;
+    }
 
-    &.cancel {
-        padding-left: 1em;
+    &:hover,
+    &:active {
+        color: $links-hover;
     }
 
-    &:visited {
-        color: $links;
+    &.cancel {
+        padding-left: 1em;
     }
 
     &.title {
@@ -107,11 +112,6 @@ a {
         vertical-align: middle;
     }
 
-    &.brief {
-
-        padding-left: 27px;
-    }
-
     &.addtocart {
         padding-right: 0;
     }
@@ -221,11 +221,14 @@ legend {
 
 table {
     font-size: 90%;
+    table-layout: fixed;
 }
 
 table,
 td {
     background-color: #FFF;
+    word-wrap: break-all;
+    word-wrap: break-word;
 }
 
 tr {
@@ -255,6 +258,8 @@ td {
 
 th {
     background-color: #E2E8E8;
+    word-wrap: break-all;
+    word-wrap: break-word;
 
     &.sum {
         text-align: right;
@@ -833,8 +838,6 @@ ul {
 
     .ui-state-default {
         a {
-            color: #006699;
-
             &:link {
                 color: #006699;
             }
@@ -846,8 +849,6 @@ ul {
     }
 
     .ui-state-hover a {
-        color: #990033;
-
         &:link {
             color: #990033;
         }
@@ -996,10 +997,14 @@ ul {
     border: 1px solid #AAA;
     color: #222222;
 
-    a,
+    a:link,
     a:visited {
         color: $links;
     }
+    a:hover,
+    a:active {
+        color: $links-hover;
+    }
 }
 
 .ui-widget-header {
@@ -1460,6 +1465,7 @@ div {
         font-size: 14px;
         line-height: 20px;
         text-align: center;
+        text-decoration: none;
         vertical-align: middle;
     }
 }
@@ -1475,12 +1481,6 @@ div {
     font-weight: bold;
 }
 
-#Fullhistory,
-#Briefhistory {
-    background:  transparent none;
-    padding-left: 0;
-}
-
 /* pagination */
 
 .pagination {
@@ -1649,6 +1649,28 @@ div {
 }
 
 /* nav */
+
+nav {
+    &.libraries {
+        li {
+            list-style-type: none;
+            padding: .3em .5em;
+
+            a {
+                display: block;
+            }
+        }
+
+        i.fa {
+            color:  #7cbc0f;
+        }
+
+        .fa-li {
+            top:  unset;
+        }
+    }
+}
+
 .nav_pages {
     border-top: 1px solid #DDD;
     padding: .6em;
@@ -2039,7 +2061,7 @@ input {
         margin: 0;
     }
 
-    h4 {
+    h2 {
         font-size: 90%;
         margin: 0 0 .6em 0;
         text-align: center;
@@ -2054,6 +2076,10 @@ input {
         }
     }
 
+    h3 {
+        font-size: 80%;
+    }
+
     li {
         font-size: 90%;
         font-weight: bold;
@@ -2077,7 +2103,6 @@ input {
 
     a {
         font-weight: normal;
-        text-decoration: underline;
     }
 
     .facet-count {
@@ -2186,7 +2211,6 @@ input {
 .CheckNone {
     font-weight: normal;
     margin: 0 .5em;
-    text-decoration: underline;
 }
 
 .sep {
@@ -2319,8 +2343,10 @@ input {
 
 button {
     &.btn-link {
+        color: $links;
         &:focus,
         &:hover {
+            color: $links-hover;
             text-decoration: none;
         }
     }
@@ -2705,6 +2731,12 @@ button {
         font-size: 110%;
         font-weight: bold;
         text-decoration: none;
+
+        &.shelfbrowser_cover {
+            min-height: 80px;
+            min-width: 80px;
+            display: inline-block;
+        }
     }
 
     #browser_previous {
@@ -2919,6 +2951,15 @@ button {
     .dropdown:hover .dropdown-menu.nojs {
         display: block;
     }
+
+}
+
+.ill_availability_sourcename {
+    margin-top: 20px;
+}
+
+#continue-request-row {
+    text-align: center;
 }
 
 #dc_fieldset {
@@ -3201,4 +3242,29 @@ $star-selected: #EDB867;
 }
 /*end browse search*/
 
+/* Skip to content link. CSS adapted from https://webaim.org/ */
+#scrolltocontent {
+    background: #c60000;
+    border: 1px solid white;
+    border-radius: 0 0 4px 0;
+    border-width: 0 1px 1px 0;
+    color: white;
+    left: 0px;
+    padding: 6px 12px;
+    position: absolute;
+    text-decoration: none;
+    text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
+    top: -40px;
+    transition: top .5s ease-out;
+    z-index: 100;
+
+    &:focus {
+        left: 0px;
+        outline-color: transparent;
+        position: absolute;
+        top: 0px;
+        transition: top .1s ease-in;
+    }
+}
+
 @import "responsive";