Update global HTML architecture
This commit is contained in:
parent
8b596c0f6e
commit
5fcb946d10
GPG key ID:
ABBB2CAC6855599F
18 changed files with 1689 additions and 1639 deletions
|
|
@ -6,23 +6,36 @@ const {t} = useI18n({useScope: 'local'});
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div id="appflex">
|
||||
<div id="page">
|
||||
<div class="action-bar">
|
||||
<router-view name="ActionBar"></router-view>
|
||||
</div>
|
||||
<main id="content">
|
||||
<ReloadPWA/>
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
<header>
|
||||
<router-link to='/apps'>
|
||||
<img alt="" src="./assets/logo.svg"/>
|
||||
{{ t('home.apps') }}
|
||||
</div>
|
||||
<div id="sidebar" class="sidebar">
|
||||
<router-view name="Sidebar"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<header class="navbar">
|
||||
<router-link :to="{name: 'Apps'}" class="home-link">
|
||||
<img id="main-logo" alt="" src="./assets/logo.svg"/>
|
||||
<span id="site-name">{{ t('home.apps') }}</span>
|
||||
</router-link>
|
||||
<div class="links">
|
||||
<router-view name="Links"></router-view>
|
||||
<select v-model="$i18n.locale" @change="$i18n.loadMessages()">
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
<option value="nl">Nederlands</option>
|
||||
</select>
|
||||
</div>
|
||||
</header>
|
||||
<footer>
|
||||
<footer class="footer">
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
|
|
@ -42,8 +55,5 @@ const {t} = useI18n({useScope: 'local'});
|
|||
@import './assets/css/theme-dark-hc.less';
|
||||
</style>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<i18n lang="json" locale="en" src="./locale/en.json"/>
|
||||
<i18n lang="json" locale="fr" src="./locale/fr.json"/>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ pre {
|
|||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.content {
|
||||
#content {
|
||||
td.linenos, td.code {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -85,9 +85,11 @@ body {
|
|||
#app {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: 100vh;
|
||||
|
||||
.navbar {
|
||||
> .navbar {
|
||||
z-index: 20;
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -124,7 +126,8 @@ body {
|
|||
}
|
||||
|
||||
}
|
||||
footer.footer {
|
||||
> footer.footer {
|
||||
order: 3;
|
||||
padding: 0.3em;;
|
||||
box-sizing: border-box;
|
||||
border-top: 0.3em solid var(--FoBClr);
|
||||
|
|
@ -146,18 +149,23 @@ body {
|
|||
list-style-position: outside;
|
||||
}
|
||||
|
||||
#appflex {
|
||||
> #appflex {
|
||||
order: 2;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-grow: 1;
|
||||
> #sidebar {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.page {
|
||||
> #page {
|
||||
width: 100%;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content:not(.custom) {
|
||||
#content:not(.custom) {
|
||||
.wrapper();
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
|
|
@ -172,7 +180,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.content.custom {
|
||||
#content.custom {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
img {
|
||||
|
|
@ -299,7 +307,7 @@ th, td {
|
|||
|
||||
.theme-container {
|
||||
&.no-navbar {
|
||||
.content:not(.custom) > h1, h2, h3, h4, h5, h6 {
|
||||
#content:not(.custom) > h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -593,19 +601,13 @@ button, a.btn, a:visited.btn {
|
|||
}
|
||||
}
|
||||
|
||||
#mainlogo {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
img#main-logo {
|
||||
text-align: center;
|
||||
width: 2rem;
|
||||
border-radius: 50%;
|
||||
width: 90%;
|
||||
max-width: 15ex;
|
||||
}
|
||||
}
|
||||
|
||||
.content:not(.custom) {
|
||||
#content:not(.custom) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
|
|
@ -704,7 +706,7 @@ blockquote h2 {
|
|||
}
|
||||
|
||||
/* THE SECTION BELOW FIXES A SPHINX-MERMAID OPACITY PROBLEM */
|
||||
.content .section {
|
||||
#content .section {
|
||||
opacity: 1.0 !important;
|
||||
}
|
||||
.section {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
font-size: 1.1rem;
|
||||
width: var(--sidebarWidth);
|
||||
}
|
||||
.page {
|
||||
#page {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
transition: transform .2s ease;
|
||||
margin-right: calc(0rem - var(--sidebarWidth));
|
||||
}
|
||||
.page {
|
||||
#page {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
h1 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
.content {
|
||||
#content {
|
||||
div[class*="language-"] {
|
||||
margin: 0.85rem -1.5rem;
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
main.content {
|
||||
main#content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
margin-right: 0.8rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.site-name {
|
||||
#site-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: var(--NvTClr);
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.page {
|
||||
#page {
|
||||
padding-top: 0rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
|
@ -433,7 +433,7 @@ a.sidebar-link, a:visited.sidebar-link {
|
|||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
.page {
|
||||
#page {
|
||||
padding-left: 0;
|
||||
}
|
||||
img.align-right, figure.align-right {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.content .section {
|
||||
#content .section {
|
||||
margin-bottom: 0;
|
||||
&:hover {
|
||||
.headerlink {
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
#content {
|
||||
// FIXME: sphinx should provide a citation-reference?
|
||||
& a:focus {
|
||||
// remove outline because padding mess it up
|
||||
|
|
@ -41,7 +41,7 @@ ul.page-nav {
|
|||
}
|
||||
}
|
||||
|
||||
.body-header {
|
||||
.action-bar {
|
||||
display: flex;
|
||||
& ul.page-nav {
|
||||
flex-grow: 1;
|
||||
|
|
@ -89,16 +89,16 @@ ul.breadcrumbs {
|
|||
|
||||
|
||||
/** pygments style **/
|
||||
.content .highlight {
|
||||
#content .highlight {
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
// force background color from pygments
|
||||
.content .highlight pre {
|
||||
#content .highlight pre {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.content .highlighted {
|
||||
#content .highlighted {
|
||||
background-color: var(--AClr); //#fbe54e;
|
||||
font-weight: bold;
|
||||
padding: 0 4px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ const {t} = useI18n({useScope: 'local'});
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="admonition danger" v-if="$route.params.errorPath" role="alert">
|
||||
<p class="admonition-title">{{ t('apps.not_found') }}</p>
|
||||
<p>
|
||||
{{ t('apps.route_not_found', {route: $route.params.errorPath.join('/')}) }}
|
||||
</p>
|
||||
</div>
|
||||
<h1>{{ t('apps.communication') }}</h1>
|
||||
<h1>{{ t('apps.accounting') }}</h1>
|
||||
<h1>{{ t('apps.ordering') }}</h1>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<template>
|
||||
<div v-if="offlineReady || needRefresh" role="alert">
|
||||
<div class="admonition warning">
|
||||
<span v-if="offlineReady">
|
||||
<p v-if="offlineReady">
|
||||
{{ t('pwa.ready') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ t('pwa.new_content') }}
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<div class="">
|
||||
<button v-if="needRefresh" @click="updateServiceWorker()">
|
||||
{{ t('pwa.reload') }}
|
||||
|
|
@ -17,6 +16,7 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
{
|
||||
"apps": {
|
||||
"communication": "",
|
||||
"accounting": "",
|
||||
"ordering": "",
|
||||
"stocks": "",
|
||||
"monitoring": ""
|
||||
"communication": "Communication",
|
||||
"accounting": "Accounting",
|
||||
"ordering": "Ordering",
|
||||
"stocks": "Stocks",
|
||||
"monitoring": "Monitoring",
|
||||
"not_found": "Page not found",
|
||||
"route_not_found": "Url {route} does not exist."
|
||||
},
|
||||
"home": {
|
||||
"apps": "Applications"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
"accounting": "Comptabilité",
|
||||
"ordering": "Commande",
|
||||
"stocks": "Stocks",
|
||||
"monitoring": "Veille"
|
||||
"monitoring": "Veille",
|
||||
"not_found": "Page introuvable",
|
||||
"route_not_found": "La route {route} n'existe pas."
|
||||
},
|
||||
"home": {
|
||||
"apps": "Applications"
|
||||
|
|
|
|||
|
|
@ -7,8 +7,36 @@ const Apps = () => import('./components/NervTNApps.vue');
|
|||
const Dashboard = () => import('./components/Dashboard.vue');
|
||||
|
||||
const routes = [
|
||||
{path: '/', component: Dashboard},
|
||||
{path: '/apps', component: Apps}
|
||||
{
|
||||
path: '/',
|
||||
name: "Dashboard",
|
||||
components: {
|
||||
default: Dashboard,
|
||||
//Links: {},
|
||||
//Sidebar: {},
|
||||
//ActionBar: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/apps',
|
||||
name: "Apps",
|
||||
components: {
|
||||
default: Apps,
|
||||
//Links: {},
|
||||
//Sidebar: {},
|
||||
//ActionBar: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/:errorPath(.*)*',
|
||||
name: "NotFound",
|
||||
components: {
|
||||
default: Apps,
|
||||
//Links: {},
|
||||
//Sidebar: {},
|
||||
//ActionBar: {}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const router = VueRouter.createRouter({
|
||||
|
|
|
|||
Loading…
Reference in a new issue