Minz/midari-profile-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styled for public alpha

Browse Source
This commit is contained in:
Jan Groß
2021-08-24 17:08:30 +02:00
parent 6b32a0de67
commit 3bd9b6f5f6
3 changed files with 115 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.vue
View File

@@ -2,7 +2,9 @@
<v-app> <v-app>
<v-app-bar <v-app-bar
app app
color="primary" fixed
elevation="5"
color="secondary"
dark dark
> >
<div class="d-flex align-center"> <div class="d-flex align-center">
@@ -10,12 +12,12 @@
alt="Vuetify Logo" alt="Vuetify Logo"
class="shrink mr-2" class="shrink mr-2"
contain contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" src="./assets/midari_studio_logo.png"
transition="scale-transition" transition="scale-transition"
width="40" width="90"
/> />
<span class="mr-2">Midari Profile Designer</span> <span class="mr-2">Midari Profile Studio</span>
</div> </div>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@@ -33,6 +35,13 @@
<v-main> <v-main>
<Designer/> <Designer/>
</v-main> </v-main>
<v-footer class="footer"
color="secondary"
elevation="5"
>
MPS v0.0.1 by Minzkraut - Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a>
</v-footer>
</v-app> </v-app>
</template> </template>
@@ -51,10 +60,19 @@ export default {
}; };
</script> </script>
<style> <style>
a {
margin-left: 5px;
}
.v-color-picker__alpha { .v-color-picker__alpha {
display: none; display: none;
} }
.v-color-picker__hue { .v-color-picker__hue {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.footer {
justify-content: center;
font-size: 12px;
}
</style> </style>

BIN
src/assets/midari_studio_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

150
src/components/Designer.vue
View File

@@ -1,10 +1,13 @@
<template> <template>
<div class="designer"> <div class="designer">
<h1>{{ msg }}</h1> <div id="intro">
<p> <h2>Welcome to Midari Profile Studio</h2>
HELO <p>
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. Customize your profile and run the commands in any channel that has access to the Midari Bot.<br>
</p> Your settings are not saved locally. Refreshing the page will reset all colors!<br>
This tool is still work in progress!
</p>
</div>
<div class="flex-container"> <!-- ToDo: fix container --> <div class="flex-container"> <!-- ToDo: fix container -->
<div id="preview" class="flex-item"> <div id="preview" class="flex-item">
<h3>Preview</h3> <h3>Preview</h3>
@@ -39,38 +42,35 @@
<v-color-picker style="margin: 0 auto;" <v-color-picker style="margin: 0 auto;"
v-model="backgroundColor" v-model="backgroundColor"
hide-inputs hide-inputs
canvas-height="300" canvas-height="200"
value="f2dadd"
dot-size="25" dot-size="25"
swatches-max-height="100" swatches-max-height="100"
elevation="5" elevation="5"
show-swatches
mode="hexa" mode="hexa"
></v-color-picker> ></v-color-picker>
</div>
<div class="flex-item">
<h3>Panels</h3> <h3>Panels</h3>
<v-color-picker style="margin: 0 auto;" <v-color-picker style="margin: 0 auto;"
v-model="panelColor" v-model="panelColor"
hide-inputs hide-inputs
canvas-height="300" canvas-height="200"
value="f2dadd"
dot-size="25" dot-size="25"
swatches-max-height="100" swatches-max-height="100"
elevation="5" elevation="5"
show-swatches
mode="hexa" mode="hexa"
></v-color-picker> ></v-color-picker>
</div> </div>
<div class="flex-item" id="commands"> <div class="flex-item" id="commands">
<h3>Commands</h3> <h3>Commands</h3>
<div class="command"> <div class="command">
<span class="code">mep b {{backgroundColor.substring(1,7)}}</span> Background
<div class="code">mep b {{backgroundColor.substring(1,7)}}</div>
<input type="hidden" id="bg" :value="'mep b '+backgroundColor.substring(1,7)"> <input type="hidden" id="bg" :value="'mep b '+backgroundColor.substring(1,7)">
<v-btn @click.stop.prevent="copyColor('bg')">Copy</v-btn> <v-btn @click.stop.prevent="copyColor('bg')">Copy</v-btn>
</div> </div>
<div class="command"> <div class="command">
<span class="code">mep t {{panelColor.substring(1,7)}}</span> Panels
<div class="code">mep t {{panelColor.substring(1,7)}}</div>
<input type="hidden" id="panel" :value="'mep t ' + panelColor.substring(1,7)"> <input type="hidden" id="panel" :value="'mep t ' + panelColor.substring(1,7)">
<v-btn @click.stop.prevent="copyColor('panel')">Copy</v-btn> <v-btn @click.stop.prevent="copyColor('panel')">Copy</v-btn>
</div> </div>
@@ -87,13 +87,13 @@ export default {
msg: String msg: String
}, },
data: ()=>({ data: ()=>({
panelColor: '00ff00', panelColor: '3D985D',
backgroundColor: '000fff' backgroundColor: '303144'
}), }),
methods: { methods: {
copyColor (qs) { copyColor (qs) {
let testingCodeToCopy = document.querySelector('#'+qs) let testingCodeToCopy = document.querySelector('#'+qs)
testingCodeToCopy.setAttribute('type', 'text') // 不是 hidden 才能複製 testingCodeToCopy.setAttribute('type', 'text')
testingCodeToCopy.select() testingCodeToCopy.select()
try { try {
@@ -112,8 +112,23 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
#intro {
h2 {
text-align: center;
}
p {
margin-bottom: 0;
}
width: 50%;
margin: 0 auto;
padding: 25px;
}
.profile-container { .profile-container {
width: 800px; width: 900px;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
resize: horizontal; resize: horizontal;
@@ -122,37 +137,37 @@ export default {
//height: calc(45vh - 16px); //height: calc(45vh - 16px);
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
}
.profile { .profile {
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 62.5%; padding-bottom: 62.5%;
background-color: red; background-color: red;
} }
.overlay-panels { .overlay-panels {
position:absolute; position:absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
} }
.overlay-icons { .overlay-icons {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
background-size:cover; background-size:cover;
background-image: url('../assets/midari_overlay.png'); background-image: url('../assets/midari_overlay.png');
} }
.user-image { .user-image {
position: absolute; position: absolute;
left: 1.5%; left: 1.6%;
top: 2.2%; top: 2.3%;
width: 14.5%; width: 14.5%;
border-radius: 100%; border-radius: 100%;
opacity: 100%; opacity: 100%;
}
} }
.flex-container { .flex-container {
@@ -163,7 +178,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
margin-bottom: 15px; margin-bottom: 25px;
} }
.flex-item { .flex-item {
@@ -175,17 +190,34 @@ export default {
//flex-basis: 50%; //flex-basis: 50%;
} }
#commands { #commands {
flex-basis: 30%; min-width: 300px;
align-self: flex-start;
.command {
position: relative;
margin: 20px;
}
button {
position: absolute;
right: 0px;
bottom: 6px;
height: 45px;
}
} }
.command {
margin: 20px; .code {
} background-color: #0a0a0a;
button { border-radius: 5px;
margin-left: 15px; padding: 11px;
} width: 100%;
g { display: inline-block;
fill: v-bind(panelColor); margin: 5px 0;
font-family: monospace;
} }
h3 { h3 {
margin: 40px 0 0; margin: 40px 0 0;
text-align: center; text-align: center;
@@ -201,4 +233,8 @@ li {
a { a {
color: #42b983; color: #42b983;
} }
p {
padding: 25px;
}
</style> </style>