Skip to content
Snippets Groups Projects
Commit f4f8096a authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Add pagination, modify sidelinks, change icons 

to svg
parent 72ea03ee
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
sass/style.scss
+ 19
− 25
View file @ f4f8096a
...@@ -60,11 +60,18 @@ html, body { ...@@ -60,11 +60,18 @@ html, body {
top:0px; top:0px;
position:absolute; position:absolute;
} }
.sidelink-l i { .sidelink svg {
transform: rotate(180deg); position: fixed; top: 50wp; left: 10px; fill: #03A9F4;
} }
.sidelink-r i { .sidelink div:hover svg {
position: fixed; right: 10px; fill: #fff;
}
.sidelink-l svg {
position: fixed; top: 50%; left: 10px;
}
.sidelink-r svg {
position: fixed; top: 50%; right: 10px;
} }
@media #{$medium-only} { @media #{$medium-only} {
.sidelink { .sidelink {
...@@ -73,17 +80,19 @@ html, body { ...@@ -73,17 +80,19 @@ html, body {
top:0px; top:0px;
position:absolute; position:absolute;
} }
.sidelink-r i { .sidelink-r svg {
right:0px; right:0px;
} }
.sidelink-l i { .sidelink-l svg {
left:0px; left:0px;
} }
} }
.sidelink div { .sidelink div {
width: 100%; width: 100%;
height: 100%; height: 100%;
color:white; }
.sidelink div:hover {
background-color: $primary-color-light;
} }
/* top navigation */ /* top navigation */
...@@ -119,26 +128,11 @@ nav input[type="search"] { ...@@ -119,26 +128,11 @@ nav input[type="search"] {
} }
/* Bottom nav */ /* Bottom nav */
div.pagination { .pagination li {
position: relative;
word-spacing: 0px;
height: 32px;
margin: 0 auto;
}
div.pagination a {
padding: 0px; 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 { .pagination li a {
line-height: 32px; padding: 0px 10px;
text-align: center;
width: 32px;
float: left;
} }
/* Side nav */ /* Side nav */
......
templates/partials/header.html.nunjucks
+ 5
− 2
View file @ f4f8096a
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> <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> <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"/> <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> <script src="{{ config.baseurl }}/theme/js/jquery-1.12.0.min.js"></script>
...@@ -58,7 +57,11 @@ ...@@ -58,7 +57,11 @@
<!-- TODO: rolovat --> <!-- TODO: rolovat -->
<div class="input-field left"> <div class="input-field left">
<input id="search" type="search" required placeholder="Vyhledávání"> <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>
</div> </div>
......
templates/partials/list.html.nunjucks
+ 8
− 13
View file @ f4f8096a
{% import "partials/svgs" as svgs %}
<div class="section"> <div class="section">
<div class="row"> <div class="row">
{% for page in content %} {% for page in content %}
...@@ -31,20 +33,19 @@ ...@@ -31,20 +33,19 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{#
{% include "paginator" %} {% include "partials/paginator" %}
#}
</div> </div>
<div class="hide-on-small-only"> <div class="hide-on-small-only">
{% if metadata.prevurl %} {% if metadata.prevurl %}
<div style="left:0px;" class="blue lighten-5 sidelink sidelink-l"> <div style="left:0px;" class="sidelink sidelink-l">
<a href="{{config.baseurl}}/{{metadata.prevurl}}"><div><i class="material-icons sidelink-icon">forward</i></div></a> <a href="{{config.baseurl}}/{{metadata.prevurl}}"><div>{{ svgs.backward(false) }}</div></a>
</div> </div>
{% endif %} {% endif %}
{% if metadata.nexturl %} {% if metadata.nexturl %}
<div style="right:0px" class="blue lighten-5 sidelink sidelink-r"> <div style="right:0px" class="sidelink sidelink-r">
<a href="{{config.baseurl}}/{{metadata.nexturl}}"><div><i class="material-icons sidelink-icon">forward</i></div></a> <a href="{{config.baseurl}}/{{metadata.nexturl}}"><div>{{ svgs.forward(false) }}</div></a>
</div> </div>
{% endif %} {% endif %}
</div> </div>
...@@ -64,12 +65,6 @@ ...@@ -64,12 +65,6 @@
$(window).resize(onresize); $(window).resize(onresize);
$(document).load(onresize); $(document).load(onresize);
$(document).ready(onresize); $(document).ready(onresize);
$(".sidelink").mouseover(function() {
$(this).addClass("lighten-3");
});
$(".sidelink").mouseout(function() {
$(this).removeClass("lighten-3");
});
})(jQuery); })(jQuery);
</script> </script>
templates/partials/paginator.html.nunjucks
+ 23
− 50
View file @ f4f8096a
{{ $baseurl := substr .Site.BaseURL 0 -1 }} {% import "partials/svgs" as svgs %}
{{ $pag := .Paginator }}
{{ if gt $pag.TotalPages 1 }} <ul class="pagination">
<div class="pagination"> <li><a {{ (" href=\""+config.baseurl +"/"+ metadata.firstpage.file +"\"") | safe if metadata.firstpage.file != file }}>
{{ with $pag.Prev }} {{ svgs.doublechevronleft( "#999" if metadata.firstpage.file == file else "#000", 1,"em" ) }}
{{ with $pag.Prev.Prev }} </a></li>
{{ with $pag.Prev.Prev.Prev }} <li><a {{ " href="+config.baseurl +"/"+ metadata.prevpage.file if metadata.prevpage != undefined }}>
{{ if eq $pag.Prev.Prev.Prev $pag.First }} {{ svgs.chevronleft( "#999" if metadata.prevpage == undefined else "#000", 1,"em" ) }}
<a href="{{ $baseurl }}{{ $pag.First.URL }}"><div>{{$pag.First.PageNumber}}</div></a> </a></li>
{{ else }} {% for page in metadata.thispage | paginationList(4) %}
<a href="{{ $baseurl }}{{ $pag.First.URL }}"><div>&laquo;</div></a> {% if page == metadata.thispage %}
<div>...</div> <li class="active"><a>{{ page.metadata.pagenumber }}</a></li>
{{ end }} {% else %}
{{ end }} <li class="waves-effect"><a href="{{ config.baseurl }}/{{ page.file }}">{{ page.metadata.pagenumber }}</a></li>
<a href="{{ $baseurl }}{{ $pag.Prev.Prev.URL }}"><div>{{$pag.Prev.Prev.PageNumber}}</div></a> {% endif %}
{{ end }} {% endfor %}
<a href="{{ $baseurl }}{{ $pag.Prev.URL }}"><div>{{$pag.Prev.PageNumber}}</div></a> <li><a {{ " href="+config.baseurl +"/"+ metadata.nextpage.file if metadata.nextpage != undefined }}>
{{ end }} {{ svgs.chevronright( "#999" if metadata.nextpage == undefined else "#000", 1,"em" ) }}
<a href="{{ $baseurl }}{{ $pag.URL }}"><div class="active">{{$pag.PageNumber}}</div></a> </a></li>
{{ with $pag.Next }}
<a href="{{ $baseurl }}{{ $pag.Next.URL }}"><div>{{$pag.Next.PageNumber}}</div></a> <li><a {{ (" href=\""+config.baseurl +"/"+ metadata.lastpage.file +"\"") | safe if metadata.lastpage.file != file }}>
{{ with $pag.Next.Next }} {{ svgs.doublechevronright( "#999" if metadata.lastpage.file == file else "#000", 1,"em" ) }}
<a href="{{ $baseurl }}{{ $pag.Next.Next.URL }}"><div>{{$pag.Next.Next.PageNumber}}</div></a> </a></li>
{{ with $pag.Next.Next.Next }} </ul>
{{ 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>&raquo;</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>
templates/partials/svgs.html.nunjucks 0 → 100644
+ 30
− 0
View file @ f4f8096a
{% 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 %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment