Improved site and network pages. Fixed various issues.

assets/components/network/network.vue

@@ -3,46 +3,35 @@
         v-if="network"
         class="content network"
     >
-        <div class="header">
-            <span class="intro">
-                <h2 class="title">
-                    {{ network.name }}
-                    <a
-                        v-if="network.url"
-                        :href="network.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        <Icon
-                            icon="new-tab"
-                            class="icon-href"
-                        />
-                    </a>
-                </h2>
-
-                <span class="description">{{ network.description }}</span>
-            </span>
-
-            <a
-                v-if="network.url"
-                :href="network.url"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                <object
-                    :data="`/img/logos/${network.slug}/network.png`"
-                    type="image/png"
-                    class="logo"
-                >{{ network.name }}</object>
-            </a>
-        </div>
-
         <div class="content-inner">
+            <div class="header">
+                <a
+                    v-if="network.url"
+                    :href="network.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
+                >
+                    <object
+                        :data="`/img/logos/${network.slug}/network.png`"
+                        type="image/png"
+                        class="logo"
+                    ><h2>{{ network.name }}</h2></object>
+
+                    <Icon
+                        icon="new-tab"
+                        class="icon-href"
+                    />
+                </a>
+
+                <p class="description">{{ network.description }}</p>
+            </div>
+
             <h3 class="heading">Sites</h3>
 
             <ul class="nolist sites">
                 <li
-                    v-for="site in network.sites"
+                    v-for="site in sites"
                     :key="`site-${site.id}`"
                 >
                     <SiteTile :site="site" />
@@ -71,6 +60,8 @@ async function mounted() {
     [this.network] = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
     this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
 
+    this.sites = this.network.sites.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
+
     this.pageTitle = this.network.name;
 }
 
