Greasy Fork is available in English.

Better Gallections

Do horizontal folders bother you? What about those huge titles and wasted space?

// ==UserScript==
// @name        Better Gallections
// @version     3.1.0
// @description Do horizontal folders bother you? What about those huge titles and wasted space?
// @author      Valognir (https://www.deviantart.com/valognir)
// @namespace   https://greasyfork.org/en/scripts/404189-better-gallections
// @grant       GM_addStyle
// @run-at      document-start
// @match       https://www.deviantart.com/*
// ==/UserScript==
(function() {
    'use strict';
    function dothething(){
        var folderlinks = document.querySelectorAll('section>a[href*="/gallery/"], section>a[href*="/favourites/"], section>a[href*="/private-collections/"]');

        let css = `
            ::-webkit-scrollbar {
                    width: 5px !important;
                }

                ::-webkit-scrollbar-track {
                    background: transparent !important;
                }
                ::-webkit-scrollbar-thumb {
                    background-color: rgba(155, 155, 155, 0.5) !important;
                    border: transparent !important;
                }
    `;

        let styleNode = document.createElement("style");
        styleNode.appendChild(document.createTextNode(css));
        (document.querySelector("head") || document.documentElement).appendChild(styleNode);

        if (folderlinks.length > 0) {

            var folderssection = folderlinks[0].parentNode.parentNode.parentNode;
            folderssection.style.width = '250px';
            folderssection.style.marginRight = '20px';
            folderssection.style.height = 'calc(100vh - 140px)';
            folderssection.style.maxHeight = 'calc(100vh - 121px)';
            folderssection.style.overflow = 'hidden scroll';
            folderssection.style.scrollbarWidth = 'thin';
            folderssection.style.scrollbarColor = 'rgba(155, 155, 155, 0.5) transparent';
            folderssection.style.display = 'inline-block';
            folderssection.style.verticalAlign = 'top';
            folderssection.style.position = 'sticky';
            folderssection.style.top = '121px';

            var lrbuttons = folderssection.querySelectorAll('button[aria-hidden="true"]');
            lrbuttons.forEach(function(element) {
                element.style.display = 'none'
            });

            var folderscontainer = folderlinks[0].parentNode.parentNode;
            folderscontainer.style.width = '250px';
            folderscontainer.style.overflow = 'scroll';
            folderscontainer.style.display = 'inline-block';
            folderscontainer.style.verticalAlign = 'top';
            folderscontainer.style.padding = '0 40px 400px 0';
            folderscontainer.style.height = 'auto';
            folderscontainer.style.margin = '0 0 20px 0';

            folderlinks.forEach(function(element) {

                if (element.querySelector('div:last-child > div > div > div > div > div > span:last-child').textContent.trim() === "0 deviations") {
                    element.style.opacity = '0.5';
                }

                var folder = element.parentNode;
                folder.style.margin = '0 0 20px';
                folder.style.overflow = 'hidden';

                element.addEventListener("click", function() {
                    window.scrollTo(0, 335);
                });

                if (element.querySelector('img')) {
                    var folderimg = element.querySelector('img');
                    folderimg.style.height = '227px';
                } else if (element.querySelector('section')) {
                    folderimg = element.querySelector('section');
                    folderimg.style.height = '210px';
                    folderimg.style.paddingTop = '30px';
                    folderimg.style.justifyContent = 'flex-start';
                } else if (element.querySelector('div > div > div[style]')) {
                    folderimg = element.querySelector('div > div > div[style]');
                    folderimg.style.height = '227px';
                }
                if (folderimg) {
                    folderimg.style.width = '248px';
                    var folderimgcontainer = folderimg.parentNode;
                    folderimgcontainer.style.width = '248px';
                    folderimgcontainer.style.height = '210px';
                    folderimgcontainer.style.borderRadius = '4px';
                }

                var foldertitle = element.firstElementChild.lastElementChild;
                foldertitle.style.margin = '-72px 0 0 0';
                var bgcolor = getComputedStyle(foldertitle).getPropertyValue('--g-bg-secondary');
                foldertitle.firstElementChild.style.background = bgcolor;
                foldertitle.firstElementChild.style.padding = '4px 10px';
                foldertitle.firstElementChild.style.background = `linear-gradient(to right, ${bgcolor}, ${bgcolor}40)`;
                element.firstElementChild.style.padding = '0';
                var folderoverlays = element.firstElementChild.firstElementChild;
            });

            var gallerycontents = document.querySelector('#sub-folder-gallery');
            gallerycontents.style.display = 'inline-block';
            gallerycontents.style.width = 'calc(100vw - 380px)';
            gallerycontents.style.overflow = 'hidden';
            gallerycontents.style.marginTop = '-90px';

            var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

            if (screenWidth >= 1330) {
                gallerycontents.style.width = 'calc(100vw - 420px)';
            }

            var gallerytitle = document.querySelector('#sub-folder-gallery > div > div:first-child > div > div:first-child');
            gallerytitle.style.margin = '21px 0 -8px';
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        const observer = new MutationObserver(dothething);
        observer.observe(document.body,{ childList: true, subtree: true });
    });
})();