From c7a9e4c678b5d71b71767513304a201588052a5c Mon Sep 17 00:00:00 2001 From: cain-ish Date: Wed, 10 Feb 2016 12:13:53 +0100 Subject: [PATCH] pager-center css fix --- .../templates/catalogue/plain_list.html | 2 +- src/wolnelektury/static/scss/main/base.scss | 255 ++++++++++-------- 2 files changed, 151 insertions(+), 106 deletions(-) diff --git a/src/catalogue/templates/catalogue/plain_list.html b/src/catalogue/templates/catalogue/plain_list.html index b958e845b..3d46368dc 100644 --- a/src/catalogue/templates/catalogue/plain_list.html +++ b/src/catalogue/templates/catalogue/plain_list.html @@ -15,7 +15,7 @@ {% if initial_blocks %}{% endif %} {% endfor %} -
+
diff --git a/src/wolnelektury/static/scss/main/base.scss b/src/wolnelektury/static/scss/main/base.scss index 210fd44c2..3d1097f81 100755 --- a/src/wolnelektury/static/scss/main/base.scss +++ b/src/wolnelektury/static/scss/main/base.scss @@ -1,168 +1,213 @@ /* Basic layout */ html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } - .clearboth { - clear: both; + clear: both; } - - /* Basic colors and fonts */ body { - font-family: Georgia; - background: #f7f7f7; - color: black; + font-family: Georgia; + background: #f7f7f7; + color: black; - @include size(font-size, 13px); + @include size(font-size, 13px); } a { - color: #0d7e85; - text-decoration: none; + color: #0d7e85; + text-decoration: none; - img { - border: 0; - } + img { + border: 0; + } } h1 { - @include size(font-size, 35px); - font-weight: normal; - @include size(margin-top, 14px); + @include size(font-size, 35px); + font-weight: normal; + @include size(margin-top, 14px); - a { - color: inherit; - } + a { + color: inherit; + } } h2 { - @include size(font-size, 20px); - font-weight: normal; + @include size(font-size, 20px); + font-weight: normal; } h3 { - @include size(font-size, 15px); - font-weight: normal; + @include size(font-size, 15px); + font-weight: normal; } - .normal-text { - line-height: 1.3em; - @include size(margin, 0 5px); + line-height: 1.3em; + @include size(margin, 0 5px); - @media screen and (min-width: 62.5em) { - margin: 0; - } + @media screen and (min-width: 62.5em) { + margin: 0; + } } .white-box { - @include size(padding, 10px); - @include white-box; + @include size(padding, 10px); + @include white-box; } - ul.plain { - list-style:none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } - .theme-list-link { - @include mono; - @include size(font-size, 11px); + @include mono; + @include size(font-size, 11px); - &:after { - @include size(padding-left, 11px); - content: url("/static/img/arrow-teal.png"); - vertical-align: middle; - } + &:after { + @include size(padding-left, 11px); + content: url("/static/img/arrow-teal.png"); + vertical-align: middle; + } } - .left-column, .right-column { - @include size(max-width, 600px); + @include size(max-width, 600px); } + @media screen and (min-width: 62.5em) { - .left-column { - @include size(width, 470px); - float: left; - } - .right-column { - @include size(width, 470px); - float:right; - } + .left-column { + @include size(width, 470px); + float: left; + } + .right-column { + @include size(width, 470px); + float: right; + } } .pagination { - display: block; - @include size(font-size, 12px); - @include size(padding, 6px); - text-align:center; + display: block; + @include size(font-size, 12px); + @include size(padding, 6px); + text-align: center; } .simple-hidden-initially { - display: none; + display: none; } - .plain-list-container { - margin: 2em 0; - .plain-list { - column-count: 2; - -moz-column-count: 2; - -webkit-column-count: 2; - - @media screen and (min-width: 768px) { - column-count: 4; - -moz-column-count: 4; - -webkit-column-count: 4; - } - @media screen and (min-width: 1024px) { - column-count: 5; - -moz-column-count: 5; - -webkit-column-count: 5; - } + margin: 2em 0; + .plain-list { + column-count: 2; + -moz-column-count: 2; + -webkit-column-count: 2; - p { - margin-top: 0; + @media screen and (min-width: 768px) { + column-count: 4; + -moz-column-count: 4; + -webkit-column-count: 4; + } + @media screen and (min-width: 1024px) { + column-count: 5; + -moz-column-count: 5; + -webkit-column-count: 5; + } - &.header { - -webkit-column-break-after: avoid; - break-after: avoid; - } - } + p { + margin-top: 0; - .initial-block { - display: inline-block; - } + &.header { + -webkit-column-break-after: avoid; + break-after: avoid; + } } - .pager { - font-size: 18px; - margin-top: .5em; - text-align: center; - - .current { - font-weight: bold; - color: black; + .initial-block { + display: inline-block; + } + } + + .pager-center { + //width: 100%; + text-align: center; + } + + .pager { + display: inline-block; + padding-left: 0; + margin: 20px 0; + border-radius: 4px; + > li { + display: inline; + + > a, > span { + position: relative; + float: left; + padding: 6px 12px; + margin-left: -1px; + line-height: 1.42857143; + color: #337ab7; + text-decoration: none; + background-color: #fff; + border: 1px solid #ddd; + &:hover, &:focus { + color: #23527c; + background-color: #eee; + border-color: #ddd; + } + } + &:first-child > a, + &:first-child > span { + margin-left: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + &:last-child > a, + &:last-child > span { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + } + .active { + > a, span { + &, &:hover, &:focus { + z-index: 2; + color: #fff; + cursor: default; + background-color: #337ab7; + border-color: #337ab7; + } + } + } + .disabled { + > a, span { + &, &:hover, &:focus { + color: #777; + cursor: not-allowed; + background-color: #fff; + border-color: #ddd; } + } } + } } - .tag-box { - display: block; - - @media screen and (min-width: 768px) { - display: inline-block; - vertical-align: top; - width: 48%; - margin-right: 1%; - @include size(margin-bottom, 10px); - } + display: block; + + @media screen and (min-width: 768px) { + display: inline-block; + vertical-align: top; + width: 48%; + margin-right: 1%; + @include size(margin-bottom, 10px); + } } -- 2.20.1