Added generic Gamma photo and actor scraper for XEmpire, 21Sextury, Blowpass and Evil Angel.

assets/components/networks/networks.vue

@@ -1,10 +1,17 @@
 <template>
     <div class="networks">
-        <Network
-            v-for="network in networks"
-            :key="`network-${network.id}`"
-            :network="network"
-        />
+        <input
+            :placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
+            class="search"
+        >
+
+        <div class="network-tiles">
+            <Network
+                v-for="network in networks"
+                :key="`network-tile-${network.slug}`"
+                :network="network"
+            />
+        </div>
     </div>
 </template>
 
@@ -15,6 +22,10 @@ async function mounted() {
     this.networks = await this.$store.dispatch('fetchNetworks');
 }
 
+function siteCount() {
+    return this.networks.map(network => network.sites).flat().length;
+}
+
 export default {
     components: {
         Network,
@@ -24,6 +35,9 @@ export default {
             networks: [],
         };
     },
+    computed: {
+        siteCount,
+    },
     mounted,
 };
 </script>
@@ -31,7 +45,23 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.networks {
+.search {
+    width: 40rem;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 1rem;
+    border: none;
+    box-shadow: 0 0 3px $shadow-weak;
+    margin: 1rem;
+    font-size: 1rem;
+    outline: none;
+
+    &:focus {
+        box-shadow: 0 0 3px $primary;
+    }
+}
+
+.network-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
     grid-gap: 1rem;