replace the two buttons with toggle input

ontoportal-lirmm · May 3, 2023 · cfb4f45 · cfb4f45
1 parent 3d0bf86
commit cfb4f45
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 24 deletions.
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
@@ -274,22 +274,18 @@ i.fa.fa-caret-square-o-down {
   margin-right: 20px;
   margin-bottom: 0;
 }
-.home-get-recommendations{
+.home-get-service{
   cursor: pointer;
   color: var(--primary-color);
   display: flex;
-  width: fit-content;
-  height: fit-content;
   align-items: center;
-  padding: 15px 20px;
-  border-radius: 8px;
-  border: 1px solid var(--primary-color);
-
-}
-.home-get-recommendations p{
-  margin-right: 20px;
-  margin-bottom: 0;
+  justify-content: center;
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  border: solid var(--primary-color);
 }
+
 .hide{
   display: none;
 }

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
@@ -70,17 +70,14 @@
     .home-card
       %form{action: "/annotator_recommender_form", method: "post"}
         %textarea.home-recommendations-and-annotations{rows: "6" , placeholder: "Paste a paragraph of text or some keywords ...", name: "text"}
-        %input.hide{type: "submit", name: "submit_button" ,value: "annotator", id: "annotator_submit"}/
-        %input.hide{type: "submit" , name: "submit_button" ,value: "recommender", id: "recommender_submit"}/
+        %input.hide{type: "submit", name: "submit_button" ,value: "annotator", id: "annotator_submit"}
+        %input.hide{type: "submit" , name: "submit_button" ,value: "recommender", id: "recommender_submit"}
         .home-services-buttons
-          .home-get-recommendations{onclick: "submitRecommender()"}
-            %p Get recommendations
+          %div{style: 'width: 29%; height: 50px;'}
+            = render ToggleInputComponent.new(first_option: ['annotator-option','annotator', 'Annotatation'], second_option: ['recommender-option','recommender', 'Recommendations'])
+          .home-get-service.ml-1{onclick: "submitService()"}
             %svg{:fill => "none", :height => "16", :viewbox => "0 0 15 16", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
               %path{:d => "M2.61197 15.6472C1.16948 16.4746 0 15.7968 0 14.1344V1.86672C0 0.202676 1.16948 -0.474289 2.61197 0.352365L13.3345 6.50169C14.7775 7.32941 14.7775 8.67046 13.3345 9.49799L2.61197 15.6472Z", :fill => "#31B404"}
-          .home-services-buttons
-            .home-get-annotations{onclick: "submitAnnotator()"}
-              %p Get annotations
-              %img{:src => asset_path("play-white.svg")}/
   .home-section
     .home-section-sub-sections-container
       .home-sub-section-left
@@ -168,9 +165,10 @@
           %img{:src => asset_path("logos/collaboration/inrae.png")}/
 
 :javascript
-  function submitAnnotator(){
-    document.getElementById("annotator_submit").click()
-  }
-  function submitRecommender(){
-    document.getElementById("recommender_submit").click()
+  function submitService(){
+    const firstOption=  document.getElementById("annotator-option")
+    const secondOption =  document.getElementById("recommender-option")
+    let selected = firstOption.checked ? firstOption : secondOption
+
+    document.getElementById(`${selected.name}_submit`).click()
   }