issue #2414 remove config and update css

themes/default/template/include/related_tags.inc.tpl

@@ -1,10 +1,6 @@
-<div class="mcs-side-results search-in-set-button" id="related-tags-toggle">
-  <div>
-    <p>{'Related tags'|translate}<i class="gallery-icon-up-open rotated"></i></p>
-  </div>
-</div>
+<h3 class="related-tags-title">{'Related tags'|translate}</h3>
 
-{foreach from=$RELATED_TAGS item=tag}
+{foreach from=$COMBINABLE_TAGS item=tag}
 <span class="related-tags {if isset($RELATED_TAGS_DISPLAY) and $RELATED_TAGS_DISPLAY == false} hide{/if}">{strip}
   <a class="tagLevel {if isset($tag.level)}{$tag.level}{/if}" href=
   {if isset($tag.U_ADD)}
@@ -12,16 +8,5 @@
   {else}
     "{$tag.URL}" title="{'display photos linked to this tag'|@translate}">
   {/if}
-    + {$tag.name}</a><div class="tag-counter">{$tag.counter}</div></span>{/strip}
-{/foreach}
-
-{footer_script require='jquery'}
-
-$(document).ready(function () { 
-  $('#related-tags-toggle').on("click", function (e) { 
-    $('.related-tags').toggle();
-    $('#related-tags-toggle .gallery-icon-up-open').toggleClass('rotated'); 
-  }); 
-});
-
-{/footer_script}
+    + {$tag.name}<div class="tag-counter">{$tag.counter}</div></a></span>{/strip}
+{/foreach}

themes/default/template/index.tpl

@@ -192,8 +192,9 @@
   </div>
 {/if}
 
+{if isset($COMBINABLE_TAGS)}
 {include file='include/related_tags.inc.tpl'}
-
+{/if}
 </div>
 
 {if !empty($CONTENT_DESCRIPTION)}

themes/default/theme.css

@@ -879,7 +879,7 @@ because of this it needs to specifically be added to each theme */
   display: flex;
   align-items: center;
   cursor: pointer;
-  margin-right: 10px;
+  margin-right: 15px;
   color: #ccc;
   width: fit-content;
 }
@@ -908,7 +908,6 @@ because of this it needs to specifically be added to each theme */
   font-size: 10px;
   background: #777;
 }
-
 .action-buttons{
   display:flex;
   align-items:start;
@@ -917,38 +916,34 @@ because of this it needs to specifically be added to each theme */
   padding:0 15px;
 }
 
-#related-tags-toggle i{
-  margin-left:5px;
-}
-
-#related-tags-toggle i::before {
-  transition: transform 0.3s ease;
-}
-
-#related-tags-toggle i.rotated::before {
-  transform: rotate(90deg);
-} 
-
-.related-tags.hide{
-  display:none;
+h3.related-tags-title{
+  margin:4px 0;
+  margin-right:10px;
+  font-weight:400;
 }
 
 span.related-tags{
-  padding:3px 5px;
-  border:1px solid #D6D6D6;
+  padding:4px 12px;
   margin:3px;
   border-radius:15px;
+  background-color:#f5f5f5
 }
 
 span.related-tags a{
   font-weight:700;
   color:#787878;
+  text-decoration:none;
+}
+
+span.related-tags:hover{
+  background-color:#e5e5e5;
 }
 
 span.related-tags .tag-counter{
   display: inline-block;
-  margin-left: 7px;
-  color:#D6D6D6;
+  margin-left:9px;
+  color:#ACACAC;
+  font-weight:700;
 }
 
 #relatedTagsBox.switchBox A {