From 80a18386eecfc9cbd4b8933128383e36fbaefb07 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Thu, 5 May 2022 15:11:02 +0200
Subject: [PATCH] Fix some display issues on smaller screens for the landing
 page

---
 app/templates/main/index.html.j2 | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/templates/main/index.html.j2 b/app/templates/main/index.html.j2
index 6cc285d0..5b450d61 100644
--- a/app/templates/main/index.html.j2
+++ b/app/templates/main/index.html.j2
@@ -73,9 +73,9 @@
         </div>
 
         <div class="col s12">
-          <p class="hide-on-small-only">&nbsp;</p>
           <div class="row">
             <div class="col s12 m6 l3 center-align">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.file_setup_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="file-setup-pipeline"></i>
               </a>
@@ -84,6 +84,7 @@
               <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.tesseract_ocr_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="tesseract-ocr-pipeline"></i>
               </a>
@@ -92,6 +93,16 @@
               <p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
+              <p>&nbsp;</p>
+              <a href="{{ url_for('services.transkribus_htr_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
+                <i class="nopaque-icons service-color darken service-icon" data-service="transkribus-htr-pipeline"></i>
+              </a>
+              <br><br>
+              <p class="service-color-text text-darken" data-service="transkribus-htr-pipeline"><b>Transkribus HTR Pipeline</b></p>
+              <p class="light">nopaque converts your image data – like photos or scans – into text data through HTR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
+            </div>
+            <div class="col s12 m6 l3 center-align">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.spacy_nlp_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="spacy-nlp-pipeline"></i>
               </a>
@@ -100,6 +111,7 @@
               <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.corpus_analysis') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="corpus-analysis"></i>
               </a>