Commit b19e9825 authored by Esteban Choque's avatar Esteban Choque

Las categorías cambian de color dinámicamente al mismo tiempo que el background

parent 8c4c113b
......@@ -129,7 +129,7 @@ export async function setContext(app, context) {
payload: context.payload,
error: context.error,
base: '/',
env: {"baseUrl":"http://localhost:4000","wpApi":"http://localhost/wordpress/index.php?rest_route=/wp/v2/","foro":{"url":"http://localhost/wordpress/index.php?rest_route="},"entidad":{"nombre":"Bolivia Digital 2025"}}
env: {"baseUrl":"http://localhost:4000","wpApi":"http://localhost/wordpress/index.php?rest_route=/wp/v2/","foro":{"url":"http://localhost/wordpress/index.php?rest_route="},"entidad":{"nombre":"Bolivia Digital"}}
}
// Only set once
if (context.req) app.context.req = context.req
......
......@@ -34,7 +34,7 @@ module.exports = {
url: 'http://localhost/wordpress/index.php?rest_route='
},
entidad: {
nombre: 'Bolivia Digital 2025'
nombre: 'Bolivia Digital'
},
},
......
......@@ -3,7 +3,7 @@
<span class="b-servicio-titulo">
<span class="b-services-short">BOLIVIA S.</span>
<!--<span class="b-services-long">{{ $t('bServices.title') }}</span>-->
<span class="b-service-two-points">:</span>
<!--<span class="b-service-two-points">:</span>-->
<i class="b-icon-arrow-down el-icon-arrow-down"></i>
</span>
<ul class="b-servicio-opciones">
......
......@@ -67,18 +67,30 @@
type="text"
class="app-menu__btn-open app-btn__link"
icon="el-icon-arrow-down"
@click="item.open = !item.open">
@click="pestaña_participa = !pestaña_participa">
</el-button>
<ul
class="app-menu__sublist fadeInUp">
class="app-menu__sublist fadeInUp foros"
:class="{ 'open-menu': pestaña_participa }">
<li
v-for="forum in forums"
:key="forum.id_forum"
class="app-menu__subitem">
<nuxt-link :to="$i18n.path('participa/'+forum.id_forum+'/'+forum.slug)">
{{ forum.name }}
</nuxt-link>
</li>
<!--<li
class="app-menu__subitem">
<a href="/participa/1/agenda-digital">Agenda Digital</a>
</li>
<li
class="app-menu__subitem">
<a href="/participa/2/inclusion-digital">Inclusión Digital</a>
</li>
</li>-->
</ul>
</li>
</ul>
......@@ -145,6 +157,7 @@
import AppLang from './AppLang';
import AppLogo from './AppLogo';
import BServicio from '~/components/bservicio/BServicio';
import axios from 'axios';
const Cookie = process.client ? require('js-cookie') : undefined;
let nuxtContainer = null;
......@@ -159,7 +172,9 @@ export default {
return {
menu: [],
stick: false,
maxStick: 180
maxStick: 180,
pestaña_participa: false,
forums: []
};
},
asyncData() {
......@@ -173,6 +188,7 @@ export default {
},
mounted () {
nuxtContainer = document.getElementById('__nuxt');
this.getListadoForos();
},
destroyed () {
if (process.browser) {
......@@ -213,6 +229,13 @@ export default {
});
}
});
},
getListadoForos() {
axios.get(this.$foro.url+'/fm/v1/')
.then(response => {
this.forums = response.data;
console.log(response.data);
});
}
}
};
......
......@@ -169,4 +169,7 @@ $colorLink: #333333;
display: inline-block;
}
.foros {
left: -120px !important;
}
@import './responsive.scss';
\ No newline at end of file
......@@ -29,7 +29,9 @@
<div
class="page-content">
<p>{{ post_body }}</p>
<h3 class="subtitle">
<h3
:style="myStyle"
class="subtitle">
Respuestas
</h3>
<div
......@@ -51,7 +53,9 @@
</div>
</div>
</div>
<h3 class="subtitle">
<h3
:style="myStyle"
class="subtitle">
Respuesta a: {{ post_title }}
</h3>
<p class="tu_info">Tu Información:</p>
......@@ -120,7 +124,13 @@ export default {
total: 0,
pregunta: '',
respuesta: '',
msg: ''
msg: '',
myStyle:{
backgroundColor:''
},
adorno:{
borderTopColor:''
}
};
},
mounted () {
......@@ -128,6 +138,8 @@ export default {
this.$util.setBackgroundImage();
this.getTopic();
this.crearSuma();
this.myStyle.backgroundColor = this.$util.colorpro;
this.adorno.borderTopColor = this.$util.coloradorno;
},
methods: {
getTopic() {
......
......@@ -32,7 +32,9 @@
:key="topic.id_topic"
class="page-content">
<p v-html="topic.desc"></p>
<h3 class="subtitle">
<h3
:style="myStyle"
class="subtitle">
Debates
</h3>
<div
......@@ -60,7 +62,9 @@
</el-pagination>
</el-row>
<h3 class="subtitle">
<h3
:style="myStyle"
class="subtitle">
Inicia un nuevo Debate:
</h3>
<p class="tu_info">Tu Información:</p>
......@@ -130,7 +134,13 @@ export default {
total: 0,
pregunta: '',
respuesta: '',
msg: ''
msg: '',
myStyle:{
backgroundColor:''
},
adorno:{
borderTopColor:''
}
};
},
mounted () {
......@@ -138,6 +148,8 @@ export default {
this.$util.setBackgroundImage();
this.pagina(1);
this.crearSuma();
this.myStyle.backgroundColor = this.$util.colorpro;
this.adorno.borderTopColor = this.$util.coloradorno;
},
methods: {
sendPublicacion() {
......
......@@ -31,11 +31,17 @@
<nuxt-link
:to="$i18n.path(`participa/`+$route.params.id_forum+`/`+$route.params.name_forum+`/`+topic.id_topic+`/`+topic.slug)">
<h3 class="categoria">{{ topic.name }}</h3>
<h3
:style="myStyle"
class="categoria">{{ topic.name }}</h3>
<div
class="adorno">
<div class="adorno_izq"></div>
<div class="adorno_der"></div>
<div
:style="adorno"
class="adorno_izq"></div>
<div
:style="adorno"
class="adorno_der"></div>
</div>
<hr class="separador_post">
</nuxt-link>
......@@ -164,7 +170,13 @@ export default {
total: 0,
pregunta: '',
respuesta: '',
msg: ''
msg: '',
myStyle:{
backgroundColor:''
},
adorno:{
borderTopColor:''
}
};
},
mounted () {
......@@ -172,6 +184,8 @@ export default {
this.$util.setBackgroundImage();
this.getTopics();
this.crearSuma();
this.myStyle.backgroundColor = this.$util.colorpro;
this.adorno.borderTopColor = this.$util.coloradorno;
},
methods: {
mostrarDialog() {
......
......@@ -61,7 +61,7 @@ export default {
//console.log(response.data); // ex.: { user: 'Your User'}
console.log(response.status); // ex.: 200
});
},
}
}
};
</script>
......
......@@ -2,6 +2,8 @@ import Vue from 'vue';
export default ({ app, store }) => {
const Util = {
colorpro: '',
coloradorno: '',
getRandomInt (min, max) {
min = Math.ceil(min);
max = Math.floor(max);
......@@ -17,8 +19,14 @@ export default ({ app, store }) => {
},
setBackgroundImage () {
const colors = ['blue', 'yellow', 'green', 'red'];
const colorescat = ['#024f9b', '#f9c100', '#449935', '#d31419'];
const coloresadorno = ['#012d59', '#806300', '#0e5901', '#7a0306'];
document.body.className = '';
document.body.classList.add(`portal-bg-${colors[this.getRandomInt(0, colors.length - 1)]}`);
//document.body.classList.add(`portal-bg-${colors[this.getRandomInt(0, colors.length - 1)]}`);
const aleatorio = this.getRandomInt(0, colors.length - 1);
this.colorpro = colorescat[aleatorio];
this.coloradorno = coloresadorno[aleatorio];
document.body.classList.add(`portal-bg-${colors[aleatorio]}`);
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment