Updates next and previous page design.

src/assets/scss/_pagination.scss

@@ -5,6 +5,7 @@
     color: #898d8f;
     padding: 0 1rem;
     margin-top: 5rem;
+    
     .pagination{
         .nav-links {
             a:nth-last-child(1){

src/assets/scss/_post.scss

@@ -805,6 +805,7 @@
                     }
                     .item-card-link--sharing{
                         margin-right: 0.5rem;
+                        margin-top: 0.25rem;
                         img {
                             padding: 0;
                             max-width: 100%;
@@ -917,18 +918,56 @@
         }
     }
 }
-#item-single-navigation {
+#header-meta_pagination {
-    flex-wrap: wrap;
+    font-size: 0.875rem;
 
     .pagination {
+        padding: 0 6px;
+        &:last-child {
+            padding: 0;
+        }
+        a span {
+            display: none;
+        }
+        a:hover {
+            text-decoration: none;
+        }
+    }
+}
+#item-single-navigation {
+    flex-wrap: nowrap;
+    flex-grow: 2;
+
+    .pagination {
+        flex-basis: 50%;
         flex-wrap: nowrap;
         align-items: center;
+        margin-top: 0.25rem;
         margin-bottom: 0.25rem;
+        padding: 0 12px;
 
+        &:first-child {
+            justify-content: flex-end;
+            a {
+                justify-content: flex-end;
+            }
+        }
+        &:last-child {
+            justify-content: flex-start;
+            a {
+                justify-content: flex-start;
+            }
+        }
         &:not(:last-child):not(:first-child) {
             margin-right: 0.1rem;
             margin-left: 0.1rem;
         }
+        span {
+            max-width: 50%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
     }
     a {
         position: relative;
@@ -937,6 +976,7 @@
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
+        width: 100%;
     }
     a:hover {
         text-decoration: none;

src/functions/breadcrumb.php

@@ -137,6 +137,31 @@ function tainacan_interface_the_breadcrumb() {
 			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
 		}
 
+		if (get_theme_mod('tainacan_single_item_show_navigation_options', false)) {
+
+			$adjacent_links = tainacan_get_adjacent_item_links();
+			$previous = $adjacent_links['previous'];
+			$next = $adjacent_links['next'];
+
+			if ($previous !== '' || $next !== '') {
+			?>
+				<div 
+						id="header-meta_pagination"
+						style="height: 1.125rem;" class="ml-auto d-flex align-items-center">
+					<div class="pagination">
+						<a href="<?php echo tainacan_get_source_item_list_url(); ?>"><i class="tainacan-icon tainacan-icon-viewtable tainacan-icon-1-25em"></i></a>
+					</div>
+					<div class="pagination">
+						<?php echo $previous; ?>
+					</div>
+					<div class="pagination">
+						<?php echo $next; ?>
+					</div>
+				</div>
+			<?php
+			}
+		}
+
 		echo '</nav>';
 
 	}

src/functions/customizer.php

@@ -529,11 +529,11 @@ function tainacan_customize_register( $wp_customize ) {
 			'type' 	   	  => 'checkbox',
 			'priority' 	  => 2, // Within the section.
 			'section'  	  => 'tainacan_single_item_page',
-			'label'    	  => __( 'Show the item navigation options in the page header', 'tainacan-interface' ),
+			'label'    	  => __( 'Show the item navigation options in the breadcrumb section', 'tainacan-interface' ),
-			'description' => __( 'Toggle to display tow arros and a list icon for navigating directly from the item page header.', 'tainacan-interface' )
+			'description' => __( 'Toggle to display two and a list icon for navigating directly from the item page breadcrumb section.', 'tainacan-interface' )
 			) );
 		$wp_customize->selective_refresh->add_partial( 'tainacan_single_show_hide_navigation_options', array(
-			'selector' => '.tainacan-single-post #header-meta_pagination',
+			'selector' => '#header-meta_pagination',
 			'render_callback' => '__return_false',
 			'fallback_refresh' => true
 			) );

src/template-parts/single-items-header.php

@@ -187,21 +187,6 @@ $next = $adjacent_links['next'];
                         echo '</span>';
                     }
                 ?>
-                <?php if (get_theme_mod('tainacan_single_item_show_navigation_options', false)) : ?>
-                    <div 
-                            id="header-meta_pagination"
-                            style="height: 1.125rem;" class="ml-auto d-flex justify-content-between">
-                        <div class="pagination">
-                            <?php echo $previous; ?>
-                        </div>
-                        <div class="pagination">
-                            <a href="<?php echo tainacan_get_source_item_list_url(); ?>"><i class="tainacan-icon tainacan-icon-viewtable tainacan-icon-30px"></i></a>
-                        </div>
-                        <div class="pagination">
-                            <?php echo $next; ?>
-                        </div>
-                    </div>
-                <?php endif; ?>
             </div>
         </header>
     </div>

src/template-parts/single-items-navigation.php

@@ -28,23 +28,29 @@
 ?>
 <?php if ($previous !== '' || $next !== '') : ?>
     <div class="tainacan-single-post">
-        <?php if ( get_theme_mod('tainacan_single_item_navigation_section_label', __( 'Continue browsing', 'tainacan-interface' )) != '') : ?>
+        <div class="d-flex flex-wrap justify-content-between align-items-center">
-            <h2 class="title-content-items" id="single-item-navigation-label">
+
-                <?php echo get_theme_mod('tainacan_single_item_navigation_section_label', __('Continue browsing', 'tainacan-interface')); ?>
+            <?php if ( get_theme_mod('tainacan_single_item_navigation_section_label', __( 'Continue browsing', 'tainacan-interface' )) != '') : ?>
-            </h2>
+                <h2 class="mb-0 title-content-items" id="single-item-navigation-label">
-        <?php endif; ?>
+                    <?php echo get_theme_mod('tainacan_single_item_navigation_section_label', __('Continue browsing', 'tainacan-interface')); ?>
-        <div id="item-single-navigation" class="d-flex justify-content-between margin-two-column">
+                </h2>
-            <div class="pagination">
+            <?php endif; ?>
-                <?php echo $previous; ?>
+
+            <div id="item-single-navigation" class="d-flex align-items-center justify-center margin-one-column">
+                <div class="pagination">
+                    <?php echo $previous; ?>
+                </div>
+                <div class="pagination">
+                    <?php echo $next; ?>
+                </div>
             </div>
-            <div class="pagination">
+
+            <div style="margin: 0 4.1666667%"  class="pagination">
                 <a class="d-inline-flex align-items-center" href="<?php echo tainacan_get_source_item_list_url(); ?>">
-                <i class="tainacan-icon tainacan-icon-viewtable tainacan-icon-1-25em"></i>&nbsp;<span><?php echo __('Back to the items list', 'tainacan') ?></span>
+                    <i class="tainacan-icon tainacan-icon-viewtable tainacan-icon-1-25em"></i>&nbsp;&nbsp;<span><?php echo __('Back to items list', 'tainacan') ?></span>
                 </a>  
             </div>
-            <div class="pagination">
+
-                <?php echo $next; ?>
-            </div>
         </div>
     </div>
 <?php endif; ?>