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

fix: responsive marketplace items (WIP)

Browse Source
This commit is contained in:
David Ralph
2021-08-18 23:13:26 +01:00
parent 13825c5525
commit 50b1d16171
2 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -159,20 +159,6 @@ export default class Marketplace extends PureComponent {
);
};
const featured = () => {
const openFeatured = () => {
window.stats.postEvent('marketplace', 'Featured clicked');
window.open(this.state.featured.buttonLink);
}
return (
<div className='featured' style={{ backgroundColor: this.state.featured.colour }}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
<button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>
</div>
);
}
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return errorMessage(<>
<WifiOff/>
@@ -185,6 +171,21 @@ export default class Marketplace extends PureComponent {
return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
}
const featured = () => {
const openFeatured = () => {
window.stats.postEvent('marketplace', 'Featured clicked');
window.open(this.state.featured.buttonLink);
}
return (
<div className='featured' style={{ backgroundColor: this.state.featured.colour }}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
<button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>
</div>
);
}
if (this.state.items.length === 0) {
return (
<>
@@ -195,7 +196,7 @@ export default class Marketplace extends PureComponent {
<p className='description'>{this.language.no_items}</p>
</>)}
</>
)
);
}
if (this.state.item.display_name) {

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

@@ -16,7 +16,7 @@
.items {
display: inline-grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(3, 1fr);
margin-top: 15px;
.item {
@@ -71,21 +71,15 @@
}
}
@media only screen and (max-width: 2100px) {
.items {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 1870px) {
@media (max-width: 1680px) and (min-width: 1500px) {
.items {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 1079px), (max-width: 1869px) {
@media (max-width: 1440px) {
.items {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(1, 1fr);
}
}