Update tailwind and fix configuration

This commit is contained in:
TwinProduction 2021-04-06 23:39:53 -04:00
parent e46acb885c
commit f60eee86ee
10 changed files with 1061 additions and 172 deletions

1191
web/app/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,23 +8,23 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9.8.6",
"core-js": "^3.6.5",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "^2.1.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"
},
"eslintConfig": {
"root": true,

View File

@ -1,5 +1,8 @@
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
require('tailwindcss')
tailwindcss('./tailwind.config.js'),
require('autoprefixer'),
],
};

View File

@ -1,10 +1,10 @@
<template>
<div class="mt-3 flex">
<div class="flex-1">
<button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border text-monospace text-gray-500">&lt;</button>
<button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&lt;</button>
</div>
<div class="flex-1 text-right">
<button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border text-monospace text-gray-500">&gt;</button>
<button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&gt;</button>
</div>
</div>
</template>

View File

@ -2,7 +2,7 @@
<div :class="services.length === 0 ? 'mt-3' : 'mt-4'">
<slot v-if="name !== 'undefined'">
<div class="service-group pt-2 border" @click="toggleGroup">
<h5 class='text-monospace text-gray-400 text-xl font-medium pb-2 px-3'>
<h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3'>
<span v-if="healthy" class='text-green-600'>&#10003;</span>
<span v-else class='text-yellow-400'>~</span>
{{ name }}

View File

@ -5,7 +5,3 @@
.bg-success {
background-color: #28a745;
}
.text-monospace {
font-family: Consolas, monospace;
}

View File

@ -4,7 +4,7 @@
</router-link>
<div>
<slot v-if="serviceStatus">
<h1 class="text-xl xl:text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
<h1 class="text-xl xl:text-3xl font-mono text-gray-400">RECENT CHECKS</h1>
<hr class="mb-4" />
<Service
:data="serviceStatus"
@ -15,7 +15,7 @@
<Pagination @page="changePage"/>
</slot>
<div v-if="uptime" class="mt-12">
<h1 class="text-xl xl:text-3xl text-monospace text-gray-400">UPTIME</h1>
<h1 class="text-xl xl:text-3xl font-mono text-gray-400">UPTIME</h1>
<hr />
<div class="flex space-x-4 text-center text-xl xl:text-2xl mt-3">
<div class="flex-1">
@ -32,7 +32,7 @@
</div>
</div>
<hr class="mt-1"/>
<h3 class="text-xl text-monospace text-gray-400 mt-1 text-right">BADGES</h3>
<h3 class="text-xl font-mono text-gray-400 mt-1 text-right">BADGES</h3>
<div v-if="serviceStatus && serviceStatus.key" class="flex space-x-4 text-center text-2xl mt-6 relative bottom-12">
<div class="flex-1">
<img :src="generateBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
@ -46,7 +46,7 @@
</div>
</div>
<div>
<h1 class="text-xl xl:text-3xl text-monospace text-gray-400 mt-4">EVENTS</h1>
<h1 class="text-xl xl:text-3xl font-mono text-gray-400 mt-4">EVENTS</h1>
<hr class="mb-4" />
<div>
<slot v-for="event in events" :key="event">

View File

@ -2,6 +2,9 @@ module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
'mono': ['Consolas', 'Monaco', '"Courier New"', 'monospace']
},
extend: {},
},
variants: {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long