mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 07:35:57 +09:00
Code

tweak ui

Browse Source
This commit is contained in:
syuilo 2021-10-22 17:15:12 +09:00
parent 4bb19b9596
commit 967c655de0
1 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/client/pages/instance/overview.vue
View File

@ -3,19 +3,19 @@
<MkHeader :info="header"/> <MkHeader :info="header"/>
<div class="edbbcaef"> <div class="edbbcaef">
<div class="numbers" v-if="stats"> <div v-if="stats" class="cfcdecdf" style="margin: var(--margin)">
<div class="number _panel"> <div class="number _panel">
<div class="label">Users</div> <div class="label">Users</div>
<div class="value _monospace"> <div class="value _monospace">
{{ number(stats.originalUsersCount) }} {{ number(stats.originalUsersCount) }}
<MkNumberDiff v-if="usersComparedToThePrevDay" class="diff" :value="usersComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff> <MkNumberDiff v-if="usersComparedToThePrevDay != null" class="diff" :value="usersComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
</div> </div>
</div> </div>
<div class="number _panel"> <div class="number _panel">
<div class="label">Notes</div> <div class="label">Notes</div>
<div class="value _monospace"> <div class="value _monospace">
{{ number(stats.originalNotesCount) }} {{ number(stats.originalNotesCount) }}
<MkNumberDiff v-if="notesComparedToThePrevDay" class="diff" :value="notesComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff> <MkNumberDiff v-if="notesComparedToThePrevDay != null" class="diff" :value="notesComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
</div> </div>
</div> </div>
</div> </div>
@ -29,28 +29,31 @@
<!--<XMetrics/>--> <!--<XMetrics/>-->
<div class="numbers"> <MkFolder style="margin: var(--margin)">
<div class="number _panel"> <template #header><i class="fas fa-info-circle"></i> {{ $ts.info }}</template>
<div class="label">Misskey</div> <div class="cfcdecdf">
<div class="value _monospace">{{ version }}</div> <div class="number _panel">
<div class="label">Misskey</div>
<div class="value _monospace">{{ version }}</div>
</div>
<div class="number _panel" v-if="serverInfo">
<div class="label">Node.js</div>
<div class="value _monospace">{{ serverInfo.node }}</div>
</div>
<div class="number _panel" v-if="serverInfo">
<div class="label">PostgreSQL</div>
<div class="value _monospace">{{ serverInfo.psql }}</div>
</div>
<div class="number _panel" v-if="serverInfo">
<div class="label">Redis</div>
<div class="value _monospace">{{ serverInfo.redis }}</div>
</div>
<div class="number _panel">
<div class="label">Vue</div>
<div class="value _monospace">{{ vueVersion }}</div>
</div>
</div> </div>
<div class="number _panel" v-if="serverInfo"> </MkFolder>
<div class="label">Node.js</div>
<div class="value _monospace">{{ serverInfo.node }}</div>
</div>
<div class="number _panel" v-if="serverInfo">
<div class="label">PostgreSQL</div>
<div class="value _monospace">{{ serverInfo.psql }}</div>
</div>
<div class="number _panel" v-if="serverInfo">
<div class="label">Redis</div>
<div class="value _monospace">{{ serverInfo.redis }}</div>
</div>
<div class="number _panel">
<div class="label">Vue</div>
<div class="value _monospace">{{ vueVersion }}</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -78,6 +81,7 @@ export default defineComponent({
FormKeyValueView, FormKeyValueView,
MkInstanceStats, MkInstanceStats,
MkContainer, MkContainer,
MkFolder,
XMetrics, XMetrics,
}, },
@ -153,11 +157,10 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.edbbcaef { .edbbcaef {
> .numbers { .cfcdecdf {
display: grid; display: grid;
grid-gap: 8px; grid-gap: 8px;
grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
margin: 16px;
> .number { > .number {
padding: 12px 16px; padding: 12px 16px;