first changes of Gallery
authorcain-ish <mariusz.machuta@gmail.com>
Fri, 5 Feb 2016 13:52:38 +0000 (14:52 +0100)
committercain-ish <mariusz.machuta@gmail.com>
Fri, 5 Feb 2016 13:52:38 +0000 (14:52 +0100)
src/catalogue/templates/catalogue/plain_list.html
src/wolnelektury/static/js/base.js
src/wolnelektury/static/scss/main/book_box.scss

index a935184..b958e84 100644 (file)
@@ -15,7 +15,9 @@
     {% if initial_blocks %}</div>{% endif %}
 {% endfor %}
 </div>
     {% if initial_blocks %}</div>{% endif %}
 {% endfor %}
 </div>
-<div class="pager"></div>
+    <div class="pagerCenter">
+        <div class="pager"></div>
+    </div>
 </div>
 
 {% endspaceless %}
 </div>
 
 {% endspaceless %}
index 5283468..1626906 100644 (file)
@@ -22,9 +22,9 @@
                         if (button && short_text) button.html(short_text);
                     }
                     return false;
                         if (button && short_text) button.html(short_text);
                     }
                     return false;
-                }
+                };
                 return toggle;
                 return toggle;
-            }
+            };
             if (long_el.html().length <= short_el.html().length)
                 return;
 
             if (long_el.html().length <= short_el.html().length)
                 return;
 
@@ -209,15 +209,15 @@ $('#themes-list-toggle').click(function(event) {
                 onFormat: function (type) {
                     switch (type) {
                         case 'block': // n and c
                 onFormat: function (type) {
                     switch (type) {
                         case 'block': // n and c
-                            return ' <a href="#"' + (this.value == this.page ? ' class="current"' : '') + '>' + this.value + '</a> ';
+                            return ' <li><a href="#"' + (this.value == this.page ? ' class="current"' : '') + '>' + this.value + '</a></li>';
                         case 'next': // >
                         case 'next': // >
-                            return ' <a href="#">&gt;</a> ';
+                            return '<li><a href="#">&gt;</a></li>';
                         case 'prev': // <
                         case 'prev': // <
-                            return ' <a href="#">&lt;</a> ';
+                            return '<li><a href="#">&lt;</a></li>';
                         case 'first': // [
                         case 'first': // [
-                            return '<a href="#">«</a> ';
+                            return '<li><a href="#">«</a></li>';
                         case 'last': // ]
                         case 'last': // ]
-                            return ' <a href="#">»</a>';
+                            return '<li><a href="#">»</a></li>';
                     }
                 }
             });
                     }
                 }
             });
index 51d3fec..c9ccbf2 100755 (executable)
 @mixin inner-box {
 @mixin inner-box {
-    display: block;
-    color: black;
-    @include size(margin, 1px);
-    @include size(padding, 8px 10px);
-    @include white-box;
+  display: block;
+  color: black;
+  @include size(margin, 1px);
+  @include size(padding, 8px 10px);
+  @include white-box;
 }
 
 }
 
