Simplified single-site network overview. Added Jules Jordan favicons.

This commit is contained in:
ThePendulum 2020-01-07 00:30:51 +01:00
parent 6ba604709e
commit 89064e9e0c
21 changed files with 82 additions and 42 deletions

View File

@ -5,8 +5,14 @@
> >
<FilterBar :fetch-releases="fetchNetwork" /> <FilterBar :fetch-releases="fetchNetwork" />
<div class="network"> <div
<div class="sidebar"> class="network"
:class="{ nosites: sites.length === 0 }"
>
<div
v-show="sites.length > 0"
class="sidebar"
>
<a <a
v-tooltip.bottom="`Go to ${network.url}`" v-tooltip.bottom="`Go to ${network.url}`"
:href="network.url" :href="network.url"
@ -31,7 +37,10 @@
/> />
</div> </div>
<div class="header"> <div
class="header"
:class="{ hideable: sites.length > 0 }"
>
<a <a
v-tooltip.bottom="`Go to ${network.url}`" v-tooltip.bottom="`Go to ${network.url}`"
:href="network.url" :href="network.url"
@ -130,6 +139,10 @@ export default {
flex-grow: 1; flex-grow: 1;
justify-content: stretch; justify-content: stretch;
overflow-y: auto; overflow-y: auto;
&.nosites {
flex-direction: column;
}
} }
.content-inner { .content-inner {
@ -169,11 +182,21 @@ export default {
.header { .header {
width: 100%; width: 100%;
height: 3rem; height: 3rem;
display: none; display: flex;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
border-bottom: solid 1px $shadow-hint; border-bottom: solid 1px $shadow-hint;
background: $profile; background: $profile;
&.hideable {
display: none;
}
.logo {
max-width: 20rem;
height: 100%;
padding: .5rem;
}
} }
.sites.compact { .sites.compact {
@ -194,7 +217,8 @@ export default {
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {
.header { .header,
.header.hideable {
display: flex; display: flex;
} }
@ -214,12 +238,6 @@ export default {
flex-direction: column; flex-direction: column;
} }
.logo {
max-width: 20rem;
height: 100%;
padding: .5rem;
}
.sidebar { .sidebar {
display: none; display: none;
height: auto; height: auto;

View File

@ -81,18 +81,6 @@
<span class="chain">presents</span> <span class="chain">presents</span>
<a <a
v-if="release.studio"
:href="`/site/${release.studio.slug}`"
>
<img
:src="`/img/logos/${release.network.slug}/${release.studio.slug}.png`"
:title="release.studio.name"
class="logo logo-site"
>
</a>
<a
v-else
:href="`/site/${release.site.slug}`" :href="`/site/${release.site.slug}`"
> >
<img <img

View File

@ -31,7 +31,7 @@ $profile: #222;
$tile: #2a2a2a; $tile: #2a2a2a;
$link: #cc4466; $link: #cc4466;
$empty: #222; $empty: #333;
$male: #0af; $male: #0af;
$female: #f0a; $female: #f0a;

View File

@ -32,15 +32,12 @@ function curateSite(site, network) {
name: site.name, name: site.name,
slug: site.slug, slug: site.slug,
url: site.url, url: site.url,
independent: site.independent,
}; };
if (site.releases) curatedSite.releases = site.releases.map(release => curateRelease(release)); if (site.releases) curatedSite.releases = site.releases.map(release => curateRelease(release));
if (site.network || network) curatedSite.network = site.network || network; if (site.network || network) curatedSite.network = site.network || network;
if (site.parameters) {
curatedSite.independent = !!JSON.parse(site.parameters).independent;
}
return curatedSite; return curatedSite;
} }
@ -60,10 +57,6 @@ function curateNetwork(network) {
curatedNetwork.studios = network.studios; curatedNetwork.studios = network.studios;
} }
if (network.parameters) {
curatedNetwork.parameters = JSON.parse(network.parameters);
}
return curatedNetwork; return curatedNetwork;
} }

View File

@ -4,6 +4,7 @@ const siteFragment = `
name name
slug slug
url url
independent
network { network {
id id
name name
@ -19,6 +20,7 @@ const sitesFragment = `
name name
slug slug
url url
independent
network { network {
id id
name name

View File

@ -21,8 +21,8 @@ function initNetworksActions(store, _router) {
name name
slug slug
url url
independent
${releasesFragment} ${releasesFragment}
parameters
network { network {
id id
name name

View File

@ -292,7 +292,7 @@
/* $primary: #ff886c; */ /* $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); */ /* $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); */
.banner[data-v-42bb19c4] { .banner[data-v-42bb19c4] {
background: #222; background: #333;
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
@ -684,6 +684,11 @@
justify-content: stretch; justify-content: stretch;
overflow-y: auto; overflow-y: auto;
} }
.network.nosites[data-v-e2e12602] {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.content-inner[data-v-e2e12602] { .content-inner[data-v-e2e12602] {
padding: 0; padding: 0;
} }
@ -723,13 +728,22 @@
.header[data-v-e2e12602] { .header[data-v-e2e12602] {
width: 100%; width: 100%;
height: 3rem; height: 3rem;
display: none; display: -webkit-box;
display: flex;
flex-shrink: 0; flex-shrink: 0;
-webkit-box-pack: center; -webkit-box-pack: center;
justify-content: center; justify-content: center;
border-bottom: solid 1px rgba(0, 0, 0, 0.1); border-bottom: solid 1px rgba(0, 0, 0, 0.1);
background: #222; background: #222;
} }
.header.hideable[data-v-e2e12602] {
display: none;
}
.header .logo[data-v-e2e12602] {
max-width: 20rem;
height: 100%;
padding: .5rem;
}
.sites.compact[data-v-e2e12602] { .sites.compact[data-v-e2e12602] {
display: none; display: none;
background: #222; background: #222;
@ -746,7 +760,8 @@
font-weight: bold; font-weight: bold;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.header[data-v-e2e12602] { .header[data-v-e2e12602],
.header.hideable[data-v-e2e12602] {
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
} }
@ -765,11 +780,6 @@
-webkit-box-direction: normal; -webkit-box-direction: normal;
flex-direction: column; flex-direction: column;
} }
.logo[data-v-e2e12602] {
max-width: 20rem;
height: 100%;
padding: .5rem;
}
.sidebar[data-v-e2e12602] { .sidebar[data-v-e2e12602] {
display: none; display: none;
height: auto; height: auto;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,7 +1,9 @@
'use strict'; 'use strict';
const ActorPlugins = require('./actors'); const ActorPlugins = require('./actors');
const SitePlugins = require('./sites');
module.exports = { module.exports = {
ActorPlugins, ActorPlugins,
SitePlugins,
}; };

26
src/web/plugins/sites.js Normal file
View File

@ -0,0 +1,26 @@
'use strict';
const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
const schemaExtender = makeExtendSchemaPlugin(_build => ({
typeDefs: gql`
extend type Site {
independent: Boolean @requires(columns: ["parameters"])
}
`,
resolvers: {
Site: {
independent(parent, _args, _context, _info) {
if (!parent.parameters) {
return false;
}
const parameters = JSON.parse(parent.parameters);
return !!parameters.independent;
},
},
},
}));
module.exports = [schemaExtender];

View File

@ -11,7 +11,7 @@ const PgConnectionFilterPlugin = require('postgraphile-plugin-connection-filter'
const PgSimplifyInflectorPlugin = require('@graphile-contrib/pg-simplify-inflector'); const PgSimplifyInflectorPlugin = require('@graphile-contrib/pg-simplify-inflector');
const PgOrderByRelatedPlugin = require('@graphile-contrib/pg-order-by-related'); const PgOrderByRelatedPlugin = require('@graphile-contrib/pg-order-by-related');
const { ActorPlugins } = require('./plugins/plugins'); const { ActorPlugins, SitePlugins } = require('./plugins/plugins');
const { const {
fetchReleases, fetchReleases,
@ -56,6 +56,7 @@ function initServer() {
PgConnectionFilterPlugin, PgConnectionFilterPlugin,
PgOrderByRelatedPlugin, PgOrderByRelatedPlugin,
...ActorPlugins, ...ActorPlugins,
...SitePlugins,
], ],
}, },
)); ));