FIX: Document's attributes should be in a copyright (see Hypertopic#570).

This puts the creator and created attributes under the image on narrow screens.

Co-authored-by: Sandekuku <[email protected]>

Author: maxime-huyghe

src/components/itemPage/Attribute.jsx

@@ -41,7 +41,7 @@ class Attribute extends React.Component {
 
   render() {
     return (
-      <div className="Attribute">
+      <div className={`Attribute ${this.props.className}`}>
         <div className="Key">
           {this.props.name}
         </div>

src/components/itemPage/Item.jsx

@@ -4,15 +4,22 @@ import Hypertopic from 'hypertopic';
 import groupBy from 'json-groupby';
 import { Helmet } from 'react-helmet';
 import conf from '../../config.js';
-import { Items } from '../../model.js';
+import { HIDDEN_ON_MOBILE, Items } from '../../model.js';
 import Viewpoint from './Viewpoint.jsx';
 import Attribute from './Attribute.jsx';
 import Resource from './Resource.jsx';
 import Header from '../Header.jsx';
 import SameNameBlock from './SameNameBlock.jsx';
 import { DiscussionEmbed } from 'disqus-react';
 import { t, Trans } from '@lingui/macro';
+import Copyright from './Copyright.jsx';
 
+/**
+ * Gets a string representation of an object. If the object is an array,
+ * joins the representations of its elements with commas.
+ * @param {any} obj object to convert
+ * @returns {string} the string representation
+ */
 function getString(obj) {
   if (Array.isArray(obj)) {
     return obj.map(val => getString(val)).join(', ');
@@ -40,6 +47,7 @@ class Item extends Component {
   render() {
     let name = getString(this.state.item.name);
     let attributes = this._getAttributes();
+    const { creator, created } = this.state.item;
     let viewpoints = this._getViewpoints();
     let sameNameBlock = this._getSameNameBlock();
     const { visitMap } = this.state;
@@ -98,6 +106,9 @@ class Item extends Component {
               <div className="Subject">
                 <h2 className="h4 font-weight-bold text-center">{name}</h2>
                 <Resource href={this.state.item.resource} />
+                <div className="d-block d-sm-none">
+                  <Copyright creator={creator} created={created} />
+                </div>
               </div>
               <Comments appId={this.state.disqus} item={this.state.item} />
             </div>
@@ -109,10 +120,19 @@ class Item extends Component {
 
   _getAttributes() {
     return new Items([this.state.item]).getAttributes()
-      .map(x => (
-        <Attribute key={x[0]} name={x[0]} value={x[1]}
-          setAttribute={this._setAttribute} deleteAttribute={this._deleteAttribute}/>
-      ));
+      .map(attribute => {
+        const className = HIDDEN_ON_MOBILE.includes(attribute[0]) ? 'd-none d-sm-table-row' : '';
+        return (
+          <Attribute
+            className={className}
+            key={attribute[0]}
+            name={attribute[0]}
+            value={attribute[1]}
+            setAttribute={this._setAttribute}
+            deleteAttribute={this._deleteAttribute}
+          />
+        );
+      });
   }
 
   _getViewpoints() {

src/locales/en/messages.po

@@ -13,19 +13,27 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/components/registerPage/Register.jsx:78
+msgid "Adresse email"
+msgstr ""
+
+#: src/components/registerPage/Register.jsx:73
+#~ msgid "Adresse mail"
+#~ msgstr "Email address"
+
 #: src/components/viewpointPage/Contributors.jsx:28
 msgid "Ajouter"
 msgstr "Add"
 
-#: src/components/itemPage/Item.jsx:234
+#: src/components/itemPage/Item.jsx:279
 msgid "Ajouter un attribut et une valeur..."
 msgstr "Add an attribute and a value..."
 
 #: src/components/itemPage/Viewpoint.jsx:76
 msgid "Ajouter une rubrique..."
 msgstr "Add a topic..."
 
-#: src/components/itemPage/Item.jsx:58
+#: src/components/itemPage/Item.jsx:92
 msgid "Attributs du document"
 msgstr "Document attributes"
 
@@ -37,11 +45,15 @@ msgstr "Choose a parent topic..."
 msgid "Contributeurs"
 msgstr "Contributors"
 
-#: src/components/viewpointPage/Outliner.jsx:78
+#: src/components/viewpointPage/Outliner.jsx:80
 msgid "Création du point de vue"
 msgstr "Create a viewpoint"
 
-#: src/components/itemPage/Item.jsx:55
+#: src/components/viewpointPage/Outliner.jsx:71
+msgid "Créer"
+msgstr ""
+
+#: src/components/itemPage/Item.jsx:89
 msgid "Description"
 msgstr "Description"
 
@@ -66,10 +78,14 @@ msgstr "Include"
 msgid "Items ayant le même nom"
 msgstr "Items having the same name"
 
-#: src/components/viewpointPage/Outliner.jsx:77
+#: src/components/viewpointPage/Outliner.jsx:79
 msgid "Modification du point de vue"
 msgstr "Edit a viewpoint"
 
+#: src/components/registerPage/Register.jsx:82
+msgid "Mot de passe"
+msgstr "Password"
+
 #: src/components/viewpointPage/Outliner.jsx:68
 msgid "Nom du point de vue"
 msgstr "Viewpoint name"
@@ -87,71 +103,75 @@ msgstr "Or"
 msgid "Pas de contributeurs"
 msgstr "No contributors"
 
-#: src/components/portfolioPage/Portfolio.jsx:52
+#: src/components/portfolioPage/Portfolio.jsx:71
 msgid "Points de vue"
 msgstr "Viewpoints"
 
-#: src/components/portfolioPage/SearchBar.jsx:47
+#: src/components/registerPage/Register.jsx:73
+msgid "Pseudonyme"
+msgstr "Pseudonym"
+
+#: src/components/portfolioPage/SearchBar.jsx:55
 msgid "Rechercher..."
 msgstr "Search..."
 
-#: src/components/itemPage/Item.jsx:48
+#: src/components/itemPage/Item.jsx:82
 #: src/components/viewpointPage/Outliner.jsx:37
 msgid "Retour à l'accueil"
 msgstr "Go back to home page"
 
+#: src/components/itemPage/Item.jsx:82
+msgid "Retour à la visite"
+msgstr ""
+
 #: src/components/portfolioPage/Status.jsx:25
 msgid "Rubrique inconnue"
 msgstr "Unknown topic"
 
-#: src/components/Authenticated.jsx:30
+#: src/components/Authenticated.jsx:40
+msgid "S'inscrire..."
+msgstr "Register..."
+
+#: src/components/Authenticated.jsx:31
 msgid "Se connecter"
 msgstr "Log in"
 
-#: src/components/Authenticated.jsx:36
+#: src/components/Authenticated.jsx:37
 msgid "Se connecter..."
 msgstr "Log in..."
 
-#: src/components/Authenticated.jsx:21
+#: src/components/Authenticated.jsx:22
 msgid "Se déconnecter"
 msgstr "Log out"
 
 #: src/components/portfolioPage/Status.jsx:11
 msgid "Tous les items"
 msgstr "All items"
 
-#: src/components/itemPage/Item.jsx:325
+#: src/components/itemPage/Item.jsx:370
 msgid "Voulez-vous réellement que l'item affiché ne soit plus décrit à l'aide de cette rubrique ?"
 msgstr "Remove this topic for this item?"
 
-#: src/components/itemPage/Item.jsx:236
+#: src/components/itemPage/Item.jsx:281
 msgid "attribut : valeur"
 msgstr "attribute: value"
 
-#: src/components/Authenticated.jsx:29
+#: src/components/Authenticated.jsx:30
 msgid "mot de passe"
 msgstr "Password"
 
-#: src/components/Authenticated.jsx:28
+#: src/components/Authenticated.jsx:29
 msgid "nom d'utilisateur"
 msgstr "Username"
 
 #: src/components/itemPage/Attribute.jsx:93
 msgid "valeur"
 msgstr "value"
 
-#: src/components/Authenticated.jsx:42
-msgid "S'inscrire..."
-msgstr "Register..."
+#: src/components/itemPage/Copyright.jsx:7
+#~ msgid "© {creator}, {created}"
+#~ msgstr "© {creator}, {created}"
 
-#: src/components/registerPage/Register.jsx:68
-msgid "Pseudonyme"
-msgstr "Pseudonym"
-
-#: src/components/registerPage/Register.jsx:73
-msgid "Adresse mail"
-msgstr "Email address"
-
-#: src/components/registerPage/Register.jsx:77
-msgid "Mot de passe"
-msgstr "Password"
+#: src/components/itemPage/Copyright.jsx:21
+msgid "© {creator}, {yearOrDate}"
+msgstr "© {creator}, {yearOrDate}"