card complete
This commit is contained in:
parent
ac20fbccdb
commit
b60fb66db2
7 changed files with 135 additions and 14 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
6
src/public/img/edit.svg
Normal file
6
src/public/img/edit.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<!-- pen-to-square icon by Free Icons (https://free-icons.github.io/free-icons/) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" fill="currentColor" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M 476.65483234714003 17.16765285996055 Q 458.47731755424064 0 436.2603550295858 0 L 436.2603550295858 0 L 436.2603550295858 0 Q 414.043392504931 0 395.86587771203153 17.16765285996055 L 365.57001972386587 47.463510848126234 L 365.57001972386587 47.463510848126234 L 464.53648915187375 146.42998027613413 L 464.53648915187375 146.42998027613413 L 494.8323471400395 116.13412228796844 L 494.8323471400395 116.13412228796844 Q 512 97.95660749506904 512 75.7396449704142 Q 512 53.52268244575937 494.8323471400395 35.34516765285996 L 476.65483234714003 17.16765285996055 L 476.65483234714003 17.16765285996055 Z M 173.69625246548324 239.33727810650888 Q 164.60749506903352 248.42603550295857 160.5680473372781 261.55424063116374 L 130.27218934911244 350.42209072978306 L 130.27218934911244 350.42209072978306 Q 126.23274161735701 364.560157790927 136.33136094674558 375.6686390532544 Q 147.439842209073 385.767258382643 161.57790927021696 381.7278106508876 L 251.45562130177515 351.43195266272187 L 251.45562130177515 351.43195266272187 Q 263.5739644970414 347.3925049309665 272.66272189349115 338.3037475345168 L 442.3195266272189 168.64694280078896 L 442.3195266272189 168.64694280078896 L 343.35305719921104 69.68047337278107 L 343.35305719921104 69.68047337278107 L 173.69625246548324 239.33727810650888 L 173.69625246548324 239.33727810650888 Z M 96.94674556213018 59.581854043392504 Q 55.54240631163708 60.59171597633136 28.276134122287967 87.85798816568047 L 28.276134122287967 87.85798816568047 L 28.276134122287967 87.85798816568047 Q 1.009861932938856 115.12426035502959 0 156.5285996055227 L 0 415.05325443786984 L 0 415.05325443786984 Q 1.009861932938856 456.4575936883629 28.276134122287967 483.72386587771206 Q 55.54240631163708 510.99013806706114 96.94674556213018 512 L 355.4714003944773 512 L 355.4714003944773 512 Q 396.8757396449704 510.99013806706114 424.14201183431953 483.72386587771206 Q 451.4082840236686 456.4575936883629 452.4181459566075 415.05325443786984 L 452.4181459566075 318.1065088757396 L 452.4181459566075 318.1065088757396 Q 452.4181459566075 303.9684418145957 443.3293885601578 294.879684418146 Q 434.2406311637081 285.79092702169623 420.1025641025641 285.79092702169623 Q 405.96449704142015 285.79092702169623 396.8757396449704 294.879684418146 Q 387.7869822485207 303.9684418145957 387.7869822485207 318.1065088757396 L 387.7869822485207 415.05325443786984 L 387.7869822485207 415.05325443786984 Q 387.7869822485207 429.1913214990138 378.698224852071 438.28007889546353 Q 369.6094674556213 447.3688362919132 355.4714003944773 447.3688362919132 L 96.94674556213018 447.3688362919132 L 96.94674556213018 447.3688362919132 Q 82.80867850098619 447.3688362919132 73.7199211045365 438.28007889546353 Q 64.63116370808679 429.1913214990138 64.63116370808679 415.05325443786984 L 64.63116370808679 156.5285996055227 L 64.63116370808679 156.5285996055227 Q 64.63116370808679 142.3905325443787 73.7199211045365 133.301775147929 Q 82.80867850098619 124.21301775147928 96.94674556213018 124.21301775147928 L 193.89349112426035 124.21301775147928 L 193.89349112426035 124.21301775147928 Q 208.03155818540435 124.21301775147928 217.12031558185404 115.12426035502959 Q 226.20907297830374 106.03550295857988 226.20907297830374 91.8974358974359 Q 226.20907297830374 77.75936883629191 217.12031558185404 68.6706114398422 Q 208.03155818540435 59.581854043392504 193.89349112426035 59.581854043392504 L 96.94674556213018 59.581854043392504 L 96.94674556213018 59.581854043392504 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
40
src/public/img/trash-can-darkred.svg
Normal file
40
src/public/img/trash-can-darkred.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- trash-can icon by Free Icons (https://free-icons.github.io/free-icons/) -->
|
||||
|
||||
<svg
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 512 512"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="trash-can-darkred.svg"
|
||||
inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="1.6855469"
|
||||
inkscape:cx="255.70336"
|
||||
inkscape:cy="256"
|
||||
inkscape:window-width="1978"
|
||||
inkscape:window-height="1088"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1" />
|
||||
<path
|
||||
d="M 167 18 Q 176 1 196 0 L 316 0 L 316 0 Q 336 1 345 18 L 352 32 L 352 32 L 448 32 L 448 32 Q 462 32 471 41 Q 480 50 480 64 Q 480 78 471 87 Q 462 96 448 96 L 64 96 L 64 96 Q 50 96 41 87 Q 32 78 32 64 Q 32 50 41 41 Q 50 32 64 32 L 160 32 L 160 32 L 167 18 L 167 18 Z M 64 128 L 448 128 L 64 128 L 448 128 L 448 448 L 448 448 Q 447 475 429 493 Q 411 511 384 512 L 128 512 L 128 512 Q 101 511 83 493 Q 65 475 64 448 L 64 128 L 64 128 Z M 160 192 Q 145 193 144 208 L 144 432 L 144 432 Q 145 447 160 448 Q 175 447 176 432 L 176 208 L 176 208 Q 175 193 160 192 L 160 192 Z M 256 192 Q 241 193 240 208 L 240 432 L 240 432 Q 241 447 256 448 Q 271 447 272 432 L 272 208 L 272 208 Q 271 193 256 192 L 256 192 Z M 352 192 Q 337 193 336 208 L 336 432 L 336 432 Q 337 447 352 448 Q 367 447 368 432 L 368 208 L 368 208 Q 367 193 352 192 L 352 192 Z"
|
||||
id="path1"
|
||||
style="fill:#800000;fill-opacity:1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
40
src/public/img/trash-can-lasecagold.svg
Normal file
40
src/public/img/trash-can-lasecagold.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- trash-can icon by Free Icons (https://free-icons.github.io/free-icons/) -->
|
||||
|
||||
<svg
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 512 512"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="trash-can-lasecagold.svg"
|
||||
inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="1.6855469"
|
||||
inkscape:cx="255.70336"
|
||||
inkscape:cy="256"
|
||||
inkscape:window-width="1978"
|
||||
inkscape:window-height="1088"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1" />
|
||||
<path
|
||||
d="M 167 18 Q 176 1 196 0 L 316 0 L 316 0 Q 336 1 345 18 L 352 32 L 352 32 L 448 32 L 448 32 Q 462 32 471 41 Q 480 50 480 64 Q 480 78 471 87 Q 462 96 448 96 L 64 96 L 64 96 Q 50 96 41 87 Q 32 78 32 64 Q 32 50 41 41 Q 50 32 64 32 L 160 32 L 160 32 L 167 18 L 167 18 Z M 64 128 L 448 128 L 64 128 L 448 128 L 448 448 L 448 448 Q 447 475 429 493 Q 411 511 384 512 L 128 512 L 128 512 Q 101 511 83 493 Q 65 475 64 448 L 64 128 L 64 128 Z M 160 192 Q 145 193 144 208 L 144 432 L 144 432 Q 145 447 160 448 Q 175 447 176 432 L 176 208 L 176 208 Q 175 193 160 192 L 160 192 Z M 256 192 Q 241 193 240 208 L 240 432 L 240 432 Q 241 447 256 448 Q 271 447 272 432 L 272 208 L 272 208 Q 271 193 256 192 L 256 192 Z M 352 192 Q 337 193 336 208 L 336 432 L 336 432 Q 337 447 352 448 Q 367 447 368 432 L 368 208 L 368 208 Q 367 193 352 192 L 352 192 Z"
|
||||
id="path1"
|
||||
style="fill:#e1c300;fill-opacity:1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
6
src/public/img/trash-can.svg
Normal file
6
src/public/img/trash-can.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<!-- trash-can icon by Free Icons (https://free-icons.github.io/free-icons/) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" fill="currentColor" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M 167 18 Q 176 1 196 0 L 316 0 L 316 0 Q 336 1 345 18 L 352 32 L 352 32 L 448 32 L 448 32 Q 462 32 471 41 Q 480 50 480 64 Q 480 78 471 87 Q 462 96 448 96 L 64 96 L 64 96 Q 50 96 41 87 Q 32 78 32 64 Q 32 50 41 41 Q 50 32 64 32 L 160 32 L 160 32 L 167 18 L 167 18 Z M 64 128 L 448 128 L 64 128 L 448 128 L 448 448 L 448 448 Q 447 475 429 493 Q 411 511 384 512 L 128 512 L 128 512 Q 101 511 83 493 Q 65 475 64 448 L 64 128 L 64 128 Z M 160 192 Q 145 193 144 208 L 144 432 L 144 432 Q 145 447 160 448 Q 175 447 176 432 L 176 208 L 176 208 Q 175 193 160 192 L 160 192 Z M 256 192 Q 241 193 240 208 L 240 432 L 240 432 Q 241 447 256 448 Q 271 447 272 432 L 272 208 L 272 208 Q 271 193 256 192 L 256 192 Z M 352 192 Q 337 193 336 208 L 336 432 L 336 432 Q 337 447 352 448 Q 367 447 368 432 L 368 208 L 368 208 Q 367 193 352 192 L 352 192 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
Loading…
Add table
Add a link
Reference in a new issue