-
 .cover-area {
 .cover-area {
-    float: left;
-    @include size(margin-right, 15px);
-    @include size(margin-bottom, 5px);
+  float: left;
+  @include size(margin-right, 15px);
+  @include size(margin-bottom, 5px);
 
 
-    @include min-screen($S_BOOK_SHORT_FULL) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        margin-right: 0;
-    }
+  @include min-screen($S_BOOK_SHORT_FULL) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-right: 0;
+  }
 
 
-    img.cover {
-        @include size(height, 193px / 2);
-        @include size(width, 139px / 2);
+  img.cover {
+    @include size(height, 193px / 2);
+    @include size(width, 139px / 2);
 
 
-        @include min-screen($S_BOOK_SHORT_MEDIUM) {
-            @include size(height, 193px);
-            @include size(width, 139px);
-        }
+    @include min-screen($S_BOOK_SHORT_MEDIUM) {
+      @include size(height, 193px);
+      @include size(width, 139px);
     }
     }
+  }
 }
 
 .book-mini-box {
 }
 
 .book-mini-box {
-    /* Original design fits 6 boxes horizontally in 975px (162.5px each),
-     * but we really want to fit 2 boxes on a 320px mobile screen. */
+  /* Original design fits 6 boxes horizontally in 975px (162.5px each),
+   * but we really want to fit 2 boxes on a 320px mobile screen. */
 
 
-    @include size(width, 160px);
-    display: inline-block;
-    vertical-align: top;
+  @include size(width, 160px);
+  display: inline-block;
+  vertical-align: top;
 
 
-    @include min-screen(350px) {
-        @include size(width, 162.5px);
-    }
+  @include min-screen(350px) {
+    @include size(width, 162.5px);
+  }
 
 
-    .book-mini-box-inner {
-        @include inner-box;
-        @include size(height, 271px);
-        @include size(margin, 1px);
-        @include size(padding, 8px 9px);
-        overflow: hidden;
-
-        @include min-screen(350px) {
-            @include size(padding, 8px 10px);
-        }
+  .book-mini-box-inner {
+    @include inner-box;
+    @include size(height, 271px);
+    @include size(margin, 1px);
+    @include size(padding, 8px 9px);
+    overflow: hidden;
 
 
-        a {
-            display: block;
-        }
-    }
-    img.cover {
-        @include size(height, 193px);
-        @include size(width, 139px);
-        @include size(margin-bottom, 18px);
-    }
-    .language {
-        color: #aaa;
-        float: right;
-        @include mono;
-        @include size(font-size, 10px);
-        text-transform: uppercase;
-        position: relative;
-        @include size(top, -20px);
-    }
-    .desc {
-        margin-left: 0;
-    }
-    .author {
-        @include size(font-size, 11px);
-        @include mono;
-        color: #6d7877;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    @include min-screen(350px) {
+      @include size(padding, 8px 10px);
     }
     }
-    .title {
-        @include size(font-size, 14px);
-        color: #242424;
-        white-space: normal;
+
+    a {
+      display: block;
     }
     }
+  }
+  img.cover {
+    @include size(height, 193px);
+    @include size(width, 139px);
+    @include size(margin-bottom, 18px);
+  }
+  .language {
+    color: #aaa;
+    float: right;
+    @include mono;
+    @include size(font-size, 10px);
+    text-transform: uppercase;
+    position: relative;
+    @include size(top, -20px);
+  }
+  .desc {
+    margin-left: 0;
+  }
+  .author {
+    @include size(font-size, 11px);
+    @include mono;
+    color: #6d7877;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .title {
+    @include size(font-size, 14px);
+    color: #242424;
+    white-space: normal;
+  }
 }
 
 }
 
-
-
 .work-list {
 .work-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 
 
-    .Book-item {
-        /*@include min-screen($S_BOOK_SHORT_FULL) {
-            display: inline-block;
-        }
-        vertical-align: top;*/
+  .Book-item {
+    /*@include min-screen($S_BOOK_SHORT_FULL) {
+        display: inline-block;
     }
     }
+    vertical-align: top;*/
+  }
 }
 
 }
 
+#books-list .plain-list-container .plain-list {
+  p {
+    line-height: 1em;
+    &.header {
+      font-weight: bold;
+    }
+  }
+}
 
 .book-box {
 
 .book-box {
-    margin: 0;
-    vertical-align: top;
+  margin: 0;
+  vertical-align: top;
 
 
-    /* */
-    a {
-        color: #0D7E85;
-    }
+  /* */
+  a {
+    color: #0D7E85;
+  }
 
 
-    .book-box-inner {
-        position: relative;
-        @include inner-box;
-        @include size(min-height, 197.5px);
-    }
+  .book-box-inner {
+    position: relative;
+    @include inner-box;
+    @include size(min-height, 197.5px);
+  }
 }
 
 }
 
