skin-dt-32 0.0.75 → 0.0.76

package/config/vueComponents.js

@@ -270,30 +270,38 @@ Vue.component('foro-foro', {
             <div class="forum-title is-tweakeable">
                 <span class="is-measurable">{{ dataName }}</span>
             </div>
-            <div class="forum-misc">
-                <div class="forum-stats">{{ dataPosts }} mensajes — {{ dataTopics }} temas</div>
-            </div>
+            <div class="forum-stats">{{ dataPosts }} mensajes — {{ dataTopics }} temas</div>
         </a>
         <div class="forum-content">
-            <ul class="columns is-gapless is-multiline">
-                <li class="column is-half">
-                    <div class="forum-interior">
-                        <slot name="desc"></slot>
-                    </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>
-                </li>
-                <li class="column is-half">
-                    <div class="lastpost-avatar">
-                        <slot name="last-avatar"></slot>
-                    </div>
-                    <div class="lastpost-name"></div>
-                </li>
-            </ul>
+            <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>
     </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.75",
+  "version": "0.0.76",
   "main": "readme.md",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/stylesheet.css

@@ -338,7 +338,7 @@ a {
 .forum-head {
     display: flex;
     align-items: center;
-    margin-bottom: 1.25rem;
+    margin-bottom: 1.5rem;
 }
 
 .forum-head i {
@@ -373,6 +373,10 @@ h3.is-tweakeable small {
     color: var(--color-four);
 }
 
+.forum-header:hover {
+    color: var(--color-four);
+}
+
 .forum-title {
     max-width: 500px;
     font-size: 1.5rem;