From ee93ed8d58d8a4c32832582707286c574cf37dd7 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Wed, 10 Dec 2025 13:49:46 -0600
Subject: Improve layout: Use more of the horizontal space for medium screens.

---
 uploader/static/css/layout-medium.css              |  2 +-
 .../templates/populations/sui-view-population.html |  9 ++--
 uploader/templates/species/sui-view-species.html   | 57 +++++++++++-----------
 uploader/templates/sui-index.html                  | 44 +++++++++++------
 4 files changed, 63 insertions(+), 49 deletions(-)

(limited to 'uploader')

diff --git a/uploader/static/css/layout-medium.css b/uploader/static/css/layout-medium.css
index dcd2dda..2cca711 100644
--- a/uploader/static/css/layout-medium.css
+++ b/uploader/static/css/layout-medium.css
@@ -54,7 +54,7 @@
         grid-gap: 5px;
 
         /* Define layout for the children elements */
-        max-width: 70%;
+        max-width: 100%;
     }
 
     #main #sidebar-content {
diff --git a/uploader/templates/populations/sui-view-population.html b/uploader/templates/populations/sui-view-population.html
index 0f2928e..ebd7ea3 100644
--- a/uploader/templates/populations/sui-view-population.html
+++ b/uploader/templates/populations/sui-view-population.html
@@ -4,10 +4,7 @@
 
 {%block contents%}
 <div class="row">
-  <h2 class="heading">{{step_indicator("3")}} select population action</h2>
-
-  <p>The tabs below present the actions/features available under a population.
-    Do have a look at each to decide your next option.</p>
+  <h2 class="heading">{{population.FullName}} ({{population.Name}})</h2>
 </div>
 
 <div class="row">
@@ -113,6 +110,10 @@
 {%endblock%}
 
 {%block sidebarcontents%}
+<div class="row">
+  <p>Each tab presents a feature that's available at the population level.
+    Select the tab that allows you to continue with your task.</p>
+</div>
 {{display_sui_population_card(species, population)}}
 {%endblock%}
 
diff --git a/uploader/templates/species/sui-view-species.html b/uploader/templates/species/sui-view-species.html
index aa26318..4b6402e 100644
--- a/uploader/templates/species/sui-view-species.html
+++ b/uploader/templates/species/sui-view-species.html
@@ -6,13 +6,30 @@
 
 {%block title%}View Species{%endblock%}
 
+{%macro add_form_buttons()%}
+<div class="row form-buttons">
+  <div class="col">
+    <input type="submit"
+           value="use selected population"
+           class="btn btn-primary" />
+  </div>
+
+  <div class="col">
+    <a href="url_for('species.population.create_population',
+             species_id=species.SpeciesId,
+             return_to='species.view_species')"
+       title="Create a new population for species '{{species.Name}}'."
+       class="btn btn-outline-info">
+      Create a new population
+    </a>
+  </div>
+</div>
+{%endmacro%}
+
 
 {%block contents%}
 <div class="row">
-  <h2>{{step_indicator("2")}} Select Species Action</h2>
-
-  <p>You can manage species' populations and sequencing platforms here. Select
-    the tab for the feature you wish to continue working on.</p>
+  <h2 class="heading">{{species.FullName}} ({{species.Name}})</h2>
 </div>
 
 <div class "row">
@@ -54,12 +71,10 @@
             action="{{url_for('species.view_species', species_id=species.SpeciesId)}}"
             class="form-horizontal">
         {{add_http_feature_flags()}}
-        {%if populations | length != 0%}
-
-        <p class="form-text">Search for, and select the population from the table
-          below.</p>
+        {{add_form_buttons()}}
 
-        <div style="margin-top:3em;">
+        {%if populations | length != 0%}
+        <div style="margin-top:0.3em;">
           <table id="tbl-select-population" class="table compact stripe"
                  data-populations-list='{{populations | tojson}}'>
             <thead>
@@ -79,25 +94,7 @@
           ({{species['SpeciesName']}}).</p>
         {%endif%}
 
-        <div class="row form-buttons">
-          <div class="col">
-            <input type="submit"
-                   value="use selected population"
-                   class="btn btn-primary" />
-          </div>
-
-          <div class="col"><strong>OR</strong></div>
-
-          <div class="col">
-            <a href="url_for('species.population.create_population',
-                     species_id=species.SpeciesId,
-                     return_to='species.view_species')"
-               title="Create a new population for species '{{species.Name}}'."
-               class="btn btn-outline-info">
-              Create a new population
-            </a>
-          </div>
-        </div>
+        {{add_form_buttons()}}
 
       </form>
     </div>
@@ -117,6 +114,10 @@
 {%endblock%}
 
 {%block sidebarcontents%}
+<div class="row">
+  <p>You can manage species' populations and sequencing platforms here. Select
+    the tab for the feature you wish to continue working on.</p>
+</div>
 {{display_sui_species_card(species)}}
 {%endblock%}
 
diff --git a/uploader/templates/sui-index.html b/uploader/templates/sui-index.html
index 260ec30..888823f 100644
--- a/uploader/templates/sui-index.html
+++ b/uploader/templates/sui-index.html
@@ -11,24 +11,41 @@
 
 {%block contents%}
 
+{%macro add_form_buttons()%}
+<div class="row form-buttons">
+      <div class="col">
+        <input type="submit"
+               class="btn btn-primary"
+               value="use selected species" />
+      </div>
+      <div class="col">
+        <a href="{{url_for('species.create_species', return_to='base.index')}}"
+           class="btn btn-outline-primary"
+           title="Create a new species.">Create a new Species</a>
+      </div>
+</div>
+{%endmacro%}
+
 <div class="row">{{flash_all_messages()}}</div>
 
 {%if user_logged_in()%}
 
 <div class="row">
   <div class="row">
-    <h2>{{step_indicator("1")}} Select the Species</h2>
+    <h2 class="heading">Species</h2>
 
-    <p>The data in Genenetwork is related to one species or another. To get
-      started, please select the species you want to work with.</p>
+    <p>Select the species you want to work with.</p>
   </div>
 </div>
 
 <div class="row">
   <form method="GET" action="{{url_for('base.index')}}" class="form-horizontal">
     {{add_http_feature_flags()}}
+
+    {{add_form_buttons()}}
+
     {%if species | length != 0%}
-    <div style="margin-top:3em;">
+    <div style="margin-top:1em;">
       <table id="tbl-select-species" class="table compact stripe"
              data-species-list='{{species | tojson}}'>
         <thead>
@@ -57,18 +74,7 @@
 
     {%endif%}
 
-    <div class="row form-buttons">
-      <div class="col">
-        <input type="submit"
-               class="btn btn-primary"
-               value="continue with selected" />
-      </div>
-      <div class="col"><strong>OR</strong></div>
-      <div class="col">
-        <a href="{{url_for('species.create_species', return_to='base.index')}}"
-           title="Create a new species.">Create a new Species</a>
-      </div>
-    </div>
+    {{add_form_buttons()}}
 
   </form>
 </div>
@@ -92,6 +98,12 @@
 
 
 {%block sidebarcontents%}
+<div class="row">
+  <p>The data in Genenetwork is related to one species or another. Use the form
+    provided to select from existing species, or click on the
+    "Create a New Species" button if you cannot find the species you want to
+    work with.</p>
+</div>
 <div class="row">
   <form id="frm-quick-navigation">
     <legend>Quick Navigation</legend>
-- 
cgit 1.4.1