fix: mobile estates

decentraland · Oct 8, 2018 · cc86c4b · cc86c4b
1 parent b113bd9
commit cc86c4b
Show file tree

Hide file tree

Showing 16 changed files with 134 additions and 76 deletions.
diff --git a/src/Translation/locales/en.json b/src/Translation/locales/en.json
@@ -54,7 +54,7 @@
     },
     "publication": {
       "buy": "Buy",
-      "price": "price"
+      "price": "Price"
     }
   },
   "asset_publish": {
@@ -164,7 +164,7 @@
     "terms": "Terms & Conditions"
   },
   "global": {
-    "acquired_at": "Acquired at {date}",
+    "acquired_ago": "Acquired {date}",
     "activity": "Activity",
     "add": "add",
     "address_placeholder": "0x...",

diff --git a/src/Translation/locales/es.json b/src/Translation/locales/es.json
@@ -163,7 +163,7 @@
     "terms": "Términos & Condiciones"
   },
   "global": {
-    "acquired_at": "Adquirido en {date}",
+    "acquired_ago": "Adquirido {date}",
     "activity": "Actividad",
     "add": "añadir",
     "address_placeholder": "0x...",

diff --git a/src/Translation/locales/fr.json b/src/Translation/locales/fr.json
@@ -168,7 +168,7 @@
     "terms": "Termes et Conditions"
   },
   "global": {
-    "acquired_at": "Acquis le {date}",
+    "acquired_at": "Acquis {date}",
     "activity": "Activité",
     "add": "ajouter",
     "address_placeholder": "0x...",

diff --git a/src/Translation/locales/ja.json b/src/Translation/locales/ja.json
@@ -164,7 +164,7 @@
     "terms": "利用規約"
   },
   "global": {
-    "acquired_at": "{date}に取得済み",
+    "acquired_ago": "{date}に取得済み",
     "activity": "取引履歴",
     "add": "追加する",
     "address_placeholder": "0x...",

diff --git a/src/Translation/locales/ko.json b/src/Translation/locales/ko.json
@@ -163,7 +163,7 @@
     "terms": "이용 약관"
   },
   "global": {
-    "acquired_at": "TK0에서 획득",
+    "acquired_ago": "{date}에서 획득",
     "activity": "활동",
     "add": "더하다",
     "address_placeholder": "0x...",

diff --git a/src/Translation/locales/zh.json b/src/Translation/locales/zh.json
@@ -155,7 +155,7 @@
     "terms": "服务条款"
   },
   "global": {
-    "acquired_at": "获得日期 {date}",
+    "acquired_ago": "获得日期 {date}",
     "activity": "活动",
     "add": "加",
     "address_placeholder": "0x...",

diff --git a/webapp/src/components/EstateCard/EstateCard.js b/webapp/src/components/EstateCard/EstateCard.js
@@ -12,7 +12,7 @@ import Mana from 'components/Mana'
 import { estateType, publicationType } from 'components/types'
 import { t } from '@dapps/modules/translation/utils'
 import { calculateMapProps } from 'shared/estate'
-import { formatDate } from 'lib/utils'
+import { formatDate, distanceInWordsToNow } from 'lib/utils'
 import { getOpenPublication } from 'shared/asset'
 
 import './EstateCard.css'
@@ -66,18 +66,21 @@ export default class EstateCard extends React.PureComponent {
             )}
 
             {!publication && (
-              <Card.Meta>
+              <Card.Meta
+                title={formatDate(
+                  parseInt(estate.last_transferred_at || estate.created_at, 10),
+                  'MMMM Do, YYYY'
+                )}
+              >
                 {estate.last_transferred_at
-                  ? t('global.acquired_at', {
-                      date: formatDate(
-                        parseInt(estate.last_transferred_at, 10),
-                        'MMMM Do, YYYY'
+                  ? t('global.acquired_ago', {
+                      date: distanceInWordsToNow(
+                        parseInt(estate.last_transferred_at, 10)
                       )
                     })
                   : t('global.created_at', {
-                      date: formatDate(
-                        parseInt(estate.created_at, 10),
-                        'MMMM Do, YYYY'
+                      date: distanceInWordsToNow(
+                        parseInt(estate.created_at, 10)
                       )
                     })}
               </Card.Meta>

diff --git a/webapp/src/components/EstateDetailPage/EstateActions/EstateActions.css b/webapp/src/components/EstateDetailPage/EstateActions/EstateActions.css
@@ -5,3 +5,14 @@
 .EstateActions div {
   margin-bottom: 20px;
 }
+
+@media (max-width: 768px) {
+  .EstateActions .button {
+    width: 100%;
+    margin-bottom: 1em;
+  }
+
+  .EstateActions a + a {
+    margin-left: 0px;
+  }
+}
diff --git a/webapp/src/components/EstateDetailPage/EstateActions/EstateActions.js b/webapp/src/components/EstateDetailPage/EstateActions/EstateActions.js
@@ -40,7 +40,7 @@ export default class EstateActions extends React.PureComponent {
             ) : (
               <Link to={locations.sellEstate(id)}>
                 <Button size="tiny">
-                  <Icon name="exchange" />
+                  <Icon name="tag" />
                   {t('asset_detail.actions.sell')}
                 </Button>
               </Link>

diff --git a/webapp/src/components/EstateDetailPage/EstateDetail.css b/webapp/src/components/EstateDetailPage/EstateDetail.css
@@ -1,10 +1,3 @@
-@media (max-width: 768px) {
-  .EstateDetail {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}
-
 .Page > .EstateDetail {
   color: var(--text);
   font-size: 15px;
@@ -22,6 +15,7 @@
 .EstateDetail .estate-title .LandAmount {
   display: inline-flex;
   font-size: 20px;
+  transform: translateY(-2px);
 }
 
 .EstateDetail .estate-description {
@@ -121,3 +115,23 @@
 .EstateDetail.empty .empty-estate-message {
   color: var(--gray);
 }
+
+.EstateDetail .ParcelAttributes {
+  margin-right: 16px;
+  margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+  .EstateDetail {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .EstateDetail .estate-owner-container {
+    text-align: left !important;
+  }
+
+  .EstateDetail .ParcelAttributes {
+    margin-top: 0px;
+    margin-bottom: 20px;
+  }
+}
diff --git a/webapp/src/components/EstateDetailPage/EstateDetail.js b/webapp/src/components/EstateDetailPage/EstateDetail.js
@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'
 import { Icon, Header, Grid, Container, Button } from 'semantic-ui-react'
 
 import AssetDetailPage from 'components/AssetDetailPage'
-import ParcelCard from 'components/ParcelCard'
 import AddressBlock from 'components/AddressBlock'
 import { estateType, parcelType, publicationType } from 'components/types'
 import { t } from '@dapps/modules/translation/utils'
@@ -14,10 +13,11 @@ import { getOpenPublication } from 'shared/asset'
 import Mana from 'components/Mana'
 import Expiration from 'components/Expiration'
 import AssetTransactionHistory from 'components/AssetTransactionHistory'
-import './EstateDetail.css'
 import LandAmount from 'components/LandAmount'
 import { locations } from 'locations'
 import { calculateMapProps } from '../../shared/estate'
+import ParcelAttributes from 'components/ParcelAttributes'
+import './EstateDetail.css'
 
 const WITH_ACTION_BUTTONS_WIDTH = 8
 const WITHOUT_ACTION_BUTTONS_WIDTH = 16
@@ -70,12 +70,9 @@ export default class EstateDetail extends React.PureComponent {
           <AssetDetailPage asset={estate} onAssetClick={onViewAssetClick} />
         </div>
         <Container>
-          <Grid className="details">
+          <Grid className="details" stackable>
             <Grid.Row>
-              <Grid.Column
-                width={WITH_ACTION_BUTTONS_WIDTH}
-                className="parcels"
-              >
+              <Grid.Column computer={8} mobile={16} className="parcels">
                 <Header size="large">
                   <p className="estate-title">
                     <span>{estate.data.name || t('estate_select.detail')}</span>
@@ -97,7 +94,8 @@ export default class EstateDetail extends React.PureComponent {
                 </Header>
               </Grid.Column>
               <Grid.Column
-                width={WITH_ACTION_BUTTONS_WIDTH}
+                computer={8}
+                mobile={16}
                 className="estate-owner-container"
               >
                 {isOwner ? (
@@ -180,11 +178,7 @@ export default class EstateDetail extends React.PureComponent {
                     {parcels.map(({ x, y }) => {
                       const parcel = allParcels[buildCoordinate(x, y)]
                       return parcel ? (
-                        <ParcelCard
-                          key={parcel.id}
-                          parcel={parcel}
-                          withMap={false}
-                        />
+                        <ParcelAttributes key={parcel.id} parcel={parcel} />
                       ) : null
                     })}
                   </Grid.Column>

diff --git a/webapp/src/components/ParcelAttributes/ParcelAttributes.css b/webapp/src/components/ParcelAttributes/ParcelAttributes.css
@@ -0,0 +1,29 @@
+.ParcelAttributes {
+  display: flex;
+  flex-direction: row nowrap;
+  align-items: center;
+}
+
+.ParcelAttributes:after {
+  display: none;
+}
+
+.ParcelAttributes .coords {
+  padding: 2px 9px 2px 7px;
+  margin-right: 6px;
+  font-size: 11px;
+  border: 1px solid var(--gray);
+  color: var(--text);
+  border-radius: 4px;
+}
+
+.ParcelAttributes .coords .marker.icon {
+  font-size: 12px;
+  margin-right: 3px;
+  line-height: 0.9;
+}
+
+.ParcelAttributes:hover .coords {
+  color: var(--red);
+  border-color: var(--red);
+}
diff --git a/webapp/src/components/ParcelAttributes/ParcelAttributes.js b/webapp/src/components/ParcelAttributes/ParcelAttributes.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { parcelType } from 'components/types'
+import ParcelTags from 'components/ParcelTags/ParcelTags'
+import Icon from 'components/Icon'
+import './ParcelAttributes.css'
+import { locations } from 'locations'
+
+export default class ParcelAttributes extends React.PureComponent {
+  static propTypes = {
+    parcel: parcelType
+  }
+  render() {
+    const { parcel } = this.props
+    return (
+      <Link to={locations.parcelDetail(parcel.x, parcel.y)}>
+        <div className="ParcelAttributes">
+          <div className="coords">
+            <Icon name="marker" />
+            <span className="coord">{parcel.id}</span>
+          </div>
+          <ParcelTags parcel={parcel} size="small" />
+        </div>
+      </Link>
+    )
+  }
+}
diff --git a/webapp/src/components/ParcelAttributes/index.js b/webapp/src/components/ParcelAttributes/index.js
@@ -0,0 +1,2 @@
+import ParcelAttributes from './ParcelAttributes'
+export default ParcelAttributes
diff --git a/webapp/src/components/ParcelCard/ParcelCard.css b/webapp/src/components/ParcelCard/ParcelCard.css
@@ -73,33 +73,11 @@
   margin-left: auto;
 }
 
-.ParcelCard .footer {
+.ParcelCard .ParcelAttributes {
   margin-top: 20px;
-  display: flex;
-  flex-direction: row nowrap;
-  align-items: center;
-}
-
-.ParcelCard .footer:after {
-  display: none;
-}
-
-.ParcelCard .coords {
-  padding: 2px 9px 2px 7px;
-  margin-right: 6px;
-  font-size: 11px;
-  border: 1px solid var(--gray);
-  color: var(--text);
-  border-radius: 4px;
-}
-
-.ParcelCard .coords .marker.icon {
-  font-size: 12px;
-  margin-right: 3px;
-  line-height: 0.9;
 }
 
-.ParcelCard:hover .coords {
+.ParcelCard:hover .ParcelAttributes .coords {
   color: var(--red);
   border-color: var(--red);
 }
diff --git a/webapp/src/components/ParcelCard/ParcelCard.js b/webapp/src/components/ParcelCard/ParcelCard.js
@@ -1,22 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
-import { Icon, Card } from 'semantic-ui-react'
+import { Card } from 'semantic-ui-react'
 
 import { locations } from 'locations'
 import Mana from 'components/Mana'
 import ParcelPreview from 'components/ParcelPreview'
 import Expiration from 'components/Expiration'
-import ParcelTags from 'components/ParcelTags'
 import { parcelType, publicationType } from 'components/types'
 import { t } from '@dapps/modules/translation/utils'
 import { isMortgageActive } from 'shared/mortgage'
 import { AUCTION_DATE } from 'shared/parcel'
 import { getOpenPublication } from 'shared/asset'
 
-import { formatDate } from 'lib/utils'
+import { formatDate, distanceInWordsToNow } from 'lib/utils'
 import { getMortgageStatus } from 'shared/mortgage'
 import './ParcelCard.css'
+import ParcelAttributes from 'components/ParcelAttributes'
 
 export default class ParcelCard extends React.PureComponent {
   static propTypes = {
@@ -72,13 +72,19 @@ export default class ParcelCard extends React.PureComponent {
 
           {!publication &&
             !showMortgage && (
-              <Card.Meta>
-                {t('global.acquired_at', {
-                  date: formatDate(
+              <Card.Meta
+                title={formatDate(
+                  parcel.last_transferred_at
+                    ? parseInt(parcel.last_transferred_at, 10)
+                    : AUCTION_DATE,
+                  'MMMM Do, YYYY'
+                )}
+              >
+                {t('global.acquired_ago', {
+                  date: distanceInWordsToNow(
                     parcel.last_transferred_at
                       ? parseInt(parcel.last_transferred_at, 10)
-                      : AUCTION_DATE,
-                    'MMMM Do, YYYY'
+                      : AUCTION_DATE
                   )
                 })}
               </Card.Meta>
@@ -96,13 +102,7 @@ export default class ParcelCard extends React.PureComponent {
                 </p>
               </React.Fragment>
             )}
-          <div className="footer">
-            <div className="coords">
-              <Icon name="marker" />
-              <span className="coord">{parcel.id}</span>
-            </div>
-            <ParcelTags parcel={parcel} size="small" />
-          </div>
+          <ParcelAttributes parcel={parcel} />
         </Card.Content>
       </React.Fragment>
     )