Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-11-22 04:05:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Center and shrink glyph showcase for single glyphs

Browse Source
This commit is contained in:
SpectralFlame 2022-10-13 21:37:19 -05:00 committed by cyip92
parent 6aebd0baef
commit ea3955ab36
2 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/stylesheets/glyphs.css
View File

@ -1002,23 +1002,6 @@
padding: 1rem;
}
.c-glyph-choice-container {
display: flex;
flex-flow: row wrap;
width: 74rem;
}
.c-glyph-choice-single-glyph {
display: flex;
flex-direction: row;
width: 36rem;
height: 12rem;
justify-content: space-evenly;
align-items: center;
border-radius: var(--var-border-radius, 0.5rem);
margin: 0.5rem;
}
.c-glyph-choice-icon {
display: flex;
flex-direction: column;

31
src/components/modals/GlyphShowcasePanelModal.vue
View File

@ -52,6 +52,12 @@ export default {
}
return maxEffects;
},
containerClass() {
return {
"c-glyph-choice-container": true,
"c-glyph-choice-container-single": this.glyphs.length === 1,
};
}
},
created() {
this.on$(this.closeOn, this.emitClose);
@ -85,7 +91,7 @@ export default {
:glyph-set="glyphs"
:force-color="true"
/>
<div class="c-glyph-choice-container">
<div :class="containerClass">
<GlyphShowcasePanelEntry
v-for="(glyph, idx) in glyphs"
:key="idx"
@ -100,3 +106,26 @@ export default {
</div>
</ModalWrapper>
</template>
<style scoped>
.c-glyph-choice-container {
display: flex;
flex-flow: row wrap;
width: 74rem;
}
.c-glyph-choice-container-single {
width: 37rem;
}
.c-glyph-choice-single-glyph {
display: flex;
flex-direction: row;
width: 36rem;
height: 12rem;
justify-content: space-evenly;
align-items: center;
border-radius: var(--var-border-radius, 0.5rem);
margin: 0.5rem;
}
</style>