StyAndCo/zeppelin
3
0
Fork 0
mirror of https://github.com/ZeppelinBot/Zeppelin.git synced 2025-03-16 14:11:50 +00:00
Code Releases Activity

dashboard: improve mobile-friendliness

Browse source
This commit is contained in:
Dragory 2021-04-10 14:03:42 +03:00
parent 40d9926718
commit 5e77976dec
No known key found for this signature in database
GPG key ID: 5F387BA66DF8AAC1
3 changed files with 34 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
dashboard/src/components/dashboard/GuildConfigEditor.vue
View file

@ -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) {

36
dashboard/src/components/dashboard/Layout.vue
View file

@ -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>

10
dashboard/src/style/content.pcss
View file

@ -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]),