StyAndCo/zappyzep
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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>
<div class="flex items-center">
<h1 class="flex-auto">Config for {{ guild.name }}</h1>
<div class="flex items-center flex-wrap">
<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">
<span v-if="saved">Saved!</span>
<span v-else>Save</span>
@ -125,10 +125,13 @@
this.fitEditorToWindow();
},
fitEditorToWindow() {
const mainContainer = document.querySelector('.dashboard');
const mainContainerStyles = window.getComputedStyle(mainContainer);
const editorElem = this.$refs.aceEditor.$el;
const newWidth = editorElem.parentNode.clientWidth;
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);
},
resizeEditor(newWidth, newHeight) {

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

@ -1,28 +1,30 @@
<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" />
<nav class="flex items-stretch 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">
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
<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-full md:flex-initial flex items-center">
<img class="w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
<router-link to="/dashboard">
<h1 class="flex-auto font-semibold">Zeppelin Dashboard</h1>
<h1 class="font-semibold">Zeppelin Dashboard</h1>
</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 class="flex-1 flex items-center justify-end">
<router-link
to="/docs"
role="menuitem"
class="py-1 px-2 rounded hover:bg-gray-700">
Go to documentation
</router-link>
<div class="flex-1 flex items-center flex-wrap">
<ul class="dashboard-nav list-none flex md: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 mr-2" v-on:click="logout()">Log out</a>
</ul>
<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>
</nav>

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

@ -1,6 +1,6 @@
.main-content {
& h1 {
@apply text-5xl;
@apply text-3xl;
@apply font-semibold;
@apply leading-none;
@apply mb-4;
@ -55,6 +55,14 @@
}
}
@screen lg {
.main-content {
& h1 {
@apply text-5xl;
}
}
}
@screen xl {
.main-content {
& a:not([class]),