diff --git a/src/public/css/offers.css b/src/public/css/offers.css index 726c992..5dd99d8 100644 --- a/src/public/css/offers.css +++ b/src/public/css/offers.css @@ -36,7 +36,7 @@ width: 100%; height: 500px; margin: 5px 5px; - padding: 5px; + padding: 10px; } } @@ -75,7 +75,7 @@ .myoffer-card { width: 23%; - min-width: 400px; + min-width: 339px; height: 500px; margin: 10px 10px; padding: 10px; @@ -110,7 +110,7 @@ .myoffer-card { display: grid; grid-template-columns: 48% 4% 48%; - grid-template-rows: 23% 1% 18% 1% 18% 1% 18% 1% 20%; + grid-template-rows: 25% 1% 30% 1% 18% 1% 14% 1% 10%; } .myoffer-card > div { @@ -139,7 +139,7 @@ margin-left: 2px; } .left-icon-checkboxed-field img { - height: 1.2em; + height: 1.1em; } .right-icon-checkboxed-field { @@ -209,6 +209,20 @@ text-align: left; } +.offer-action-buttons-area { + grid-column-start: 1; + grid-column-end: 4; + grid-row: 9; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.offer-action-area { + cursor: pointer; + margin-right: 20px; +} + .offer-long-text { font-size: 0.9em; } diff --git a/src/public/img/edit.svg b/src/public/img/edit.svg new file mode 100644 index 0000000..814fd37 --- /dev/null +++ b/src/public/img/edit.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/public/img/trash-can-darkred.svg b/src/public/img/trash-can-darkred.svg new file mode 100644 index 0000000..09fefd0 --- /dev/null +++ b/src/public/img/trash-can-darkred.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/trash-can-lasecagold.svg b/src/public/img/trash-can-lasecagold.svg new file mode 100644 index 0000000..611dfed --- /dev/null +++ b/src/public/img/trash-can-lasecagold.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/trash-can.svg b/src/public/img/trash-can.svg new file mode 100644 index 0000000..d37fa55 --- /dev/null +++ b/src/public/img/trash-can.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index 88d5b25..d15e24d 100644 --- a/src/public/javascript/offers.js +++ b/src/public/javascript/offers.js @@ -201,7 +201,6 @@ class Offer { const tradeDescDiv = document.createElement('div'); tradeDescDiv.classList.add('trade-desc'); - tradeDescDiv.classList.add('subtle-box'); const youBuyText = document.createElement('p'); youBuyText.classList.add('offer-card-content-title'); @@ -236,7 +235,6 @@ class Offer { const premiumDescDiv = document.createElement('div'); premiumDescDiv.classList.add('premium-desc'); - premiumDescDiv.classList.add('subtle-box'); const premiumTitle = document.createElement('p'); premiumTitle.classList.add('offer-card-content-title'); @@ -269,7 +267,6 @@ class Offer { const whereDescDiv = document.createElement('div'); whereDescDiv.classList.add('where-desc'); - whereDescDiv.classList.add('subtle-box'); const whereDescTitle = document.createElement('p'); whereDescTitle.classList.add('offer-card-content-title'); @@ -283,7 +280,6 @@ class Offer { const whenDescDiv = document.createElement('div'); whenDescDiv.classList.add('when-desc'); - whenDescDiv.classList.add('subtle-box'); const whenDescTitle = document.createElement('p'); whenDescTitle.classList.add('offer-card-content-title'); @@ -297,7 +293,6 @@ class Offer { const bitcoinMethodsDiv = document.createElement('div'); bitcoinMethodsDiv.classList.add('bitcoin-methods-desc'); - bitcoinMethodsDiv.classList.add('subtle-box'); const bitcoinMethodsTitle = document.createElement('p'); bitcoinMethodsTitle.classList.add('offer-card-content-title'); @@ -363,7 +358,6 @@ class Offer { const visibilityDiv = document.createElement('div'); visibilityDiv.classList.add('visibility-desc'); - visibilityDiv.classList.add('subtle-box'); const visibilityTitle = document.createElement('p'); visibilityTitle.classList.add('offer-card-content-title'); @@ -472,7 +466,6 @@ class Offer { const otherOfferFeaturesDiv = document.createElement('div'); otherOfferFeaturesDiv.classList.add('other-desc'); - otherOfferFeaturesDiv.classList.add('subtle-box'); const otherOfferFeaturesTitle = document.createElement('p'); otherOfferFeaturesTitle.classList.add('offer-card-content-title'); @@ -486,7 +479,7 @@ class Offer { const areBigNotesAcceptedIcon = document.createElement('img'); areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg'; const areBigNotesAcceptedText = document.createElement('p'); - areBigNotesAcceptedText.innerText = 'Billetes grandes OK'; + areBigNotesAcceptedText.innerText = 'Billetes grandes'; const checkIcon = document.createElement('img'); checkIcon.src = '/img/circle-check-green.svg'; @@ -499,7 +492,7 @@ class Offer { const areBigNotesAcceptedIcon = document.createElement('img'); areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg'; const areBigNotesAcceptedText = document.createElement('p'); - areBigNotesAcceptedText.innerText = 'Billetes grandes OK'; + areBigNotesAcceptedText.innerText = 'Billetes grandes'; const checkIcon = document.createElement('img'); checkIcon.src = '/img/circle-xmark-gray.svg'; @@ -512,6 +505,27 @@ class Offer { otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer); + const actionButtonsArea = document.createElement('p'); + actionButtonsArea.classList.add('offer-action-buttons-area'); + + const editActionArea = document.createElement('div'); + editActionArea.classList.add('offer-action-area'); + const editActionIcon = document.createElement('img'); + editActionIcon.src = '/img/edit.svg'; + const editActionText = document.createElement('p'); + editActionText.innerText = 'Editar'; + editActionArea.append(editActionIcon, editActionText); + + const deleteActionArea = document.createElement('div'); + deleteActionArea.classList.add('offer-action-area'); + const deleteActionIcon = document.createElement('img'); + deleteActionIcon.src = '/img/trash-can-darkred.svg'; + const deleteActionText = document.createElement('p'); + deleteActionText.innerText = 'Eliminar'; + deleteActionArea.append(deleteActionIcon, deleteActionText); + + actionButtonsArea.append(editActionArea, deleteActionArea); + offerCard.append( tradeDescDiv, premiumDescDiv, @@ -519,7 +533,8 @@ class Offer { whenDescDiv, bitcoinMethodsDiv, visibilityDiv, - otherOfferFeaturesDiv + otherOfferFeaturesDiv, + actionButtonsArea ); return offerCard; diff --git a/src/public/kitty.jpeg b/src/public/kitty.jpeg deleted file mode 100644 index ed1ff6f..0000000 Binary files a/src/public/kitty.jpeg and /dev/null differ