Improve display in mobile

lmrodriguezr · lmrodriguezr · commit 927df8b2ac84 · 2025-04-04T14:44:54.000+02:00
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -29,7 +29,6 @@ $theme-colors: (
 @import "bootstrap";
 @import "font_awesome5_webfont";
 
-
 .card-columns {
   @include media-breakpoint-only(sm) { column-count: 1; }
   @include media-breakpoint-only(md) { column-count: 2; }
@@ -92,5 +91,12 @@ $theme-colors: (
         }
       }
     }
+    .nav-pills .nav-link.active {
+      color: #fff !important;
+    }
+    .jumbotron {
+      padding-top: 1em;
+    }
   }
 }
+
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -173,9 +173,12 @@ nav.navbar-dark {
     font-size: 120%;
     dt {
       margin-top: 1em;
+
       .date {
-        display: inline-block;
-        position: absolute;
+        @include media-breakpoint-up(md) {
+          display: inline-block;
+          position: absolute;
+        }
         right: 1rem;
         color: #00000066;
       }
@@ -291,3 +294,10 @@ nav.navbar {
   }
 }
 
+@include media-breakpoint-down(sm) {
+  .actions-section dd a, .btn-action {
+    display: block !important;
+    margin-top: 1em;
+  }
+}
+
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -310,7 +310,10 @@ def initialize(opts)
   end
 
   def css
-    { cards: { class: 'card-columns' }, table: { class: 'table table-hover' } }[type]
+    {
+      cards: { class: 'card-columns' },
+      table: { class: 'table table-hover table-responsive-md' }
+    }[type]
   end
 
   def tag
diff --git a/app/views/application/_user_actions.html.erb b/app/views/application/_user_actions.html.erb
@@ -1,10 +1,10 @@
 <div class="text-center bg-light rounded-lg border my-5 mx-3 p-5 user-actions">
   <% if user_signed_in? %>
-    <div class="row">
-      <div class="col-md-3 mb-2 text-right">
+    <div class="row text-left">
+      <div class="col-md-3 mb-2 text-md-right">
         <h3>User</h3>
       </div>
-      <div class="col-md-9 mb-2 text-left">
+      <div class="col-md-9 mb-2">
         <%= link_to(dashboard_path, class: 'btn btn-secondary btn-sm') do %>
           <%= fa_icon('tachometer-alt') %> User Dashboard
         <% end %>
@@ -15,11 +15,11 @@
       </div>
     </div>
 
-    <div class="row">
-      <div class="col-md-3 mb-2 text-right">
+    <div class="row text-left">
+      <div class="col-md-3 mb-2 text-md-right">
         <h3>Contributor</h3>
       </div>
-      <div class="col-md-9 mb-2 text-left">
+      <div class="col-md-9 mb-2">
         <% if current_contributor? %>
           <%= link_to('Register a new name',
                       new_name_path, class: 'btn btn-info btn-sm') %>
@@ -47,11 +47,11 @@
     </div>
 
     <% if current_curator? %>
-      <div class="row">
-        <div class="col-md-3 mb-2 text-right">
+      <div class="row text-left">
+        <div class="col-md-3 mb-2 text-md-right">
           <h3>Curator</h3>
         </div>
-        <div class="col-md-9 mb-2 text-left">
+        <div class="col-md-9 mb-2">
           <%= link_to('Names awaiting review',
                       submitted_names_path,
                       class: 'btn btn-primary btn-sm') %>
diff --git a/app/views/correspondences/_correspondence.html.erb b/app/views/correspondences/_correspondence.html.erb
@@ -46,7 +46,7 @@
           <%= f.input(:message, as: :rich_text_area, label: false) %>
           <%= f.input(:notify, as: :boolean, label_html: { class: 'text-dark' },
                 label: 'Notify corresponding users by email') %>
-          <%= f.button(:submit, 'Send message') %>
+          <%= f.button(:submit, 'Send message', class: 'btn-action') %>
           &raquo; The messages will be in the permanent record,
           visible only to submitter and curators
           <hr/>
@@ -57,7 +57,7 @@
                 size: 'lg', async: template_correspondences_url(content: true)
               )
             %>
-            <%= modal_button(id, class: 'btn btn-secondary') do %>
+            <%= modal_button(id, class: 'btn btn-secondary btn-action') do %>
               Load template
             <% end %>
             &raquo; Browse and use pre-formatted template messages
diff --git a/app/views/genomes/_curator.html.erb b/app/views/genomes/_curator.html.erb
@@ -1,5 +1,5 @@
 <% if current_curator? %>
