1.49.1

Fixed missing bottom margin in site list.
1.49.0
2020-01-09 03:39:18 +01:00 · 2020-01-09 03:39:13 +01:00 · 2020-01-09 03:23:18 +01:00 · 2020-01-09 03:23:16 +01:00
6 changed files with 103 additions and 59 deletions
--- a/assets/components/networks/network.vue
+++ b/assets/components/networks/network.vue
@ -12,6 +12,7 @@
            <div
                v-show="sites.length > 0"
                class="sidebar"
+                :class="{ expanded }"
            >
                <a
                    v-tooltip.bottom="`Go to ${network.url}`"
@ -34,9 +35,22 @@
                <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 }"
@ -53,15 +67,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"
@ -71,13 +85,13 @@

                <span
                    v-show="!expanded"
-                    class="expand expand-sites noselect"
+                    class="expand expand-header noselect"
                    @click="expanded = true"
                ><Icon icon="arrow-down3" /></span>

                <span
                    v-show="expanded"
-                    class="expand expand-sites noselect"
+                    class="expand expand-header noselect"
                    @click="expanded = false"
                ><Icon icon="arrow-up3" /></span>

@ -170,10 +184,20 @@ export default {
    flex-shrink: 0;
    color: $text-contrast;
    overflow: hidden;
-}

-.sidebar .title {
-    border-bottom: solid 1px $highlight-hint;
+    .title {
+        display: flex;
+        justify-content: center;
+        border-bottom: solid 1px $highlight-hint;
+    }
+
+    &.expanded {
+        width: calc(100% - 25rem);
+
+        .logo {
+            max-width: 18rem;
+        }
+    }
 }

 .logo {
@ -189,9 +213,9 @@ export default {

 .header {
    width: 100%;
-    height: 3rem;
    display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
    flex-shrink: 0;
    border-bottom: solid 1px $shadow-hint;
    background: $profile;
@ -202,7 +226,7 @@ export default {

    .logo {
        max-width: 20rem;
-        height: 100%;
+        max-height: 3rem;
        padding: .5rem;
    }
 }
@ -217,28 +241,23 @@ export default {
    cursor: pointer;

    .icon {
+        fill: $shadow;
        margin: 0 .5rem;
    }
+
+    &:hover .icon {
+        fill: $shadow-strong;
+    }
 }

-.expand-sites {
-    color: $shadow;
+.expand-sidebar {
+}
+
+.expand-header {
    display: none;
-
-    .icon {
-        fill: $shadow;
-    }
-
-    &:hover {
-        color: $shadow-strong;
-
-        .icon {
-            fill: $shadow-strong;
-        }
-    }
 }

-.collapse-sites {
+.collapse-header {
    background: $profile;
    color: $highlight;

@ -275,10 +294,15 @@ export default {
        }
    }

-    .expand-sites {
+    .expand-header {
        display: flex;
    }

+    .expand-sidebar,
+    .collapse-sidebar {
+        display: none;
+    }
+
    .network {
        flex-direction: column;
    }
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@ -255,10 +255,11 @@ export default {
    box-sizing: border-box;
 }

-.info.column {
+.info {
    padding: 1rem;
    border-left: solid 1px $shadow-hint;
    border-right: solid 1px $shadow-hint;
+    flex-grow: 1;
 }

 .row {
--- a/assets/components/sites/sites.vue
+++ b/assets/components/sites/sites.vue
@ -61,11 +61,15 @@ export default {

 .tiles {
    display: grid;
-    grid-gap: 1rem;
+    grid-gap: 0 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>
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "traxxx",
-  "version": "1.48.1",
+  "version": "1.49.1",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "traxxx",
-    "version": "1.48.1",
+    "version": "1.49.1",
    "description": "All the latest porn releases in one place",
    "main": "src/app.js",
    "scripts": {
--- a/public/css/style.css
+++ b/public/css/style.css
@ -392,10 +392,12 @@
  margin: 0 auto;
  box-sizing: border-box;
 }
-.info.column[data-v-d4b03dc2] {
+.info[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;
@ -674,14 +676,17 @@
 }
 .tiles[data-v-7bebaa3e] {
  display: grid;
-  grid-gap: 1rem;
+  grid-gap: 0 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); */
@ -722,7 +727,17 @@
  overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
-  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+    display: -webkit-box;
+    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%;
@ -740,11 +755,13 @@
 }
 .header[data-v-e2e12602] {
  width: 100%;
-  height: 3rem;
  display: -webkit-box;
  display: flex;
-  -webkit-box-pack: center;
-          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          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;
@ -754,7 +771,7 @@
 }
 .header .logo[data-v-e2e12602] {
    max-width: 20rem;
-    height: 100%;
+    max-height: 3rem;
    padding: .5rem;
 }
 .expand[data-v-e2e12602] {
@ -770,32 +787,26 @@
  cursor: pointer;
 }
 .expand .icon[data-v-e2e12602] {
+    fill: rgba(0, 0, 0, 0.5);
    margin: 0 .5rem;
 }
-.expand-sites[data-v-e2e12602] {
-  color: rgba(0, 0, 0, 0.5);
+.expand:hover .icon[data-v-e2e12602] {
+    fill: rgba(0, 0, 0, 0.7);
+}
+.expand-header[data-v-e2e12602] {
  display: none;
 }
-.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] {
+.collapse-header[data-v-e2e12602] {
  background: #222;
  color: rgba(255, 255, 255, 0.5);
 }
-.collapse-sites .icon[data-v-e2e12602] {
+.collapse-header .icon[data-v-e2e12602] {
    fill: rgba(255, 255, 255, 0.5);
 }
-.collapse-sites[data-v-e2e12602]:hover {
+.collapse-header[data-v-e2e12602]:hover {
    color: #fff;
 }
-.collapse-sites:hover .icon[data-v-e2e12602] {
+.collapse-header:hover .icon[data-v-e2e12602] {
      fill: #fff;
 }
 .sites.compact[data-v-e2e12602] {
@ -816,10 +827,14 @@
 .sites.compact.expanded[data-v-e2e12602] {
      display: grid;
 }
-.expand-sites[data-v-e2e12602] {
+.expand-header[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;
Author	SHA1	Message	Date
ThePendulum	83cbdcbf3d	1.49.1	2020-01-09 03:39:18 +01:00
ThePendulum	f652b0d91c	Fixed missing bottom margin in site list.	2020-01-09 03:39:13 +01:00
ThePendulum	8564d64fa1	1.49.0	2020-01-09 03:23:18 +01:00
ThePendulum	bca925d122	Added expand/collapse sidebar to desktop network sites.	2020-01-09 03:23:16 +01:00