-
 .audiobook-box {
 .audiobook-box {
-    .book-left-column {
-        @media screen and (min-width: 1024px) {
-            display: inline-block;
-            @include size(width, 590px);
-        }
+  .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);
-        }
+  .audiobook-right-column {
+    @media screen and (min-width: 1024px) {
+      float: right;
+      @include size(width, 360px);
     }
     }
+  }
 
 
-    .jp-type-playlist {
-        margin-top: 24px;
+  .jp-type-playlist {
+    margin-top: 24px;
 
 
-        @media screen and (min-width: 1024px) {
-            float: right;
-            margin-top: 48px;
-        }
+    @media screen and (min-width: 1024px) {
+      float: right;
+      margin-top: 48px;
     }
     }
+  }
 }
 
 }
 
-
 .book-wide-box {
 .book-wide-box {
-    margin: 0;
-    vertical-align: top;
+  margin: 0;
+  vertical-align: top;
+
+  @media screen and (min-width: 62.5em) {
+    @include size(width, 975px);
+  }
 
 
-    @media screen and (min-width: 62.5em) {
-        @include size(width, 975px);
+  .book-box-inner {
+    position: relative;
+    @include size(min-height, 244px);
+    @include inner-box;
+    @include size(margin-left, 0);
+    @include size(margin-right, 0);
+
+    .book-left-column { /* FIXME */
+      @media screen and (min-width: 62.5em) {
+        float: left;
+        @include size(width, 536px);
+      }
     }
 
     }
 
-    .book-box-inner {
-        position: relative;
-        @include size(min-height, 244px);
-        @include inner-box;
-        @include size(margin-left, 0);
-        @include size(margin-right, 0);
-
-        .book-left-column { /* FIXME */
-            @media screen and (min-width: 62.5em) {
-                float: left;
-                @include size(width, 536px);
-            }
-        }
+    .license-icon {
+      display: block;
+      @include size(margin-top, 5px);
+    }
+
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      // Show full title on the work's page.
+
+      .book-box-body {
+        height: auto;
+        @include size(min-height, 170px);
 
 
-        .license-icon {
-            display: block;
-            @include size(margin-top, 5px);
+        .book-box-head .title {
+          height: auto;
+          @include size(min-height, 57.6px);
         }
         }
+      }
+    }
 
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-             // Show full title on the work's page.
+    .book-box-head,
+    .tags,
+    .book-box-tools {
+      @media screen and (min-width: 62.5em) {
+        @include size(width, 382px);
+      }
+    }
 
 
-            .book-box-body {
-                height: auto;
-                @include size(min-height, 170px);
+    #theme-list-wrapper {
+      @include min-screen($S_BOOK_SHORT_MEDIUM) {
+        @include size(margin-left, 154px);
+        @include size(width, 300px);
+      }
+      margin-bottom: 0;
 
 
-                .book-box-head .title {
-                    height: auto;
-                    @include size(min-height, 57.6px);
-                }
-            }
-        }
+      p {
+        @include size(margin-top, 10px);
+        @include size(margin-bottom, 10px);
+      }
+    }
+
+    .right-column {
+      @include size(margin-top, 16px);
+      // Eat the padding
+      @include size(margin-left, -10px);
+      @include size(margin-right, -10px);
+      max-width: none;
+
+      @media screen and (min-width: 62.5em) {
+        @include size(width, 415px);
+        // Eat the padding
+        @include size(margin-top, -8px);
+      }
 
 
-        .book-box-head,
-        .tags,
-        .book-box-tools {
-            @media screen and (min-width: 62.5em) {
-                @include size(width, 382px);
-            }
+      .other-tools,
+      .other-download {
+        @include size(font-size, 11px);
+        clear: left;
+        @include size(margin-top, 25px);
+        line-height: 1.75em;
+        @include size(margin-left, 15px);
+
+        h2 {
+          margin: 0;
+          @include size(font-size, 11px);
+          @include mono;
         }
 
         }
 
-        #theme-list-wrapper {
-            @include min-screen($S_BOOK_SHORT_MEDIUM) {
-                @include size(margin-left, 154px);
-                @include size(width, 300px);
-            }
-            margin-bottom: 0;
-
-            p {
-                @include size(margin-top, 10px);
-                @include size(margin-bottom, 10px);
-            }
+        @include min-screen($S_BOOK_SHORT_FULL) {
+          float: left;
+          clear: none;
+          @include size(width, 145px);
+          @include size(margin-top, 50px);
+          @include size(margin-right, 0);
+          @include size(margin-bottom, 0);
+          @include size(margin-left, 5px);
         }
 
         }
 
-        .right-column {
-            @include size(margin-top, 16px);
-            // Eat the padding
-            @include size(margin-left, -10px);
-            @include size(margin-right, -10px);
-            max-width: none;
-
-            @media screen and (min-width: 62.5em) {
-                @include size(width, 415px);
-                // Eat the padding
-                @include size(margin-top, -8px);
-            }
-
-            .other-tools,
-            .other-download {
-                @include size(font-size, 11px);
-                clear: left;
-                @include size(margin-top, 25px);
-                line-height: 1.75em;
-                @include size(margin-left, 15px);
-
-                h2 {
-                    margin: 0;
-                    @include size(font-size, 11px);
-                    @include mono;
-                }
-
-                @include min-screen($S_BOOK_SHORT_FULL) {
-                    float: left;
-                    clear: none;
-                    @include size(width, 145px);
-                    @include size(margin-top, 50px);
-                    @include size(margin-right, 0);
-                    @include size(margin-bottom, 0);
-                    @include size(margin-left, 5px);
-                }
-
-                @include min-screen(1000px) {
-                    @include size(margin-top, 50px);
-                    line-height: 1.2em;
-                }
-            }
-            .other-download {
-                @include min-screen($S_BOOK_SHORT_FULL) {
-                    @include size(margin-left, 15px);
-                    @include size(width, 220px);
-                }
-            }
+        @include min-screen(1000px) {
+          @include size(margin-top, 50px);
+          line-height: 1.2em;
+        }
+      }
+      .other-download {
+        @include min-screen($S_BOOK_SHORT_FULL) {
+          @include size(margin-left, 15px);
+          @include size(width, 220px);
         }
         }
+      }
     }
     }
