Merge pull request #29 from Archaeology-ABM/tuning-module-page

Tuning module page
Archaeology-ABM · Aug 21, 2024 · ca5cde7 · ca5cde7
2 parents 6788978 + e9be7e7
commit ca5cde7
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 45 deletions.
diff --git a/website_generator/.gitignore b/website_generator/.gitignore
@@ -1,8 +1,8 @@
 /website_source/*
 !/website_source/images/
 !/website_source/js/
+!/website_source/css/
 !/website_source/_site.yml
-!/website_source/styles.css
 !/website_source/index.Rmd
 !/website_source/dummy.bib
 

diff --git a/website_generator/website_source/_site.yml b/website_generator/website_source/_site.yml
@@ -5,18 +5,19 @@ navbar:
     - text: "Module list"
       icon: fa-list
       href: index.html
-    - text: "Repository"
-      icon: fa-github
-      href: https://github.com/Archaeology-ABM/NASSA-modules
     - text: "About"
       icon: fa-book
       href: https://archaeology-abm.github.io/NASSA-hub/library
     - text: "NASSA Hub"
       icon: fa-home
       href: https://archaeology-abm.github.io/NASSA-hub
+  right:
+    - text: "Repository"
+      icon: fa-github
+      href: https://github.com/Archaeology-ABM/NASSA-modules
 output:
   html_document:
     theme: spacelab
     highlight: textmate
-    css: styles.css
+    css: css/styles.css
 
diff --git a/website_generator/website_source/styles.css → ...e_generator/website_source/css/styles.css b/website_generator/website_source/styles.css → ...e_generator/website_source/css/styles.css
@@ -1,5 +1,17 @@
-body {
-  background-color: white;
+body .main-container {
+  max-width: 1000px;
+}
+
+#nassa_table_container {
+  width: 90%;
+  float: left;
+  z-index: -10;
+}
+#customsidebar {
+  width: 9%;
+  float: right;
+  z-index: -10;
+  padding: 0px;
 }
 
 table thead th { border-bottom: 1px solid #ddd; }
@@ -91,4 +103,8 @@ thead, tfoot, tr:nth-child(even) { background: #eee; }
 a {
   color: #03989e;
   word-break: break-word;
-} 
+}
+
+button {
+  min-height: 30px;
+}
diff --git a/website_generator/website_source/index.Rmd b/website_generator/website_source/index.Rmd
@@ -16,10 +16,10 @@
 
 <div id="nassa_table_container">
 ```{r, echo=FALSE}
-nassa_table_print <- nassa_table[, c('lastUpdateDate', 'contributors', 'title', 'moduleVersion', 
+nassa_table_print <- nassa_table[, c('title', 'contributors', 'moduleVersion', 'lastUpdateDate', 
                                      'Keywords', 
                                      'View')]
-colDisplayNames <-                 c('Last update', 'Contributors', 'Title', 'Current version', 
+colDisplayNames <-                 c('Title', 'Contributors', 'Version', 'Last update', 
                                      'Keywords', 
                                      '')
 
@@ -31,6 +31,7 @@ options(DT.options = list(
     "$(this.api().table().header()).css({'background-color': '#03989e'});",
     "}"
   ),
+  fixedHeader = list(header = TRUE),
   # Define which columns are not to be used for sorting or searching
   columnDefs = list(
     list(targets = c(grep('moduleVersion', names(nassa_table_print)) - 1, grep('moduleVersion', names(nassa_table_print)) - 1), 
@@ -44,7 +45,7 @@ DT::datatable(nassa_table_print,
               escape = FALSE,
               colnames = colDisplayNames) %>% 
   #DT::formatStyle('id', fontWeight = 'bold', width = '200px') %>% 
-  DT::formatStyle('lastUpdateDate', width = '150px') %>% 
+  DT::formatStyle('lastUpdateDate', width = '100px') %>% 
     DT::formatStyle('moduleVersion', textAlign = 'center', columnWidth = '50px') %>% 
       DT::formatStyle('View', textAlign = 'center', verticalAlign = 'middle', columnWidth = '50px', fontSize = '200%') %>% 
         DT::formatStyle(0, target = 'row', 
@@ -53,36 +54,21 @@ DT::datatable(nassa_table_print,
 ```
 </div>
 
+<div id="customsidebar">
+  <button id="resetFilter">Clear</button>
+  <br>
+  <h4>Keyword types</h4>
+  <p>
+    <span class="badge" id="badgeModuleType">Module type</span>
+    <span class="badge" id="badgeLanguage">Programming language</span>
+    <span class="badge" id="badgeRegions">Regions</span>
+    <span class="badge" id="badgePeriods">Periods</span>
+    <span class="badge" id="badgeSubjects">Subjects</span>
+    <span class="badge" id="badgeModelling">Modelling</span>
+    <span class="badge" id="badgeProgramming">Programming</span>
+  </p>
+</div>
+
 <script src='js/selectKeyword.js'></script>
 
-<table class='legend'>
-  <tr>
-    <td>
-    Keyword colour-coding:
-    </td>
-    <td>
-      <span class="badge" id="badgeModuleType">Module type</span>
-    </td>
-    <td>
-      <span class="badge" id="badgeLanguage">Programming language</span>
-    </td>
-    <td>
-      <span class="badge" id="badgeRegions">Regions</span>
-    </td>
-    <td>
-      <span class="badge" id="badgePeriods">Periods</span>
-    </td>
-    <td>
-      <span class="badge" id="badgeSubjects">Subjects</span>
-    </td>
-    <td>
-      <span class="badge" id="badgeModelling">Modelling</span>
-    </td>
-    <td>
-      <span class="badge" id="badgeProgramming">Programming</span>
-    </td>
-    <td>
-      | <button id="resetFilter" style="margin-left: 20px;">Show All</button>
-    <td>
-  </tr>
-</table>
+
diff --git a/website_generator/website_source/js/selectKeyword.js b/website_generator/website_source/js/selectKeyword.js
@@ -30,7 +30,14 @@ $(document).ready(function() {
         // Check if the search input exists
         if (searchInput) {
           // Set the value to your desired string
-          searchInput.value = keyword;
+          if (searchInput.value.length > 0)
+          {
+            searchInput.value = searchInput.value + ' ' + keyword;
+          }
+          else
+          {
+            searchInput.value = keyword;
+          }
 
           // Apply a custom search to the "Keywords" column
           table.column(keywordColumnIndex).search(function(data, type) {
@@ -48,8 +55,6 @@ $(document).ready(function() {
         } else {
           //console.error('❗ Search input not found within the specified container.');
         }
-
-          searchInput.value = ''
       }
     });