assets/components/networks/network.vue

@@ -45,34 +45,11 @@
             </div>
 
             <div class="content-inner">
-                <div
+                <Sites
                     v-if="sites.length"
+                    :sites="sites"
                     class="compact"
-                >
+                />
-                    <span
-                        v-if="expanded"
-                        class="expand"
-                        @click="expanded = false"
-                    >⇱ collapse</span>
-
-                    <Sites
-                        :sites="sites"
-                        class="compact"
-                        :class="{ expanded }"
-                    />
-
-                    <span
-                        v-if="!expanded"
-                        class="expand"
-                        @click="expanded = true"
-                    >expand ⇲</span>
-
-                    <span
-                        v-if="expanded"
-                        class="expand"
-                        @click="expanded = false"
-                    >⇱ collapse</span>
-                </div>
 
                 <Releases :releases="releases" />
             </div>
@@ -112,7 +89,6 @@ export default {
             sites: null,
             releases: [],
             pageTitle: null,
-            expanded: false,
         };
     },
     mounted,
@@ -143,22 +119,14 @@ export default {
     overflow-y: auto;
 }
 
-.content-inner {
-    padding: 0;
-}
-
-.releases {
-    padding: 1rem;
-}
-
 .sidebar {
     height: 100%;
     width: 18rem;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    border-right: solid 1px $shadow-hint;
     color: $text-contrast;
+    border-right: solid 1px $shadow-hint;
     overflow: hidden;
 }
 
@@ -178,8 +146,11 @@ export default {
     filter: $logo-shadow;
 }
 