+  }
 
 
-    .jp-type-playlist {
-        margin-top: 24px;
-        margin-left: 0.625rem;
+  .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: 1024px) {
+      float: right;
+      margin-right: 0.625rem;
     }
     }
+  }
 
 }
 
 @media screen and (min-width: 50em) {
 
 }
 
 @media screen and (min-width: 50em) {
-    .picture.book-wide-box .right-column {
-        float: none;
-        @include size(width, 415px);
-        top: 0;
-        @include size(margin-left, 550px);
-        margin-top: 0em;
-    }
+  .picture.book-wide-box .right-column {
+    float: none;
+    @include size(width, 415px);
+    top: 0;
+    @include size(margin-left, 550px);
+    margin-top: 0em;
+  }
 }
 
 }
 
-
 .book-box-body {
 .book-box-body {
-    @include size(margin-bottom, 10px);
-    position: relative;
+  @include size(margin-bottom, 10px);
+  position: relative;
 
 
-    .book-box-head,
-    .tags,
-    .book-box-tools {
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            margin-left: 154px;
-        }
+  .book-box-head,
+  .tags,
+  .book-box-tools {
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      margin-left: 154px;
     }
     }
+  }
 
 
-    .book-box-head {
-        @include size(padding-top, 14px);
-        @include size(margin-bottom, 10px);
+  .book-box-head {
+    @include size(padding-top, 14px);
+    @include size(margin-bottom, 10px);
 
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(min-height, 70px);
-        }
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      @include size(min-height, 70px);
+    }
 
 
-        a {
-            color: black;
-        }
-        .author {
-            @include size(font-size, 11px);
-            @include mono;
-            @include size(line-height, 13.2px);
-            @include size(max-height, 26.4px);
-            overflow: hidden;
-
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                @include size(max-width, 264px);
-            }
-        }
-        .title {
-            @include size(font-size, 24px);
-            line-height: 1.2em;
-            @include size(margin-top, 7.2px);
-            @include size(margin-bottom, 12px);
-
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                margin-bottom: 0;
-                @include size(height, 57.6px);
-                overflow: hidden;
-            }
-        }
+    a {
+      color: black;
+    }
+    .author {
+      @include size(font-size, 11px);
+      @include mono;
+      @include size(line-height, 13.2px);
+      @include size(max-height, 26.4px);
+      overflow: hidden;
+
+      @include min-screen($S_BOOK_SHORT_FULL) {
+        @include size(max-width, 264px);
+      }
+    }
+    .title {
+      @include size(font-size, 24px);
+      line-height: 1.2em;
+      @include size(margin-top, 7.2px);
+      @include size(margin-bottom, 12px);
+
+      @include min-screen($S_BOOK_SHORT_FULL) {
+        margin-bottom: 0;
+        @include size(height, 57.6px);
+        overflow: hidden;
+      }
     }
     }
