skin-dt-32 0.0.73 → 0.0.76

package/config/vueComponents.js

@@ -20,6 +20,7 @@ Vue.component('cabecera-foro', {
     },
     template: `
     <div class="forum-head regular-head">
+    <i class="fa-solid fa-caret-right"></i>
         <titulo-especial :data-title="dataTitle"></titulo-especial>
     </div>
     `
@@ -33,6 +34,7 @@ Vue.component('cabcategoria-foro', {
     },
     template: `
     <div class="forum-head category-head">
+    <i class="fa-solid fa-caret-right"></i>
         <titulo-especial :data-title="dataTitle"></titulo-especial>
     </div>
     `
@@ -46,6 +48,7 @@ Vue.component('cabespecial-foro', {
     },
     template: `
     <div class="forum-head special-head">
+        <i class="fa-solid fa-caret-right"></i>
         <titulo-especial :data-title="dataTitle"></titulo-especial>
     </div>
     `
@@ -263,25 +266,43 @@ Vue.component('foro-foro', {
     },
     template: `
     <section class="forum-forum">
-        <a class="forum-header is-tweakeable" :href="dataUrl" :title="'Ir al subforo «' + dataName + '»'">
-            <span class="is-measurable">{{ dataName }}</span>
-        </a>
-        <div class="forum-info">
-            <div class="forum-misc">
-                <div class="forum-stats">{{ dataPosts }} mensajes — {{ dataTopics }} temas</div>
+        <a class="forum-header" :href="dataUrl" :title="'Ir al subforo «' + dataName + '»'">
+            <div class="forum-title is-tweakeable">
+                <span class="is-measurable">{{ dataName }}</span>
             </div>
-        </div>
+            <div class="forum-stats">{{ dataPosts }} mensajes — {{ dataTopics }} temas</div>
+        </a>
         <div class="forum-content">
-            <div class="forum-interior">
+            <div class="forum-info">
+                <ul class="columns is-gapless is-multiline">
+                    <li class="column is-two-thirds">
+                        <div class="forum-misc"></div>
+                        <div class="forum-last">
+                            <template v-if="dataLasturl.length">
+                                <div class="lastpost-content">
+                                    <div class="is-hidden-desktop">
+                                        <a :href="dataLasturl" :title="'Último mensaje en el tema «' + dataLastname + '» por '" class="lastpost-link">{{ dataLastname }}</a> por <slot name="last-who"></slot>, <slot name="last-date"></slot>
+                                    </div>
+                                    <div class="is-hidden-touch">
+                                        <a :href="dataLasturl" :title="'Último mensaje en el tema «' + dataLastname + '» por '" class="lastpost-link">{{ dataLastname }}</a>, <slot name="last-date"></slot>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else>Este subforo no tiene mensajes</template>
+                        </div>
+                    </li>
+                    <li class="column is-one-third">
+                        <div class="lastpost-avatar">
+                            <slot name="last-avatar"></slot>
+                        </div>
+                        <div class="lastpost-name"></div>
+                    </li>
+                </ul>
+            </div>
+            <div class="forum-image">
                 <slot name="desc"></slot>
             </div>
         </div>
-        <div class="forum-last">
-            <template v-if="dataLasturl.length">
-                <div class="lastpost-content"><a :href="dataLasturl" :title="'Último mensaje en el tema «' + dataLastname + '» por '" class="lastpost-link">{{ dataLastname }}</a> por <slot name="last-who"></slot>, <slot name="last-date"></slot></div>
-            </template>
-            <template v-else>Este subforo no tiene mensajes</template>
-        </div>
     </section>
     `
 });

package/general.js

@@ -832,7 +832,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
-/* Hide topbar and header */
+document.addEventListener('DOMContentLoaded', () => {
+    if (document.querySelector('.forum-forum')) {
+        [].forEach.call(document.querySelectorAll('.forum-forum'), (item) => {
+            if (item.querySelector('.forum-misc') && item.querySelector('.forum-box')) {
+                item.querySelector('.forum-misc').insertAdjacentHTML('beforeend', item.querySelector('.forum-box').outerHTML);
+                item.querySelector('.forum-content .forum-box').remove();
+            }
+
+            if (item.querySelector('.forum-last > strong')) {
+                item.querySelector('.lastpost-name').insertAdjacentHTML('beforeend', item.querySelector('.forum-last > strong').outerHTML);
+            }
+        });
+    }
+});
+
 document.addEventListener('forumReady', () => {
     if (window.location.pathname !== '/' && document.querySelector('#forum-topbar') && forumConfig.skinOptions.hideTopbar) {
         document.querySelector('#forum-header').remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skin-dt-32",
-  "version": "0.0.73",
+  "version": "0.0.76",
   "main": "readme.md",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/stylesheet.css

@@ -336,7 +336,15 @@ a {
 
 /* Body */
 .forum-head {
-    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.forum-head i {
+    color: var(--color-contrast);
+    margin-right: 1rem;
+    font-size: 2rem;
 }
 
 .forum-head h3 {
@@ -356,6 +364,27 @@ h3.is-tweakeable small {
     font-family: var(--font-three);
 }
 
+/* Subforo */
+.forum-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    background: var(--color-contrast);
+    color: var(--color-four);
+}
+
+.forum-header:hover {
+    color: var(--color-four);
+}
+
+.forum-title {
+    max-width: 500px;
+    font-size: 1.5rem;
+    color: var(--color-two);
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
 @media only screen and (max-width: 1023px) {}
 
 @media only screen and (max-width: 768px) {}