mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-11 19:18:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: make marketplace item pages prettier

Browse Source 
and add setting values table on pre-set settings page.
This commit is contained in:
Isaac
2023-01-08 21:19:31 +00:00
parent b64a58f280
commit 19dc41fde1
19 changed files with 165 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/helpers/carousel/carousel.scss
View File

@@ -1,6 +1,6 @@
.carousel {
position: relative;
width: 350px;
width: 100%;
margin-left: 5px;
}
@@ -14,6 +14,7 @@
&.is-dragging {
cursor: grabbing;
}
border-radius: 15px !important;
}
.carousel_container {
@@ -45,7 +46,7 @@
.carousel_slide_inner {
position: relative;
overflow: hidden;
height: 190px;
height: 250px;
}
.carousel_button {

2
src/components/helpers/sharemodal/ShareModal.jsx
View File

@@ -25,7 +25,7 @@ function ShareModal({ modalClose, data }) {
return (
<div className="smallModal">
<div className="shareHeader">
<span className="title">{variables.getMessage('widgets.quote.share')}</span>
<p className="title">{variables.getMessage('widgets.quote.share')}</p>
<Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
<div className="close" onClick={modalClose}>
<MdClose />

147
src/components/modals/main/marketplace/Item.jsx
View File

@@ -53,9 +53,9 @@ export default class Item extends PureComponent {
}
}
incrementCount() {
if (this.state.count !== this.props.data.data.quotes.length) {
this.setState({ count: this.props.data.data.quotes.length });
incrementCount(type) {
if (this.state.count !== this.props.data.data[type].length) {
this.setState({ count: this.props.data.data[type].length });
} else {
this.setState({ count: 5 });
}
@@ -83,15 +83,6 @@ export default class Item extends PureComponent {
);
}
let type;
if (this.props.data.data.type === 'settings') {
type = 'Settings Pack';
} else if (this.props.data.data.type === 'quotes') {
type = 'Quote Pack';
} else if (this.props.data.data.type === 'photos') {
type = 'Photos Pack';
}
return (
<div id="item">
<Modal
@@ -124,6 +115,14 @@ export default class Item extends PureComponent {
</div>
</div>
) : null}
{this.props.data.data.settings ? (
<img
alt="product"
draggable="false"
src={iconsrc}
onClick={() => this.setState({ showLightbox: true })}
/>
) : null}
{this.props.data.data.quotes ? (
<>
<table>
@@ -139,7 +138,7 @@ export default class Item extends PureComponent {
))}
</table>
<div className="showMoreItems">
<span className="link" onClick={() => this.incrementCount()}>
<span className="link" onClick={() => this.incrementCount('quotes')}>
{this.state.count !== this.props.data.data.quotes.length ? (
<>
<MdExpandMore />{' '}
@@ -156,17 +155,42 @@ export default class Item extends PureComponent {
</>
) : null}
{this.props.data.data.settings ? (
<img
alt="product"
draggable="false"
src={iconsrc}
onClick={() => this.setState({ showLightbox: true })}
/>
<>
<table>
<tr>
<th>{variables.getMessage('modals.main.marketplace.product.setting')}</th>
<th>{variables.getMessage('modals.main.marketplace.product.value')}</th>
</tr>
{Object.entries(this.props.data.data.settings).slice(0, this.state.count).map(([key, value]) => (
<tr key={key}>
<td>{key}</td>
<td>{value}</td>
</tr>
))}
</table>
<div className="showMoreItems">
<span className="link" onClick={() => this.incrementCount('settings')}>
{this.state.count !== this.props.data.data.settings.length ? (
<>
<MdExpandMore />{' '}
{variables.getMessage('modals.main.marketplace.product.show_all')}
</>
) : (
<>
<MdExpandLess />{' '}
{variables.getMessage('modals.main.marketplace.product.show_less')}
</>
)}
</span>
</div>
</>
) : null}
<span className="title">
{variables.getMessage('modals.main.marketplace.product.description')}
</span>
<span dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
<div>
<p className="title">
{variables.getMessage('modals.main.marketplace.product.description')}
</p>
<p dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
</div>
<div className="moreInfo">
<div className="infoItem">
<MdBugReport />
@@ -242,45 +266,48 @@ export default class Item extends PureComponent {
</div>
</div>
</div>
<div className="itemInfo">
<img
alt="icon"
draggable="false"
src={variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url}
/>
{this.props.button}
<div className="iconButtons">
<Tooltip title={variables.getMessage('widgets.quote.share')} key="share">
<button onClick={() => this.setState({ shareModal: true })}>
<MdIosShare />
</button>
</Tooltip>
<Tooltip
title={variables.getMessage('modals.main.marketplace.product.buttons.report')}
key="report"
>
<button
onClick={() =>
window.open(
variables.constants.REPORT_ITEM +
this.props.data.display_name.split(' ').join('+'),
'_blank',
)
}
<div className="itemInfo" style={{ backgroundImage: `url("${variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url}")` }}>
<div className="front">
<img
className="icon"
alt="icon"
draggable="false"
src={variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url}
/>
{this.props.button}
<div className="iconButtons">
<Tooltip title={variables.getMessage('widgets.quote.share')} key="share">
<button onClick={() => this.setState({ shareModal: true })}>
<MdIosShare />
</button>
</Tooltip>
<Tooltip
title={variables.getMessage('modals.main.marketplace.product.buttons.report')}
key="report"
>
<MdFlag />
</button>
</Tooltip>
</div>
{this.props.data.data.collection ? (
<div className="inCollection">
<span className="subtitle">
{variables.getMessage('modals.main.marketplace.product.part_of')}
</span>
<span className="title">{this.props.data.data.collection}</span>
<button>{variables.getMessage('modals.main.marketplace.product.explore')}</button>
<button
onClick={() =>
window.open(
variables.constants.REPORT_ITEM +
this.props.data.display_name.split(' ').join('+'),
'_blank',
)
}
>
<MdFlag />
</button>
</Tooltip>
</div>
) : null}
{this.props.data.data.collection ? (
<div className="inCollection">
<span className="subtitle">
{variables.getMessage('modals.main.marketplace.product.part_of')}
</span>
<span className="title">{this.props.data.data.collection}</span>
<button>{variables.getMessage('modals.main.marketplace.product.explore')}</button>
</div>
) : null}
</div>
</div>
</div>
</div>

2
src/components/modals/main/marketplace/Items.jsx
View File

@@ -22,7 +22,7 @@ function Items({
collection.news
? { backgroundColor: collection.background_colour }
: {
backgroundImage: `linear-gradient(to right, rgba(0 ,0, 0, 0.9), rgba(0 ,0, 0, 0.7), transparent, rgba(0 ,0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection.img}')`,
backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection.img}')`,
}
}
>

2
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -339,7 +339,7 @@ export default class Marketplace extends PureComponent {
<div
className="collectionPage"
style={{
backgroundImage: `linear-gradient(to bottom, transparent, #2f3542), url('${this.state.collectionImg}')`,
backgroundImage: `linear-gradient(to bottom, transparent, black), url('${this.state.collectionImg}')`,
}}
>
<div className="content">

48
src/components/modals/main/scss/marketplace/_main.scss
View File

@@ -108,8 +108,9 @@
.itemShowcase {
display: flex;
flex-flow: column;
gap: 15px;
width: 50%;
gap: 25px;
width: 60%;
max-width: 650px;
.description {
max-lines: 3;
@@ -120,24 +121,47 @@
width: 100%;
height: auto;
}
table {
table-layout: fixed;
width: 100%;
max-width: 650px !important;
word-wrap: break-word !important;
}
}
.itemInfo {
display: flex;
flex-flow: column;
gap: 15px;
width: 170px;
box-sizing: border-box !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 15px;
width: 25%;
max-height: 450px;
.front {
padding: 20px;
height: 100%;
display: flex;
flex-flow: column;
gap: 15px;
width: 100%;
box-sizing: border-box !important;
border-radius: 12px 12px 0 0;
backdrop-filter: blur(40px) saturate(150%) brightness(75%);
-webkit-backdrop-filter: blur(40px) saturate(150%) brightness(75%);
@include themed() {
background-image: linear-gradient(to bottom, transparent, t($modal-background));
}
}
img {
.icon {
width: 100%;
height: auto;
border-radius: 12px;
@include themed() {
box-shadow: 0 0 0 3px t($modal-sidebarActive);
}
box-shadow: 0 5px 25px black;
}
.divider {
text-transform: uppercase;

2
src/components/modals/main/scss/marketplace/modules/_item.scss
View File

@@ -18,7 +18,7 @@ p.description {
justify-content: space-between;
flex-wrap: wrap;
width: calc(100% - 30px);
gap: 15px;
gap: 25px;
.items {
margin-top: 0 !important;

4
src/translations/de_DE.json
View File

@@ -530,7 +530,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Sieht aus, als ob Sie offline sind",

4
src/translations/en_GB.json
View File

@@ -524,7 +524,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Looks like you're offline",

4
src/translations/en_US.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Looks like you're offline",

4
src/translations/es.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Actualizar complemento",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Parece que estás desconectado",

2
src/translations/es_419.json
View File

@@ -547,6 +547,8 @@
"back": "Back",
"report": "Report"
},
"setting": "Setting",
"value": "Value",
"quote_warning": {
"title": "Advertencia",
"description": "¡Este paquete de citaciones solicita a servidores externos que pueden rastrearte!"

4
src/translations/fr.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Hors ligne",

4
src/translations/id_ID.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Perbarui Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Sepertinya Anda sedang dalam mode luring",

4
src/translations/nl.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Het lijkt er op dat je niet verbonden bent het internet",

4
src/translations/no.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Ser ut som at du er offiline",

4
src/translations/ru.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Похоже, что вы офлайн",

4
src/translations/tr_TR.json
View File

@@ -524,7 +524,9 @@
"update_addon": "Eklentiyi Güncelle",
"back": "Geri",
"report": "Bildir/Raporla"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "Çevrimdışı görünüyorsun.",

4
src/translations/zh_CN.json
View File

@@ -529,7 +529,9 @@
"update_addon": "Update Add-on",
"back": "Back",
"report": "Report"
}
},
"setting": "Setting",
"value": "Value"
},
"offline": {
"title": "您目前似乎离线",