mirror of
https://github.com/ZeppelinBot/Zeppelin.git
synced 2025-03-16 14:11:50 +00:00
dashboard: improve mobile-friendliness
This commit is contained in:
parent
40d9926718
commit
5e77976dec
3 changed files with 34 additions and 21 deletions
|
@ -8,8 +8,8 @@
|
||||||
<div v-for="error in errors">{{ error }}</div>
|
<div v-for="error in errors">{{ error }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center flex-wrap">
|
||||||
<h1 class="flex-auto">Config for {{ guild.name }}</h1>
|
<h1 class="flex-full md:flex-auto">Config for {{ guild.name }}</h1>
|
||||||
<button v-if="!saving" class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700" v-on:click="save">
|
<button v-if="!saving" class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700" v-on:click="save">
|
||||||
<span v-if="saved">Saved!</span>
|
<span v-if="saved">Saved!</span>
|
||||||
<span v-else>Save</span>
|
<span v-else>Save</span>
|
||||||
|
@ -125,10 +125,13 @@
|
||||||
this.fitEditorToWindow();
|
this.fitEditorToWindow();
|
||||||
},
|
},
|
||||||
fitEditorToWindow() {
|
fitEditorToWindow() {
|
||||||
|
const mainContainer = document.querySelector('.dashboard');
|
||||||
|
const mainContainerStyles = window.getComputedStyle(mainContainer);
|
||||||
|
|
||||||
const editorElem = this.$refs.aceEditor.$el;
|
const editorElem = this.$refs.aceEditor.$el;
|
||||||
const newWidth = editorElem.parentNode.clientWidth;
|
const newWidth = editorElem.parentNode.clientWidth;
|
||||||
const rect = editorElem.getBoundingClientRect();
|
const rect = editorElem.getBoundingClientRect();
|
||||||
const newHeight = Math.round(window.innerHeight - rect.top - 48);
|
const newHeight = Math.round(window.innerHeight - rect.top - parseInt(mainContainerStyles.paddingLeft, 10));
|
||||||
this.resizeEditor(newWidth, newHeight);
|
this.resizeEditor(newWidth, newHeight);
|
||||||
},
|
},
|
||||||
resizeEditor(newWidth, newHeight) {
|
resizeEditor(newWidth, newHeight) {
|
||||||
|
|
|
@ -1,28 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard container mx-auto px-6 py-6">
|
<div class="dashboard container mx-auto px-2 py-2 md:px-6 md:py-6">
|
||||||
<Title title="Zeppelin - Dashboard" />
|
<Title title="Zeppelin - Dashboard" />
|
||||||
|
|
||||||
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
|
<nav class="flex items-stretch flex-wrap pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
|
||||||
<div class="flex-initial flex items-center">
|
<div class="flex-full md:flex-initial flex items-center">
|
||||||
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
<img class="w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||||
|
|
||||||
<router-link to="/dashboard">
|
<router-link to="/dashboard">
|
||||||
<h1 class="flex-auto font-semibold">Zeppelin Dashboard</h1>
|
<h1 class="font-semibold">Zeppelin Dashboard</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<ul class="dashboard-nav list-none flex ml-8">
|
|
||||||
<router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
|
|
||||||
<a href="javascript:void(0)" class="navbar-item hover:text-red-400" v-on:click="logout()">Log out</a>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-1 flex items-center justify-end">
|
<div class="flex-1 flex items-center flex-wrap">
|
||||||
<router-link
|
<ul class="dashboard-nav list-none flex md:ml-8">
|
||||||
to="/docs"
|
<router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
|
||||||
role="menuitem"
|
<a href="javascript:void(0)" class="navbar-item hover:text-red-400 mr-2" v-on:click="logout()">Log out</a>
|
||||||
class="py-1 px-2 rounded hover:bg-gray-700">
|
</ul>
|
||||||
Go to documentation
|
|
||||||
</router-link>
|
<div class="flex-1 flex items-center md:justify-end">
|
||||||
|
<router-link
|
||||||
|
to="/docs"
|
||||||
|
role="menuitem"
|
||||||
|
class="py-1 px-2 rounded hover:bg-gray-700">
|
||||||
|
Go to documentation
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.main-content {
|
.main-content {
|
||||||
& h1 {
|
& h1 {
|
||||||
@apply text-5xl;
|
@apply text-3xl;
|
||||||
@apply font-semibold;
|
@apply font-semibold;
|
||||||
@apply leading-none;
|
@apply leading-none;
|
||||||
@apply mb-4;
|
@apply mb-4;
|
||||||
|
@ -55,6 +55,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
.main-content {
|
||||||
|
& h1 {
|
||||||
|
@apply text-5xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@screen xl {
|
@screen xl {
|
||||||
.main-content {
|
.main-content {
|
||||||
& a:not([class]),
|
& a:not([class]),
|
||||||
|
|
Loading…
Add table
Reference in a new issue