From cc86c4bf9132fbf4e01173b2f50b1139b713de28 Mon Sep 17 00:00:00 2001 From: Juan Cazala Date: Mon, 8 Oct 2018 14:07:25 -0300 Subject: [PATCH] fix: mobile estates --- src/Translation/locales/en.json | 4 +-- src/Translation/locales/es.json | 2 +- src/Translation/locales/fr.json | 2 +- src/Translation/locales/ja.json | 2 +- src/Translation/locales/ko.json | 2 +- src/Translation/locales/zh.json | 2 +- .../src/components/EstateCard/EstateCard.js | 21 +++++++------ .../EstateActions/EstateActions.css | 11 +++++++ .../EstateActions/EstateActions.js | 2 +- .../EstateDetailPage/EstateDetail.css | 28 ++++++++++++----- .../EstateDetailPage/EstateDetail.js | 20 +++++-------- .../ParcelAttributes/ParcelAttributes.css | 29 ++++++++++++++++++ .../ParcelAttributes/ParcelAttributes.js | 27 +++++++++++++++++ .../src/components/ParcelAttributes/index.js | 2 ++ .../src/components/ParcelCard/ParcelCard.css | 26 ++-------------- .../src/components/ParcelCard/ParcelCard.js | 30 +++++++++---------- 16 files changed, 134 insertions(+), 76 deletions(-) create mode 100644 webapp/src/components/ParcelAttributes/ParcelAttributes.css create mode 100644 webapp/src/components/ParcelAttributes/ParcelAttributes.js create mode 100644 webapp/src/components/ParcelAttributes/index.js diff --git a/src/Translation/locales/en.json b/src/Translation/locales/en.json index 3bb4119c1..a4f791471 100644 --- 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 index e15985ba7..82eb5b26a 100644 --- 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 index a5e52278d..17be05c54 100644 --- 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 index beb539881..5fcc344b0 100644 --- 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 index 3b49a2589..2c7c6bf83 100644 --- 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 index acfcba7ab..f420f6871 100644 --- 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 index 9da5dee12..3eb596554 100644 --- 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 && ( - + {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) ) })} diff --git a/webapp/src/components/EstateDetailPage/EstateActions/EstateActions.css b/webapp/src/components/EstateDetailPage/EstateActions/EstateActions.css index 14d1812dd..b74eeb83a 100644 --- 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 index 01aef59f0..b5adad830 100644 --- 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 { ) : ( diff --git a/webapp/src/components/EstateDetailPage/EstateDetail.css b/webapp/src/components/EstateDetailPage/EstateDetail.css index 679723b69..af55b2233 100644 --- 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 index cb98a48f1..4936bcf32 100644 --- 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 { - + - +

{estate.data.name || t('estate_select.detail')} @@ -97,7 +94,8 @@ export default class EstateDetail extends React.PureComponent {

{isOwner ? ( @@ -180,11 +178,7 @@ export default class EstateDetail extends React.PureComponent { {parcels.map(({ x, y }) => { const parcel = allParcels[buildCoordinate(x, y)] return parcel ? ( - + ) : null })} diff --git a/webapp/src/components/ParcelAttributes/ParcelAttributes.css b/webapp/src/components/ParcelAttributes/ParcelAttributes.css new file mode 100644 index 000000000..386b892d8 --- /dev/null +++ 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 new file mode 100644 index 000000000..1918ad507 --- /dev/null +++ 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 ( + +
+
+ + {parcel.id} +
+ +
+ + ) + } +} diff --git a/webapp/src/components/ParcelAttributes/index.js b/webapp/src/components/ParcelAttributes/index.js new file mode 100644 index 000000000..534241078 --- /dev/null +++ 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 index c142bfb82..ec7e84a3a 100644 --- 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 index 5c28d11d0..9033121ca 100644 --- 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 && ( - - {t('global.acquired_at', { - date: formatDate( + + {t('global.acquired_ago', { + date: distanceInWordsToNow( parcel.last_transferred_at ? parseInt(parcel.last_transferred_at, 10) - : AUCTION_DATE, - 'MMMM Do, YYYY' + : AUCTION_DATE ) })} @@ -96,13 +102,7 @@ export default class ParcelCard extends React.PureComponent {

)} -
-
- - {parcel.id} -
- -
+ )