bootstrap tables in vue_accourse

This commit is contained in:
Mathieu Jaumotte 2021-07-12 16:58:01 +02:00
parent a9a59895b4
commit 0224224744
6 changed files with 59 additions and 64 deletions

View File

@ -540,18 +540,18 @@ $table-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg-factor: .10 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg-factor: .15 !default;
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg-factor: .125 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !default;
$table-border-factor: .15 !default;
$table-border-width: $border-width !default;
$table-border-color: $border-color !default;

View File

@ -2,18 +2,23 @@
<banner></banner>
<sticky-nav></sticky-nav>
<h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
<h1 v-else>{{ $t('course.title.active') }}</h1>
<persons-associated></persons-associated>
<origin-demand></origin-demand>
<requestor></requestor>
<social-issue></social-issue>
<referrer></referrer>
<resources></resources>
<comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
<confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
<div class="row justify-content-end">
<div class="col-md-11">
<h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
<h1 v-else>{{ $t('course.title.active') }}</h1>
<persons-associated></persons-associated>
<origin-demand></origin-demand>
<requestor></requestor>
<social-issue></social-issue>
<referrer></referrer>
<resources></resources>
<comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
<confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
</div>
</div>
</template>
<script>
@ -56,7 +61,7 @@ export default {
}
div.vue-component {
h2 {
margin-left: 0.7em;
margin: 1em 0.7em;
position: relative;
&:before {
position: absolute;

View File

@ -1,19 +1,5 @@
<template>
<div class="vue-component" style="display: none;">
<dl>
<dt>{{ $t('course.id') }}</dt>
<dd>{{ accompanyingCourse.id }}</dd>
</dl>
<dl v-if="accompanyingCourse.closingDate">
<dt>{{ $t('course.closing_date') }}</dt>
<dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
<dt>{{ $t('course.closing_motive') }}</dt>
<dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
</dl>
</div>
<teleport to="#header-accompanying_course-name #banner-flags">
<toggle-flags></toggle-flags>
</teleport>

View File

@ -6,8 +6,8 @@
<label>{{ $tc('persons_associated.counter', counter) }}</label>
</div>
<table class="rounded" v-if="participations.length > 0">
<thead>
<table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
<thead class="">
<tr>
<th class="chill-orange">{{ $t('persons_associated.name') }}</th>
<th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>

View File

@ -7,7 +7,7 @@
<label>{{ $tc('resources.counter', counter) }}</label>
</div>
<table class="rounded" v-if="resources.length > 0">
<table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
<thead>
<tr>
<th class="chill-orange">{{ $t('resources.text') }}</th>

View File

@ -120,7 +120,7 @@ export default {
if (top > this.limit) {
this.stickyNav.style.position = 'absolute';
this.stickyNav.style.left = '-60px';
this.stickyNav.style.left = '10px';
} else {
this.stickyNav.style.position = 'fixed';
this.stickyNav.style.left = pos['x'] + 'px';
@ -149,36 +149,40 @@ export default {
</script>
<style lang="scss">
div#navmap {
position: absolute;
top: 30px;
left: -60px; //-10%;
nav {
font-size: small;
a {
display: block;
box-sizing: border-box;
margin-bottom: -3px;
color: #71859669;
&.top {
color: #718596;
}
span {
display: none;
}
&:hover,
&.active {
span {
display: inline;
padding-left: 8px;
div#content {
position: relative;
div#navmap {
position: absolute;
top: 30px;
left: 10px; //-10%;
nav {
font-size: small;
a {
display: block;
box-sizing: border-box;
margin-bottom: -3px;
color: #71859669;
&.top {
color: #718596;
}
span {
display: none;
}
&:hover,
&.active {
span {
display: inline;
padding-left: 8px;
}
}
&:hover {
color: #718596b5;
}
&.active {
color: #e2793d; //orange
//color: #eec84a; //jaune
}
}
&:hover {
color: #718596b5;
}
&.active {
color: #e2793d; //orange
//color: #eec84a; //jaune
}
}
}