25

On Stack Overflow, as on other sites, new users sometimes use some words included in square brackets in the title of their post resulting in an unclear question-list.

Why not mark questions with more noticeable labels, like follows in the image, instead of the classic and less clear [duplicate] [closed] [migrated]?

Marked question

Here is how I have made this:

<span class="duplicate">&nbsp;duplicate&nbsp;</span>

This is dynamically added like is done with [duplicate]

And here is the CSS:

.duplicate, .closed, .migrated {
    color: #FFF;
    padding: 2px;
    border-radius: 4px;
    font-size: 12px;
}
.duplicate {background: #FA0;}
.closed {background: #F00;}
.migrated {background: #19F;}
Improve this question
10
  • 1
    Pretty! If you use green for the migrated, it would look similar to a stop light. :D
    – Catija
    Commented May 22, 2015 at 17:25
  • Hahaha is true, the colors are indicative and of course can be used the most suitable ones.
    – Cliff Burton
    Commented May 22, 2015 at 17:29
  • @Catija Red-Green color blindness is among the most common, so probably not ideal to have both Red and Green.
    – psubsee2003
    Commented May 22, 2015 at 18:11
  • 4
    @psubsee2003 I did think of that and almost commented about it but... that's generally more of an issue when there's nothing else distinguishing them... These buttons have the text, so the color is merely for decoration. They could just as easily be the same color, as it will be very unlikely for one question to have two or three of them.
    – Catija
    Commented May 22, 2015 at 18:13
  • 1
    @Catija that is true, but my point was why make it green when you don't have too. There's nothing about a migrated question that seems like "Go" except "go to this site to see this question". I don't see the relavance of the stop light.
    – psubsee2003
    Commented May 22, 2015 at 18:40
  • 1
    @psubsee2003 There's no relevance. It was an offhanded thought that it would be "cute". There's only similarly tangential relations to yellow and red for the other two... they could just as easily be magenta or purple (though the chances of you guys opting for these "girly" colors on SE is low). As I said, "the color is merely for decoration".
    – Catija
    Commented May 22, 2015 at 18:45
  • Exactly, the colors should indicate the importance of the notification: blue for MIGRATED (at least in my opinion) indicates that the question has not anything wrong, but only that belongs to another community. Then the notification should not be neither red (alert) or yellow / orange (notification) but blue, because blue usually indicates "I'm here, don't worry because here there is no such problematic thing" while green could indicate a right answer or "green light".
    – Cliff Burton
    Commented May 22, 2015 at 19:07
  • @Catija, there are studies on what colors are best for what must be, for this red light means STOP and green means GO, while yellow indicates CAREFUL. I am a male and I have no problem with the magenta or purple, I'm just saying they are not very suitable for this type of situation, obviously if DUPLICATE, CLOSED and MIGRATED have the same importance may also be of the same color.
    – Cliff Burton
    Commented May 22, 2015 at 19:11
  • 1
    The aim of my proposal is just to notify in a more visible way to the user the status of a post. Then what color should be this notification is to be seen.
    – Cliff Burton
    Commented May 22, 2015 at 19:12
  • Is there any reason for this to be useful?
    – Ooker
    Commented Dec 31, 2016 at 10:27

2 Answers 2

Reset to default
8

Nice idea :)

It isn't, at first glance, obvious what the status of a question is - and I normally end up clicking the link before I see the [closed] or [on hold] or [duplicate] - your idea is especially great because it uses colours - so you don't even really need to read - just see!

Anyways, I've made a userscript for this.

You can get it at Github over here.

I've also added this to the development version of my SE Additional Optional Features userscript where you can have this feature added and many more! :)

To install, use something like Greasemonkey (for Firefox), or Tampermonkey (for Chrome). I've only tested it on the latest version of Chrome, but it should work on Firefox and other browsers that support userscripts :)

enter image description here

It uses a slightly modified version of your CSS (the main difference being fixing the typo and adding a gray colour for on hold questions (the first week or so before being closed):

.duplicate, .closed, .migrated, .onhold{
    color: #FFF;
    padding: 2px;
    border-radius: 4px;
    font-size: 12px;
}
.duplicate {background: #FA0;}
.closed {background: #F00;}
.migrated {background: #19F;}
.onhold {background: #808080;}

It does not check with the API because it is very unlikely for a question to have, exactly, [closed] or [duplicate] or [on hold] or [migrated] at the specific positions in the title (the script specifically looks at the last x characters of the title to make sure there aren't many false alarms.) If you can find a legitimate example where this script is a false alarm, please tell me, and I'll make an API check - but I honestly don't think there's any point sending API requests for this.

Improve this answer
9
  • Wow, I had never heard of userscript (I was doing something very similar, but in console ... a bit useless XD). From now on all the sites that I use will behave as I say!! I made only one edit that clears the annoying [status] text. But in any case I will accept your answer because, although the idea is the same, you have made it working just using userscript.
    – Cliff Burton
    Commented May 23, 2015 at 15:26
  • 1
    @CliffBurton I've edited my script to remove the text as well - it does the same thing your edit does, but without the extra remove array, getting rid of some unnecessary code. But +1 for your edit anyways :) You can find my edit on Github - just install the new version if you want
    – ᔕᖺᘎᕊ
    Commented May 23, 2015 at 15:58
  • 3
    I appreciate the user solution but it would still be nice to have SE implement this internally. I think it's a really natural update to the system that should be native.
    – Catija
    Commented May 23, 2015 at 20:08
  • @Catija I agree. But SE doesn't implement all feature-requests - in fact, most of them never happen, so we need to instead use userscripts and other workarounds! It's not the best option - but it works! :) At least temporarily!
    – ᔕᖺᘎᕊ
    Commented May 23, 2015 at 20:10
  • Not to toss shade your way by any means, what you've done is great... but do you think the existence of user solutions is part of why SE doesn't implement some of the requests internally? The user scripts can be troublesome for the segments of user base who aren't familiar with utilizing scripts, which means they're unlikely to use them.
    – Catija
    Commented May 23, 2015 at 20:11
  • @Catija Don't think so - I remember seeing SE implement features that have previously been userscripted. Although I can't think of an example now... :( And the fact that it is userscriptable should make SE be even more 'keen' to implement it - because if it is easy enough to do it client-side - it's even easier to do it from their side!! Of course - that's one of the disadvantages of using userscripts - not everyone knows about them or even how to use them - nobody can do anything more about the first problem - but the second has been addressed - StackApps has a detailed userscript guide!
    – ᔕᖺᘎᕊ
    Commented May 23, 2015 at 20:13
  • @Catija Over here
    – ᔕᖺᘎᕊ
    Commented May 23, 2015 at 20:15
  • Ah, it looks like the scripts are simpler to run. I added the auto review comments and that was a headache as it wasn't working as FF add-on, so we had to download source code, compile it, and then install it (after my husband made some code change because it was broken)...
    – Catija
    Commented May 23, 2015 at 20:19
  • @Catija Seems like you've had a bad experience! But really, userscripts aren't hard to run at all! Once you've installed a userscript manager like Greasemonkey or Tampermonkey, literally all you need to do is click the link to some code, everything else will happen automatically (after you click confirm) :)
    – ᔕᖺᘎᕊ
    Commented May 23, 2015 at 20:24
4

Using the script provided by ᔕᖺᘎᕊ I made an edit that erases the annoying [status] text from the title of the post, it works in the sections answers / questions / favorites of the profile, all questions, tagged questions and on the homepage.

Every one of them has a slight difference in making the list of questions but the script works in all.

Now for each marked post I put in the remove array a string with the text to remove then with 

$that.find(".summary a:eq(0)").text($that.find(".summary a:eq(0)").text().replace(remove[key], ""));

Here is the full script of the edits I made:

var userscript = function($) {
$("head").append('<link rel="stylesheet" href="https://rawgit.com/shu8/SE-Answers_scripts/master/dupeClosedMigratedCSS.css" type="text/css" />'); //add the CSS

    var questions = {}, remove = [];

    $.each($(".question-summary"), function() { //Find the questions and add their id's and statuses to an object
        if($(this).find(".summary a:eq(0)").text().trim().substr($(this).find(".summary a:eq(0)").text().trim().length-11) == "[duplicate]") {
            questions[$(this).attr("id").split("-")[2]] = "duplicate";
            remove[$(this).attr("id").split("-")[2]] = "[duplicate]";
        } else if($(this).find(".summary a:eq(0)").text().trim().substr($(this).find(".summary a:eq(0)").text().trim().length-8) == "[closed]") {
            questions[$(this).attr("id").split("-")[2]] = "closed";
            remove[$(this).attr("id").split("-")[2]] = "[closed]";
        } else if($(this).find(".summary a:eq(0)").text().trim().substr($(this).find(".summary a:eq(0)").text().trim().length-10) == "[migrated]") {
            questions[$(this).attr("id").split("-")[2]] = "migrated";
            remove[$(this).attr("id").split('-')[2]] = "[migrated]";
        } else if($(this).find(".summary a:eq(0)").text().trim().substr($(this).find(".summary a:eq(0)").text().trim().length-9) == "[on hold]") {
            questions[$(this).attr("id").split("-")[2]] = "onhold";
            remove[$(this).attr("id").split("-")[2]] = "[on hold]";
        }
    });

    $.each($('.question-summary'), function() { //loop through questions
        $that = $(this);
        $.each(questions, function(key, val) { //loop through object of questions closed/dupes/migrated
            if($that.attr('id').split('-')[2] == key) {
                $that.find(".summary a:eq(0)").text($that.find(".summary a:eq(0)").text().replace(remove[key], ""));
                $that.find('.summary a:eq(0)').after("&nbsp;<span class='"+val+"'>&nbsp;"+val+"&nbsp;</span>"); //add appropiate message
            }
        });
    });
};

var el = document.createElement('script');
el.type = 'text/javascript';
el.text = '(' + userscript + ')(jQuery);';
document.head.appendChild(el);
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .