add ontology browser page and empty state image

ontoportal-lirmm · Apr 19, 2023 · 025c5fe · 025c5fe
1 parent 28a0396
commit 025c5fe
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 64 deletions.
diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss
@@ -366,6 +366,19 @@
 }
 
 
+.browse-empty-illustration{
+    margin-top: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.browse-empty-illustration p{
+    font-size: 16px;
+    color: #B8B8B8;
+    font-weight: 500;
+    margin-top: 10px;
+}
 
 
 

diff --git a/app/views/ontologies/_ontologies.html.haml b/app/views/ontologies/_ontologies.html.haml
@@ -2,71 +2,77 @@
   %p.browse-desc-text{:style => "margin-bottom: 15px;"}
     = "Showing "+ @ontologies.length.to_s
   -# Here we put our turbo frame "ontologies_frame"
-  - @ontologies.each do |ontology|
-    .browse-ontology-container
-      .browse-ontology-description
-        .browse-ontology-title-bar
-          %a.browse-ontology-title{:href => "/ontologies/#{ontology[:acronym]}", data: {'turbo-frame': '_top'}}
-            = ontology[:name]+" ("+ontology[:acronym]+")"
-          - if ontology[:deprecated]
-            .browse-ontology-deprecated
-              deprecated
-          - if ontology[:viewOfOnt]
-            .browse-ontology-view
-              view
-        .browse-desc-container{data:{controller:"text-truncate", 'text-truncate-more-text-value': '+ Show more ...' , 'text-truncate-less-text-value': '- Show less ...'}}
-          %p.browse-desc-text{'data-text-truncate-target': 'content'}
-            = ontology[:description]
-          .browse-show-more-button{data:{'text-truncate-target': 'button', 'action':"click->text-truncate#toggle"}}
-            + Show more ...
+  %div
+    - @ontologies.each do |ontology|
+      .browse-ontology-container
+        .browse-ontology-description
+          .browse-ontology-title-bar
+            %a.browse-ontology-title{:href => "/ontologies/#{ontology[:acronym]}", data: {'turbo-frame': '_top'}}
+              = ontology[:name]+" ("+ontology[:acronym]+")"
+            - if ontology[:deprecated]
+              .browse-ontology-deprecated
+                deprecated
+            - if ontology[:viewOfOnt]
+              .browse-ontology-view
+                view
+          .browse-desc-container{data:{controller:"text-truncate", 'text-truncate-more-text-value': '+ Show more ...' , 'text-truncate-less-text-value': '- Show less ...'}}
+            %p.browse-desc-text{'data-text-truncate-target': 'content'}
+              = ontology[:description]
+            .browse-show-more-button{data:{'text-truncate-target': 'button', 'action':"click->text-truncate#toggle"}}
+              + Show more ...
 
-
-        - unless ontology[:fairScore].nil? || ontology[:acronym] == 'AGROVOC'
-          .browse-fair
-            %p.browse-fair-title
-              FAIR score
-            .browse-progress-bar
-              .browse-faire-progress{:style => "width: #{ontology[:normalizedFairScore].to_s+"%"}"}
-            %p.browse-fair-score
-              = ontology[:fairScore]
-            %a.browse-fair-details{:href => "/ontologies/#{ontology[:acronym]}#fair-details"} FAIR details ...
-        .d-flex.align-items-baseline
-          - if ontology[:creationDate]
-            .browse-uploaded
-              %p.mr-1 Uploaded
-              %p.browse-uploaded-date{data:{controller: 'timeago', 'timeago-datetime-value': ontology[:creationDate], 'timeago-add-suffix-value': 'true'}}
-              - if ontology[:contact]
-                %p.mx-1 by
-                %p.browse-uploaded-date.text-truncate
-                  = ontology[:contact].humanize
 
+          - unless ontology[:fairScore].nil? || ontology[:acronym] == 'AGROVOC'
+            .browse-fair
+              %p.browse-fair-title
+                FAIR score
+              .browse-progress-bar
+                .browse-faire-progress{:style => "width: #{ontology[:normalizedFairScore].to_s+"%"}"}
+              %p.browse-fair-score
+                = ontology[:fairScore]
+              %a.browse-fair-details{:href => "/ontologies/#{ontology[:acronym]}#fair-details"} FAIR details ...
+          .d-flex.align-items-baseline
+            - if ontology[:creationDate]
+              .browse-uploaded
+                %p.mr-1 Uploaded
+                %p.browse-uploaded-date{data:{controller: 'timeago', 'timeago-datetime-value': ontology[:creationDate], 'timeago-add-suffix-value': 'true'}}
+                - if ontology[:contact]
+                  %p.mx-1 by
+                  %p.browse-uploaded-date.text-truncate
+                    = ontology[:contact].humanize
 
-          - if ontology[:format]
-            .browse-ontology-view
-              = ontology[:format]
 
-      .browse-ontology-cards
-        - if ontology[:format] != 'SKOS' && ontology[:class_count] > 0
-          %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}?p=classes"}
-            %p.browse-card-number
-              = ontology[:class_count_formatted]
-            %p.browse-card-text
-              classes
-        - if ontology[:individual_count] > 0
-          %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}?p=classes"}
-            %p.browse-card-number
-              = ontology[:individual_count_formatted]
-            %p.browse-card-text
-              = ontology[:format] == 'SKOS' ? "concepts" : "instances"
-        - if ontology[:project_count] > 0
-          %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}#projects_content"}
-            %p.browse-card-number
-              = ontology[:project_count]
-            %p.browse-card-text
-              projects
-        - if ontology[:note_count] > 0
-          %a.browse-onology-card{:href => "#"}
-            %p.browse-card-number
-              = ontology[:note_count]
-            %p.browse-card-text
-              notes
+            - if ontology[:format]
+              .browse-ontology-view
+                = ontology[:format]
+
+        .browse-ontology-cards
+          - if ontology[:format] != 'SKOS' && ontology[:class_count] > 0
+            %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}?p=classes"}
+              %p.browse-card-number
+                = ontology[:class_count_formatted]
+              %p.browse-card-text
+                classes
+          - if ontology[:individual_count] > 0
+            %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}?p=classes"}
+              %p.browse-card-number
+                = ontology[:individual_count_formatted]
+              %p.browse-card-text
+                = ontology[:format] == 'SKOS' ? "concepts" : "instances"
+          - if ontology[:project_count] > 0
+            %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}#projects_content"}
+              %p.browse-card-number
+                = ontology[:project_count]
+              %p.browse-card-text
+                projects
+          - if ontology[:note_count] > 0
+            %a.browse-onology-card{:href => "#"}
+              %p.browse-card-number
+                = ontology[:note_count]
+              %p.browse-card-text
+              notes
+
+    %div.empty-state
+      .browse-empty-illustration
+        %img{:src => "#{asset_path("empty-box.svg")}"}
+        %p No result was found