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

View File

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

View File

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

View File

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

View File

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

View File

@ -23,7 +23,8 @@ $highlight-strong: rgba(255, 255, 255, .7);
$highlight-weak: rgba(255, 255, 255, .2);
$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;

View File

@ -632,44 +632,63 @@
}
/* $primary: #ff886c; */
.header[data-v-e2e12602] {
.network[data-v-e2e12602] {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: top;
align-items: top;
margin: 0 0 2rem 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-pack: stretch;
justify-content: stretch;
overflow-y: auto;
}
.title[data-v-e2e12602] {
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: top;
align-items: top;
margin: 0 1rem 0 0;
}
.title:hover .icon[data-v-e2e12602] {
fill: #ff6c88;
.sidebar[data-v-e2e12602] {
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background: #222;
color: #fff;
width: 25rem;
overflow: hidden;
}
.logo[data-v-e2e12602] {
width: 20rem;
width: 100%;
max-height: 8rem;
-o-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] {
display: grid;
grid-gap: 1rem;
margin: 0 0 2rem 0;
}
.sites[data-v-e2e12602] {
grid-template-columns: repeat(auto-fit, 15rem);
padding: 1rem;
margin: 0;
grid-template-columns: repeat(2, 0.5fr);
overflow-y: auto;
}
@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] {
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',
tagSlug: 'double-penetration',
comment: '',
comment: 'Mia Malkova in "DP!" for HardX',
},
{
path: 'tags/double-anal/poster.jpeg',
@ -114,7 +114,7 @@ const tagPosters = [
{
path: 'tags/trainbang/poster.jpeg',
tagSlug: 'trainbang',
comment: 'Nicole Black in GIO971 for LegalPorno',
comment: 'Kali Roses in "Passing Me Around" for Blacked',
},
{
path: 'tags/bukkake/poster.jpeg',
@ -211,11 +211,21 @@ const tagPhotos = [
tagSlug: 'dv-tp',
comment: 'Luna Rival in LegalPorno SZ1490',
},
{
path: 'tags/double-penetration/0.jpeg',
tagSlug: 'double-penetration',
comment: '',
},
{
path: 'tags/gapes/0.jpeg',
tagSlug: 'gapes',
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',
tagSlug: 'triple-anal',