Position textual/semantic search UIs as equals with tabs (#455)

UUDigitalHumanitieslab · May 31, 2021 · 081eed3 · 081eed3
1 parent 295a152
commit 081eed3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/frontend/src/semantic-search/semantic-search-template.hbs b/frontend/src/semantic-search/semantic-search-template.hbs
@@ -1,4 +1,3 @@
-<h4 class="title is-4">{{#i18n 'semsearch-title'}}Semantic search{{/i18n}}</h4>
 <h6 class="subtitle is-6">{{#i18n 'semsearch-subtitle'}}Find linked data items based on semantic features{{/i18n}}</h6>
 <div class="field">
     <div class="control">

diff --git a/frontend/src/style/_bulma-custom.sass b/frontend/src/style/_bulma-custom.sass
@@ -32,7 +32,7 @@
 @import "bulma/sass/components/navbar"
 @import "bulma/sass/components/pagination"
 // @import "bulma/sass/components/panel"
-// @import "bulma/sass/components/tabs"
+@import "bulma/sass/components/tabs"
 
 @import "bulma/sass/grid/columns"
 // @import "bulma/sass/grid/tiles"

diff --git a/frontend/src/style/welcome.sass b/frontend/src/style/welcome.sass
@@ -3,7 +3,6 @@
     margin: 6% auto
     .notfound img
         max-height: 40vh
-
-.welcome .searchbox
-    margin: 30px auto
-    width: 85%
+    .searchbox, .rit-semantic-search, .tabs
+        margin: 30px auto
+        width: 85%
diff --git a/frontend/src/welcome/welcome-template.hbs b/frontend/src/welcome/welcome-template.hbs
@@ -1,5 +1,23 @@
 <div class="welcome">
     <div class="welcome-image">
-        <figure class='image'><img src="{{static 'image/Read-IT-logo-bg.svg'}}" alt="Read-It"></figure>
+        <figure class='image'>
+            <img src="{{static 'image/Read-IT-logo-bg.svg'}}" alt="Read-It">
+        </figure>
+        <div class="tabs">
+            <ul>
+                <li data-tab=searchboxView><a>
+                    <span class="icon is-small">
+                        <i class="fas fa-quote-right" aria-hidden=true></i>
+                    </span>
+                    <span>{{#i18n 'search-tab-text'}}Textual search{{/i18n}}</span>
+                </a></li>
+                <li data-tab=semSearchView><a>
+                    <span class="icon is-small">
+                        <i class="fas fa-code-branch" aria-hidden=true></i>
+                    </span>
+                    <span>{{#i18n 'search-tab-semantic'}}Semantic search{{/i18n}}</span>
+                </a></li>
+            </ul>
+        </div>
     </div>
 </div>