happyDomain/happyDomain
happyDomain/happyDomain
1
0
Fork 0
Code Issues 1 Pull Requests 7 Releases Activity

Improve visual aspect

Browse Source
This commit is contained in:
nemunaire 2021-01-03 22:43:39 +01:00
parent 0c7bdb7e1d
commit 8558f701d6
9 changed files with 72 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="bg-dark">
<html lang="en" style="height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

7
htdocs/src/App.vue
View File

@ -38,11 +38,6 @@
<b-navbar-brand class="navbar-brand" to="/">
<h-logo height="25" />
</b-navbar-brand>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#adminMenu" aria-controls="adminMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" />
</button>
<b-navbar-toggle target="nav-collapse" />
<b-navbar-nav v-if="user_isLogged" class="ml-auto">
<b-nav-form>
@ -101,7 +96,7 @@
</b-container>
</b-navbar>
<router-view style="min-height: 80vh" />
<router-view class="flex-grow-1" />
<b-toaster name="b-toaster-content-right" style="position: fixed; top: 70px; right: 0; z-index: 1042; min-width: 30vw;" />

12
htdocs/src/app.scss
View File

@ -18,6 +18,18 @@ $font-family-monospace: 'Fantasque Sans Mono', SFMono-Regular, Menlo, Monaco, Co
@import '~bootstrap';
@import '~bootstrap-vue';
body {
display: flex;
flex-direction: column;
min-height:100%;
}
#app {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between !important;
}
nav.navbar {
box-shadow: 0 0px 3px 0 $primary;
border-bottom: 1px solid $primary;

2
htdocs/src/components/hSubdomainList.vue
View File

@ -83,7 +83,7 @@
<b-input v-model="modal.alias" autofocus class="text-monospace" placeholder="new.subdomain" :state="modal.newDomainState" @update="validateNewAlias" />
</b-input-group>
<div v-show="modal.alias" class="mt-3 text-center">
{{ $t('domains.alias-creation-sample') }}
{{ $t('domains.alias-creation-sample') }}<br>
<span class="text-monospace text-no-wrap">{{ modal.alias | fqdn(domain.domain) }}</span>
<b-icon class="mr-1 ml-1" icon="arrow-right" />
<span class="text-monospace text-no-wrap">{{ modal.dn | fqdn(domain.domain) }}</span>

2
htdocs/src/views/onboarding.vue
View File

@ -58,7 +58,7 @@
<h-logo height="19" />
</template>
<template #first-step>
<span v-if="noSource">{{ $t('onboarding.suggest-source') }}</span><i18n path="onboarding.choose-configured" tag="span">
<span v-if="noSource">{{ $t('onboarding.suggest-source') }}</span><i18n v-else path="onboarding.choose-configured" tag="span">
<router-link to="/sources/new">
{{ $t('onboarding.add-one') }}
</router-link>

6
htdocs/src/views/source-new-state.vue
View File

@ -32,11 +32,11 @@
-->
<template>
<b-container style="min-height: inherit" fluid>
<div class="d-flex flex-column">
<div v-if="isLoading" class="mt-5 d-flex justify-content-center align-items-center">
<b-spinner variant="primary" :label="$t('common.spinning')" class="mr-3" /> {{ $t('wait.retrieving-setting') }}
</div>
<b-row v-else style="min-height: inherit">
<b-row v-else class="flex-grow-1">
<b-col lg="4" md="5" class="bg-light">
<div class="text-center mb-3">
<img :src="'/api/source_specs/' + $route.params.provider + '/icon.png'" :alt="sourceSpecs[$route.params.provider].name" style="max-width: 100%; max-height: 10em">
@ -62,7 +62,7 @@
</b-form>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>

8
htdocs/src/views/source-new.vue
View File

@ -32,14 +32,14 @@
-->
<template>
<b-container fluid class="mt-4">
<h1 class="text-center mb-4">
<b-container class="d-flex flex-column mt-4" fluid>
<h1 class="text-center mb-3">
<button type="button" class="btn font-weight-bolder" @click="$router.go(-1)">
<b-icon icon="chevron-left" />
</button>
<i18n path="source.select-source" />
</h1>
<hr style="margin-bottom:0">
<router-view />
<hr class="mt-0 mb-0">
<router-view class="flex-grow-1" />
</b-container>
</template>

8
htdocs/src/views/source.vue
View File

@ -32,16 +32,16 @@
-->
<template>
<b-container fluid class="mt-4">
<h1 class="text-center mb-4">
<b-container class="d-flex flex-column mt-4" fluid>
<h1 class="text-center mb-3">
<button type="button" class="btn font-weight-bolder" @click="$router.go(-1)">
<b-icon icon="chevron-left" />
</button>
{{ $t('wait.updating') }} <em v-if="mySource">{{ mySource._comment }}</em>
</h1>
<hr style="margin-bottom:0">
<hr class="mt-0 mb-0">
<b-row style="min-height: inherit">
<b-row class="flex-grow-1">
<b-col v-if="sourceSpecsSelected && sources" lg="4" md="5" class="bg-light">
<div class="text-center mb-3">
<img :src="'/api/source_specs/' + sourceSpecsSelected + '/icon.png'" :alt="sources[sourceSpecsSelected].name" style="max-width: 100%; max-height: 10em">

88
htdocs/src/views/tools-client.vue
View File

@ -32,12 +32,12 @@
-->
<template>
<b-container class="mt-3" :fluid="responses?true:false">
<h1 class="text-center mb-3">
{{ $t('menu.dns-resolver') }}
</h1>
<b-row>
<b-col :offset-md="responses?0:2" :md="responses?4:8" :class="responses?'bg-light':'' + 'pb-5 pt-4'">
<b-container class="d-flex flex-column" :fluid="responses?true:false">
<b-row class="flex-grow-1">
<b-col :offset-md="responses?0:2" :md="responses?4:8" :class="(responses?'bg-light ':'') + 'pt-4 pb-5 sticky-top'">
<h1 class="text-center mb-3">
{{ $t('menu.dns-resolver') }}
</h1>
<form class="pt-3 pb-5" @submit.stop.prevent="submitRequest">
<b-form-group
id="input-domain"
@ -140,7 +140,7 @@
</div>
</form>
</b-col>
<b-col v-if="responses" md="8">
<b-col v-if="responses" md="8" class="pt-2">
<div v-for="(rrs,type) in responseByType" :key="type">
<h3>{{ $tc('common.records', rrs.length, { type: $options.filters.nsrrtype(type) }) }}</h3>
<table class="table table-hover table-sm">
@ -167,42 +167,6 @@ export default {
hRecordHead: () => import('@/components/hRecordHead')
},
watch: {
$route (n) {
if (n.params.domain && n.params.domain !== this.form.domain) {
this.form.domain = n.params.domain
this.submitRequest()
}
}
},
computed: {
responseByType () {
const ret = {}
for (const i in this.filteredResponses) {
if (!ret[this.filteredResponses[i].Hdr.Rrtype]) {
ret[this.filteredResponses[i].Hdr.Rrtype] = []
}
ret[this.filteredResponses[i].Hdr.Rrtype].push(this.filteredResponses[i])
}
return ret
},
filteredResponses () {
if (!this.responses) {
return []
}
if (this.showDNSSEC) {
return this.responses
} else {
return this.responses.filter(rr => (rr.Hdr.Rrtype !== 46 && rr.Hdr.Rrtype !== 47 && rr.Hdr.Rrtype !== 50))
}
}
},
data: function () {
return {
request_pending: false,
@ -276,6 +240,44 @@ export default {
}
},
computed: {
responseByType () {
const ret = {}
for (const i in this.filteredResponses) {
if (!ret[this.filteredResponses[i].Hdr.Rrtype]) {
ret[this.filteredResponses[i].Hdr.Rrtype] = []
}
ret[this.filteredResponses[i].Hdr.Rrtype].push(this.filteredResponses[i])
}
return ret
},
filteredResponses () {
if (!this.responses) {
return []
}
if (this.showDNSSEC) {
return this.responses
} else {
return this.responses.filter(rr => (rr.Hdr.Rrtype !== 46 && rr.Hdr.Rrtype !== 47 && rr.Hdr.Rrtype !== 50))
}
}
},
watch: {
$route (n) {
if (n.params.domain && (!this.response || n.params.domain !== this.form.domain)) {
this.form.domain = n.params.domain
this.submitRequest()
} else if (!n.params.domain && this.responses) {
this.responses = null
}
}
},
mounted () {
if (this.$route.params.domain) {
this.form.domain = this.$route.params.domain