issue #2414 update css and tag sort order

index.php

@@ -219,6 +219,12 @@ if ( empty($page['is_external']) )
         );
     }
 
+    //We sort the array here because we want them sorted by counter and not alphabetically like before.
+    usort($related_tags, function($a, $b) {
+      return $b['counter'] <=> $a['counter'];
+    });
+
+
     include_once(PHPWG_ROOT_PATH.'include/selected_tags.inc.php');
 
     $template->assign(

themes/default/css/clear-search.css

@@ -78,7 +78,7 @@
 
 .filter-form {
   background: white;
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.6);
+  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
   color: black;
 }
 

themes/default/css/dark-search.css

@@ -79,7 +79,7 @@
 
 .filter-form {
   background: #333;
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.6);
+  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
   color: #bbb;
 }
 

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

@@ -8,7 +8,8 @@
     <a class="selected-related-tag-remove" href="{$TAG.remove_url}" style="border:none;" title="{'remove this tag from the list'|translate}">
       <i class="gallery-icon-cancel"></i>
     </a>
-  </span>{if !$TAG@last}<span class="related-tag-condition">+</span>{/if}
+  </span>
+{* {if !$TAG@last}<span class="related-tag-condition">+</span>{/if} *}
 {/foreach}
 
 </span>

themes/default/theme.css

@@ -908,6 +908,7 @@ because of this it needs to specifically be added to each theme */
   font-size: 10px;
   background: #777;
 }
+
 .action-buttons{
   display:flex;
   align-items:start;
@@ -964,6 +965,7 @@ span.related-tags .tag-counter{
   border-radius:15px;
   padding:2px 10px;
   padding-right:5px;
+  margin-right:15px;
 }
 
 #selected-tags-container .selected-related-tag a{
@@ -979,10 +981,8 @@ span.related-tags .tag-counter{
 }
 
 .related-tag-condition{
-  background-color:#FAFAFA;
-  border-bottom: 1px solid #D0D2D5;
   border-radius:5px;
-  margin:0 5px 0 15px;
+  margin:2px 5px 0 15px;
   font-weight:900;
   font-size:20px;
   padding:0 5px;
@@ -993,3 +993,9 @@ span.related-tags .tag-counter{
   display:flex;
   align-items: baseline;
 }
+
+@media (max-width: 600px) {
+  #breadcrumb{
+    flex-direction:column;
+  }
+}