* add css styles for pending invitations display

rdmorganiser · Apr 5, 2024 · c7e7af0 · c7e7af0
1 parent f3deecf
commit c7e7af0
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 27 deletions.
diff --git a/rdmo/projects/assets/js/components/helper/PendingInvitations.js b/rdmo/projects/assets/js/components/helper/PendingInvitations.js
@@ -1,35 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const columnStyle = { color: '#666', width: '25%', paddingLeft: '10px' }
-const tableStyle = { width: '100%' }
-
 const PendingInvitations = ({ invitations }) => {
   const baseUrl = window.location.origin
 
   return (
-        <table style={tableStyle}>
-           <tbody>
-            {invitations?.map(item => (
-            <tr key={item.id}>
-              <td style={columnStyle}>
-                <b>{item.project_title}</b>
-                {/* <a href={`${baseUrl}/projects/${item.project}`} target="_blank" rel="noopener noreferrer">{item.project_title}</a>
-                {' '.repeat(maxProjectTitleLength - item.project_title.length)} */}
-                {/* <a href={`${baseUrl}/projects/join/${item.project}`} target="_blank" rel="noopener noreferrer"><b>{item.project_title}</b></a> */}
-              </td>
-              {/* <td style={columnStyle}>{gettext(item.role)}</td> */}
-              <td style={columnStyle}>{gettext(item.role).charAt(0).toUpperCase() + gettext(item.role).slice(1)}</td>
-              <td style={columnStyle}>
-                <button className="btn btn-link" onClick={() => { window.location.href = `${baseUrl}/projects/join/${item.project}` }}>{gettext('Accept')}</button>
-              </td>
-              <td style={columnStyle}>
-                <button className="btn btn-link" onClick={() => { window.location.href = `${baseUrl}/projects/cancel/${item.project}` }}>{gettext('Decline')}</button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+    <ul>
+      {invitations?.map(item => (
+        <div key={item.id} className="row-container">
+          <div className="w-100 mb-5">
+            <b>{item.project_title}</b>
+          </div>
+          <div className="w-50">
+            {gettext(item.role).charAt(0).toUpperCase() + gettext(item.role).slice(1)}
+          </div>
+          <div className="w-25">
+            <button className="btn btn-xs btn-success ml-10" onClick={() => { window.location.href = `${baseUrl}/projects/join/${item.project}` }}>{gettext('Accept')}</button>
+            <button className="btn btn-xs btn-danger ml-10" onClick={() => { window.location.href = `${baseUrl}/projects/cancel/${item.project}` }}>{gettext('Decline')}</button>
+          </div>
+        </div>
+      ))}
+    </ul>
   )
 }
 

diff --git a/rdmo/projects/assets/js/components/main/Projects.js b/rdmo/projects/assets/js/components/main/Projects.js
@@ -94,11 +94,11 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
 
   if (myProjects) {
     visibleColumns.splice(2, 0, 'role')
-    columnWidths = ['25%', '20%', '20%', '20%', '5%']
+    columnWidths = ['35%', '20%', '20%', '20%', '5%']
   } else {
     visibleColumns.splice(2, 0, 'created')
     visibleColumns.splice(2, 0, 'owner')
-    columnWidths = ['25%', '10%', '20%', '20%', '20%', '5%']
+    columnWidths = ['35%', '10%', '20%', '20%', '20%', '5%']
   }
 
   const cellFormatters = {

diff --git a/rdmo/projects/assets/scss/projects.scss b/rdmo/projects/assets/scss/projects.scss
@@ -14,6 +14,9 @@ a.disabled {
 .w-100 {
     width: 100%;
 }
+.w-25 {
+    width: 25%;
+}
 .mt-0 {
     margin-top: 0;
 }
@@ -222,3 +225,24 @@ a.disabled {
   text-decoration: none;
   background-color: #eeeeee;
 }
+
+.row-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row-container > div {
+  color: #666;
+  padding-left: 10px;
+}
+
+.row-container:not(:last-child):after { /* Add line between each container element */
+  content: '';
+  width: 100%;
+  height: 1px;
+  background-color: #ccc;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
diff --git a/rdmo/projects/static/projects/css/projects.css b/rdmo/projects/static/projects/css/projects.css
@@ -9464,6 +9464,10 @@ a.disabled {
   width: 100%;
 }
 
+.w-25 {
+  width: 25%;
+}
+
 .mt-0 {
   margin-top: 0;
 }
@@ -9688,3 +9692,24 @@ a.disabled {
   text-decoration: none;
   background-color: #eeeeee;
 }
+
+.row-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row-container > div {
+  color: #666;
+  padding-left: 10px;
+}
+
+.row-container:not(:last-child):after { /* Add line between each container element */
+  content: "";
+  width: 100%;
+  height: 1px;
+  background-color: #ccc;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}