extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: changes to stats page design

This commit is contained in:
alexsparkes 2023-03-15 21:27:02 +00:00
parent 8d57ce050d
commit f892c4c690
2 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/modals/main/scss/settings/_main.scss
View File

@ -132,22 +132,27 @@ h4 {
}
}
.statsGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 45px;
row-gap: 100px;
.leftPanel {
grid-area: 1 / 1 / 3 / 3;
}
.stats {
display: flex;
flex-flow: column;
gap: 30px;
width: 100%;
.rightPanel {
grid-area: 1 / 3 / 4 / 4;
display: flex;
flex-flow: column;
gap: 10px;
.statIcon {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.statGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
div {
display: flex;
flex-flow: column;
}
}
.subtitle {
text-transform: capitalize;
@ -200,7 +205,6 @@ h4 {
}
.achievements {
margin-top: 25px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;

144
src/components/modals/main/settings/sections/Stats.jsx
View File

@ -75,7 +75,7 @@ export default class Stats extends PureComponent {
const achievementElement = (key, name, achieved) => (
<div className="achievement">
<FaTrophy />
<div className={"achievementContent" + (achieved ? ' achieved' : '')}>
<div className={'achievementContent' + (achieved ? ' achieved' : '')}>
<span>{name}</span>
<span className="subtitle">
{achievementLanguage[localStorage.getItem('language')][key]}
@ -89,7 +89,84 @@ export default class Stats extends PureComponent {
<span className="mainTitle">
{variables.getMessage('modals.main.settings.sections.stats.title')}
</span>
<div className="statsGrid">
<div className="stats">
<div className="statSection rightPanel">
<div className="statIcon">
<MdShowChart />
</div>
<div className="statGrid">
<div>
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
</span>
<span>{this.state.stats['tabs-opened'] || 0}</span>
</div>
<div>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.backgrounds_favourited',
)}{' '}
</span>
<span>
{this.state.stats.feature
? this.state.stats.feature['background-favourite'] || 0
: 0}
</span>
</div>
<div>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.backgrounds_downloaded',
)}{' '}
</span>
<span>
{this.state.stats.feature
? this.state.stats.feature['background-download'] || 0
: 0}
</span>
</div>
<div>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.quotes_favourited',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}
</span>
</div>
<div>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.quicklinks_added',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}
</span>
</div>
<div>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.settings_changed',
)}{' '}
</span>
<span>
{this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}
</span>
</div>
<div>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.addons_installed',
)}{' '}
</span>
<span>
{this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}
</span>
</div>
</div>
</div>
<div className="statSection leftPanel">
<span className="title">
{variables.getMessage('modals.main.settings.sections.stats.achievements')}
@ -100,66 +177,11 @@ export default class Stats extends PureComponent {
count: this.getUnlockedCount() + '/' + this.state.achievements.length,
})}
</span>
<div className="achievements">
{this.state.achievements.map((achievement, index) => (
achievementElement(index, achievement.name, achievement.achieved)
))}
</div>
</div>
<div className="statSection rightPanel">
<MdShowChart />
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
</span>
<span>{this.state.stats['tabs-opened'] || 0}</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.backgrounds_favourited',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.backgrounds_downloaded',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.quotes_favourited',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.quicklinks_added',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.settings_changed',
)}{' '}
</span>
<span>
{this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.stats.sections.addons_installed',
)}{' '}
</span>
<span>
{this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}
</span>
<div className="achievements">
{this.state.achievements.map((achievement, index) =>
achievementElement(index, achievement.name, achievement.achieved),
)}
</div>
</div>
</>