REFACTORING: Mobile browsing should be kept out of the scope (see #142).

As mobile browsing was developed, especially for self-guided tours, it appears that the mobile interface differed more and more from the desktop one. Keeping both in the same codebase made the resulting code too complex. For this reason, the corresponding features (#94, #93 and #99) are now removed from this application but could be put together in the future as a distinct frontend (with the same backend).
Hypertopic · Jan 7, 2024 · f094507 · f094507
1 parent e236a06
commit f094507
Show file tree

Hide file tree

Showing 26 changed files with 9 additions and 402 deletions.
diff --git a/features/consult_collection.feature b/features/consult_collection.feature
diff --git a/features/navigate_between_collections.feature b/features/navigate_between_collections.feature
diff --git a/features/navigate_inside_collection.feature b/features/navigate_inside_collection.feature
diff --git a/features/step_definitions/context.rb b/features/step_definitions/context.rb
@@ -23,22 +23,6 @@
   expect(find('.gloses'))
 end
 
-Soit('je ne vois pas les sources') do
-  expect(find('.sources', :visible => :hidden))
-end
-
-Soit('je ne vois pas les gloses') do
-  expect(find('.gloses', :visible => :hidden))
-end
-
-Soit('je suis sur téléphone') do
-  resize_window(550, 800)
-end
-
-Soit('je suis sur ordinateur') do
-  resize_window(1080, 1920)
-end
-
 Soit('une session active avec mon compte') do
   sign_in('alice', 'whiterabbit')
 end
@@ -78,24 +62,6 @@
   sign_out
 end
 
-Soit("le texte {string} visible dans la navbar") do |text|
-  expect(find('.navbar-collec')).to have_content text
-end
-
-Soit("{string} le document actuel dans la collection") do |text|
-  expect(find('.runningHead')).to have_content text
-end
-
-Soit('le document actuel {string} dans la collection {string}') do |document, collection|
-  document_id = get_id(document)
-  collection_id = get_id(collection)
-  go_on_document_inside_collection(document_id, collection_id)
-end
-
-Soit('{string} autre collection dans laquelle le document principal est contenu') do |text|
-  expect(find('.related-collections-displayer')).to have_content text
-end
-
 Soit('{string} une des gloses ouverte') do |title|
   click_on_icon_next_to('open', title)
 end
diff --git a/features/step_definitions/event.rb b/features/step_definitions/event.rb
@@ -31,10 +31,6 @@
   click_on_icon('create-collection')
 end
 
-Quand("je navigue vers le document suivant") do
-  click_on('->')
-end
-
 Quand("je clique sur la référence temporelle {string} avec pour commentaire {string}") do |timecode, comment|
   find(:xpath, "//p[contains(., \"#{timecode}\")]", match: :first).click
-end
+end
diff --git a/features/step_definitions/outcome.rb b/features/step_definitions/outcome.rb
@@ -73,10 +73,6 @@
   expect(find('.runningHead')).to have_content text
 end
 
-Alors("{string} est la collection actuelle") do |title|
-  expect(find('.current-collection')).to have_content title
-end
-
 Alors('la vidéo du document principal se lance de {string} secondes à {string} secondes') do |start, ending|
   expect(page).to have_xpath("//iframe[contains(@src, 'start=#{start}&end=#{ending}')]")
 end
diff --git a/features/support/env.rb b/features/support/env.rb
@@ -50,26 +50,10 @@ def leave_textarea
   find('.navbar').click
 end
 
-def resize_window(width, heigth)
-  page.current_window.resize_to(width, heigth)
-end
-
 def go_on_document_inside_collection(document, collection)
   visit "/collection/#{collection}/document/#{document}"
 end
 
-def get_id(name)
-  case name
-    when "Vitrail : Vie de Jean le Baptiste"
-      id = "ejrbzoefkznfkpz20"
-    when "Visite de l'Eglise St-Jean-au-Marché"
-      id = "ejrbzoefkznfkpzp"
-    else
-      id = "Not found"
-    end
-  return id
-end
-
 def fill_element(selector, text)
   find(selector).fill_in with: text
 end

diff --git a/frontend/src/BrowseTools.js b/frontend/src/BrowseTools.js
@@ -1,8 +1,7 @@
 import { Link } from 'react-router-dom';
 import { Bookmark, ChevronBarDown, ChevronExpand } from 'react-bootstrap-icons';
-import { isPhoneSizedWindow } from './utils';
 
-function BrowseTools({id, closable, openable, collectionId}) {
+function BrowseTools({id, closable, openable }) {
   return (
     <>
       {closable &&
@@ -11,11 +10,11 @@ function BrowseTools({id, closable, openable, collectionId}) {
         </Link>
       }
       {openable &&
-        <Link to={collectionId && isPhoneSizedWindow() ? `#/collection/${collectionId}/document/${id}` : `#${id}`} className="icon open">
+        <Link to={`#${id}`} className="icon open">
           <ChevronExpand title="Open this document" />
         </Link>
       }
-      <Link to={collectionId && isPhoneSizedWindow() ? `../collection/${collectionId}/document/${id}` : `../${id}`} className="icon focus">
+      <Link to={`../${id}`} className="icon focus">
         <Bookmark title="Focus on this document" />
       </Link>
     </>

diff --git a/frontend/src/DocumentsCards.js b/frontend/src/DocumentsCards.js
@@ -1,5 +1,4 @@
 import { Link } from 'react-router-dom';
-import { useMemo } from 'react';
 import Card from 'react-bootstrap/Card';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
@@ -8,7 +7,6 @@ import BrowseTools from './BrowseTools';
 import FutureDocument from './FutureDocument';
 import FutureCollection from './FutureCollection';
 import { TypeBadge } from './Type';
-import { isPhoneSizedWindow } from './utils';
 
 function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend}) {
   return (
@@ -36,24 +34,11 @@ function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backe
   );
 }
 
-export function DocumentCard({doc, expandable}) {
-  const collectionId = useMemo(() => {
-    if (doc?.links?.length > 1) {
-      return doc.links.every((item) => {
-        return item.verb === 'includes';
-      }) ? doc._id : undefined;
-    };
-    return undefined;
-  }, [doc]);
-
+function DocumentCard({doc, expandable}) {
   return (
     <Card className="h-100">
       <Card.Body>
-        <BrowseTools
-          id={collectionId ? doc.links.length && isPhoneSizedWindow() ? doc.links[0].object : doc._id : doc._id}
-          openable={expandable}
-          collectionId={collectionId}
-        />
+        <BrowseTools id={doc._id} openable={expandable} />
         <Metadata metadata={doc} />
         <TypeBadge type={doc?.type}/>
       </Card.Body>

diff --git a/frontend/src/Menu.js b/frontend/src/Menu.js
@@ -10,7 +10,7 @@ import { useState } from 'react';
 
 function Menu({backend}) {
   return (
-    <Navbar bg="dark" variant="dark" className="navbarTop">
+    <Navbar bg="dark" variant="dark">
       <Container>
         <Navbar.Brand>
           <Link to="/">

diff --git a/frontend/src/Page.css b/frontend/src/Page.css
@@ -73,12 +73,3 @@ dd {
   padding-left: 30px;
 }
 
-.navbar-collec {
-  display: none
-}
-
-@media screen and (max-width: 820px) {
-  .navbar-collec {
-    display: block
-  }
-}
diff --git a/frontend/src/Page.js b/frontend/src/Page.js
@@ -3,7 +3,7 @@ import './Page.css';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { BookmarkFill } from 'react-bootstrap-icons';
 import Metadata from './Metadata';
@@ -12,9 +12,6 @@ import BrowseTools from './BrowseTools';
 import EditableText from './EditableText';
 import DocumentSources from './DocumentSources';
 import Type, { TypeBadge } from './Type';
-import NavbarCollection from './navbarCollection';
-import RelatedCollections from './RelatedCollections';
-import { isPhoneSizedWindow } from './utils';
 
 function Page({backend}) {
 
@@ -25,7 +22,7 @@ function Page({backend}) {
   const [scholiaMetadata, setScholiaMetadata] = useState([]);
   const [content, setContent] = useState([]);
   const [lastUpdate, setLastUpdate] = useState();
-  let {id, collectionId} = useParams();
+  let {id} = useParams();
   let margin = useLocation().hash.slice(1);
   let hasRubrics = (id, rows) => rows.some(x => x.key[1] !== 0 && x.value.isPartOf === id && x.value.text);
   const getCaption = ({dc_title, dc_spatial}) => dc_title + (dc_spatial ? `, ${dc_spatial}` : '');
@@ -131,18 +128,6 @@ function Page({backend}) {
           createOn={[id]} {...{setLastUpdate, backend}}
         />
       </Row>
-      <div className="navbar-collec">
-        {(collectionId) != undefined && metadata.length && id != undefined &&
-        <>
-          <RelatedCollections relatedDocumentsMetadata={scholiaMetadata}
-            currentCollectionId={collectionId} />
-          <NavbarCollection
-            trail={metadata.find((item) => item._id === collectionId)}
-            documentId={id}
-          />
-        </>
-        }
-      </div>
     </Container>
   );
 }

diff --git a/frontend/src/RelatedCollections.css b/frontend/src/RelatedCollections.css
diff --git a/frontend/src/RelatedCollections.js b/frontend/src/RelatedCollections.js
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -16,11 +16,3 @@ code {
   margin: 12px 0;
 }
 
-@media screen and (max-width: 820px) {
-
-  .navbarTop,
-  .sources,
-  .gloses {
-    display: none !important;
-  }
-}
diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -37,7 +37,6 @@ function App() {
           <Routes>
             <Route path="/" element={<Bookshelf {...{backend}} />} />
             <Route path="/:id" element={<Page {...{backend}} />} />
-            <Route path="/collection/:collectionId/document/:id" element={<Page {...{backend}} />} />
           </Routes>
         </TypesContext.Provider>
       </BrowserRouter>