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 8babc17..e59ab8d 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -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;
@@ -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 {
@@ -2061,7 +2061,7 @@ input {
         margin: 0;
     }
 
-    h4 {
+    h2 {
         font-size: 90%;
         margin: 0 0 .6em 0;
         text-align: center;
@@ -2076,6 +2076,10 @@ input {
         }
     }
 
+    h3 {
+        font-size: 80%;
+    }
+
     li {
         font-size: 90%;
         font-weight: bold;
@@ -2099,7 +2103,6 @@ input {
 
     a {
         font-weight: normal;
-        text-decoration: underline;
     }
 
     .facet-count {
@@ -2208,7 +2211,6 @@ input {
 .CheckNone {
     font-weight: normal;
     margin: 0 .5em;
-    text-decoration: underline;
 }
 
 .sep {
@@ -2729,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 {
@@ -3234,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";