Improving network overview. Added DDF logos and tag posters.

This commit is contained in:
ThePendulum 2020-01-04 04:58:56 +01:00
parent 72b175e9e2
commit 30cf597ec9
27 changed files with 121 additions and 82 deletions

View File

@ -1,12 +1,12 @@
<template> <template>
<div <div
v-if="network" v-if="network"
class="content network" class="content"
> >
<FilterBar :fetch-releases="fetchNetwork" /> <FilterBar :fetch-releases="fetchNetwork" />
<div class="content-inner"> <div class="network">
<div class="header"> <div class="sidebar">
<a <a
:href="network.url" :href="network.url"
target="_blank" target="_blank"
@ -17,20 +17,14 @@
:src="`/img/logos/${network.slug}/network.png`" :src="`/img/logos/${network.slug}/network.png`"
class="logo" class="logo"
> >
<Icon
v-if="network.url"
icon="new-tab"
class="icon-href"
/>
</a> </a>
<p class="description">{{ network.description }}</p> <p
</div> v-if="network.description"
class="description"
>{{ network.description }}</p>
<template v-if="sites.length"> <template v-if="sites.length">
<h3 class="heading">Sites</h3>
<ul class="nolist sites"> <ul class="nolist sites">
<li <li
v-for="site in sites" v-for="site in sites"
@ -40,13 +34,15 @@
</li> </li>
</ul> </ul>
</template> </template>
</div>
<div class="content-inner">
<Releases <Releases
:releases="releases" :releases="releases"
:context="network.name"
/> />
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -93,44 +89,57 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'theme'; @import 'theme';
.header { .network {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: row;
justify-content: space-between; flex-grow: 1;
align-items: top; justify-content: stretch;
margin: 0 0 2rem 0; overflow-y: auto;
} }
.title { .sidebar {
display: inline-flex; height: 100%;
align-items: top; display: flex;
margin: 0 1rem 0 0; flex-direction: column;
background: $profile;
&:hover .icon { color: $text-contrast;
fill: $primary; width: 25rem;
} overflow: hidden;
} }
.logo { .logo {
width: 20rem; width: 100%;
max-height: 8rem; max-height: 8rem;
object-fit: contain; object-fit: contain;
margin: 0 .5rem 0 0; box-sizing: border-box;
padding: 1rem 2rem;
border-bottom: solid 1px $highlight-hint;
margin: 0;
filter: $logo-highlight;
} }
.sites { .sites {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
margin: 0 0 2rem 0; padding: 1rem;
} margin: 0;
grid-template-columns: repeat(2, .5fr);
.sites { overflow-y: auto;
grid-template-columns: repeat(auto-fit, 15rem);
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {
.network {
flex-direction: column;
}
.sidebar {
height: 20rem;
overflow: hidden;
}
.sites { .sites {
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
overflow-y: auto;
} }
} }
</style> </style>

View File

@ -313,7 +313,7 @@ export default {
.logo { .logo {
display: inline-block; display: inline-block;
filter: $logo-outline; filter: $logo-shadow;
} }
.logo-site { .logo-site {

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="tags"> <div class="tags">
<h3>Oral Sex</h3> <h3>Oral</h3>
<div class="tiles"> <div class="tiles">
<Tag <Tag

View File

@ -52,7 +52,7 @@ export default {
object-fit: contain; object-fit: contain;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
filter: $logo-outline; filter: $logo-shadow;
} }
.title { .title {

View File

@ -4,11 +4,11 @@
:title="site.name" :title="site.name"
class="tile" class="tile"
> >
<object <img
:data="`/img/logos/${site.network.slug}/${site.slug}.png`" :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
type="image/png" :alt="site.name"
class="logo" class="logo"
>{{ site.name }}</object> >
</a> </a>
</template> </template>
@ -53,7 +53,7 @@ export default {
object-fit: contain; object-fit: contain;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
filter: $logo-outline; filter: $logo-shadow;
} }
.title { .title {

View File

@ -23,7 +23,8 @@ $highlight-strong: rgba(255, 255, 255, .7);
$highlight-weak: rgba(255, 255, 255, .2); $highlight-weak: rgba(255, 255, 255, .2);
$highlight-hint: rgba(255, 255, 255, .075); $highlight-hint: rgba(255, 255, 255, .075);
$logo-outline: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak); $logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
$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);
$profile: #222; $profile: #222;

View File

@ -632,44 +632,63 @@
} }
/* $primary: #ff886c; */ /* $primary: #ff886c; */
.header[data-v-e2e12602] { .network[data-v-e2e12602] {
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
flex-wrap: wrap; -webkit-box-orient: horizontal;
-webkit-box-pack: justify; -webkit-box-direction: normal;
justify-content: space-between; flex-direction: row;
-webkit-box-align: top; -webkit-box-flex: 1;
align-items: top; flex-grow: 1;
margin: 0 0 2rem 0; -webkit-box-pack: stretch;
justify-content: stretch;
overflow-y: auto;
} }
.title[data-v-e2e12602] { .sidebar[data-v-e2e12602] {
display: -webkit-inline-box; height: 100%;
display: inline-flex; display: -webkit-box;
-webkit-box-align: top; display: flex;
align-items: top; -webkit-box-orient: vertical;
margin: 0 1rem 0 0; -webkit-box-direction: normal;
} flex-direction: column;
.title:hover .icon[data-v-e2e12602] { background: #222;
fill: #ff6c88; color: #fff;
width: 25rem;
overflow: hidden;
} }
.logo[data-v-e2e12602] { .logo[data-v-e2e12602] {
width: 20rem; width: 100%;
max-height: 8rem; max-height: 8rem;
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
margin: 0 .5rem 0 0; box-sizing: border-box;
padding: 1rem 2rem;
border-bottom: solid 1px rgba(255, 255, 255, 0.075);
margin: 0;
-webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
} }
.sites[data-v-e2e12602] { .sites[data-v-e2e12602] {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
margin: 0 0 2rem 0; padding: 1rem;
} margin: 0;
.sites[data-v-e2e12602] { grid-template-columns: repeat(2, 0.5fr);
grid-template-columns: repeat(auto-fit, 15rem); overflow-y: auto;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.network[data-v-e2e12602] {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.sidebar[data-v-e2e12602] {
height: 20rem;
overflow: hidden;
}
.sites[data-v-e2e12602] { .sites[data-v-e2e12602] {
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(15rem, 0.5fr));
overflow-y: auto;
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/img/tags/double-penetration/poster.jpeg Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 782 KiB

BIN
public/img/tags/double-penetration/poster_thumb.jpeg Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 114 KiB

View File

@ -29,7 +29,7 @@ const tagPosters = [
{ {
path: 'tags/double-penetration/poster.jpeg', path: 'tags/double-penetration/poster.jpeg',
tagSlug: 'double-penetration', tagSlug: 'double-penetration',
comment: '', comment: 'Mia Malkova in "DP!" for HardX',
}, },
{ {
path: 'tags/double-anal/poster.jpeg', path: 'tags/double-anal/poster.jpeg',
@ -114,7 +114,7 @@ const tagPosters = [
{ {
path: 'tags/trainbang/poster.jpeg', path: 'tags/trainbang/poster.jpeg',
tagSlug: 'trainbang', tagSlug: 'trainbang',
comment: 'Nicole Black in GIO971 for LegalPorno', comment: 'Kali Roses in "Passing Me Around" for Blacked',
}, },
{ {
path: 'tags/bukkake/poster.jpeg', path: 'tags/bukkake/poster.jpeg',
@ -211,11 +211,21 @@ const tagPhotos = [
tagSlug: 'dv-tp', tagSlug: 'dv-tp',
comment: 'Luna Rival in LegalPorno SZ1490', comment: 'Luna Rival in LegalPorno SZ1490',
}, },
{
path: 'tags/double-penetration/0.jpeg',
tagSlug: 'double-penetration',
comment: '',
},
{ {
path: 'tags/gapes/0.jpeg', path: 'tags/gapes/0.jpeg',
tagSlug: 'gapes', tagSlug: 'gapes',
comment: 'McKenzee Miles in "Anal Buffet 4" for Evil Angel', comment: 'McKenzee Miles in "Anal Buffet 4" for Evil Angel',
}, },
{
path: 'tags/trainbang/0.jpeg',
tagSlug: 'trainbang',
comment: 'Nicole Black in GIO971 for LegalPorno',
},
{ {
path: 'tags/triple-anal/1.jpeg', path: 'tags/triple-anal/1.jpeg',
tagSlug: 'triple-anal', tagSlug: 'triple-anal',