Merge pull request #9748 from overleaf/ii-dashboard-mobile-view-improvements

[web] Projects dashboard improvements

GitOrigin-RevId: 60bf3bd81fbdcb9d43bdb2ab3e2cf77bf02dddc8

services/web/frontend/extracted-translations.json

@@ -419,7 +419,7 @@
   "other_logs_and_files": "",
   "other_output_files": "",
   "overleaf_labs": "",
-  "owned_by": "",
+  "owned_by_x": "",
   "owner": "",
   "page_current": "",
   "pagination_navigation": "",

services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx

@@ -47,13 +47,8 @@ export default function ProjectListTableRow({
         <InlineTags className="hidden-xs" projectId={project.id} />
       </td>
       <td className="dash-cell-date-owner visible-xs pb-0">
-        <LastUpdatedCell project={project} />{' '}
-        {ownerName ? (
-          <>
-            — <span className="text-lowercase">{t('owned_by')}</span>{' '}
-            {ownerName}
-          </>
-        ) : null}
+        <LastUpdatedCell project={project} />
+        {ownerName ? <> — {t('owned_by_x', { x: ownerName })}</> : null}
       </td>
       <td className="dash-cell-owner hidden-xs">
         <OwnerCell project={project} />

services/web/frontend/js/features/project-list/components/table/project-list-table.tsx

@@ -9,7 +9,10 @@ import { Project } from '../../../../../../types/project/dashboard/api'
 
 function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
   return (
-    <button className="btn-link table-header-sort-btn" onClick={onClick}>
+    <button
+      className="btn-link table-header-sort-btn hidden-xs"
+      onClick={onClick}
+    >
       {text}
       {iconType ? <Icon className="tablesort" type={iconType} /> : null}
       <span className="sr-only">{screenReaderText}</span>
@@ -38,9 +41,12 @@ function ProjectListTable() {
 
   return (
     <table className="project-dash-table">
-      <thead className="hidden-xs">
+      <thead className="sr-only-xs">
         <tr>
-          <th className="dash-cell-checkbox" aria-label={t('select_projects')}>
+          <th
+            className="dash-cell-checkbox hidden-xs"
+            aria-label={t('select_projects')}
+          >
             <input
               type="checkbox"
               id="project-list-table-select-all"
@@ -76,7 +82,13 @@ function ProjectListTable() {
             />
           </th>
           <th
-            className="dash-cell-owner"
+            className="dash-cell-date-owner visible-xs"
+            aria-label={`${t('date')} — ${t('owner')}`}
+          >
+            {`${t('date')} — ${t('owner')}`}
+          </th>
+          <th
+            className="dash-cell-owner hidden-xs"
             aria-label={t('owner')}
             aria-sort={
               sort.by === 'owner'
@@ -94,7 +106,7 @@ function ProjectListTable() {
             />
           </th>
           <th
-            className="dash-cell-date"
+            className="dash-cell-date hidden-xs"
             aria-label={t('last_modified')}
             aria-sort={
               sort.by === 'lastUpdated'
@@ -111,6 +123,9 @@ function ProjectListTable() {
               onClick={() => handleSort('lastUpdated')}
             />
           </th>
+          <th className="dash-cell-tag visible-xs" aria-label={t('tags')}>
+            {t('tags')}
+          </th>
           <th className="dash-cell-actions">{t('actions')}</th>
         </tr>
       </thead>

services/web/frontend/stylesheets/core/scaffolding.less

@@ -129,8 +129,7 @@ hr {
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content/
-
-.sr-only {
+@sr-only: {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -139,6 +138,16 @@ hr {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
+};
+
+.sr-only {
+  @sr-only();
+}
+
+@media (max-width: @screen-xs-max) {
+  .sr-only-xs {
+    @sr-only();
+  }
 }
 
 .content {

services/web/locales/en.json

@@ -1877,7 +1877,7 @@
   "history_entry_origin_dropbox": "via Dropbox",
   "sort_by_x": "Sort by __x__",
   "sort_by": "Sort by",
-  "owned_by": "Owned by",
+  "owned_by_x": "owned by __x__",
   "last_updated_date_by_x": "__lastUpdatedDate__ by __person__",
   "select_projects": "Select Projects",
   "ascending": "Ascending",