Skip to content

Commit

Permalink
Make the projects listing a table (#1074)
Browse files Browse the repository at this point in the history 
* Making the projects listing a table
This will allow us to apply datatables inthe future
refs #1031

* Reapplied most of the styling to tables

* Added nowrap support for tables

* Updating rails displays for table and css

---------

Co-authored-by: Kate Lynch <[email protected]>
  • Loading branch information
@carolyncole @kelynch
carolyncole and kelynch authored Nov 27, 2024
1 parent 9ad0b9d commit c08ed20
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 114 deletions.
36 changes: 34 additions & 2 deletions app/assets/stylesheets/_dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,58 @@
@import "typography";
@import "bootstrap";

.fixed-table {
width: 100%;
table-layout: fixed;
}

.fixed-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#projects-listing {
table-layout: fixed;
border: 1px solid $gray-20;
border-radius: 3px;

display: flex;
padding: 5px 0px;
align-items: center;
gap: 16px;
color: $gray-60;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
width: 100%;
a {
text-decoration: none !important;
}

.project.heading {
display: none
}

.project {
display: flex;
flex-wrap: wrap;
font-family: $libre-franklin;
border-bottom: 1px solid $gray-20;
background: $white;
padding: 12px;
align-items: center;
gap: 8px;
align-self: stretch;

td:first-child, th:first-child{
width: 100%;
}

h2 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
color: $black;
font-family: $libre-franklin;
font-size: 16px !important;
Expand Down
46 changes: 4 additions & 42 deletions app/views/welcome/_admin_listing.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,55 +3,17 @@
<div class="section">
<h2>Pending Projects</h2>
<% if !@pending_projects.empty? %>
<div id="projects-listing">
<% @pending_projects.each do |project| %>
<a href="<%= project_path(project.id) %>">
<section>
<div class="project <%= "last" if project.equal? @pending_projects.last %>">
<h2><%= project.title %></h2>
<div class="details">
<ul>
<li class="status <%= project.status.downcase %>"><%= project.status %></li>
<li class="project-type"><%= project.type %></li>
<li class="user-role"><%= project.role(current_user) %></li>
<li class="last-download"><%= project.latest_file_list_time %></li>
<li class="last-activity"><%= project.last_activity %></li>
</ul>
</div>
</div>
</section>
</a>
<% end %>
</div>
<%= render partial: "projects_listing", locals: { projects: @pending_projects} %>
<% else %>
<p> (none) </p>
<p> (none) </p>
<% end %>
</div>
<div class="section">
<h2>Recently Approved Projects</h2>
<% if !@approved_projects.empty? %>
<div id="projects-listing">
<% @approved_projects.each do |project| %>
<a href="<%= project_path(project.id) %>">
<section>
<div class="project <%= "last" if project.equal? @approved_projects.last %>">
<h2><%= project.title %></h2>
<div class="details">
<ul>
<li class="status <%= project.status.downcase %>"><%= project.status %></li>
<li class="project-type"><%= project.type %></li>
<li class="user-role"><%= project.role(current_user) %></li>
<li class="last-download"><%= project.latest_file_list_time %></li>
<li class="last-activity"><%= project.last_activity %></li>
</ul>
</div>
</div>
</section>
</a>
<% end %>
</div>
<%= render partial: "projects_listing", locals: { projects: @approved_projects} %>
<% else %>
<p> (none) </p>
<p> (none) </p>
<% end %>
</div>
<% unless current_user.superuser? %>
Expand Down
18 changes: 18 additions & 0 deletions app/views/welcome/_project_list_view.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<tr class="project">
<td>
<a class="click-row" href="<%= project_path(project.id) %>" >
<table class="fixed-table">
<tr>
<td>
<h2><%= project.title %></h2>
</td>
</tr>
</table>
</a>
</td>
<td class="status details <%= project.status.downcase %>"><%= project.status %></td>
<td class="project-type details"><%= project.type %></td>
<td class="user-role details"><%= project.role(current_user) %></td>
<td class="last-download details"><%= project.latest_file_list_time %></td>
<td class="last-activity details"><%= project.last_activity %></td>
</tr>
32 changes: 12 additions & 20 deletions app/views/welcome/_projects_listing.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@

<div id="projects-listing">
<% @dashboard_projects.each do |project| %>
<a href="<%= project_path(project.id) %>">
<section>
<div class="project <%= "last" if project.equal? @dashboard_projects.last %>">
<h2><%= project.title %></h2>
<div class="details">
<ul>
<li class="status <%= project.status.downcase %>"><%= project.status %></li>
<li class="project-type"><%= project.type %></li>
<li class="user-role"><%= project.role(current_user) %></li>
<li class="last-download"><%= project.latest_file_list_time %></li>
<li class="last-activity"><%= project.last_activity %></li>
</ul>
</div>
</div>
</section>
</a>
<% end %>
<div class="table">
<table id="projects-listing">
<tr class="project heading">
<th>title</th>
<th>status</th>
<th>type</td>
<th>role</th>
<th>download</th>
<th>activity</th>
</tr>
<%= render :partial => "project_list_view", :collection => projects, :as => :project %>
</table>
</div>
2 changes: 1 addition & 1 deletion app/views/welcome/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<button id="dash-admin" class="tab-nav"> Administration </button>
</div>
<% if @dashtab == "project"%>
<%= render partial: "projects_listing" %>
<%= render partial: "projects_listing", locals: { projects: @dashboard_projects} %>
<% elsif @dashtab == "activity" %>
<%= render partial: "recent_activity" %>
<% elsif @dashtab == "admin" %>
Expand Down
134 changes: 85 additions & 49 deletions app/views/welcome/styles_preview.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,53 +30,89 @@
<div class="status-info">Status Info</div>
</div>
<h2>Projects Listing Preview</h2>
<div id="projects-listing">
<div class="project">
<h2>Exploration of the parameter space of quasisymmetric stellarator vacuum fields through adjoint optimisation</h2>
<div class="details">
<ul>
<li class="status active">Active</li>
<li class="project-type">Standard</li>
<li class="user-role">Data User</li>
<li class="last-download">Prepared 1 day ago</li>
<li class="last-activity">24 minutes ago</li>
</ul>
</div>
</div>
<div class="project">
<h2>Data and code for 'Hydrological cycle amplification reshapes warming-driven oxygen loss in Atlantic Ocean'</h2>
<div class="details">
<ul>
<li class="status approved">Approved</li>
<li class="project-type">Provisional</li>
<li class="user-role">Data Sponsor</li>
<li class="last-download">Prepared 21 days ago</li>
<li class="last-activity">13 hours ago</li>
</ul>
</div>
</div>
<div class="project">
<h2>Derrida's Margins datasets</h2>
<div class="details">
<ul>
<li class="status pending">Pending</li>
<li class="project-type">Requested Standard</li>
<li class="user-role">Data Sponsor, Data Manager, Data User</li>
<li class="last-download">Never requested</li>
<li class="last-activity">2 days ago</li>
</ul>
</div>
</div>
<div class="project last">
<h2>Supporting GFDL data for Southern Ocean Freshwater release model experiments Initiative (SOFIA) and Supporting data for Baldwin et al 2019 "Temporally Compound Heat Waves and Global Warming: An Emerging Hazard"</h2>
<div class="details">
<ul>
<li class="status rejected">Rejected</li>
<li class="project-type">Provisional</li>
<li class="user-role">Data Sponsor, Data Manager</li>
<li class="last-download">Prepared 7 days ago</li>
<li class="last-activity">2 days ago</li>
</ul>
</div>
</div>
<div class="table">
<table id="projects-listing">
<tr class="project heading">
<th>title</th>
<th>status</th>
<th>type</td>
<th>role</th>
<th>download</th>
<th>activity</th>
</tr>
<tr class="project">
<td>
<table class="fixed-table">
<tr>
<td>
<a href="#">
<h2>Exploration of the parameter space of quasisymmetric stellarator vacuum fields through adjoint optimisation</h2>
</a>
</td>
</tr>
</table>
</td>
<div class="details">
<td class="status active">Active</td>
<td class="project-type">Standard</td>
<td class="user-role">Data User</td>
<td class="last-download">Prepared 1 day ago</td>
<td class="last-activity">24 minutes ago</td>
</div>
</tr>
<tr class="project">
<td>
<table class="fixed-table">
<tr>
<td>
<a href="#">
<h2>Data and code for 'Hydrological cycle amplification reshapes warming-driven oxygen loss in Atlantic Ocean'</h2>
</a>
</td>
</tr>
</table>
</td>
<td class="status approved details">Approved</td>
<td class="project-type details">Provisional</td>
<td class="user-role details">Data Sponsor</td>
<td class="last-download details">Prepared 21 days ago</td>
<td class="last-activity details">13 hours ago</td>
</tr>
<tr class="project">
<td>
<table class="fixed-table">
<tr>
<td>
<a href="#">
<h2>Derrida's Margins datasets</h2>
</a>
</td>
</tr>
</table>
</td>
<td class="status pending details">Pending</td>
<td class="project-type details">Requested Standard</td>
<td class="user-role details">Data Sponsor, Data Manager, Data User</td>
<td class="last-download details">Never requested</td>
<td class="last-activity details">2 days ago</td>
</tr>
<tr class="project last">
<td>
<table class="fixed-table">
<tr>
<td>
<a href="#">
<h2>Supporting GFDL data for Southern Ocean Freshwater release model experiments Initiative (SOFIA) and Supporting data for Baldwin et al 2019 "Temporally Compound Heat Waves and Global Warming: An Emerging Hazard"</h2>
</a>
</td>
</tr>
</table>
</td>
<td class="status details rejected">Rejected</td>
<td class="project-type details">Provisional</td>
<td class="user-role details">Data Sponsor, Data Manager</td>
<td class="last-download details">Prepared 7 days ago</td>
<td class="last-activity details">2 days ago</td>
</tr>
</table>
</div>

0 comments on commit c08ed20

Please sign in to comment.