Skip to content

Commit

Permalink
Implementing user interface updates for the Project Dashboard filter …
Browse files Browse the repository at this point in the history 
…feature set
  • Loading branch information
@jrgriffiniii
jrgriffiniii committed Dec 11, 2024
1 parent dec6115 commit d3eabc5
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 84 deletions.
153 changes: 88 additions & 65 deletions app/assets/stylesheets/_dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,73 +37,96 @@
}

#projects-listing, #projects-listing-pending, #projects-listing-approved {
table-layout: fixed;
border: 1px solid $gray-20;
border-radius: 3px;
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;

table-layout: fixed;
border: 1px solid $gray-20;
border-radius: 3px;
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%;

.projects {

&-caption {
caption-side: top;
}

&-tabs {
align-content: center;
}

&-filter {
text-align: center;

&-btn {
height: 100%;
}
}

thead .project th, tbody .project td {
}

a {
text-decoration: none !important;
}

thead .project th, tbody .project td {
border: 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 {
width: 100%;
}

td: {
border: 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 {
width: 100%;
}

td: {
border: none;
}

h2 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
color: $black;
font-family: $libre-franklin;
font-size: 16px !important;
font-style: normal;
font-weight: 600;
line-height: 24px;
text-decoration: none;
}
.details {
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;
li {
float: left;
list-style: none;
padding: 0em .2em 0em 2em;
}
}

h2 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
color: $black;
font-family: $libre-franklin;
font-size: 16px !important;
font-style: normal;
font-weight: 600;
line-height: 24px;
text-decoration: none;
}

.details {
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;

li {
float: left;
list-style: none;
padding: 0em .2em 0em 2em;
}
}

.last {
Expand Down Expand Up @@ -181,11 +204,11 @@
height: 20px;
vertical-align: top;
}

}
}

#admin-listing {
.section {
margin-top: 2em;
}
}
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/_projects.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
padding-left: 20px;
color: $red-darker;
}

#project-description {
color: $black;
font-family: "Libre Franklin";
Expand Down
4 changes: 3 additions & 1 deletion app/javascript/entrypoints/pulDataTables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ export function setupTable(tableId) {

// If we have a table initialize it with DataTables
if (table) {
table.dataTable(datasetOptions);
if (table.dataTable) {
table.dataTable(datasetOptions);
}
}
}

Expand Down
86 changes: 69 additions & 17 deletions app/views/welcome/_projects_listing.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,70 @@
<div class="table">
<table id="<%= table_id %>" >
<thead>
<tr class="project heading">
<th>title</th>
<th>status</th>
<th>type</td>
<th>role</th>
<th>download</th>
<th>activity</th>
<th>quota_usage</th>
</tr>
</thead>
<tbody>
<%= render :partial => "project_list_view", :collection => projects, :as => :project %>
</tbody>
</table>
</div>
<table id="<%= table_id %>">
<caption class="projects-caption">

<div class="container-fluid">
<div class="row">

<div class="col-12 col-lg-3 projects-tabs">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<%= root_path %>">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<%= root_path %>">Pending</a>
</li>
</ul>
</div>

<div class="col-12 col-lg-9 projects-filter">
<form class="container-fluid" role="search">
<div class="row">
<div class="col-12 col-lg-9 my-2">

<div class="input-group">
<div class="form-floating">
<input type="text" class="form-control" id="filter-input-text" placeholder="Search by project titles, roles, project types">
<label for="filter-input-text">Search by project titles, roles, project types</label>
</div>
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
</span>
</div>
</div>

<div class="col-12 col-lg-2 my-2">
<button class="btn btn-primary projects-filter-btn" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5"/></svg>
Sort</button>
</div>

<div class="col-12 col-lg-1 my-2 ">
<div class="container-fluid" style="height:100%; align-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</caption>
<thead>
<tr class="project heading">
<th>title</th>
<th>status</th>
<th>type</td>
<th>role</th>
<th>download</th>
<th>activity</th>
<th>quota_usage</th>
</tr>
</thead>
<tbody>
<%= render :partial => "project_list_view", :collection => projects, :as => :project %>
</tbody>
</table>
</div>

0 comments on commit d3eabc5

Please sign in to comment.