+.sites.compact {
+    display: none;
+}
+
 .header {
-    background: $profile;
     width: 100%;
     height: 4rem;
     display: none;
@@ -187,19 +158,6 @@ export default {
     border-bottom: solid 1px $shadow-hint;
 }
 
-.sites.compact {
-    display: none;
-}
-
-.expand {
-    display: none;
-    padding: .5rem;
-    text-align: center;
-    cursor: pointer;
-    font-size: .9rem;
-    font-weight: bold;
-}
-
 @media(max-width: $breakpoint) {
     .header {
         display: flex;
@@ -207,14 +165,7 @@ export default {
 
     .sites.compact {
         display: flex;
-
+        padding: 0 1rem 1rem 1rem;
-        &.expanded {
-            display: grid;
-        }
-    }
-
-    .expand {
-        display: block;
     }
 
     .network {

assets/components/sites/site.vue

@@ -5,42 +5,52 @@
     >
         <FilterBar :fetch-releases="fetchSite" />
 
-        <div class="header">
-            <a
-                v-if="site.url"
-                :href="site.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="title"
-            >
-                <img
-                    :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
-                    :title="site.name"
-                    :alt="site.name"
-                    class="logo"
-                >
-            </a>
-
-            <span class="link">
-                <span class="networklogo-container">
-                    Part of
-                    <a
-                        :href="`/network/${site.network.slug}`"
-                        class="networklogo-link"
-                    >
-                        <img
-                            :src="`/img/logos/${site.network.slug}/network.png`"
-                            :title="site.network.name"
-                            :alt="site.network.name"
-                            class="logo"
-                        >
-                    </a>
-                </span>
-            </span>
-        </div>
-
         <div class="content-inner">
-            <Releases :releases="releases" />
+            <div class="header">
+                <a
+                    v-if="site.url"
+                    :href="site.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
+                >
+                    <object
+                        :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
+                        :title="site.name"
+                        type="image/png"
+                        class="logo"
+                    ><h2>{{ site.name }}</h2></object>
+
+                    <Icon
+                        icon="new-tab"
+                        class="icon-href"
+                    />
+                </a>
+
+                <span class="link">
+                    <span class="networklogo-container">
+                        Part of
+                        <a
+                            :href="`/network/${site.network.slug}`"
+                            class="networklogo-link"
+                        >
+                            <object
+                                :data="`/img/logos/${site.network.slug}/network.png`"
+                                :title="site.network.name"
+                                type="image/png"
+                                class="networklogo"
+                            >{{ site.network.name }}</object>
+                        </a>
+                    </span>
+                </span>
+            </div>
+
+            <p class="description">{{ site.description }}</p>
+
+            <Releases
+                :releases="releases"
+                :context="site.name"
+            />
         </div>
     </div>
 </template>
@@ -83,16 +93,19 @@ export default {
 @import 'theme';
 
 .header {
-    background: $profile;
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
-    border-bottom: solid 1px $shadow-weak;
 }
 
 .title {
-    padding: 1rem;
+    display: inline-flex;
+    align-items: top;
+    margin: 0 1rem 0 0;
+
+    &:hover .icon {
+        fill: $primary;
+    }
 }
 
 .heading {
@@ -109,7 +122,7 @@ export default {
 
 .logo {
     width: 20rem;
-    max-height: 6rem;
+    max-height: 8rem;
     object-fit: contain;
     margin: 0 .5rem 1rem 0;
 }
@@ -119,6 +132,16 @@ export default {
     align-items: center;
 }
 
+.networklogo {
+    color: $text;
+    width: 15rem;
+    max-height: 6rem;
+    font-weight: bold;
+    object-fit: contain;
+    object-position: 100% 0;
+    margin: 0 0 0 .5rem;
+}
+
 .sites,
 .scenes {
     display: grid;

assets/components/sites/sites.vue

@@ -36,7 +36,8 @@ export default {
     grid-template-columns: 1fr;
     overflow-y: auto;
 
-    &.compact:not(.expanded) {
+    &.compact {
+        display: flex;
         overflow-x: auto;
 
         .tile {
@@ -44,9 +45,5 @@ export default {
             margin: 0 1rem 0 0;
         }
     }
-
-    &.expanded {
-        grid-template-columns: repeat(2, .5fr);
-    }
 }
 </style>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "traxxx",
-  "version": "1.44.2",
+  "version": "1.44.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.44.2",
+    "version": "1.44.1",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {

public/css/style.css

@@ -520,18 +520,21 @@
 
 /* $primary: #ff886c; */
 .header[data-v-194630f6] {
-  background: #222;
   display: -webkit-box;
   display: flex;
-  -webkit-box-align: center;
-          align-items: center;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
           justify-content: space-between;
-  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
 }
 .title[data-v-194630f6] {
-  padding: 1rem;
+  display: -webkit-inline-box;
+  display: inline-flex;
+  -webkit-box-align: top;
+          align-items: top;
+  margin: 0 1rem 0 0;
+}
+.title:hover .icon[data-v-194630f6] {
+    fill: #ff6c88;
 }
 .heading[data-v-194630f6] {
   padding: 0;
@@ -549,7 +552,7 @@
 }
 .logo[data-v-194630f6] {
   width: 20rem;
-  max-height: 6rem;
+  max-height: 8rem;
   -o-object-fit: contain;
      object-fit: contain;
   margin: 0 .5rem 1rem 0;
@@ -560,6 +563,17 @@
   -webkit-box-align: center;
           align-items: center;
 }
+.networklogo[data-v-194630f6] {
+  color: #222;
+  width: 15rem;
+  max-height: 6rem;
+  font-weight: bold;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -o-object-position: 100% 0;
+     object-position: 100% 0;
+  margin: 0 0 0 .5rem;
+}
 .sites[data-v-194630f6],
 .scenes[data-v-194630f6] {
   display: grid;
@@ -626,16 +640,15 @@
   grid-template-columns: 1fr;
   overflow-y: auto;
 }
-.sites.compact[data-v-7bebaa3e]:not(.expanded) {
+.sites.compact[data-v-7bebaa3e] {
+    display: -webkit-box;
+    display: flex;
     overflow-x: auto;
 }
-.sites.compact:not(.expanded) .tile[data-v-7bebaa3e] {
+.sites.compact .tile[data-v-7bebaa3e] {
       width: 15rem;
       margin: 0 1rem 0 0;
 }
-.sites.expanded[data-v-7bebaa3e] {
-    grid-template-columns: repeat(2, 0.5fr);
-}
 
 /* $primary: #ff886c; */
 @media (max-width: 1200px) {
@@ -657,12 +670,6 @@
           justify-content: stretch;
   overflow-y: auto;
 }
-.content-inner[data-v-e2e12602] {
-  padding: 0;
-}
-.releases[data-v-e2e12602] {
-  padding: 1rem;
-}
 .sidebar[data-v-e2e12602] {
   height: 100%;
   width: 18rem;
@@ -672,8 +679,8 @@
   -webkit-box-direction: normal;
           flex-direction: column;
   flex-shrink: 0;
-  border-right: solid 1px rgba(0, 0, 0, 0.1);
   color: #fff;
+  border-right: solid 1px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
@@ -694,8 +701,10 @@
   -webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
           filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
 }
+.sites.compact[data-v-e2e12602] {
+  display: none;
+}
 .header[data-v-e2e12602] {
-  background: #222;
   width: 100%;
   height: 4rem;
   display: none;
@@ -703,17 +712,6 @@
           justify-content: center;
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
-.sites.compact[data-v-e2e12602] {
-  display: none;
-}
-.expand[data-v-e2e12602] {
-  display: none;
-  padding: .5rem;
-  text-align: center;
-  cursor: pointer;
-  font-size: .9rem;
-  font-weight: bold;
-}
 @media (max-width: 720px) {
 .header[data-v-e2e12602] {
     display: -webkit-box;
@@ -722,12 +720,7 @@
 .sites.compact[data-v-e2e12602] {
     display: -webkit-box;
     display: flex;
-}
+    padding: 0 1rem 1rem 1rem;
-.sites.compact.expanded[data-v-e2e12602] {
-      display: grid;
-}
-.expand[data-v-e2e12602] {
-    display: block;
 }
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;