moved tags to top of content. show viewed one and let choose others

archive.php

@@ -26,6 +26,7 @@ get_header(); ?>
 					<?php echo category_description(); ?>
 				</div>
 			<?php endif; ?>
+			<?php get_template_part( 'template-parts/tag-cloud' ); ?>
 			<div class="bfr_category_archive">
 				<?php if ( have_posts() ) : ?>
 					<?php /* Start the Loop */ ?>

dist/assets/js/app.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/**
+ * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
+ * @version v4.3.1
+ * @link https://github.com/ten1seven/what-input
+ * @license MIT
+ */

functions.php

@@ -58,6 +58,8 @@ require_once( 'library/gutenberg.php' );
 /** Catch post first image */
 require_once( 'library/catch-first-image.php' );
 
+/** Check if a category is subcategory */
+require_once( 'library/check-subcategory.php' );
 
 /** If your site requires protocol relative url's for theme assets, uncomment the line below */
 // require_once( 'library/class-foundationpress-protocol-relative-theme-assets.php' );

header.php

@@ -29,14 +29,5 @@
 			</nav>
 			<nav class="site-top-nav menu small-12 medium-6 large-shrink align-center"><?php foundationpress_top_bar_r(); ?></nav>
 		</content>
-
+		<?php //get_template_part( 'template-parts/tag-cloud' ); ?>
-		    <?php if (is_category('peephole') || is_tag() ) : ?>
-		<aside class="bfr_category_tags">
-			<h6 class="button primary hollow">#tags</h6>
-			<div class="bfr_all_tags bfr_toogled_tags">
-		    <?php wp_tag_cloud( 'unit=rem&smallest=1&largest=1&number=0&orderby=name' ); ?>
-      </div>
-		</aside>
-			  <?php endif; ?>
-
 	</header>

library/check-subcategory.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Check if a category is subcategory
+ *
+ * @package Biofriction
+ * @since Biofriction 1.0.0
+ */
+
+if ( ! function_exists ( 'is_subcategory' ) ) :
+  function is_subcategory (){
+    $cat = get_query_var('cat');
+    $category = get_category($cat);
+    $category->parent;
+    return ( $category->parent == ‘0’ ) ? false : true;
+  }
+endif;

src/assets/scss/components/_tags.scss

@@ -1,16 +1,37 @@
-.bfr_category_tags {
+.bfr_tags{
   font-family: $header-font-family;
+  font-size: $global-font-size * 0.8;
+}
+.bfr_tag_active {
+  background-color: scale-color($secondary-color, $lightness: +70%);
+  &:hover {
+    background-color: $secondary-color;
+    color: $primary-color;
+  }
+  &:before{
+    content:'#';
+  }
+}
+.bfr_category_tags {
+  @include xy-grid();
+  // @include xy-gutters(0);
   position: relative;
-  top:-1rem;
+  // top:-1rem;
-  text-align: center;
   z-index: 100;
+  h6 {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+      margin-bottom: $global-margin;
+    }
+  }
   .tag-cloud-link::before {
-      content: '#';
+    content: '#';
-      // display: inline-block;
   }
   a{
     padding:0;
     margin:0 0.5rem;
+    display:inline-block;
+    margin-bottom: auto;
     &:hover {
       color:$primary-color;
       background-color:$secondary-color;
@@ -19,14 +40,26 @@
   .bfr_toogled_tags{
     display:none;
     position:absolute;
-    padding:3rem;
+    top: $global-padding;
-    border-radius: 2rem;
+    padding:$global-padding;
-    margin-top:-1rem;
+    border-radius: $button-radius/2;
     background-color: rgba(255,255,255,0.95);
   }
-  .button:hover+.bfr_toogled_tags,.bfr_toogled_tags:hover {
+  .bfr_tag_description:hover+.bfr_toogled_tags,.bfr_toogled_tags:hover {
     display:block;
   }
 }
-
+.bfr_post_tags {
-
+  ul {
+    list-style: none;
+    margin-left:0;
+    display: inline-block;
+    li {
+      float:left;
+      margin-right: $global-margin;
+      &:before {
+        content:'#';
+      }
+    }
+  }
+}

src/assets/scss/modules/_header.scss

@@ -17,17 +17,6 @@
         height: 10rem;
         background-image: url('../images/biofriction-logo-moving-trans-loosy-100.gif');
       }
-
-      .bfr_category_tags {
-        // display:flex;
-        // justify-content:center;
-        max-width: calc(66vw - 4rem);
-        margin: 0 auto;
-        a {
-          display:inline-block;
-          margin-bottom: auto;
-        }
-      }
     }
   }
 }

template-parts/content.php

@@ -9,6 +9,7 @@
  */
 
 ?>
+<?php get_template_part( 'template-parts/tag-cloud' ); ?>
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header>

template-parts/tag-cloud.php

@@ -0,0 +1,17 @@
+<?php //display the tag cloud ?>
+<?php //is_subcategory check the functions and library ?>
+<?php if ((is_category('peephole') || is_subcategory('peephole')  || is_tag()) && !is_single() ) { ?>
+<aside class="bfr_tags bfr_category_tags">
+  <h6 class="bfr_tag_description">
+    You are viewing <span class="bfr_tag_active"><?php single_cat_title(); ?></span>. Choose to filter content
+  </h6>
+  <div class="bfr_all_tags bfr_toogled_tags">
+    <?php wp_tag_cloud( 'unit=rem&smallest=0.8&largest=0.8&number=0&orderby=name' ); ?>
+  </div>
+</aside>
+<?php } ?>
+<?php if ( is_single() ) { ?>
+<aside class="bfr_tags bfr_post_tags">
+  <?php the_tags('<ul class=""><li class="bfr_tag_active">', '</li><li class="bfr_tag_active">','</li></ul>'); ?>
+</aside>
+<?php } ?>