Changed tags on tag overview.

assets/components/tags/tags.vue

@@ -1,63 +1,8 @@
 <template>
     <div class="tags">
-        <h3 class="heading">Oral</h3>
-
         <div class="tiles">
             <Tag
-                v-for="tag in tags.oral"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
-        </div>
-
-        <h3 class="heading">Penetration</h3>
-
-        <div class="tiles">
-            <Tag
-                v-for="tag in tags.penetration"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
-        </div>
-
-        <h3 class="heading">Group</h3>
-
-        <div class="tiles">
-            <Tag
-                v-for="tag in tags.group"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
-        </div>
-
-        <h3 class="heading">Ethnicity</h3>
-
-        <div class="tiles">
-            <Tag
-                v-for="tag in tags.ethnicity"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
-        </div>
-
-        <h3 class="heading">Finish</h3>
-
-        <div class="tiles">
-            <Tag
-                v-for="tag in tags.finish"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
-        </div>
-
-        <h3 class="heading">Misc</h3>
-
-        <div
-            v-if="tags.misc"
-            class="tiles"
-        >
-            <Tag
-                v-for="tag in tags.misc.concat(tags.body)"
+                v-for="tag in popularTags"
                 :key="`tag-${tag.id}`"
                 :tag="tag"
             />
@@ -73,53 +18,59 @@ async function mounted() {
         slugs: [
             'airtight',
             'anal',
-            'anal-creampie',
             'asian',
-            'ass-eating',
-            'ass-to-mouth',
-            'bdsm',
-            'blowbang',
+            'blonde',
             'blowjob',
-            'bukkake',
+            'brunette',
             'caucasian',
             'creampie',
-            'da-tp',
             'deepthroat',
-            'double-anal',
-            'double-blowjob',
             'double-penetration',
-            'double-vaginal',
-            'dv-tp',
             'ebony',
             'facefucking',
             'facial',
             'gangbang',
-            'gaping',
             'interracial',
             'latina',
+            'lesbian',
+            'maid',
             'mff',
             'mfm',
-            'oral-creampie',
             'orgy',
-            'pussy-eating',
-            'swallowing',
-            'tattoo',
-            'trainbang',
-            'triple-anal',
+            'redhead',
+            'schoolgirl',
+            'teen',
         ],
     });
 
-    this.tags = tags.reduce((acc, tag) => {
-        if (!tag.group) {
-            return { ...acc, misc: [...acc.misc, tag] };
-        }
+    const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
 
-        if (acc[tag.group.slug]) {
-            return { ...acc, [tag.group.slug]: [...acc[tag.group.slug], tag] };
-        }
-
-        return { ...acc, [tag.group.slug]: [tag] };
-    }, { misc: [] });
+    this.popularTags = [
+        'anal',
+        'teen',
+        'lesbian',
+        'mff',
+        'mfm',
+        'orgy',
+        'double-penetration',
+        'gangbang',
+        'airtight',
+        'creampie',
+        'facial',
+        'interracial',
+        'blowjob',
+        'deepthroat',
+        'facefucking',
+        'asian',
+        'ebony',
+        'latina',
+        'caucasian',
+        'blonde',
+        'brunette',
+        'redhead',
+        'schoolgirl',
+        'maid',
+    ].map(tagSlug => tagsBySlug[tagSlug]);
 
     this.pageTitle = 'Tags';
 }
@@ -130,7 +81,7 @@ export default {
     },
     data() {
         return {
-            tags: {},
+            popularTags: [],
             pageTitle: null,
         };
     },
@@ -148,8 +99,7 @@ export default {
 .tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
-    grid-gap: .5rem;
-    margin: 0 0 1.5rem 0;
+    grid-gap: 2rem;
 }
 
 .heading {

assets/components/tile/network.vue

@@ -3,6 +3,7 @@
         :href="`/network/${network.slug}`"
         :title="network.name"
         class="tile"
+        :class="{ sfw }"
     >
         <img
             :src="`/img/logos/${network.slug}/network.png`"
@@ -13,6 +14,10 @@
 </template>
 
 <script>
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 export default {
     props: {
         network: {
@@ -20,6 +25,9 @@ export default {
             default: null,
         },
     },
+    computed: {
+        sfw,
+    },
 };
 </script>
 
@@ -28,7 +36,7 @@ export default {
 
 .tile {
     height: 6rem;
-    background: $profile;
+    background: var(--profile);
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
@@ -57,7 +65,7 @@ export default {
 }
 
 .title {
-    color: $text;
+    color: var(--text);
     height: 100%;
     display: flex;
     align-items: center;