@@ -82,6 +73,7 @@ export default {
     data() {
         return {
             network: null,
+            sites: null,
             releases: null,
             pageTitle: null,
         };
@@ -95,31 +87,42 @@ export default {
 
 .header {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    padding: 1rem;
+    align-items: top;
+    margin: 0 0 2rem 0;
 }
 
 .title {
-    display: inline-block;
+    display: inline-flex;
-    margin: 0 .5rem 0 0;
+    align-items: top;
-}
+    margin: 0 1rem 0 0;
 
-.heading {
+    &:hover .icon {
-    padding: 0;
+        fill: $primary;
-    margin: 0 0 1rem 0;
+    }
 }
 
 .logo {
-    height: 3rem;
+    width: 20rem;
+    max-height: 8rem;
+    object-fit: contain;
+    margin: 0 .5rem 0 0;
 }
 
 .sites {
     display: grid;
     grid-gap: 1rem;
-    margin: 0 0 1rem 0;
+    margin: 0 0 2rem 0;
 }
 
 .sites {
     grid-template-columns: repeat(auto-fit, 15rem);
 }
+
+@media(max-width: $breakpoint) {
+    .sites {
+        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    }
+}
 </style>

assets/components/site/site.vue

@@ -3,62 +3,48 @@
         v-if="site"
         class="content site"
     >
-        <div class="header">
+        <div class="content-inner">
-            <span class="intro">
+            <div class="header">
-                <h2 class="title">
-                    {{ site.name }}
-                    <a
-                        v-if="site.url"
-                        :href="site.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        <Icon
-                            icon="new-tab"
-                            class="icon-href"
-                        />
-                    </a>
-                </h2>
-
-                <span class="description">{{ site.description }}</span>
-            </span>
-
-            <span class="link">
                 <a
                     v-if="site.url"
                     :href="site.url"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="logo-link"
+                    class="title"
                 >
                     <object
                         :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
                         :title="site.name"
                         type="image/png"
                         class="logo"
-                    >{{ site.name }}</object>
+                    ><h2>{{ site.name }}</h2></object>
+
+                    <Icon
+                        icon="new-tab"
+                        class="icon-href"
+                    />
                 </a>
 
-                <span class="networklogo-container">
+                <span class="link">
-                    Part of
+                    <span class="networklogo-container">
-                    <a
+                        Part of
-                        :href="site.network.url"
+                        <a
-                        target="_blank"
+                            :href="`/network/${site.network.slug}`"
-                        rel="noopener noreferrer"
+                            class="networklogo-link"
-                        class="networklogo-link"
+                        >
-                    >
+                            <object
-                        <object
+                                :data="`/img/logos/${site.network.slug}/network.png`"
-                            :data="`/img/logos/${site.network.slug}/network.png`"
+                                :title="site.network.name"
-                            :title="site.network.name"
+                                type="image/png"
-                            type="image/png"
+                                class="networklogo"
-                            class="networklogo"
+                            >{{ site.network.name }}</object>
-                        >{{ site.network.name }}</object>
+                        </a>
-                    </a>
+                    </span>
                 </span>
-            </span>
+            </div>
-        </div>
+
+            <p class="description">{{ site.description }}</p>
 
-        <div class="content-inner">
             <h3 class="heading">Latest releases</h3>
 
             <ul class="nolist scenes">
@@ -103,13 +89,18 @@ export default {
 
 .header {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    padding: 1rem;
 }
 
 .title {
-    display: inline-block;
+    display: inline-flex;
-    margin: 0 .5rem 0 0;
+    align-items: top;
+    margin: 0 1rem 0 0;
+
+    &:hover .icon {
+        fill: $primary;
+    }
 }
 
 .heading {
@@ -125,19 +116,25 @@ export default {
 }
 
 .logo {
-    height: 3rem;
+    width: 15rem;
+    max-height: 8rem;
+    object-fit: contain;
+    margin: 0 .5rem 1rem 0;
 }
 
 .networklogo-container {
-    color: $shadow;
+    display: flex;
-    display: block;
+    align-items: center;
-    margin: .5rem 0 0 0;
 }
 
 .networklogo {
     color: $text;
-    height: 1rem;
+    width: 15rem;
+    max-height: 6rem;
     font-weight: bold;
+    object-fit: contain;
+    object-position: 100% 0;
+    margin: 0 0 0 .5rem;
 }
 
 .sites,

assets/components/tile/release.vue

@@ -4,7 +4,7 @@
             <span class="details">
                 <a
                     :href="`/site/${release.site.slug}`"
-                    :title="release.network.name"
+                    :title="`Part of ${release.network.name}`"
                     class="site site-link"
                 >{{ release.site.name }}</a>
 

assets/components/tile/site.vue

@@ -1,6 +1,7 @@
 <template>
     <a
         :href="`/site/${site.slug}`"
+        :title="site.name"
         class="tile"
     >
         <object
@@ -42,12 +43,12 @@ export default {
 }
 
 .logo {
-    color: $text;
     width: 100%;
+    height: 5rem;
+    color: $text;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 3rem;
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;

assets/css/style.scss

@@ -24,7 +24,9 @@ body {
 
 .heading {
     color: $primary;
+    padding: 0;
     margin: 0 0 1rem 0;
+    font-size: 1.5rem;
 }
 
 .icon.icon-href {

migrations/20190325001339_releases.js

@@ -22,6 +22,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('directors', (table) => {
         table.increments('id', 12);
@@ -33,6 +36,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('tags_groups', (table) => {
         table.increments('id', 12);
@@ -42,6 +48,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('tags', (table) => {
         table.increments('id', 12);
@@ -49,6 +58,9 @@ exports.up = knex => Promise.resolve()
 
         table.text('description');
 
+        table.integer('priority', 2)
+            .defaultTo(0);
+
         table.integer('group_id', 12)
             .references('id')
             .inTable('tags_groups');
@@ -59,6 +71,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('networks', (table) => {
         table.increments('id', 12);
@@ -70,6 +85,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('sites', (table) => {
         table.increments('id', 12);
@@ -86,6 +104,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('studios', (table) => {
         table.increments('id', 12);
@@ -101,6 +122,9 @@ exports.up = knex => Promise.resolve()
 
         table.string('slug', 32)
             .unique();
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('releases', (table) => {
         table.increments('id', 16);
@@ -119,7 +143,7 @@ exports.up = knex => Promise.resolve()
         table.unique(['site_id', 'shoot_id']);
         table.unique(['site_id', 'entry_id']);
 
-        table.string('url');
+        table.string('url', 1000);
         table.string('title');
         table.date('date');
         table.text('description');
@@ -152,13 +176,18 @@ exports.up = knex => Promise.resolve()
         table.string('thumbnail');
         table.integer('index');
         table.string('mime');
-        table.string('hash');
 
-        table.enum('domain', ['networks', 'sites', 'releases', 'actors', 'directors']);
+        table.string('domain');
         table.integer('target_id', 16);
 
-        table.enum('role', ['photo', 'poster', 'trailer', 'logo', 'profile']);
+        table.string('role');
         table.string('quality', 6);
+
+        table.string('hash');
+        table.string('source', 1000);
+
+        table.datetime('created_at')
+            .defaultTo(knex.fn.now());
     }))
     .then(() => knex.schema.createTable('actors_associated', (table) => {
         table.increments('id', 16);

public/css/style.css

@@ -224,12 +224,16 @@
 /* $primary: #ff886c; */
 .header[data-v-3e57cf44] {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  padding: 1rem;
 }
 .title[data-v-3e57cf44] {
-  display: inline-block;
+  display: inline-flex;
-  margin: 0 .5rem 0 0;
+  align-items: top;
+  margin: 0 1rem 0 0;
+}
+.title:hover .icon[data-v-3e57cf44] {
+    fill: #ff6c88;
 }
 .heading[data-v-3e57cf44] {
   padding: 0;
@@ -242,17 +246,26 @@
   align-items: flex-end;
 }
 .logo[data-v-3e57cf44] {
-  height: 3rem;
+  width: 15rem;
+  max-height: 8rem;
+  -o-object-fit: contain;
+     object-fit: contain;
+  margin: 0 .5rem 1rem 0;
 }
 .networklogo-container[data-v-3e57cf44] {
-  color: rgba(0, 0, 0, 0.5);
+  display: flex;
-  display: block;
+  align-items: center;
-  margin: .5rem 0 0 0;
 }
 .networklogo[data-v-3e57cf44] {
   color: #222;
-  height: 1rem;
+  width: 15rem;
+  max-height: 6rem;
   font-weight: bold;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -o-object-position: 100% 0;
+     object-position: 100% 0;
+  margin: 0 0 0 .5rem;
 }
 .sites[data-v-3e57cf44],
 .scenes[data-v-3e57cf44] {
@@ -280,12 +293,12 @@
   text-decoration: none;
 }
 .logo[data-v-f4958086] {
-  color: #222;
   width: 100%;
+  height: 5rem;
+  color: #222;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 3rem;
   -o-object-fit: contain;
      object-fit: contain;
   font-size: 1rem;
@@ -302,28 +315,39 @@
 /* $primary: #ff886c; */
 .header[data-v-757c14c2] {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  padding: 1rem;
+  align-items: top;
+  margin: 0 0 2rem 0;
 }
 .title[data-v-757c14c2] {
-  display: inline-block;
+  display: inline-flex;
-  margin: 0 .5rem 0 0;
+  align-items: top;
+  margin: 0 1rem 0 0;
 }
-.heading[data-v-757c14c2] {
+.title:hover .icon[data-v-757c14c2] {
-  padding: 0;
+    fill: #ff6c88;
-  margin: 0 0 1rem 0;
 }
 .logo[data-v-757c14c2] {
-  height: 3rem;
+  width: 20rem;
+  max-height: 8rem;
+  -o-object-fit: contain;
+     object-fit: contain;
+  margin: 0 .5rem 0 0;
 }
 .sites[data-v-757c14c2] {
   display: grid;
   grid-gap: 1rem;
-  margin: 0 0 1rem 0;
+  margin: 0 0 2rem 0;
 }
 .sites[data-v-757c14c2] {
   grid-template-columns: repeat(auto-fit, 15rem);
 }
+@media (max-width: 720px) {
+.sites[data-v-757c14c2] {
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+}
+}
 
 /* $primary: #ff886c; */
 .header[data-v-677a8360] {
@@ -417,7 +441,9 @@ body {
 
 .heading {
   color: #ff6c88;
-  margin: 0 0 1rem 0; }
+  padding: 0;
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem; }
 
 .icon.icon-href {
   fill: rgba(0, 0, 0, 0.5); }