diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-10-22 17:15:12 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-10-22 17:15:12 +0900 |
| commit | 967c655de0ec0330226a2e500f62400782e76a8b (patch) | |
| tree | ca88ecfe3aed902e1a3ba2ef0b03f3f871f6b0c5 | |
| parent | fix typo (diff) | |
| download | misskey-967c655de0ec0330226a2e500f62400782e76a8b.tar.gz misskey-967c655de0ec0330226a2e500f62400782e76a8b.tar.bz2 misskey-967c655de0ec0330226a2e500f62400782e76a8b.zip | |
tweak ui
| -rw-r--r-- | src/client/pages/instance/overview.vue | 55 |
1 files changed, 29 insertions, 26 deletions
diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue index d48d7d12a5..327a6492e6 100644 --- a/src/client/pages/instance/overview.vue +++ b/src/client/pages/instance/overview.vue @@ -3,19 +3,19 @@ <MkHeader :info="header"/> <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="label">Users</div> <div class="value _monospace"> {{ 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 class="number _panel"> <div class="label">Notes</div> <div class="value _monospace"> {{ 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> @@ -29,28 +29,31 @@ <!--<XMetrics/>--> - <div class="numbers"> - <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> + <MkFolder style="margin: var(--margin)"> + <template #header><i class="fas fa-info-circle"></i> {{ $ts.info }}</template> + <div class="cfcdecdf"> + <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> + </MkFolder> </div> </div> </template> @@ -78,6 +81,7 @@ export default defineComponent({ FormKeyValueView, MkInstanceStats, MkContainer, + MkFolder, XMetrics, }, @@ -153,11 +157,10 @@ export default defineComponent({ <style lang="scss" scoped> .edbbcaef { - > .numbers { + .cfcdecdf { display: grid; grid-gap: 8px; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); - margin: 16px; > .number { padding: 12px 16px; |