-  <dl name="curator" class="main-section name-details">
+  <dl name="curator" class="main-section name-details actions-section">
     <h2>Curator Actions</h2>
     <dd class="pt-2">
       <%= link_to(
diff --git a/app/views/names/_admin.html.erb b/app/views/names/_admin.html.erb
@@ -1,5 +1,5 @@
 <% if current_admin? && @name.validated? %>
-  <dl name="admin" class="main-section name-details">
+  <dl name="admin" class="main-section name-details actions-section">
     <h2>Admin Actions</h2>
     <dd class="pt-2">
       <% if @name.validated? %>
diff --git a/app/views/names/_contributor.html.erb b/app/views/names/_contributor.html.erb
@@ -1,5 +1,5 @@
 <% if @name.can_edit?(current_user) || @name.can_claim?(current_user) %>
-  <dl name="contributor" class="main-section name-details">
+  <dl name="contributor" class="main-section name-details actions-section">
     <h2>Contributor Actions</h2>
     <dd class="pt-2">
       <% if @name.can_claim?(current_user) && !@name.claimed?(current_user) %>
diff --git a/app/views/names/_curator.html.erb b/app/views/names/_curator.html.erb
@@ -1,5 +1,5 @@
 <% if current_curator? %>
-  <dl name="curator" class="main-section name-details">
+  <dl name="curator" class="main-section name-details actions-section">
     <h2>Curator Actions</h2>
     <dd class="pt-2">
       <% if @name.validated? %>
diff --git a/app/views/names/_etymology_table.html.erb b/app/views/names/_etymology_table.html.erb
@@ -1,6 +1,6 @@
 <% dict_id = modal('Dictionary lookup', size: 'lg') do %>
 <% end %>
-<table class="table table-hover table-responsive-lg my-4"
+<table class="table table-hover table-responsive-md my-4"
        data-behavior="dictionary" data-id="<%= dict_id %>">
   <thead>
     <th>Component</th>
diff --git a/app/views/names/_publications.html.erb b/app/views/names/_publications.html.erb
@@ -5,7 +5,7 @@
     <div class="badge badge-count"><%= @publication_names.count %></div>
   </h2>
   <%= pager @publication_names %>
-  <table class='table table-hover'>
+  <table class='table table-hover table-responsive-md'>
     <thead>
       <tr>
         <th>Citation</th>
diff --git a/app/views/names/unknown_proposal.html.erb b/app/views/names/unknown_proposal.html.erb
@@ -5,7 +5,7 @@
 <hr/>
 
 <%= pager @names %>
-<table class='table table-hover'>
+<table class='table table-hover table-responsive-md'>
   <thead>
     <tr>
       <th>Name</th>
diff --git a/app/views/names/unranked.html.erb b/app/views/names/unranked.html.erb
@@ -5,7 +5,7 @@
 <hr/>
 
 <%= pager @names %>
-<table class='table table-hover'>
+<table class='table table-hover table-responsive-md'>
   <thead>
     <tr>
       <th>Name</th>
diff --git a/app/views/page/help.html.erb b/app/views/page/help.html.erb
@@ -14,7 +14,7 @@
   var sqdown = $('#seqcode-down')
   // Tables
   sqdown.find('table')
-    .addClass('table table-hover mt-3 mb-5 table-responsive-lg');
+    .addClass('table table-hover table-responsive-md mt-3 mb-5');
   sqdown.find('table tr:has(td span.active)').addClass('table-active');
   
   // Out-links
diff --git a/app/views/page/seqcode.html.erb b/app/views/page/seqcode.html.erb
@@ -12,7 +12,7 @@
 <div style="margin-bottom: 50%;"></div>
 
 <script>
-  $('#seqcode-down table').addClass('table table-hover mb-3');
+  $('#seqcode-down table').addClass('table table-hover table-responsive-md mb-3');
   $('#seqcode-down [id]').addClass('text-primary mt-4 link-to-id');
   $('#seqcode-down .link-to-id').prepend(' <a href="#" class="linker">¶</a>');
   $('#seqcode-down .link-to-id .linker').each(function(idx){
diff --git a/app/views/publications/_curator.html.erb b/app/views/publications/_curator.html.erb
@@ -1,5 +1,5 @@
 <% if current_curator? %>
-  <dl name="curator" class="main-section name-details">
+  <dl name="curator" class="main-section name-details actions-section">
     <h2>Curator Actions</h2>
     <dd class="pt-2">
       <%= link_to(
diff --git a/app/views/registers/_contributor.html.erb b/app/views/registers/_contributor.html.erb
@@ -1,5 +1,5 @@
 <% if @register.can_edit?(current_user) %>
-  <dl class="main-section name-details">
+  <dl class="main-section name-details actions-section">
     <h2>Contributor Actions</h2>
     <dd>
       <% unless @register.notified? || @register.validated? %>
diff --git a/app/views/registers/_curator.html.erb b/app/views/registers/_curator.html.erb
@@ -1,5 +1,5 @@
 <% if current_curator? && !@register.draft? %>
-  <dl class="main-section name-details">
+  <dl class="main-section name-details actions-section">
     <h2>Curator Actions</h2>
     <dd>
       <% if @register.validated %>
diff --git a/app/views/registers/_editor.html.erb b/app/views/registers/_editor.html.erb
@@ -1,5 +1,5 @@
 <% if current_editor? && @register.validated? %>
-  <dl class="main-section name-details">
+  <dl class="main-section name-details actions-section">
     <h2>Editor Actions</h2>
     <dd>
       <% if @register.published? %>
diff --git a/app/views/registers/_names.html.erb b/app/views/registers/_names.html.erb
@@ -10,7 +10,7 @@
 <% end %>
 
 <%= pager @names %>
-<table class="table table-hover">
+<table class="table table-hover table-responsive-md">
   <thead>
     <tr>
       <th>Name</th>

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,6 @@ $theme-colors: (`
`29`	`29`	`@import "bootstrap";`
`30`	`30`	`@import "font_awesome5_webfont";`
`31`	`31`
`32`		`-`
`33`	`32`	`.card-columns {`
`34`	`33`	`@include media-breakpoint-only(sm) { column-count: 1; }`
`35`	`34`	`@include media-breakpoint-only(md) { column-count: 2; }`
`@@ -92,5 +91,12 @@ $theme-colors: (`
`92`	`91`	`}`
`93`	`92`	`}`
`94`	`93`	`}`
	`94`	`+ .nav-pills .nav-link.active {`
	`95`	`+ color: #fff !important;`
	`96`	`+ }`
	`97`	`+ .jumbotron {`
	`98`	`+ padding-top: 1em;`
	`99`	`+ }`
`95`	`100`	`}`
`96`	`101`	`}`
	`102`	`+`