+  }
 
 
-    .tags {
-        @include size(font-size, 11px);
-        line-height: 1.2em;
-        margin-bottom: 5px;
+  .tags {
+    @include size(font-size, 11px);
+    line-height: 1.2em;
+    margin-bottom: 5px;
 
 
-        @include min-screen($S_BOOK_SHORT_FULL) {
-            @include size(max-height, 57.6px);
-            overflow: hidden;
-        }
+    @include min-screen($S_BOOK_SHORT_FULL) {
+      @include size(max-height, 57.6px);
+      overflow: hidden;
+    }
 
 
-        .category {
-            display: block;
-            @include size(margin-top, 6px);
-            @include size(margin-bottom, 6px);
+    .category {
+      display: block;
+      @include size(margin-top, 6px);
+      @include size(margin-bottom, 6px);
 
 
-            @include min-screen($S_BOOK_SHORT_FULL) {
-                display: inline;
-            }
+      @include min-screen($S_BOOK_SHORT_FULL) {
+        display: inline;
+      }
 
 
-            .mono {
-                @include mono;
-            }
+      .mono {
+        @include mono;
+      }
 
 
-            .book-box-tag {
-                @include size(margin-left, 4.4px);
-                @include size(margin-right, 5.5px);
-            }
-        }
+      .book-box-tag {
+        @include size(margin-left, 4.4px);
+        @include size(margin-right, 5.5px);
+      }
     }
     }
+  }
 
 }
 
 
 }
 
