assets/components/networks/network.vue

@@ -12,7 +12,6 @@
             <div
                 v-show="sites.length > 0"
                 class="sidebar"
-                :class="{ expanded }"
             >
                 <a
                     v-tooltip.bottom="`Go to ${network.url}`"
@@ -35,22 +34,9 @@
                 <Sites
                     v-if="sites.length"
                     :sites="sites"
-                    :class="{ expanded }"
                 />
             </div>
 
-            <span
-                v-show="!expanded"
-                class="expand expand-sidebar noselect"
-                @click="expanded = true"
-            ><Icon icon="arrow-right3" /></span>
-
-            <span
-                v-show="expanded"
-                class="expand expand-sidebar noselect"
-                @click="expanded = false"
-            ><Icon icon="arrow-left3" /></span>
-
             <div
                 class="header"
                 :class="{ hideable: sites.length > 0 }"
@@ -67,15 +53,15 @@
                         class="logo"
                     >
                 </a>
-
-                <span
-                    v-show="expanded"
-                    class="expand collapse-header noselect"
-                    @click="expanded = false"
-                ><Icon icon="arrow-up3" /></span>
             </div>
 
             <div class="content-inner">
+                <span
+                    v-show="expanded"
+                    class="expand collapse-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Sites
                     v-if="sites.length"
                     :sites="sites"
@@ -85,13 +71,13 @@
 
                 <span
                     v-show="!expanded"
-                    class="expand expand-header noselect"
+                    class="expand expand-sites noselect"
                     @click="expanded = true"
                 ><Icon icon="arrow-down3" /></span>
 
                 <span
                     v-show="expanded"
-                    class="expand expand-header noselect"
+                    class="expand expand-sites noselect"
                     @click="expanded = false"
                 ><Icon icon="arrow-up3" /></span>
 
@@ -184,20 +170,10 @@ export default {
     flex-shrink: 0;
     color: $text-contrast;
     overflow: hidden;
+}
 
