page go-to

Author: RCmags

_includes/paginator-buttons.html

@@ -8,11 +8,6 @@
 		<span class="button_null"> &#9664; </span>	
 	{% endif %}	
 
-  	<!-- pages -->
-	<span class="page_number">
-		<p>{{ paginator.page }}/{{ paginator.total_pages }}</p>
-	</span>
-	
 	<!-- Next button -->	
 	{% if paginator.next_page %}
 		<a class="button_link" href="{{ paginator.next_page_path }}">
@@ -22,3 +17,7 @@
 		<span class="button_null"> &#9654; </span>
 	{% endif %}	
 </div>
+
+<!-- Pages -->
+{% include paginator-goto.html %}
+

_includes/paginator-goto.html

@@ -0,0 +1,18 @@
+{% assign npages = paginator.total_pages %}
+
+{% if npages > 1 %}
+<div class="paginator-goto">
+<details>
+	<summary>
+		<span class="label">{{ paginator.page }}/{{ paginator.total_pages }}</span>
+	</summary>
+	<!-- list -->
+	<div class="grid-container">
+		<a class="grid-item" href="{{ site.baseurl }}/">1</a>
+		{% for index in (2..npages) %}
+			<a class="grid-item" href="{{ site.baseurl }}/page{{ index }}">{{index}}</a>
+		{% endfor %}
+	</nav>
+</details>
+</div>
+{% endif %}

_sass/pagination.scss

@@ -101,6 +101,7 @@
   align-items:center;
 
   .box {
+  	margin: 0px 25px;
   	padding: 6px;  	
   	height: 20px;
   	line-height: 20px;
@@ -116,6 +117,7 @@
   	@extend .box;
   	font-size: 24px;
   	border-radius: 5px;
+  	z-index: 1;
   }
 
   .button_link:hover {
@@ -131,23 +133,55 @@
 
   .page_number {
   	@extend .box;
-  	border-left: none;
-  	border-right: none;
   	color: gray;
   }
 }
 
-// Other options
-.pagination_options {
+// Go to page
+.paginator-goto {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
-	padding-top: 10px;
 
-	h3 {
-		text-align: center; 
-		color: $grey-color-dark;
-		margin-left: 10px;
-		margin-right: 10px;
+	summary::-webkit-details-marker {
+  		display:none;
+	}
+	summary {
+		text-align: center;
+		font-size: 16px;
+		color: gray;
+		transform: TRANSLATEY(-26px);
+	}
+	summary:hover, details[open] {
+		.label {
+			color: white;
+			background: $brand-color;
+		}
+	}
+	summary:focus {
+		outline: none;
+	}
+	
+	.label {
+		padding: 5px 10px;
+		border-radius: 10px;
+	}
+		
+	.grid-container {
+  		display: grid;
+  		grid-template-columns: repeat(6, 1fr);
+  		grid-gap: 10px;
+  		transform: TRANSLATEY(-10px);
+	}
+	.grid-item {
+  		font-size: 18px;
+  		text-align: center;
+  		padding: 0px 10px;
+  		border: 1px solid LightGray;
+  		border-radius: 8px;
+	}
+	.grid-item:hover {
+		text-decoration: none;
+		box-shadow: 0px 0px 2px 1px LightGray;	
 	}
 }