+.book-box-tools {
+  @include size(font-size, 11px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 
 
+  clear: left;
 
 
-.book-box-tools {
-    @include size(font-size, 11px);
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  @include min-screen($S_BOOK_SHORT_MEDIUM) {
+    clear: none;
+    @include size(margin-left, 139px + 15px);
+  }
 
 
-    clear: left;
+  li {
+    @include mono;
+    margin-top: 0;
+  }
 
 
-    @include min-screen($S_BOOK_SHORT_MEDIUM) {
-        clear: none;
-        @include size(margin-left, 139px + 15px);
+  .book-box-read {
+    a {
+      @include mono;
+      display: inline-block;
+      background: #0D7E85;
+      color: white;
+      @include size(width, 200px);
+      text-align: center;
+      @include size(margin-bottom, 5px);
     }
 
     }
 
-    li {
-        @include mono;
-        margin-top: 0;
+    a:before {
+      content: url("/static/img/read-white.png");
+      @include size(font-size, 25px);
+      @include size(margin-right, 3.71px);
+      vertical-align: middle;
+      font-weight: normal;
     }
     }
+  }
 
 
-    .book-box-read {
-        a {
-            @include mono;
-            display: inline-block;
-            background: #0D7E85;
-            color: white;
-            @include size(width, 200px);
-            text-align: center;
-            @include size(margin-bottom, 5px);
-        }
+  .book-box-download {
+    position: relative;
 
 
-        a:before {
-            content: url("/static/img/read-white.png");
-            @include size(font-size, 25px);
-            @include size(margin-right, 3.71px);
-            vertical-align: middle;
-            font-weight: normal;
-        }
-    }
+    a {
+      @mixin downarrow {
+        color: #0D7E85;
 
 
-    .book-box-download {
-        position: relative;
-
-        a {
-            @mixin downarrow {
-                color: #0D7E85;
-
-                &:before {
-                    content: url("/static/img/download.png");
-                    @include size(font-size, 25px);
-                    @include size(margin-right, 3.71px);
-                    vertical-align: middle;
-                    font-weight: normal;
-                    display: inline;
-                }
-            }
-
-            &.downarrow {
-                @include downarrow;
-            }
+        &:before {
+          content: url("/static/img/download.png");
+          @include size(font-size, 25px);
+          @include size(margin-right, 3.71px);
+          vertical-align: middle;
+          font-weight: normal;
+          display: inline;
         }
         }
+      }
 
 
-        .book-box-formats {
-            display: inline-block;
-            max-width: 220px;
-            vertical-align: top;
-            padding-top: 6px;
-
-                a {
-                    display: inline-block;
-                    @include size(padding, .2em 1em);
-                }
-        }
+      &.downarrow {
+        @include downarrow;
+      }
     }
     }
-}
-
 
 
+    .book-box-formats {
+      display: inline-block;
+      max-width: 220px;
+      vertical-align: top;
+      padding-top: 6px;
 
 
+      a {
+        display: inline-block;
+        @include size(padding, .2em 1em);
+      }
+    }
+  }
+}
 
 .star {
 
 .star {
-    @include size(font-size, 22.5px);
-    @include size(margin-right, 11.25px);
-    position: absolute;
-    right: 0;
+  @include size(font-size, 22.5px);
+  @include size(margin-right, 11.25px);
+  position: absolute;
+  right: 0;
 
 
-    button::-moz-focus-inner {
-        padding: 0;
-        border: 0
-    }
-    .if-unlike button {
-        font-size: 1em;
-        font-family: inherit;
-        border: 0;
-        background: none;
-        margin: 0;
-        padding: 0;
-        color: #757575;
-    }
-    .if-like a {
-        display:block;
-        text-align:right;
-        padding: 0;
-    }
+  button::-moz-focus-inner {
+    padding: 0;
+    border: 0
+  }
+  .if-unlike button {
+    font-size: 1em;
+    font-family: inherit;
+    border: 0;
+    background: none;
+    margin: 0;
+    padding: 0;
+    color: #757575;
+  }
+  .if-like a {
+    display: block;
+    text-align: right;
+    padding: 0;
+  }
 }
 }
+
 .like .if-unlike {
 .like .if-unlike {
-    display: none;
+  display: none;
 }
 }
+
 .unlike .if-like {
 .unlike .if-like {
-    display: none;
+  display: none;
 }
 
 }
 
-
 #book-detail .see-also,
 #picture-detail .see-also {
 #book-detail .see-also,
 #picture-detail .see-also {
-    h1 {
-        @include size(height, 32px);
-        margin: 0;
-        @include size(padding-top, 19px);
-        @include size(padding-left, 10px);
+  h1 {
+    @include size(height, 32px);
+    margin: 0;
+    @include size(padding-top, 19px);
+    @include size(padding-left, 10px);
 
 
-        @include size(font-size, 11px);
-        @include mono;
-        font-weight: normal;
+    @include size(font-size, 11px);
+    @include mono;
+    font-weight: normal;
 
 
-        @media screen and (min-width: 33em) {
-            @include size(padding-left, 19px);
-        }
+    @media screen and (min-width: 33em) {
+      @include size(padding-left, 19px);
     }
     }
+  }
 }
 }