-    .title {
+.sidebar .title {
-        display: flex;
+    border-bottom: solid 1px $highlight-hint;
-        justify-content: center;
-        border-bottom: solid 1px $highlight-hint;
-    }
-
-    &.expanded {
-        width: calc(100% - 25rem);
-
-        .logo {
-            max-width: 18rem;
-        }
-    }
 }
 
 .logo {
@@ -213,9 +189,9 @@ export default {
 
 .header {
     width: 100%;
+    height: 3rem;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
-    align-items: center;
     flex-shrink: 0;
     border-bottom: solid 1px $shadow-hint;
     background: $profile;
@@ -226,7 +202,7 @@ export default {
 
     .logo {
         max-width: 20rem;
-        max-height: 3rem;
+        height: 100%;
         padding: .5rem;
     }
 }
@@ -241,23 +217,28 @@ export default {
     cursor: pointer;
 
     .icon {
-        fill: $shadow;
         margin: 0 .5rem;
     }
+}
 
-    &:hover .icon {
+.expand-sites {
-        fill: $shadow-strong;
+    color: $shadow;
+    display: none;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        color: $shadow-strong;
+
+        .icon {
+            fill: $shadow-strong;
+        }
     }
 }
 
-.expand-sidebar {
+.collapse-sites {
-}
-
-.expand-header {
-    display: none;
-}
-
-.collapse-header {
     background: $profile;
     color: $highlight;
 
@@ -294,15 +275,10 @@ export default {
         }
     }
 
-    .expand-header {
+    .expand-sites {
         display: flex;
     }
 
-    .expand-sidebar,
-    .collapse-sidebar {
-        display: none;
-    }
-
     .network {
         flex-direction: column;
     }

assets/components/releases/release.vue

@@ -255,11 +255,10 @@ export default {
     box-sizing: border-box;
 }
 
-.info {
+.info.column {
     padding: 1rem;
     border-left: solid 1px $shadow-hint;
     border-right: solid 1px $shadow-hint;
-    flex-grow: 1;
 }
 
 .row {

assets/components/sites/sites.vue

@@ -61,15 +61,11 @@ export default {
 
 .tiles {
     display: grid;
-    grid-gap: 0 1rem;
+    grid-gap: 1rem;
     flex-grow: 1;
     padding: 1rem;
+    margin: 0;
     grid-template-columns: 1fr;
     overflow-y: auto;
 }
-
-.tile {
-    /* vertical grid-gap not compatible with bottom padding on scrolling containers */
-    margin: 0 0 1rem 0;
-}
 </style>

package-lock.json

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

package.json

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

public/css/style.css

@@ -392,12 +392,10 @@
   margin: 0 auto;
   box-sizing: border-box;
 }
-.info[data-v-d4b03dc2] {
+.info.column[data-v-d4b03dc2] {
   padding: 1rem;
   border-left: solid 1px rgba(0, 0, 0, 0.1);
   border-right: solid 1px rgba(0, 0, 0, 0.1);
-  -webkit-box-flex: 1;
-          flex-grow: 1;
 }
 .row[data-v-d4b03dc2] {
   display: -webkit-box;
@@ -676,17 +674,14 @@
 }
 .tiles[data-v-7bebaa3e] {
   display: grid;
-  grid-gap: 0 1rem;
+  grid-gap: 1rem;
   -webkit-box-flex: 1;
           flex-grow: 1;
   padding: 1rem;
+  margin: 0;
   grid-template-columns: 1fr;
   overflow-y: auto;
 }
-.tile[data-v-7bebaa3e] {
-  /* vertical grid-gap not compatible with bottom padding on scrolling containers */
-  margin: 0 0 1rem 0;
-}
 
 /* $primary: #ff886c; */
 /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
@@ -727,17 +722,7 @@
   overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
-    display: -webkit-box;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
-    display: flex;
-    -webkit-box-pack: center;
-            justify-content: center;
-    border-bottom: solid 1px rgba(255, 255, 255, 0.075);
-}
-.sidebar.expanded[data-v-e2e12602] {
-    width: calc(100% - 25rem);
-}
-.sidebar.expanded .logo[data-v-e2e12602] {
-      max-width: 18rem;
 }
 .logo[data-v-e2e12602] {
   width: 100%;
@@ -755,13 +740,11 @@
 }
 .header[data-v-e2e12602] {
   width: 100%;
+  height: 3rem;
   display: -webkit-box;
   display: flex;
-  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
-  -webkit-box-direction: normal;
+          justify-content: center;
-          flex-direction: column;
-  -webkit-box-align: center;
-          align-items: center;
   flex-shrink: 0;
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
   background: #222;
@@ -771,7 +754,7 @@
 }
 .header .logo[data-v-e2e12602] {
     max-width: 20rem;
-    max-height: 3rem;
+    height: 100%;
     padding: .5rem;
 }
 .expand[data-v-e2e12602] {
@@ -787,26 +770,32 @@
   cursor: pointer;
 }
 .expand .icon[data-v-e2e12602] {
-    fill: rgba(0, 0, 0, 0.5);
     margin: 0 .5rem;
 }
-.expand:hover .icon[data-v-e2e12602] {
+.expand-sites[data-v-e2e12602] {
-    fill: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, 0.5);
-}
-.expand-header[data-v-e2e12602] {
   display: none;
 }
-.collapse-header[data-v-e2e12602] {
+.expand-sites .icon[data-v-e2e12602] {
+    fill: rgba(0, 0, 0, 0.5);
+}
+.expand-sites[data-v-e2e12602]:hover {
+    color: rgba(0, 0, 0, 0.7);
+}
+.expand-sites:hover .icon[data-v-e2e12602] {
+      fill: rgba(0, 0, 0, 0.7);
+}
+.collapse-sites[data-v-e2e12602] {
   background: #222;
   color: rgba(255, 255, 255, 0.5);
 }
-.collapse-header .icon[data-v-e2e12602] {
+.collapse-sites .icon[data-v-e2e12602] {
     fill: rgba(255, 255, 255, 0.5);
 }
-.collapse-header[data-v-e2e12602]:hover {
+.collapse-sites[data-v-e2e12602]:hover {
     color: #fff;
 }
-.collapse-header:hover .icon[data-v-e2e12602] {
+.collapse-sites:hover .icon[data-v-e2e12602] {
       fill: #fff;
 }
 .sites.compact[data-v-e2e12602] {
@@ -827,14 +816,10 @@
 .sites.compact.expanded[data-v-e2e12602] {
       display: grid;
 }
-.expand-header[data-v-e2e12602] {
+.expand-sites[data-v-e2e12602] {
     display: -webkit-box;
     display: flex;
 }
-.expand-sidebar[data-v-e2e12602],
-  .collapse-sidebar[data-v-e2e12602] {
-    display: none;
-}
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;