improve alignment and font size

This commit is contained in:
LouisLam 2021-08-08 21:42:37 +08:00
parent 44391117ab
commit 6ca7ca4e7e
4 changed files with 19 additions and 15 deletions

View file

@ -5,6 +5,15 @@
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
} }
h1 {
font-size: 31px;
height: 38px;
}
h2 {
font-size: 26px;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }

View file

@ -3,7 +3,7 @@
<div class="row"> <div class="row">
<div class="col-12 col-md-5 col-xl-4"> <div class="col-12 col-md-5 col-xl-4">
<div v-if="! $root.isMobile"> <div v-if="! $root.isMobile">
<router-link to="/add" class="btn btn-primary"><font-awesome-icon icon="plus" /> Add New Monitor</router-link> <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
</div> </div>
<div v-if="showList" class="shadow-box list mb-4"> <div v-if="showList" class="shadow-box list mb-4">
@ -97,7 +97,6 @@ export default {
} }
.list { .list {
margin-top: 25px;
height: auto; height: auto;
min-height: calc(100vh - 240px); min-height: calc(100vh - 240px);

View file

@ -1,12 +1,10 @@
<template> <template>
<h1 class="my-3"> <h1 class="mb-3">{{ pageName }}</h1>
{{ pageName }}
</h1>
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="shadow-box"> <div class="shadow-box">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h2>General</h2> <h2 class="mb-2">General</h2>
<div class="my-3"> <div class="my-3">
<label for="type" class="form-label">Monitor Type</label> <label for="type" class="form-label">Monitor Type</label>
@ -67,7 +65,7 @@
</div> </div>
</div> </div>
<h2 class="my-3">Advanced</h2> <h2 class="mt-5 mb-2">Advanced</h2>
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check"> <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
<input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value=""> <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
@ -116,17 +114,15 @@
</div> </div>
</div> </div>
<div> <div class="mt-5 mb-1">
<button class="btn btn-primary" type="submit" :disabled="processing"> <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
Save
</button>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div v-if="$root.isMobile" class="mt-3" /> <div v-if="$root.isMobile" class="mt-3" />
<h2>Notifications</h2> <h2 class="mb-2">Notifications</h2>
<p v-if="$root.notificationList.length === 0"> <p v-if="$root.notificationList.length === 0">
Not available, please setup. Not available, please setup.
</p> </p>

View file

@ -6,7 +6,7 @@
<div class="shadow-box"> <div class="shadow-box">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h2>General</h2> <h2 class="mb-2">General</h2>
<form class="mb-3" @submit.prevent="saveGeneral"> <form class="mb-3" @submit.prevent="saveGeneral">
<div class="mb-3"> <div class="mb-3">
<label for="timezone" class="form-label">Timezone</label> <label for="timezone" class="form-label">Timezone</label>
@ -42,7 +42,7 @@
<template v-if="loaded"> <template v-if="loaded">
<template v-if="! settings.disableAuth"> <template v-if="! settings.disableAuth">
<h2>Change Password</h2> <h2 class="mt-5 mb-2">Change Password</h2>
<form class="mb-3" @submit.prevent="savePassword"> <form class="mb-3" @submit.prevent="savePassword">
<div class="mb-3"> <div class="mb-3">
<label for="current-password" class="form-label">Current Password</label> <label for="current-password" class="form-label">Current Password</label>
@ -70,7 +70,7 @@
</form> </form>
</template> </template>
<h2>Advanced</h2> <h2 class="mt-5 mb-2">Advanced</h2>
<div class="mb-3"> <div class="mb-3">
<button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button> <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button>