From a2655a398713719934be9ca64f18143c1428daec Mon Sep 17 00:00:00 2001
From: Osma Suominen <osma.suominen@helsinki.fi>
Date: Wed, 9 Oct 2024 15:42:33 +0300
Subject: [PATCH 1/2] reimplement vocab home twig template using Bootstrap Grid
 instead of tables

---
 resource/css/skosmos.css       | 17 +------
 src/view/concept-card.inc.twig |  4 +-
 src/view/vocab-info.inc.twig   | 90 ++++++++++++++++------------------
 3 files changed, 46 insertions(+), 65 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index ad14fd90c..00463e2f8 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -677,7 +677,7 @@ body {
   }
 
   /*****  Main content vocabpage & termpage *****/
-  #main-content h2 {
+  #main-content h1 {
     font-size: 2.5rem;
   }
 
@@ -704,6 +704,7 @@ body {
     font-weight: bold;
     font-size: 20px !important;
     margin-bottom: 0;
+    display: inline;
   }
 
   .property-value {
@@ -946,21 +947,7 @@ body {
     border: none !important;
   }
 
-  tr > td {
-    color: var(--dark-color);
-  }
-  tr > td > div > a {
-    color: var(--secondary-dark-color);
-    text-decoration: none !important;
-    font-weight: 700 !important;
-  }
   .vocab-statistics > h3 {
     font-size: 20px !important;
   }
-  td.align-middle {
-    font-size: 16px;
-  }
-  table.vocab-info-literals > tbody > tr {
-    border-top: 1px solid var(--medium-color);
-  }
 
diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig
index 392f8e8be..4275539cd 100644
--- a/src/view/concept-card.inc.twig
+++ b/src/view/concept-card.inc.twig
@@ -1,5 +1,4 @@
-<div class="col-md-8 ps-3">
-  <div class="pt-3" id="main-content">
+<div class="col-md-8" id="main-content">
 
     <div class="main-content-section px-5 py-4">
 
@@ -150,5 +149,4 @@
     <div id="concept-mappings">
     </div>
 
-  </div>
 </div>
diff --git a/src/view/vocab-info.inc.twig b/src/view/vocab-info.inc.twig
index ff61dfd99..cf7f771c5 100644
--- a/src/view/vocab-info.inc.twig
+++ b/src/view/vocab-info.inc.twig
@@ -1,79 +1,75 @@
-<div class="col-md-8" id="main-content"> <!-- id for partial page load -->
-  <div class="main-content-section py-5 px-5" id="vocab-info">
-    <h2 class="fw-bold fs-3 py-4">{{ "Vocabulary information" | trans }}</h2>
+<div class="col-md-8" id="main-content">
+  <div class="main-content-section px-5 py-4">
+    <h1 class="pt-3 pb-5">{{ "Vocabulary information" | trans }}</h1>
+
     {% set vocabInfo = vocab.info(request.contentLang) %}
     {% if not vocabInfo %}
     <div class="alert alert-danger" role="alert">
         {{ "Error: Failed to retrieve vocabulary information!" | trans }}
     </div>
     {% else %}
-    <table class="vocab-info-literals">
-      <tbody class="table">
-        {% for key, values in vocabInfo %}
-        {% set keytrans = key %}
-        <tr>
-          <td class="main-table-label fw-bold">{{ keytrans | trans }}</td>
-          <td class="align-middle">
-            {% for val in values %}
-            <div class="property-value-wrapper">
-              {% if val.get('skosmos:vocab') %}
-              <a href="{{ val.uri | link_url(val.get('skosmos:vocab').value,request.lang,'page',request.contentLang) }}">{{ val.get('skosmos:label') }}</a>
-              {% elseif val.label %}
-              <a href="{{ val.uri }}">
-                {% if val.label(request.contentLang) %}{{ val.label(request.contentLang) }}
-                {% else %}{{ val.label }}
-                {% endif %}
-              </a>
-              {% elseif val matches '|^(https?://)|' %}<a href="{{ val }}">{{ val }}</a>
-              {% elseif val matches '|<\\w*\\b[^>]*>|' %}{{ val|raw|nl2br }}
-              {% else %}{{ val|nl2br }}
+
+    {% for key, values in vocabInfo %}
+    <div class="row property g-0">
+      <div class="col-sm-4 px-0 property-label"><h2>{{ key | trans }}</h2></div>
+      <div class="col-sm-8 align-self-center property-value">
+        <ul class="align-bottom">
+          {% for val in values %}
+          <li>
+            {% if val.get('skosmos:vocab') %}
+            <a href="{{ val.uri | link_url(val.get('skosmos:vocab').value,request.lang,'page',request.contentLang) }}">{{ val.get('skosmos:label') }}</a>
+            {% elseif val.label %}
+            <a href="{{ val.uri }}">
+              {% if val.label(request.contentLang) %}{{ val.label(request.contentLang) }}
+              {% else %}{{ val.label }}
               {% endif %}
-            </div>
-            {% endfor %}
-          </td>
-        </tr>
-        {% endfor %}
-        <tr>
-          <td class="main-table-label fw-bold">URI</td>
-          <td class="align-middle">
-            <div class="property-value-wrapper">
-              <span class="uri-input-box">{{ vocab.defaultConceptScheme }}</span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            </a>
+            {% elseif val matches '|^(https?://)|' %}<a href="{{ val }}">{{ val }}</a>
+            {% elseif val matches '|<\\w*\\b[^>]*>|' %}{{ val|raw|nl2br }}
+            {% else %}{{ val|nl2br }}
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+    {% endfor %}
+
     {% endif %}
+
     {% if vocab.config.showStatistics %}
     <div class="vocab-statistics">
       <div id="resource-counts"></div>
       <div id="term-counts"></div>
     </div>
     {% endif %}
+
     {% if vocab.config.dataURLs %}
-    {% apply spaceless %}
-    <div class="download-links">
-      <span class="versal">{{ "Download this vocabulary:" | trans }}</span>
+    <div class="row g-0 py-3">
+      <div class="col-sm-12 px-0 property-label" id="download-links">
+        <h2><i class="fa-solid fa-download"></i> {{ "Download this vocabulary:" | trans }}</h2>
+        <ul class="d-inline">
         {% if 'application/rdf+xml' in vocab.config.dataURLs|keys %}
-          <a href="rest/v1/{{ request.vocabid }}/data?format=application/rdf%2Bxml">RDF/XML</a>
+          <li><a class="me-3" href="rest/v1/{{ request.vocabid }}/data?format=application/rdf%2Bxml">RDF/XML</a></li>
         {% endif %}
         {% if 'text/turtle' in vocab.config.dataURLs|keys %}
-          <a href="rest/v1/{{ request.vocabid }}/data?format=text/turtle">TURTLE</a>
+          <li><a class="me-3" href="rest/v1/{{ request.vocabid }}/data?format=text/turtle">TURTLE</a></li>
         {% endif %}
         {% if 'application/ld+json' in vocab.config.dataURLs|keys %}
-          <a href="rest/v1/{{ request.vocabid }}/data?format=application%2Fld%2Bjson">JSON-LD</a>
+          <li><a class="me-3" href="rest/v1/{{ request.vocabid }}/data?format=application%2Fld%2Bjson">JSON-LD</a></li>
         {% endif %}
         {% if 'application/marcxml+xml' in vocab.config.dataURLs|keys %}
             {% if vocab.config.dataURLs['application/marcxml+xml'] is iterable %}
                 {% for key, values in vocab.config.dataURLs['application/marcxml+xml'] %}
-                    <a href="rest/v1/{{ request.vocabid }}/data?format=application/marcxml%2Bxml&lang={{key}}">MARCXML/{{ key | lang_name(request.lang) }}</a>
+                    <li><a class="me-3" href="rest/v1/{{ request.vocabid }}/data?format=application/marcxml%2Bxml&lang={{key}}">MARCXML/{{ key | lang_name(request.lang) }}</a></li>
                 {% endfor %}
             {% else %}
-                <a href="rest/v1/{{ request.vocabid }}/data?format=application/marcxml%2Bxml">MARCXML</a>
+                <li><a href="rest/v1/{{ request.vocabid }}/data?format=application/marcxml%2Bxml">MARCXML</a></li>
             {% endif %}
         {% endif %}
+        </ul>
+      </div>
     </div>
-    {% endapply %}
     {% endif %}
   </div>
   <!-- appendix / concept mapping properties -->

From 70ef363d5e8aa54cf6cd594df8715329c8805700 Mon Sep 17 00:00:00 2001
From: Osma Suominen <osma.suominen@helsinki.fi>
Date: Thu, 10 Oct 2024 13:06:34 +0300
Subject: [PATCH 2/2] fix cypress test that broke due to HTML changes

---
 tests/cypress/template/landing.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/cypress/template/landing.cy.js b/tests/cypress/template/landing.cy.js
index 598bcc7ed..c430add73 100644
--- a/tests/cypress/template/landing.cy.js
+++ b/tests/cypress/template/landing.cy.js
@@ -46,6 +46,6 @@ describe('Landing page', () => {
     // check that we are still within the Skosmos URL space
     cy.url().should('include', Cypress.config().baseUrl)
     // check that we are on the vocab home page
-    cy.get('#vocab-info')
+    cy.get('.vocabpage')
   })
 })