Feature: Update browse page design (#217) (#399)

* Update browse page design with the new design on figma

* Fix the problems in the design of the browse page and make it responsive

* Add the light color variable for differnet themes

* Extract the ontologies section in the browse page to be the src of the turbo frame

* Change the color of the turbo progress bar

* Update the design of the switch component

* Add the checked property to the chips component

* Add the filtering logic of the browse page

* Add the checked filters count in the browse page

* Remove the angular from the browse page

* In browse page, limit the ontology description to 3 lines and add a button show more to see the entire description

* remove duplicate action changed->turbo-frame#updateFrame in the browser

* add text truncate stimulus controller

* replace in the browser descriptions js with a controller to show more

* add timeago stimulus controller to show dates in a human readable way

* add ontology contacts and format to the ontology card

* remove old angular files

* yarn update to install the new JS dependencies

* add ontology browser page and empty state image

* refactor useHistory mixin

This reverts commit 719e456.

* add count slot to the chips components

* add small version of the loader component

* add filters count by ontology

* add the count slots to the chips in the browse page

* use turbo streams to update  ontologies result and the filters  counts

* add ontology browse private icon

* add admin-color theme variable

* add private only  switch to the ontologies browser

* implement the private only ontologies filter

* add title tooltip for the browser filters chips

* update turbo_frame component to use a custom loader

* handle the case where submission publication attribute is not an array

* update infinite scroll component to add custom loader and be generic

* create and use tree infinite scroll component

* create ontology browser card component

* decrease the debounce time of the browser search input

* remove no more used get_metrics_hash function

* move submission filters methods to a concern module

* add back to top button and counter loader to the browse page

* implement and use submissions filter concern

* create browser ontologies partial

* update chips component  to add label attribute

* update tooltip controller to not show if title is empty

* update browse page filters section titles

* use the new chips component 'label' attribute for the browser filters

* fix the wrong browser count when show private only

* migrate the fair score js code to stimulus to make it work with turbo

* put again the accidentally removed ontology_params method

* prevent zombie submission with no ontology) bug in the browse page

* fix browse page layout issues

* fix unable to see full content of the filter collapsible block in the browse page

* move  deprecated and view cards of ontology down instead next to name

* remove default margin left of the pill button component

* add tooltip message to the ontology that is the view of another ontology

* change the layout of the browse page to have the upload button and search in same level

* add admin style classes

* add interactive option for use tooltip controller

* add disabled state to chips component

* show the filter count loader each time changed

* add released  year card to the ontology cards

* add the debug card to the ontologies card if user is admin

---------

Co-authored-by: Bilelkihal <[email protected]>

Gemfile.lock

@@ -130,6 +130,8 @@ GEM
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
+    css_parser (1.16.0)
+      addressable
     cube-ruby (0.0.3)
     daemons (1.4.1)
     dalli (3.2.6)

app/assets/stylesheets/application.css.scss.erb

@@ -50,6 +50,7 @@
 @import "components/index";
 @import "account";
 
+@import "browse";
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";

app/assets/stylesheets/bioportal.scss

@@ -1,13 +1,37 @@
+.turbo-progress-bar {
+  height: 5px;
+  background-color: var(--light-color);
+}
+
 a{
   text-decoration: none !important;
 }
+p {
+  margin-bottom: 0;
+}
+
+body{
+  position: relative;
+}
+
 .alignright {
   float:right;
 }
 .alignleft {
   float:left;
 }
 
+.admin-border{
+  border: 1px solid;
+  border-color: var(--admin-color) !important;
+}
+
+.admin-background{
+  background-color: var(--light-color) !important;
+  border-color: var(--admin-color) !important;
+  color: var(--admin-color) !important;
+}
+
 #hd {
   background: image-url('layout/header_bg.png') repeat-x;
   width: 100%;