librarian change

[wolnelektury.git] / src / wolnelektury / static / scss / main / book_box.scss

diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss
index d318fda..e8a83f7 100755 (executable)
--- a/src/wolnelektury/static/scss/main/book_box.scss
+++ b/src/wolnelektury/static/scss/main/book_box.scss
@@ -86,6 +86,7 @@
     .title {
         @include size(font-size, 14px);
         color: #242424;
+        white-space: normal;
     }
 }
 
@@ -97,10 +98,10 @@
     list-style: none;
 
     .Book-item {
-        @include min-screen($S_BOOK_SHORT_FULL) {
+        /*@include min-screen($S_BOOK_SHORT_FULL) {
             display: inline-block;
         }
-        vertical-align: top;
+        vertical-align: top;*/
     }
 }
 
@@ -114,10 +115,6 @@
         color: #0D7E85;
     }
 
-    @include min-screen($S_BOOK_SHORT_FULL) {
-        @include size(width, $W_BOOK_SHORT_FULL);
-    }
-
     .book-box-inner {
         position: relative;
         @include inner-box;
@@ -126,6 +123,32 @@
 }
 
 
+.audiobook-box {
+    .book-left-column {
+        @media screen and (min-width: 1024px) {
+            display: inline-block;
+            @include size(width, 590px);
+        }
+    }
+
+    .audiobook-right-column {
+        @media screen and (min-width: 1024px) {
+            float: right;
+            @include size(width, 360px);
+        }
+    }
+
+    .jp-type-playlist {
+        margin-top: 24px;
+
+        @media screen and (min-width: 1024px) {
+            float: right;
+            margin-top: 48px;
+        }
+    }
+}
+
+
 .book-wide-box {
     margin: 0;
     vertical-align: top;
@@ -238,6 +261,17 @@
             }
         }
     }
+
+    .jp-type-playlist {
+        margin-top: 24px;
+        margin-left: 0.625rem;
+
+        @media screen and (min-width: 1024px) {
+            float: right;
+            margin-right: 0.625rem;
+        }
+    }
+
 }
 
 @media screen and (min-width: 50em) {
@@ -253,10 +287,6 @@
 
 .book-box-body {
     @include size(margin-bottom, 10px);
-    @include min-screen($S_BOOK_SHORT_FULL) {
-        margin-bottom: 0;
-        @include size(height, 170px);
-    }
     position: relative;
 
     .book-box-head,
@@ -309,7 +339,6 @@
         margin-bottom: 5px;
 
         @include min-screen($S_BOOK_SHORT_FULL) {
-            clear: right;
             @include size(max-height, 57.6px);
             overflow: hidden;
         }
@@ -353,19 +382,10 @@
 
     li {
         @include mono;
-        margin-top: 1em;
-
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            display: inline-block;
-            margin-top: 0;
-        }
+        margin-top: 0;
     }
 
     .book-box-read {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(width, 126.5px);
-        }
-
         a {
             @include mono;
         }
@@ -382,14 +402,7 @@
     .book-box-download {
         position: relative;
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(width, 93.5px);
-        }
-
         a {
-            position: relative;
-            z-index: 101;
-
             @mixin downarrow {
                 color: #0D7E85;
 
@@ -405,86 +418,20 @@
 
             &.downarrow {
                 @include downarrow;
-                &.hoverclick {
-                    color: black;
-                    &:before {
-                        display: none;
-                    }
-
-                    @include min-screen($S_BOOK_SHORT_FULL) {
-                        @include downarrow;
-                    }
-                }
             }
         }
 
         .book-box-formats {
-            @include size(padding-left, 19px);
-
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                display: none;
-                position: absolute;
-
-                @include size(width, 180px);
-                @include size(padding-top, 38px);
-                @include size(padding-bottom, 9px);
-                @include size(padding-left, 19px);
-                @include size(padding-right, 19px);
-
-                @include white-box;
-
-                z-index: 100;
-
-                @include size(top, -16px);
-                @include size(left, -19px);
-            }
-
-            span {
-                display: block;
-                @include size(margin-top, 16px);
+            display: inline-block;
+            max-width: 220px;
+            vertical-align: top;
+            padding-top: 6px;
 
                 a {
-                    &:before {
-                        content: url("/static/img/download.png");
-                        @include size(font-size, 25px);
-                        @include size(margin-right, 3.71px);
-                        vertical-align: middle;
-                        font-weight: normal;
-                    }
-                }
-
-                @include min-screen($S_BOOK_SHORT_FULL) {
-                    @include size(margin-top, 0);
-
-                    &:first-child {
-                        @include size(margin-top, 16px);
-                    }
-                    a:before {
-                        display:none;
-                    }
+                    display: inline-block;
+                    @include size(padding, .2em 1em);
                 }
-            }
         }
-
-        &:hover .book-box-formats,
-        &.hover .book-box-formats {
-            display: block;
-        }
-    }
-
-    .book-box-audiobook {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(width, 77px);
-        }
-
-        a:before {
-            content: url("/static/img/listen.png");
-            @include size(font-size, 25px);
-            @include size(margin-right, 3.71px);
-            vertical-align: middle;
-            font-weight: normal;
-        }
-
     }
 }
 
@@ -496,10 +443,14 @@
     @include size(margin-right, 11.25px);
     position: absolute;
     right: 0;
+    z-index: 10;
 
-    button::-moz-focus-inner {
-        padding: 0;
-        border: 0
+    button {
+        cursor: pointer;
+        &::-moz-focus-inner {
+            padding: 0;
+            border: 0;
+        }
     }
     .if-unlike button {
         font-size: 1em;