Jump to content
sakura

Chrome/TamperMonkey for Design

By sakura, in Community Management

Recommended Posts

Neutral General    15

Neutral General
Posted (edited)

Hi,

 

I added a couple things:

 

+ enable_compact_topic_banner (if you want the topic banner to be smaller, but otherwise unchanged)

+ enable_compact_comment_footer (reduces the height of the  quote/reaction footer of comments)

+ enable_username_above_avatar (moves the username from the blue comment header to above the user avatar) 

// ==UserScript==
// @name         [DPE] CSS Overrides
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://en.delphipraxis.net/
// @match        https://en.delphipraxis.net/?*
// @match        https://en.delphipraxis.net/topic/*
// @match        https://en.delphipraxis.net/discover/*
// @grant        none
// ==/UserScript==

(function() {
    try{
        'use strict';

        // Header
        const enable_compact_banner = true;
        const enable_compact_searchbar = true;

        // thread overview
        const enable_compact_topic_banner = true;
        const enable_modified_topic_banner = true;
        const enable_compact_fluidlist = true;
        const enable_additional_highlight = true;

        // Threads/Posts
        const enable_small_userinfo = true;
        const enable_compact_comment = true;
        const enable_compact_comment_footer = true;
        const enable_compact_pre = true;
        const enable_compact_code = true;
        const enable_compact_survey = true;
        const enable_username_above_avatar = true;

        // Other
        const enable_goto_latest_post = true;
        const enable_scroll_to_content = true;
        const enable_compactDiscover = true;

        const isDiscover = location.href.indexOf('delphipraxis.net/discover') > 0;

        const $ = jQuery;
        const stylesheet = document.styleSheets[document.styleSheets.length - 1];

        if (enable_compact_banner)
        {
            $('HEADER .logo').attr('style', 'height: auto;');
            $('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;');
        }

        // fluid list
        if (enable_compact_fluidlist && !isDiscover)
        {
            $('LI.ipsDataItem').attr('style', 'padding: 2px 0');
            $('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;');
            $('DIV.ipsDataItem_main').attr('style', 'padding: 0;');
            $('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;');
        }

        if (enable_goto_latest_post)
        {
            $('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() {
                const href = $(this).attr('href');
                if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment');
            });
        }

        const ipsPageHeader = $('DIV.ipsPageHeader');
        if (enable_compact_topic_banner)
        {
            ipsPageHeader.attr('style', 'padding: 5px;');
        }

        if (enable_modified_topic_banner)
        {
            if (!isDiscover) {
                const topicControls = ipsPageHeader.next();
                const topicControlsLinks = topicControls.find('A');

                for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) {
                    if ($(link).closest('FORM').length > 0) continue;

                    const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>');
                    link.style = 'padding: 5px; line-height: 1.5em;';
                    div.append(link);
                    ipsPageHeader.prepend(div);
                }
            }
        }

        if (enable_username_above_avatar && !isDiscover)
        {
            var authorOriginal = $('.cAuthorPane_author > strong > a');
            authorOriginal.each(
                function(i, obj)
                {
                    var txt = obj.innerHTML;
                    var list = obj.parentElement.parentElement.nextSibling.nextSibling;
                    list.innerHTML = '<li><strong>' + obj.outerHTML + '</strong></li>' + list.innerHTML;
                    obj.outerHTML = ' ';
                });
        }


        if (enable_small_userinfo)
        {
            $('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;');
        }

        if (enable_compact_comment && !isDiscover)
        {
            $('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;');
        }

        if (enable_compact_comment_footer && !isDiscover)
        {
            $('.ipsItemControls').attr('style', 'line-height: 25px; height: 25px;');
            $('.ipsComment_controls').attr('style', 'line-height: 25px; height: 25px;');
            $('.ipsReact_types').attr('style', 'transform: scale(0.75);');
        }

        // Code
        if (enable_compact_code && !isDiscover)
        {
            $('PRE.ipsCode').attr('style', 'padding: 5px !important; font-size: small;');
        }

        if (enable_compact_pre) {
            stylesheet.insertRule('PRE.ipsCode { max-height: 15em; }');
            stylesheet.insertRule('PRE.ipsCode.viewAll { max-height: inherit; }');
            stylesheet.insertRule('.codefold { right: 0; position: absolute !important; margin-right: 3em; }');
            const a = $('<a href="javascript:void(0);" class="codefold" onclick="$(this).parent().toggleClass(\'viewAll\');">open/close</a>');
            $('PRE.ipsCode').prepend(a);
        }

        // Survey
        if (enable_compact_survey && !isDiscover)
        {
            $(':root').attr('style', '--grid-gap: 0px;');
            $('span.ipsFaded').attr('style', 'margin-left: 5px;');
        }

        if (enable_additional_highlight)
        {
            // Highlight subforum in post listing (fluid list)
            $('.ipsDataItem_meta > a[href*="?forumId="]').css({ color: '#4D7395' });
            // Highlight user in post listing (fluid list)
            $('.ipsDataItem_meta > span > a[href*="/profile/"]').css({ color: '#4D7395' });
        }

        // Compact search bar
        if (enable_compact_searchbar && !isDiscover)
        {
            $('.nav-bar').attr('style', 'height: 30px;');
            $('.secondary-header-align').attr('style', 'height: 30px;');
            $('.ipsNavBar_primary > ul > li > a').attr('style', 'line-height: 30px;');
            $('.ipsfocus-search').attr('style', 'height: 30px; line-height: 30px;');
        }

        stylesheet.insertRule('.ipsDataList.ipsDataList_zebra > .ipsDataItem { height: 45px; }');

        if (enable_compactDiscover && isDiscover) {
            $('LI.ipsStreamItem').attr('style', 'padding: 2px 10px !important; margin: 0 0 2px 30px !important;');
            $('LI.ipsStreamItem UL.ipsTags').each(function () { $(this).closest('DIV').find('H2').append($(this)); });
        }

        // scroll to start of content
        if (enable_scroll_to_content)
        {
          if ((window.location.href.indexOf('?do') < 0) && window.location.href.indexOf('#') < 0)
          {
              $('html,body').animate({scrollTop: $('#elContent').offset().top},'slow');
          }
        }
    }
    catch(e)
    {
        // I don't wanna hear about it
    }
})();
Edited by Neutral General

