diff options
| -rw-r--r-- | source/_article.html.erb | 11 | ||||
| -rw-r--r-- | source/aktuelles/blog.html.erb | 20 | ||||
| -rw-r--r-- | source/layouts/layout.erb | 8 | ||||
| -rw-r--r-- | source/stylesheets/_blog.scss | 17 | ||||
| -rw-r--r-- | source/stylesheets/_variables.scss | 38 | ||||
| -rw-r--r-- | source/stylesheets/base.css.scss | 6 |
6 files changed, 85 insertions, 15 deletions
diff --git a/source/_article.html.erb b/source/_article.html.erb index 4420bd9..bc462f8 100644 --- a/source/_article.html.erb +++ b/source/_article.html.erb @@ -1,4 +1,7 @@ -<div> - <h3><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></h3> - <%= article.body %> -</div> +<article> + <aside class="blog-date"><%= article.date.strftime('%e %b %Y') %></aside> + <div class="blog-inner"> + <h3 class="blog-article-heading"><%= link_to article.title, article %></h3> + <%= article.body %> + </div> +</article> diff --git a/source/aktuelles/blog.html.erb b/source/aktuelles/blog.html.erb index 3045c41..18666b9 100644 --- a/source/aktuelles/blog.html.erb +++ b/source/aktuelles/blog.html.erb @@ -4,17 +4,21 @@ per_page: 10 section: "aktuelles" --- <% if paginate && num_pages > 1 %> - <p>Seite <%= page_number %> von <%= num_pages %></p> - <% if prev_page %> - <p><%= link_to 'Vorherige Seite', prev_page %></p> - <% end %> + <ul class="pager"> + <li class="previous <%= prev_page ? "" : "disabled" %>"><%= link_to 'Vorherige Seite', prev_page %></li> + <li class="next <%= next_page ? "" : "disabled" %>"><%= link_to 'Nächste Seite', next_page %></li> + </ul> + <% end %> <%= partial "article", collection: page_articles %> -<% if paginate %> - <% if next_page %> - <p><%= link_to 'Nächste Seite', next_page %></p> - <% end %> +<% if paginate && num_pages > 1 %> + + <ul class="pager"> + <li class="previous <%= prev_page ? "" : "disabled" %>"><%= link_to 'Vorherige Seite', prev_page %></li> + <li class="next <%= next_page ? "" : "disabled" %>"><%= link_to 'Nächste Seite', next_page %></li> + </ul> + <% end %> diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index b2835f2..8c4fea3 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -35,9 +35,11 @@ </nav> <!-- content --> - <section id="main"> - <%= yield %> - </section> + <div id="content"> + <section id="main"> + <%= yield %> + </section> + </div> </body> </html> diff --git a/source/stylesheets/_blog.scss b/source/stylesheets/_blog.scss new file mode 100644 index 0000000..13db407 --- /dev/null +++ b/source/stylesheets/_blog.scss @@ -0,0 +1,17 @@ +article { + @extend .container-fluid; + margin-bottom: 30px; +} + +aside.blog-date { + @extend .col-md-2; +} + +div.blog-inner { + @extend .col-md-8; +} + +h3.blog-article-heading { + margin-top: 0px; +} + diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss index c254708..4374425 100644 --- a/source/stylesheets/_variables.scss +++ b/source/stylesheets/_variables.scss @@ -139,3 +139,41 @@ $panel-warning-heading-bg: $state-warning-bg; $panel-danger-text: $state-danger-text; $panel-danger-border: $state-danger-border; $panel-danger-heading-bg: $state-danger-bg; + + +//== Pagination +// +//## + +$pagination-color: #fff; +$pagination-bg: $gray-darker; +$pagination-border: $gray-dark; + +$pagination-hover-color: #fff; +$pagination-hover-bg: $component-active-bg; +$pagination-hover-border: transparent; + +$pagination-active-color: #fff; +$pagination-active-bg: $brand-primary; +$pagination-active-border: transparent; + +$pagination-disabled-color: $gray-light; +$pagination-disabled-bg: $gray-darker; +$pagination-disabled-border: $gray-dark; + + +//== Pager +// +//## + +$pager-bg: $pagination-bg; +$pager-border: $pagination-border; +$pager-border-radius: 15px; + +$pager-hover-bg: $pagination-hover-bg; + +$pager-active-bg: $pagination-active-bg; +$pager-active-color: $pagination-active-color; + +$pager-disabled-color: $gray-light; + diff --git a/source/stylesheets/base.css.scss b/source/stylesheets/base.css.scss index 4f954be..6125efa 100644 --- a/source/stylesheets/base.css.scss +++ b/source/stylesheets/base.css.scss @@ -9,6 +9,10 @@ header { @extend .row; } +#content { + @extend .row; +} + #main { @extend .col-sm-8; @extend .col-sm-offset-2; @@ -35,3 +39,5 @@ nav ul { .navbar-collapse { @extend .col-sm-offset-2; } + +@import "blog"; |