generic-skin 2.5.3 → 2.9.56

package/config/vueComponents.js

@@ -1,9 +1,9 @@
 /* Estructura del foro */
 Vue.component('categoria-foro', {
-    props: ['dataId'],
+    props: ['id'],
     computed: {
-        slugName: function () {
-            const name = (this.dataId.indexOf('<h2>') > -1 ? FNR.utility.genSlug(this.dataId.split('<h2>')[1].split('</h2>')[0], '-') : FNR.utility.genSlug(this.dataId, '-'));
+        slugName() {
+            const name = (this.id.indexOf('<h2>') > -1 ? FNR.utility.genSlug(this.id.split('<h2>')[1].split('</h2>')[0], '-') : FNR.utility.genSlug(this.id, '-'));
 
             return 'category-' + name;
         }
@@ -16,48 +16,48 @@ Vue.component('categoria-foro', {
 });
 
 Vue.component('cabecera-foro', {
-    data: function () {
+    data() {
         return {
-            dataTitle: this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text
+            title: this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text
         }
     },
     template: `
     <div class="forum-head regular-head">
-        <titulo-especial :data-title="dataTitle"></titulo-especial>
+        <titulo-especial :title="title"></titulo-especial>
     </div>
     `
 });
 
 Vue.component('cabcategoria-foro', {
-    data: function () {
+    data() {
         return {
-            dataTitle: this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text
+            title: this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text
         }
     },
     template: `
     <div class="forum-head category-head">
-        <titulo-especial :data-title="dataTitle"></titulo-especial>
+        <titulo-especial :title="title"></titulo-especial>
     </div>
     `
 });
 
 Vue.component('cabespecial-foro', {
-    data: function () {
+    data() {
         return {
-            dataTitle: this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text
+            title: this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text
         }
     },
     template: `
     <div class="forum-head special-head">
-        <titulo-especial :data-title="dataTitle"></titulo-especial>
+        <titulo-especial :title="title"></titulo-especial>
     </div>
     `
 });
 
 Vue.component('subforo-foro', {
-    props: ['dataId'],
+    props: ['id'],
     computed: {
-        slugId: function () {
+        slugId() {
             let id = '';
 
             if (window.location.pathname.match(/f(\d+)-/)) {
@@ -68,8 +68,8 @@ Vue.component('subforo-foro', {
 
             return 'subforum-' + id;
         },
-        slugName: function () {
-            const name = (this.dataId.indexOf('<h2>') > -1 ? FNR.utility.genSlug(this.dataId.split('<h2>')[1].split('</h2>')[0], '-') : FNR.utility.genSlug(this.dataId, '-'));
+        slugName() {
+            const name = (this.id.indexOf('<h2>') > -1 ? FNR.utility.genSlug(this.id.split('<h2>')[1].split('</h2>')[0], '-') : FNR.utility.genSlug(this.id, '-'));
 
             return 'subforum-' + name;
         }
@@ -82,16 +82,16 @@ Vue.component('subforo-foro', {
 });
 
 Vue.component('lista-temas-cabecera', {
-    props: ['dataElements'],
-    data: function () {
+    props: ['elements'],
+    data() {
         return {
-            elementos: JSON.parse(this.dataElements.replace(/'/g, '"'))
+            elementos: JSON.parse(this.elements.replace(/'/g, '"'))
         }
     },
     template: `
     <ul class="topiclist-header no-style">
         <li v-for="element in elementos">
-            <titulo-especial :data-title="element"></titulo-especial>
+            <titulo-especial :title="element"></titulo-especial>
         </li>
     </ul>
     `
@@ -99,7 +99,7 @@ Vue.component('lista-temas-cabecera', {
 
 Vue.component('tema-foro', {
     computed: {
-        slugId: function () {
+        slugId() {
             let id = '';
 
             if (window.location.pathname.match(/t(\d+)-/)) {
@@ -110,7 +110,7 @@ Vue.component('tema-foro', {
 
             return 'topic-' + id;
         },
-        slugName: function () {
+        slugName() {
             const name = FNR.utility.genSlug((this.$slots['title'][0].tag === undefined ? this.$slots['title'][0].text : this.$slots['title'][0].children[0].text), '-');
 
             return 'topic-' + name;
@@ -124,26 +124,10 @@ Vue.component('tema-foro', {
 });
 
 Vue.component('mando-foro', {
-    props: ['dataId', 'dataApp'],
-    data: function () {
-        return {
-            children: 0
-        }
-    },
-    computed: {
-        isStatusClass: function () {
-            if (this.children > 0) return 'forum-controls';
-            else return 'forum-controls not-show';
-        }
-    },
-    created() {
-        Object.values(this.$slots).map((item) => {
-            this.children += item.length;
-        });
-    },
+    props: ['id', 'app'],
     template: `
-    <section :id="dataId" :class="isStatusClass">
-        <template v-if="dataApp === 'true'">
+    <section :id="id" class="forum-controls">
+        <template v-if="app === 'true'">
             <div class="left page-pagination">
                 <slot name="pagination"></slot>
             </div>
@@ -161,27 +145,18 @@ Vue.component('mando-foro', {
 
 /* Componentes del foro */
 Vue.component('titulo-especial', {
-    props: ['dataTitle'],
-    computed: {
-        cleaned: function () {
-            if (this.dataTitle.indexOf('<h2>') > -1) return this.dataTitle.split('<h2>')[1].split('</h2>')[0];
-            else return this.dataTitle;
-        },
-        minimized: function () {
-            return FNR.utility.genSlug(this.cleaned, ' ');
-        }
-    },
+    props: ['title'],
     template: `
-    <h3 class="is-tweakeable"><span class="is-measurable">{{ cleaned }}</span></h3>
+    <h3 class="is-tweakeable"><span class="is-measurable" v-html="title"></span></h3>
     `
 });
 
 Vue.component('cuerpo-widget', {
-    props: ['dataClass'],
+    props: ['class'],
     computed: {
-        currentClass: function () {
-            if (this.dataClass === undefined) return 'plank-inner';
-            else return 'plank-inner' + ' ' + this.dataClass;
+        currentClass() {
+            if (this.class === undefined) return 'plank-inner';
+            else return 'plank-inner' + ' ' + this.class;
         }
     },
     template: `
@@ -194,8 +169,8 @@ Vue.component('cuerpo-widget', {
 });
 
 Vue.component('separador-foro', {
-    props: ['dataFaction'],
-    data: function () {
+    props: ['faction'],
+    data() {
         return {
             image: forumDefaults.separator
         }
@@ -208,41 +183,41 @@ Vue.component('separador-foro', {
 });
 
 Vue.component('tema-ref', {
-    props: ['dataInfo'],
-    data: function () {
+    props: ['info'],
+    data() {
         return {
             profileName: forumConfig.profileOptions.profileName || 'perfil'
         }
     },
     computed: {
-        userColor: function () {
-            return 'color: ' + this.dataInfo.lastpost.who.color;
+        userColor() {
+            return 'color: ' + this.info.lastpost.who.color;
         }
     },
     template: `
     <div class="ltopic-element">
-        <a class="ltopic-last" :href="dataInfo.lastpost.url" target="_blank" :title="'Ir al último mensaje del tema «' + dataInfo.name + '»'">
+        <a class="ltopic-last" :href="info.lastpost.url" target="_blank" :title="'Ir al último mensaje del tema «' + info.name + '»'">
             <i class="fas fa-link"></i>
         </a>
         <div class="ltopic-data">
-            <a class="ltopic-title" :href="dataInfo.url" target="_blank" :title="'Ir al tema «' + dataInfo.name + '»'">{{ dataInfo.name }}</a>
-            <small class="ltopic-info"><a :href="dataInfo.lastpost.who.url" target="_blank" :style="userColor" :title="'Ir al ' + profileName + ' de «' + dataInfo.lastpost.who.name + '»'">{{ dataInfo.lastpost.who.name | just-name }}</a>, {{ dataInfo.lastpost.date }} en <a :href="dataInfo.forum.url" target="_blank" :title="'Ir al subforo «' + dataInfo.forum.name + '»'">{{ dataInfo.forum.name }}</a></small>
+            <a class="ltopic-title" :href="info.url" target="_blank" :title="'Ir al tema «' + info.name + '»'">{{ info.name }}</a>
+            <small class="ltopic-info"><a :href="info.lastpost.who.url" target="_blank" :style="userColor" :title="'Ir al ' + profileName + ' de «' + info.lastpost.who.name + '»'">{{ info.lastpost.who.name | just-name }}</a>, {{ info.lastpost.date }} en <a :href="info.forum.url" target="_blank" :title="'Ir al subforo «' + info.forum.name + '»'">{{ info.forum.name }}</a></small>
         </div>
     </div>
     `
 });
 
 Vue.component('campo-foro', {
-    props: ['dataName'],
+    props: ['name'],
     mounted() {
         const classList = this.$el.parentElement.classList;
 
         classList.add('field-element');
-        classList.add('field-' + FNR.utility.genSlug(this.dataName, '-'));
+        classList.add('field-' + FNR.utility.genSlug(this.name, '-'));
     },
     template: `
     <div class="forum-field">
-        <div class="field-name">{{ dataName | capitalize }}</div>
+        <div class="field-name">{{ name | capitalize }}</div>
         <div class="field-content">
             <slot></slot>
         </div>
@@ -251,33 +226,33 @@ Vue.component('campo-foro', {
 });
 
 Vue.component('boton-foro', {
-    props: ['dataUrl', 'dataName', 'dataIcon', 'dataType', 'dataInput'],
+    props: ['url', 'name', 'icon', 'type', 'input'],
     computed: {
-        realClass: function () {
-            if (this.dataInput === 'true') return 'forum-button is-input';
+        realClass() {
+            if (this.input === 'true') return 'forum-button is-input';
             else return 'forum-button';
         },
-        realName: function () {
-            return 'text' + (this.dataType === 'no-name' ? ' is-hidden-touch' : '');
+        realName() {
+            return 'text' + (this.type === 'no-name' ? ' is-hidden-touch' : '');
         },
-        realUrl: function () {
-            if (this.dataInput === 'true') return 'javascript:{}';
-            else return this.dataUrl;
+        realUrl() {
+            if (this.input === 'true') return 'javascript:{}';
+            else return this.url;
         }
     },
     mounted() {
         const classList = this.$el.parentElement.classList;
 
         classList.add('btn-element');
-        classList.add('btn-' + FNR.utility.genSlug(this.dataName, '-'));
+        classList.add('btn-' + FNR.utility.genSlug(this.name, '-'));
     },
     template: `
-    <a :href="realUrl" targer="_blank" :class="realClass" :title="dataName">
+    <a :href="realUrl" targer="_blank" :class="realClass" :title="name">
         <span class="icon">
-            <i :class="dataIcon"></i>
+            <i :class="icon"></i>
         </span>
-        <span :class="realName">{{ dataName }}</span>
-        <span v-if="dataInput === 'true'" class="input-real">
+        <span :class="realName">{{ name }}</span>
+        <span v-if="input === 'true'" class="input-real">
             <slot name="input"></slot>
         </span>
     </a>
@@ -285,12 +260,12 @@ Vue.component('boton-foro', {
 });
 
 Vue.component('cargando-foro', {
-    props: ['dataText'],
+    props: ['text'],
     template: `
     <section id="loading-element">
         <div id="loading-content">
             <i class="fas fa-circle-notch fa-spin"></i>
-            <span>{{ dataText }}</span>
+            <span>{{ text }}</span>
         </div>
     </section>
     `
@@ -306,7 +281,7 @@ Vue.component('aviso-foro', {
 });
 
 Vue.component('afiliaciones-foro', {
-    data: function () {
+    data() {
         return {
             afis: {}
         }
@@ -323,7 +298,7 @@ Vue.component('afiliaciones-foro', {
 
 /* Navbar del foro */
 Vue.component('controles-foro', {
-    data: function () {
+    data() {
         return {
             maPage: 0,
             userName: _userdata.username,
@@ -336,12 +311,12 @@ Vue.component('controles-foro', {
         };
     },
     computed: {
-        isActiveClass: function () {
+        isActiveClass() {
             return 'has-bg' + ((this.isActive) ? ' visible' : ' not-visible');
         }
     },
     methods: {
-        turnActive: function () {
+        turnActive() {
             this.isActive = (this.isActive) ? false : true;
         }
     },
@@ -365,20 +340,20 @@ Vue.component('controles-foro', {
     	</nav>
         <nav class="right">   
             <section id="forum-navbar-desktop" class="is-hidden-touch">
-                <navbar-foro :data-username="userName" :data-userlevel="userLevel" :data-userid="userId" :data-userlog="userLog" :data-usermp="userMP" :data-userout="userOut" />
+                <navbar-foro :username="userName" :userlevel="userLevel" :userid="userId" :userlog="userLog" :usermp="userMP" :userout="userOut" />
             </section>
             <section id="forum-navbar-mobile" class="is-hidden-desktop">
-                <div id="hmg-button" v-on:click="turnActive()" class="is-pointer">
+                <div id="hmg-button" @click="turnActive()" class="is-pointer">
                     <i class="fas fa-bars"></i>
                 </div>
                 <div id="hmg-menu" :class="isActiveClass">
-                    <h3>{{ userName | just-name }}<i class="fas fa-times is-pointer" v-on:click="turnActive()"></i></h3>
-                    <navbar-foro :data-username="userName" :data-userlevel="userLevel" :data-userid="userId" :data-userlog="userLog" :data-usermp="userMP" :data-userout="userOut" />
+                    <h3>{{ userName | just-name }}<i class="fas fa-times is-pointer" @click="turnActive()"></i></h3>
+                    <navbar-foro :username="userName" :userlevel="userLevel" :userid="userId" :userlog="userLog" :usermp="userMP" :userout="userOut" />
                 </div>
-                <div class="bg-active" v-on:click="turnActive()"></div>
+                <div class="bg-active" @click="turnActive()"></div>
             </section>
             <section v-if="maPage === 1" id="multiaccount-transition">
-                <cargando-foro data-text="Cambiando de cuenta…"></cargando-foro>
+                <cargando-foro text="Cambiando de cuenta…"></cargando-foro>
             </section>
         </nav>
     </div>
@@ -386,11 +361,12 @@ Vue.component('controles-foro', {
 });
 
 Vue.component('navbar-foro', {
-    props: ['dataUsername', 'dataUserlevel', 'dataUserid', 'dataUserlog', 'dataUsermp', 'dataUserout'],
-    data: function () {
+    props: ['username', 'userlevel', 'userid', 'userlog', 'usermp', 'userout'],
+    data() {
         return {
             profileName: forumConfig.profileOptions.profileName || 'perfil',
             items: forumContent.navbar,
+            navigation: forumContent.links,
             directions: forumConfig.usableDirections,
             multiAccount: {
                 status: false,
@@ -400,23 +376,23 @@ Vue.component('navbar-foro', {
         }
     },
     computed: {
-        isStatusClass: function () {
-            return ((this.dataUserlog === 1) ? 'is-logged' : 'is-unlogged') + ((this.dataUserlevel === 1) ? ' is-admin' : ' is-user')
+        isStatusClass() {
+            return ((this.userlog === 1) ? 'is-logged' : 'is-unlogged') + ((this.userlevel === 1) ? ' is-admin' : ' is-user')
         },
-        mpText: function () {
-            return 'Mensajería' + ((this.dataUsermp !== 0) ? ' (' + this.dataUsermp + ')' : '')
+        mpText() {
+            return 'Mensajería' + ((this.usermp !== 0) ? ' (' + this.usermp + ')' : '')
         },
-        links: function () {
-            return forumContent.links.filter((item) => {
+        links() {
+            return this.navigation.filter((item) => {
                 return item.icon !== undefined;
             });
         }
     },
     methods: {
-        changeAccount: function () {
+        changeAccount() {
             this.$parent.maPage = 1;
 
-            FNR.user.changeAccount(this.dataUserout, this.multiAccount.accounts[this.multiAccount.position].name, this.multiAccount.accounts[this.multiAccount.position].password).then((r) => {
+            FNR.user.changeAccount(this.userout, this.multiAccount.accounts[this.multiAccount.position].name, this.multiAccount.accounts[this.multiAccount.position].password).then((r) => {
                 if (r) {
                     window.location.reload();
                 }
@@ -440,7 +416,7 @@ Vue.component('navbar-foro', {
     },
     template: `
     <ul :class="isStatusClass">
-        <template v-if="!dataUserlog">
+        <template v-if="!userlog">
             <li class="navbar-item">
                 <a href="/register" title="Registrarse en el foro">
                     <div class="icon">
@@ -488,10 +464,10 @@ Vue.component('navbar-foro', {
                     <div class="icon">
                         <i class="fas fa-user"></i>
                     </div>
-                    <div class="text">{{ dataUsername | just-name }}</div>
+                    <div class="text">{{ username | just-name }}</div>
                 </a>
                 <div class="navbar-dropdown is-right">
-                    <template v-if="dataUserlevel === 1">
+                    <template v-if="userlevel === 1">
                         <a class="navbar-item" href="/admin" target="_blank" title="Ir al «Panel de Administrador»">
                             <div class="icon">
                                 <i class="fas fa-cogs"></i>
@@ -505,7 +481,7 @@ Vue.component('navbar-foro', {
                         </div>
                         <div class="text">Panel Usuario</div>
                     </a>
-                    <a class="navbar-item" :href="'/u' + dataUserid" :title="'Ir a tu ' + profileName">
+                    <a class="navbar-item" :href="'/u' + userid" :title="'Ir a tu ' + profileName">
                         <div class="icon">
                             <i class="far fa-id-card"></i>
                         </div>
@@ -517,7 +493,7 @@ Vue.component('navbar-foro', {
                         </div>
                         <div class="text">Temas personales</div>
                     </a>
-                    <a class="navbar-item" :href="dataUserout">
+                    <a class="navbar-item" :href="userout" title="Cerrar sesión">
                         <div class="icon">
                             <i class="fas fa-sign-out-alt"></i>
                         </div>
@@ -526,7 +502,7 @@ Vue.component('navbar-foro', {
                     <template v-if="multiAccount.status">
                         <hr/>
                         <div class="select-container">
-                            <select v-model="multiAccount.position" v-on:change="changeAccount()" v-on:click="$event.stopPropagation()">
+                            <select v-model="multiAccount.position" @change="changeAccount()" @click="$event.stopPropagation()">
                                 <option value="-1" hidden selected>Selec. personaje</option>
                                 <option v-for="(account, index) in multiAccount.accounts" :value="index">{{ account.name }}</option>
                             </select>
@@ -541,7 +517,7 @@ Vue.component('navbar-foro', {
 
 /* Widgets del foro */
 Vue.component('links-ayuda', {
-    data: function () {
+    data() {
         return {
             links: forumContent.links
         }
@@ -554,7 +530,7 @@ Vue.component('links-ayuda', {
 });
 
 Vue.component('links-anuncios', {
-    data: function () {
+    data() {
         return {
             announcements: forumContent.announcements
         }
@@ -570,7 +546,7 @@ Vue.component('links-anuncios', {
 });
 
 Vue.component('links-staff', {
-    data: function () {
+    data() {
         return {
             staff: forumContent.staff
         }
@@ -583,47 +559,35 @@ Vue.component('links-staff', {
 });
 
 Vue.component('sabias-que', {
-    data: function () {
+    data() {
         return {
-            content: forumContent.sq,
-            position: forumContent.sq[Math.floor(Math.random() * forumContent.sq.length)]
-        }
-    },
-    computed: {
-        current: function () {
-            return this.content[this.position];
+            content: forumContent.sq[Math.floor(Math.random() * forumContent.sq.length)]
         }
     },
     created() {
         setInterval(() => {
-            this.position = this.content[Math.floor(Math.random() * this.content.length)];
+            this.content = forumContent.sq[Math.floor(Math.random() * forumContent.sq.length)];
         }, 12000);
     },
     template: `
-    <img id="sq-img" :src="current" alt="¿Sabías que?" />
+    <img id="sq-img" :src="content" alt="¿Sabías que?" />
     `
 });
 
 Vue.component('busquedas', {
-    data: function () {
+    data() {
         return {
-            content: forumContent.searches,
-            position: forumContent.searches[Math.floor(Math.random() * forumContent.searches.length)]
-        }
-    },
-    computed: {
-        current: function () {
-            return this.content[this.position];
+            content: forumContent.searches[Math.floor(Math.random() * forumContent.searches.length)]
         }
     },
     created() {
         setInterval(() => {
-            this.position = this.content[Math.floor(Math.random() * this.content.length)];
+            this.content = forumContent.searches[Math.floor(Math.random() * forumContent.searches.length)];
         }, 16000);
     },
     template: `
-    <a id="search-img" :href="current.url" target="_blank" :title="current.desc">
-        <img :src="current.img" alt="Búsqueda" />
+    <a id="search-img" :href="content.url" target="_blank" :title="content.desc">
+        <img :src="content.img" alt="Búsqueda" />
     </a>
     `
 });
@@ -641,16 +605,16 @@ Vue.component('note-info', {
 });
 
 Vue.component('redirect', {
-    props: ['dataTo'],
+    props: ['to'],
     computed: {
-        currentStatus: function () {
+        currentStatus() {
             if (window.location.pathname.match(/t(\d+)-/)) return true;
             else return false;
         }
     },
     created() {
         if (this.currentStatus) {
-            window.location.replace(this.dataTo);
+            window.location.replace(this.to);
         }
     },
     template: `
@@ -663,7 +627,7 @@ Vue.component('redirect', {
 });
 
 Vue.component('quote', {
-    props: ['dataFrom', 'from'],
+    props: ['from'],
     template: `
     <div class="admin-block admin-box user-coolquote">
         <div class="coolquote-quote">
@@ -673,17 +637,17 @@ Vue.component('quote', {
             </div>
             <div class="fas fa-quote-right"></div>
         </div>
-        <div class="coolquote-from">{{ dataFrom }}{{ from }}</div>
+        <div class="coolquote-from">{{ from }}</div>
     </div>
     `
 });
 
 /* Wiki del foro */
 Vue.component('wiki-index-items-d', {
-    props: ['dataContent'],
+    props: ['content'],
     template: `
     <ul>
-        <li v-for="content in dataContent">
+        <li v-for="content in content">
             <div class="wiki-controls">
                 <router-link :to="content.id" v-if="!content.children.length" :title="'Ir al artículo de «' + content.name + '»'">{{ content.name }}</router-link>
                 <a class="wiki-cascade" :title="'Desplegar categoría de «' + content.name + '»'" v-else>
@@ -694,7 +658,7 @@ Vue.component('wiki-index-items-d', {
                     </span>
                 </a>
             </div>
-            <wiki-index-items-d v-if="content.children.length" :data-content="content.children"></wiki-index-items-d>
+            <wiki-index-items-d v-if="content.children.length" :content="content.children"></wiki-index-items-d>
         </li>
     </ul>
     `
@@ -702,7 +666,7 @@ Vue.component('wiki-index-items-d', {
 
 Vue.component('wiki-index', {
     computed: {
-        indexContent: function () {
+        indexContent() {
             const getChildren = (name) => {
                 return filtered.filter((item) => {
                     return item.component.page_parent === name;
@@ -736,7 +700,7 @@ Vue.component('wiki-index', {
     <aside class="wiki-index is-content profile-sticky">
         <div class="is-hidden-touch">
             <h3>Contenido</h3>
-            <wiki-index-items-d :data-content="indexContent"></wiki-index-items-d>
+            <wiki-index-items-d :content="indexContent"></wiki-index-items-d>
         </div>
         <div class="select-container is-hidden-desktop">
             <select>
@@ -775,11 +739,11 @@ Vue.component('wiki-index', {
 });
 
 Vue.component('wiki-contenido', {
-    props: ['dataMode'],
+    props: ['mode'],
     template: `
     <div class="wiki-body has-small-topiclist">
         <wiki-index></wiki-index>
-        <template v-if="dataMode === 'app'">
+        <template v-if="mode === 'app'">
             <slot></slot>
         </template>
         <template v-else>
@@ -793,7 +757,7 @@ Vue.component('wiki-contenido', {
 
 Vue.component('wiki-nav', {
     computed: {
-        more: function () {
+        more() {
             return routes.filter((item) => {
                 return item.component
             }).filter((item) => {
@@ -802,7 +766,7 @@ Vue.component('wiki-nav', {
                 })[0].component.page_parent
             }).length > 1;
         },
-        nav: function () {
+        nav() {
             const list = routes.filter((item) => {
                 return item.component
             }).filter((item) => {
@@ -831,19 +795,19 @@ Vue.component('wiki-nav', {
 });
 
 Vue.component('wiki-children', {
-    props: ['dataName', 'dataCategory'],
+    props: ['name', 'category'],
     computed: {
-        nav: function () {
+        nav() {
             return routes.filter((item) => {
                 return item.component
             }).filter((item) => {
-                return item.component.page_parent === this.dataCategory;
+                return item.component.page_parent === this.category;
             });
         }
     },
     template: `
     <div class="wiki-nav" v-if="nav.length > 0">
-        <h2>{{ dataName }}</h2>
+        <h2>{{ name }}</h2>
         <template v-for="route in nav">* <router-link :to="route.path" :title="'Ir al artículo «' + route.component.page_name + '»'">{{ route.component.page_name }}</router-link><br/></template>
     </div>
     `
@@ -851,9 +815,9 @@ Vue.component('wiki-children', {
 
 /* Modal del foro */
 Vue.component('modal-foro', {
-    props: ['dataTitle'],
+    props: ['title'],
     methods: {
-        modalClose: function () {
+        modalClose() {
             this.$parent.state.modal = false;
             this.$emit('modal-close');
         }
@@ -862,8 +826,8 @@ Vue.component('modal-foro', {
     <div id="forum-modal">
         <div class="modal-element">
             <div class="modal-title">
-                <h3>{{ dataTitle }}</h3>
-                <a v-on:click="modalClose()">
+                <h3>{{ title }}</h3>
+                <a @click="modalClose()">
                     <i class="fas fa-times"></i>
                 </a>
             </div>
@@ -874,7 +838,7 @@ Vue.component('modal-foro', {
                 <slot name="controls"></slot>
             </div>
         </div>
-        <div class="is-bgmodal bg-active" v-on:click="modalClose()"></div>
+        <div class="is-bgmodal bg-active" @click="modalClose()"></div>
     </div>
     `
 });
@@ -889,7 +853,7 @@ Vue.component('controles-modal', {
 
 /* Expediente */
 Vue.component('expediente-usuario', {
-    data: function () {
+    data() {
         return {
             info: {
                 name: _userdata.username,
@@ -901,16 +865,16 @@ Vue.component('expediente-usuario', {
         }
     },
     computed: {
-        userRank: function () {
+        userRank() {
             return this.profile.fields[forumConfig.profileOptions.profileRank].content;
         },
-        userCite: function () {
+        userCite() {
             return this.profile.fields[forumConfig.profileOptions.profileCite].content
         },
-        userCover: function () {
+        userCover() {
             return this.profile.fields[forumConfig.profileOptions.profileCover].content
         },
-        usableMiniFields: function () {
+        usableMiniFields() {
             if (this.config.miniFields === undefined || !this.config.miniFields.length) return [];
             else return Object.entries(this.profile.fields).filter((item) => {
                 return this.config.miniFields.indexOf(item[0]) > -1;
@@ -934,7 +898,7 @@ Vue.component('expediente-usuario', {
                 };
             });
         },
-        usableBigFields: function () {
+        usableBigFields() {
             if (this.config.mainFields === undefined || !Object.keys(this.config.mainFields).length) return [];
             else return Object.entries(this.profile.fields).filter((item) => {
                 return Object.keys(this.config.mainFields).indexOf(item[0]) > -1;
@@ -960,7 +924,7 @@ Vue.component('expediente-usuario', {
                 };
             });
         },
-        lengthBigFields: function () {
+        lengthBigFields() {
             let length = 0;
 
             this.usableBigFields.map((item) => {
@@ -971,7 +935,7 @@ Vue.component('expediente-usuario', {
 
             return length;
         },
-        usableExtraFields: function () {
+        usableExtraFields() {
             if (this.config.extraFields === undefined || !this.config.extraFields.length) return [];
             else return Object.entries(this.profile.fields).filter((item) => {
                 return this.config.extraFields.indexOf(item[0]) > -1;
@@ -995,7 +959,7 @@ Vue.component('expediente-usuario', {
                 };
             });
         },
-        lengthExtraFields: function () {
+        lengthExtraFields() {
             let length = 0;
 
             this.usableExtraFields.map((item) => {
@@ -1006,7 +970,7 @@ Vue.component('expediente-usuario', {
 
             return length;
         },
-        usableLinkFields: function () {
+        usableLinkFields() {
             if (this.profile.contact.length) return [];
             else return Object.entries(this.profile.contact).filter((item) => {
                 return item[1].label !== 'Mensaje Privado';
@@ -1020,15 +984,15 @@ Vue.component('expediente-usuario', {
                 }
             });
         },
-        chronologyField: function () {
+        chronologyField() {
             if (this.config.cronoField === undefined || !this.config.cronoField.length) return [];
             else return FNR.utility.genArray(this.profile.fields[FNR.utility.genSlug(this.config.cronoField, '_')].content);
         },
-        relationshipsField: function () {
+        relationshipsField() {
             if (this.config.relaField === undefined || !this.config.relaField.length) return [];
             else return FNR.utility.genArray(this.profile.fields[FNR.utility.genSlug(this.config.relaField, '_')].content);
         },
-        lengthHistoryFields: function () {
+        lengthHistoryFields() {
             let length = 0;
 
             length += this.chronologyField.length;
@@ -1036,7 +1000,7 @@ Vue.component('expediente-usuario', {
 
             return length;
         },
-        currentClass: function () {
+        currentClass() {
             return 'usergroup-' + this.profile.colour
         }
     },
@@ -1082,16 +1046,16 @@ Vue.component('expediente-usuario', {
                 </div>
             </section>
             <section id="profile-subhead">
-                <div class="columns is-vcentered">
+                <div class="columns is-centered is-vcentered is-gapless">
                     <div class="column is-6 is-full-mobile">
                         <div id="profile-quote" class="is-content">
                             <quote>{{ userCite }}</quote>
                         </div>
                     </div>
-                    <div class="column is-5 is-offset-1 is-full-mobile is-offset-0-mobile">
-                        <div class="columns is-flex is-vcentered">
-                            <div class="column is-half is-half-mobile">
-                                <ul class="profile-links">
+                    <div class="column is-5 is-full-mobile">
+                        <div id="profile-links" class="columns is-flex is-vcentered is-multiline py-4">
+                            <div class="column is-full-touch is-half-desktop">
+                                <ul class="profile-linklist">
                                     <li>
                                         <a :href="profile.links.posts" :title="'Mensajes de «' + profile.name + '»'" target="_blank">
                                             <i :class="config.contactFields.mensajes"></i> Mensajes
@@ -1109,8 +1073,8 @@ Vue.component('expediente-usuario', {
                                     </li>
                                 </ul>
                             </div>
-                            <div class="column is-half is-half-mobile">
-                                <ul class="profile-links">
+                            <div class="column is-full-touch is-half-desktop">
+                                <ul class="profile-linklist">
                                     <li :id="'profile-link-' + field.id" v-for="field in usableLinkFields">
                                         <a :href="field.url" :title="field.desc" target="_blank">
                                             <i :class="field.icon"></i> {{ field.title }}
@@ -1169,7 +1133,7 @@ Vue.component('expediente-usuario', {
                         </div>
                         <ul id="chronology-element" class="is-two-columns-list">
                             <template v-for="element in chronologyField">
-                                <elemento-cronologia :data-element="element" data-type="profile" />
+                                <elemento-cronologia :element="element" type="profile" />
                             </template>
                         </ul>
                     </li>
@@ -1179,7 +1143,7 @@ Vue.component('expediente-usuario', {
                         </div>
                         <ul id="relationships-element" class="is-two-columns-list">
                             <template v-for="element in relationshipsField">
-                                <elemento-relaciones :data-element="element" data-type="profile" />
+                                <elemento-relaciones :element="element" type="profile" />
                             </template>
                         </ul>
                     </li>
@@ -1192,16 +1156,17 @@ Vue.component('expediente-usuario', {
 
 /* Tablillas */
 Vue.component('cuerpo-principal', {
-    props: ['dataTitle'],
+    props: ['title'],
     computed: {
-        title: function () {
-            if (typeof this.dataTitle === 'undefined') return '';
-            else return this.dataTitle;
+        realTitle() {
+            if (typeof this.title !== 'undefined') return this.title;
+            else if (typeof this.$attrs['data-title'] !== 'undefined') return this.$attrs['data-title'];
+            else return '';
         }
     },
     template: `    
     <div class="main-slat">
-        <div class="mainslat-title" v-if="title.length">{{ title }}</div>
+        <div class="mainslat-title" v-if="realTitle.length">{{ realTitle }}</div>
         <div class="mainslat-content">
             <slot></slot>
         </div>
@@ -1210,16 +1175,17 @@ Vue.component('cuerpo-principal', {
 });
 
 Vue.component('cuerpo-interior', {
-    props: ['dataTitle'],
+    props: ['title'],
     computed: {
-        title: function () {
-            if (typeof this.dataTitle === 'undefined') return '';
-            else return this.dataTitle;
+        realTitle() {
+            if (typeof this.title !== 'undefined') return this.title;
+            else if (typeof this.$attrs['data-title'] !== 'undefined') return this.$attrs['data-title'];
+            else return '';
         }
     },
     template: `    
     <div class="slat-interior">
-        <div class="slatinterior-title" v-if="title.length">{{ title }}</div>
+        <div class="slatinterior-title" v-if="realTitle.length">{{ realTitle }}</div>
         <div class="slatinterior-content">
             <slot></slot>
         </div>
@@ -1228,16 +1194,17 @@ Vue.component('cuerpo-interior', {
 });
 
 Vue.component('cuerpo-lista', {
-    props: ['dataTitle'],
+    props: ['title'],
     computed: {
-        title: function () {
-            if (typeof this.dataTitle === 'undefined') return '';
-            else return this.dataTitle;
+        realTitle() {
+            if (typeof this.title !== 'undefined') return this.title;
+            else if (typeof this.$attrs['data-title'] !== 'undefined') return this.$attrs['data-title'];
+            else return '';
         }
     },
     template: `    
     <div class="slat-list">
-        <div class="slatlist-title" v-if="title.length">{{ title }}</div>
+        <div class="slatlist-title" v-if="realTitle.length">{{ realTitle }}</div>
         <ol class="slatlist-content">
             <slot></slot>
         </ol>