Share this post

Link to post

toms    29

toms
Posted

Check this out. Something looks strange for me.

2018-10-29_152113.png

Share this post

Link to post

KodeZwerg    54

KodeZwerg
Posted 
        if (enable_username_above_avatar && !isDiscover)
        {
            var authorOriginal = $('.cAuthorPane_author > strong > a');
            authorOriginal.each(
                function(i, obj)
                {
                    var txt = obj.innerHTML;
                    var list = obj.parentElement.parentElement.nextSibling.nextSibling;
                    list.innerHTML = '<li><strong>' + obj.outerHTML + '</strong></li>' + list.innerHTML;
                    obj.outerHTML = '_';
                });
        }

In Opera I need this. Header Display a underline but Name is above Avatar.

With all setting set to true, on Opera I do not see the Editor any more if I Private Message someone.

Share this post

Link to post

Neutral General    15

Neutral General
Posted (edited)

I can't edit my post above so here's a fixed version:

  

// ==UserScript==
// @name         [DPE] CSS Overrides
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://en.delphipraxis.net/
// @match        https://en.delphipraxis.net/?*
// @match        https://en.delphipraxis.net/topic/*
// @match        https://en.delphipraxis.net/discover/*
// @grant        none
// ==/UserScript==

(function() {
    try{
        'use strict';

        // Header
        const enable_compact_banner = true;
        const enable_compact_searchbar = true;

        // thread overview
        const enable_compact_topic_banner = true;
        const enable_modified_topic_banner = true;
        const enable_compact_fluidlist = true;
        const enable_additional_highlight = true;

        // Threads/Posts
        const enable_small_userinfo = true;
        const enable_compact_comment = true;
        const enable_compact_comment_footer = true;
        const enable_compact_pre = true;
        const enable_compact_code = true;
        const enable_compact_survey = true;
        const enable_username_above_avatar = true;

        // Other
        const enable_goto_latest_post = true;
        const enable_scroll_to_content = true;
        const enable_compactDiscover = true;

        const isDiscover = location.href.indexOf('delphipraxis.net/discover') > 0;

        const $ = jQuery;
        const stylesheet = document.styleSheets[document.styleSheets.length - 1];

        if (enable_compact_banner)
        {
            $('HEADER .logo').attr('style', 'height: auto;');
            $('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;');
        }

        // fluid list
        if (enable_compact_fluidlist && !isDiscover)
        {
            $('LI.ipsDataItem').attr('style', 'padding: 2px 0');
            $('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;');
            $('DIV.ipsDataItem_main').attr('style', 'padding: 0;');
            $('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;');
        }

        if (enable_goto_latest_post)
        {
            $('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() {
                const href = $(this).attr('href');
                if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment');
            });
        }

        const ipsPageHeader = $('DIV.ipsPageHeader');
        if (enable_compact_topic_banner)
        {
            ipsPageHeader.attr('style', 'padding: 5px;');
        }

        if (enable_modified_topic_banner)
        {
            if (!isDiscover) {
                const topicControls = ipsPageHeader.next();
                const topicControlsLinks = topicControls.find('A');

                for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) {
                    if ($(link).closest('FORM').length > 0) continue;

                    const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>');
                    link.style = 'padding: 5px; line-height: 1.5em;';
                    div.append(link);
                    ipsPageHeader.prepend(div);
                }
            }
        }

        if (enable_username_above_avatar && !isDiscover)
        {
            var authorOriginal = $('.cAuthorPane_author > strong > a');
            authorOriginal.each(
                function(i, obj)
                {
                    var txt = obj.innerHTML;
                    var list = obj.parentElement.parentElement.nextSibling.nextSibling;
                    list.innerHTML = '<li><strong>' + obj.outerHTML + '</strong></li>' + list.innerHTML;
                    obj.outerHTML = '<span style="color: #346f99;">.</span>';
                });
        }


        if (enable_small_userinfo)
        {
            $('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;');
        }

        if (enable_compact_comment && !isDiscover)
        {
            $('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;');
        }

        if (enable_compact_comment_footer && !isDiscover)
        {
            $('.ipsItemControls').attr('style', 'line-height: 25px; height: 25px;');
            $('.ipsComment_controls').attr('style', 'line-height: 25px; height: 25px;');
            $('.ipsReact_types').attr('style', 'transform: scale(0.75);');
        }

        // Code
        if (enable_compact_code && !isDiscover)
        {
            $('PRE.ipsCode').attr('style', 'padding: 5px !important; font-size: small;');
        }

        if (enable_compact_pre) {
            stylesheet.insertRule('PRE.ipsCode { max-height: 15em; }');
            stylesheet.insertRule('PRE.ipsCode.viewAll { max-height: inherit; }');
            stylesheet.insertRule('.codefold { right: 0; position: absolute !important; margin-right: 3em; }');
            const a = $('<a href="javascript:void(0);" class="codefold" onclick="$(this).parent().toggleClass(\'viewAll\');">open/close</a>');
            $('PRE.ipsCode').prepend(a);
        }

        // Survey
        if (enable_compact_survey && !isDiscover)
        {
            $(':root').attr('style', '--grid-gap: 0px;');
            $('span.ipsFaded').attr('style', 'margin-left: 5px;');
        }

        if (enable_additional_highlight)
        {
            // Highlight subforum in post listing (fluid list)
            $('.ipsDataItem_meta > a[href*="?forumId="]').css({ color: '#4D7395' });
            // Highlight user in post listing (fluid list)
            $('.ipsDataItem_meta > span > a[href*="/profile/"]').css({ color: '#4D7395' });
        }

        // Compact search bar
        if (enable_compact_searchbar && !isDiscover)
        {
            $('.nav-bar').attr('style', 'height: 30px;');
            $('.secondary-header-align').attr('style', 'height: 30px;');
            $('.ipsNavBar_primary > ul > li > a').attr('style', 'line-height: 30px;');
            $('.ipsfocus-search').attr('style', 'height: 30px; line-height: 30px;');
        }

        stylesheet.insertRule('.ipsDataList.ipsDataList_zebra > .ipsDataItem { height: 45px; }');

        if (enable_compactDiscover && isDiscover) {
            $('LI.ipsStreamItem').attr('style', 'padding: 2px 10px !important; margin: 0 0 2px 30px !important;');
            $('LI.ipsStreamItem UL.ipsTags').each(function () { $(this).closest('DIV').find('H2').append($(this)); });
        }

        // scroll to start of content
        if (enable_scroll_to_content)
        {
          if ((window.location.href.indexOf('?do') < 0) && window.location.href.indexOf('#') < 0)
          {
              $('html,body').animate({scrollTop: $('#elContent').offset().top},'slow');
          }
        }
    }
    catch(e)
    {
        // I don't wanna hear about it
    }
})();

 

Edited by Neutral General
  • Thanks 1

Share this post

Link to post

KodeZwerg    54

KodeZwerg
Posted
Quote

Working like seen on your first Image (empty Header) (sorry, i've tested the underline at first)

obj.outerHTML = '&nbsp;';

Quote

same effect (if you can not copy paste, the character between >< is NOT a space character! (press ALT+0160 <-numeric Block, release ALT, you will get invisible character)

obj.outerHTML = '<span style="color: #346f99;"> </span>';


 

Share this post

Link to post

KodeZwerg    54

KodeZwerg
Posted (edited)

@Neutral General Hello again, I have a question about used codeline 

list.innerHTML = '<li><strong>' + obj.outerHTML + '</strong></li>' + list.innerHTML;

If a command is avail to adjust size (make it a bit bigger) could you teach me that command please?
 

I've forgot to mention, this belongs to name above avatar

(I would like that name is as big as font in message view? Is that possible?)

as you see, i already took out italic to make it a bit more readable.

Chrome_TamperMonkey for Design - Page 2 - Community Management - Delphi-PRAXiS [en] – Opera - 31_10.jpg

Edited by KodeZwerg

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing Community Management
×