From f4f8096a5843ac16d8558d4279ee0a86a7ad0ee6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Sko=C5=99epa?= <jakub@skorepa.info>
Date: Thu, 18 Feb 2016 16:05:15 +0100
Subject: [PATCH] Add pagination, modify sidelinks, change icons
to svg
---
sass/style.scss | 44 ++++++-------
templates/partials/header.html.nunjucks | 7 ++-
templates/partials/list.html.nunjucks | 21 +++----
templates/partials/paginator.html.nunjucks | 73 +++++++---------------
templates/partials/svgs.html.nunjucks | 30 +++++++++
5 files changed, 85 insertions(+), 90 deletions(-)
create mode 100644 templates/partials/svgs.html.nunjucks
diff --git a/sass/style.scss b/sass/style.scss
index baac376..b6ba1ac 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -60,11 +60,18 @@ html, body {
top:0px;
position:absolute;
}
-.sidelink-l i {
- transform: rotate(180deg); position: fixed; top: 50wp; left: 10px;
+.sidelink svg {
+ fill: #03A9F4;
}
-.sidelink-r i {
- position: fixed; right: 10px;
+.sidelink div:hover svg {
+ fill: #fff;
+}
+
+.sidelink-l svg {
+ position: fixed; top: 50%; left: 10px;
+}
+.sidelink-r svg {
+ position: fixed; top: 50%; right: 10px;
}
@media #{$medium-only} {
.sidelink {
@@ -73,17 +80,19 @@ html, body {
top:0px;
position:absolute;
}
- .sidelink-r i {
+ .sidelink-r svg {
right:0px;
}
- .sidelink-l i {
+ .sidelink-l svg {
left:0px;
}
}
.sidelink div {
width: 100%;
height: 100%;
- color:white;
+}
+.sidelink div:hover {
+ background-color: $primary-color-light;
}
/* top navigation */
@@ -119,26 +128,11 @@ nav input[type="search"] {
}
/* Bottom nav */
-div.pagination {
- position: relative;
- word-spacing: 0px;
- height: 32px;
- margin: 0 auto;
-}
-div.pagination a {
+.pagination li {
padding: 0px;
- color: black;
-}
-div.pagination div.active {
- background-color: $secondary-color;
- color: white;
- box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
-div.pagination div {
- line-height: 32px;
- text-align: center;
- width: 32px;
- float: left;
+.pagination li a {
+ padding: 0px 10px;
}
/* Side nav */
diff --git a/templates/partials/header.html.nunjucks b/templates/partials/header.html.nunjucks
index d1dab54..9a27af8 100644
--- a/templates/partials/header.html.nunjucks
+++ b/templates/partials/header.html.nunjucks
@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>{% if metadata.title %}{{ metadata.title }}{%else%}Radioklub OK1KVK{%endif%}</title>
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="{{ config.baseurl }}/theme/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="{{ config.baseurl }}/theme/js/jquery-1.12.0.min.js"></script>
@@ -58,7 +57,11 @@
<!-- TODO: rolovat -->
<div class="input-field left">
<input id="search" type="search" required placeholder="VyhledávánĂ">
- <label for="search"><i class="material-icons">search</i></label>
+ <label for="search" style="height: 100%">
+ <svg style="width:2rem;height:2rem; margin-top: -1rem; position: absolute; top: 50%" viewBox="0 0 24 24">
+ <path fill="#fff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+ </svg>
+ </label>
</div>
</div>
diff --git a/templates/partials/list.html.nunjucks b/templates/partials/list.html.nunjucks
index 46d7ea9..0536e53 100644
--- a/templates/partials/list.html.nunjucks
+++ b/templates/partials/list.html.nunjucks
@@ -1,3 +1,5 @@
+{% import "partials/svgs" as svgs %}
+
<div class="section">
<div class="row">
{% for page in content %}
@@ -31,20 +33,19 @@
</div>
{% endfor %}
</div>
- {#
- {% include "paginator" %}
- #}
+
+ {% include "partials/paginator" %}
</div>
<div class="hide-on-small-only">
{% if metadata.prevurl %}
- <div style="left:0px;" class="blue lighten-5 sidelink sidelink-l">
- <a href="{{config.baseurl}}/{{metadata.prevurl}}"><div><i class="material-icons sidelink-icon">forward</i></div></a>
+ <div style="left:0px;" class="sidelink sidelink-l">
+ <a href="{{config.baseurl}}/{{metadata.prevurl}}"><div>{{ svgs.backward(false) }}</div></a>
</div>
{% endif %}
{% if metadata.nexturl %}
- <div style="right:0px" class="blue lighten-5 sidelink sidelink-r">
- <a href="{{config.baseurl}}/{{metadata.nexturl}}"><div><i class="material-icons sidelink-icon">forward</i></div></a>
+ <div style="right:0px" class="sidelink sidelink-r">
+ <a href="{{config.baseurl}}/{{metadata.nexturl}}"><div>{{ svgs.forward(false) }}</div></a>
</div>
{% endif %}
</div>
@@ -64,12 +65,6 @@
$(window).resize(onresize);
$(document).load(onresize);
$(document).ready(onresize);
- $(".sidelink").mouseover(function() {
- $(this).addClass("lighten-3");
- });
- $(".sidelink").mouseout(function() {
- $(this).removeClass("lighten-3");
- });
})(jQuery);
</script>
diff --git a/templates/partials/paginator.html.nunjucks b/templates/partials/paginator.html.nunjucks
index 7b86c62..e2a618f 100644
--- a/templates/partials/paginator.html.nunjucks
+++ b/templates/partials/paginator.html.nunjucks
@@ -1,52 +1,25 @@
-{{ $baseurl := substr .Site.BaseURL 0 -1 }}
-{{ $pag := .Paginator }}
+{% import "partials/svgs" as svgs %}
-{{ if gt $pag.TotalPages 1 }}
-<div class="pagination">
-{{ with $pag.Prev }}
- {{ with $pag.Prev.Prev }}
- {{ with $pag.Prev.Prev.Prev }}
- {{ if eq $pag.Prev.Prev.Prev $pag.First }}
- <a href="{{ $baseurl }}{{ $pag.First.URL }}"><div>{{$pag.First.PageNumber}}</div></a>
- {{ else }}
- <a href="{{ $baseurl }}{{ $pag.First.URL }}"><div>«</div></a>
- <div>...</div>
- {{ end }}
- {{ end }}
- <a href="{{ $baseurl }}{{ $pag.Prev.Prev.URL }}"><div>{{$pag.Prev.Prev.PageNumber}}</div></a>
- {{ end }}
- <a href="{{ $baseurl }}{{ $pag.Prev.URL }}"><div>{{$pag.Prev.PageNumber}}</div></a>
-{{ end }}
-<a href="{{ $baseurl }}{{ $pag.URL }}"><div class="active">{{$pag.PageNumber}}</div></a>
-{{ with $pag.Next }}
- <a href="{{ $baseurl }}{{ $pag.Next.URL }}"><div>{{$pag.Next.PageNumber}}</div></a>
- {{ with $pag.Next.Next }}
- <a href="{{ $baseurl }}{{ $pag.Next.Next.URL }}"><div>{{$pag.Next.Next.PageNumber}}</div></a>
- {{ with $pag.Next.Next.Next }}
- {{ if eq $pag.Next.Next.Next $pag.Last }}
- <a href="{{ $baseurl }}{{ $pag.Last.URL }}"><div>{{$pag.Last.PageNumber}}</div></a>
- {{ else }}
- <div>...</div>
- <a href="{{ $baseurl }}{{ $pag.Last.URL }}"><div>»</div></a>
- {{ end }}
- {{ end }}
- {{ end }}
-{{ end }}
-</div>
-{{ end }}
-
-<script>
-$(document).ready(function() {
- var onresize = function() {
- var width = 10;
- $(".pagination div").each(function() {
- console.log($(this).width());
- width += $(this).outerWidth(true);
- });
- $(".pagination").width(width);
- };
- $(document).resize(onresize);
- onresize();
-});
-</script>
+<ul class="pagination">
+ <li><a {{ (" href=\""+config.baseurl +"/"+ metadata.firstpage.file +"\"") | safe if metadata.firstpage.file != file }}>
+ {{ svgs.doublechevronleft( "#999" if metadata.firstpage.file == file else "#000", 1,"em" ) }}
+ </a></li>
+ <li><a {{ " href="+config.baseurl +"/"+ metadata.prevpage.file if metadata.prevpage != undefined }}>
+ {{ svgs.chevronleft( "#999" if metadata.prevpage == undefined else "#000", 1,"em" ) }}
+ </a></li>
+ {% for page in metadata.thispage | paginationList(4) %}
+ {% if page == metadata.thispage %}
+ <li class="active"><a>{{ page.metadata.pagenumber }}</a></li>
+ {% else %}
+ <li class="waves-effect"><a href="{{ config.baseurl }}/{{ page.file }}">{{ page.metadata.pagenumber }}</a></li>
+ {% endif %}
+ {% endfor %}
+ <li><a {{ " href="+config.baseurl +"/"+ metadata.nextpage.file if metadata.nextpage != undefined }}>
+ {{ svgs.chevronright( "#999" if metadata.nextpage == undefined else "#000", 1,"em" ) }}
+ </a></li>
+
+ <li><a {{ (" href=\""+config.baseurl +"/"+ metadata.lastpage.file +"\"") | safe if metadata.lastpage.file != file }}>
+ {{ svgs.doublechevronright( "#999" if metadata.lastpage.file == file else "#000", 1,"em" ) }}
+ </a></li>
+</ul>
diff --git a/templates/partials/svgs.html.nunjucks b/templates/partials/svgs.html.nunjucks
new file mode 100644
index 0000000..5f4af06
--- /dev/null
+++ b/templates/partials/svgs.html.nunjucks
@@ -0,0 +1,30 @@
+{% macro symbol(color, size, unit, d) %}
+ <svg style="width:{{ size }}{{unit}};height:{{ size }}{{unit}}; display:inline-block" viewBox="0 0 24 24">
+ <path {% if color %}fill="{{ color }}"{% endif %} d="{{ d }}" />
+ </svg>
+{% endmacro %}
+
+{% macro chevronleft(color, size=24, unit="px") %}
+ {{ symbol(color, size, unit, "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z") }}
+{% endmacro %}
+
+{% macro doublechevronleft(color, size=24, unit="px") %}
+ {{ symbol(color, size, unit, "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z") }}
+{% endmacro %}
+
+{% macro chevronright(color, size=24, unit="px") %}
+ {{ symbol(color, size, unit, "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z") }}
+{% endmacro %}
+
+{% macro doublechevronright(color, size=24, unit="px") %}
+ {{ symbol(color, size, unit, "M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z") }}
+{% endmacro %}
+
+{% macro forward(color, size=24, unit="px") %}
+ {{ symbol(color, size, unit, "M12,8V4L20,12L12,20V16H4V8H12Z") }}
+{% endmacro %}
+
+{% macro backward(color, size=24, unit="px") %}
+ {{ symbol(color, size, unit, "m 12,16 0,4 -8,-8 8,-8 0,4 8,0 0,8 -8,0 z") }}
+{% endmacro %}
+
--
GitLab