Forum:Replacement for Updates/Line

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
Forums: Yew Grove > Replacement for Updates/Line
Archive
This page or section is an archive.
Please do not edit the contents of this page.
This thread was archived on 4 November 2011 by Suppa chuppa.

I would like to propose that we use a collapsible news system similar to how RuneScape's homepage performs. I noticed a few times that we couldn't decide whether to have the full six news items that are displayed on RuneScape's site, or to cut it down to three because of the large size. These collapsible boxes allow us to mimic how RuneScape's site works, and fix the issue of length.

They use Javascript to show or hide a message body, and are intended to fully replace {{Updates/Line}}, having all the capabilities that Updates/Line could do (you can specify a title, the text, the date, an alternative page name - if not the same as the title, an image, and even whether the body is by default hidden or not). The examples I have also use CSS gradients for style (and older browsers will simply not show the nicer looking gradients, but will still work; heck even the wiki's skin uses gradients heavily). These gradients are written for maximum cross platform support, as is the javascript, which uses JQuery. Note that the colouring I used for the gradient can easily be changed, and is just an example.

Implementation

Shall we decide to implement this fully, the following Javascript would have to be added:

$('#news_section').children().each(function() {
 
    $(this).click(function() {
 
        $(this).children().each(function() {
 
            var id = $(this).attr('id');
            var disp = $(this).attr('class');
 
            if (id == "news_body_shrinkable") {
                $(this).toggle();
                $(this).parent()('class', (disp == "show" ? 'hide' : 'show'));
            }
 
        });
 
    });
 
})

As well as the following CSS (note that it's possible to cut down on the size of this massively by using solid colors or images, since the blasted browsers can't pick a standard for gradients):

#news_object_shrinkable
{
    border: 1px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    -icab-border-radius: 5px;
    margin-bottom: 5px;
}
#news_header_shrinkable
{
   background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C */
   font-weight: bold;
   padding: 2px 5px;
   cursor: pointer;
}
#news_body_shrinkable
{
   background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* W3C */
   padding: 5px;
}

The templates themselves must exist inside a div with the id "news_section" in order to be recognized (the script makes use of this to find which elements it should be collapsing).

Examples

Note that you must install the above Javascript and CSS into your user js and css files in order to see these correctly.

{{User:Hofmic/Collapsible news
|title = Bonus XP Weekend‎‎
|date = 9 September 2011
|text = The Bonus XP Weekend has begun! If you're a RuneScape member, your x2.7 XP modifier will come into effect the next time you log into the game.
}}
Bonus XP Weekend‎‎9 September 2011
The Bonus XP Weekend has begun! If you're a RuneScape member, your x2.7 XP modifier will come into effect the next time you log into the game. Read more...
{{User:Hofmic/Collapsible news
|title = Behind the Scenes – September
|date = 1 September 2011
|text = One of the biggest quests we have ever made, a new prayer potion, new loyalty rewards and a Bonus XP Weekend all join together to make a stupendous line-up for September.
|image = Diversions.jpg
|update = Behind the Scenes – September (2011)
}}
Behind the Scenes – September1 September 2011
Diversions.jpg
One of the biggest quests we have ever made, a new prayer potion, new loyalty rewards and a Bonus XP Weekend all join together to make a stupendous line-up for September. Read more...
{{User:Hofmic/Collapsible news
|title = New High-Level Prayer Potion
|date = 6 September 2011
|text = High-level herbalists can now create prayer renewal potions. These tradable concoctions restore a sizeable sum of prayer points over the course of five minutes.
|visibility = hide
}}
New High-Level Prayer Potion6 September 2011
High-level herbalists can now create prayer renewal potions. These tradable concoctions restore a sizeable sum of prayer points over the course of five minutes. Read more...

Discussion

Support - As Nominator. Hofmic Talk 07:13, September 12, 2011 (UTC)

Comment - Seems like a nifty little function, but the current colours appear hideous. Also, readers would have no idea these tabs are click-able due to the absence of an arrow or something similar. 222 talk 12:11, September 12, 2011 (UTC)

It would be extremely easy to add an arrow or the words "(Click to show/hide)" to the title. As well, as previously mentioned, the colors are just a working concept, and can easily enough be changed if we can decide on a color. Hofmic Talk 16:23, September 12, 2011 (UTC)
Color possibilities:
background: -moz-linear-gradient(top, rgba(255,243,195,1) 0%, rgba(255,243,195,1) 1%, rgba(255,243,195,0.4) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,243,195,1)), color-stop(1%,rgba(255,243,195,1)), color-stop(100%,rgba(255,243,195,0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,243,195,1) 0%,rgba(255,243,195,1) 1%,rgba(255,243,195,0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,243,195,1) 0%,rgba(255,243,195,1) 1%,rgba(255,243,195,0.4) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(255,243,195,1) 0%,rgba(255,243,195,1) 1%,rgba(255,243,195,0.4) 100%); /* IE10+ */

background: linear-gradient(top, rgba(255,243,195,1) 0%,rgba(255,243,195,1) 1%,rgba(255,243,195,0.4) 100%); /* W3C */
(Heck, that could be replaced with a solid color and still look pretty similar...) Hofmic Talk 21:50, September 12, 2011 (UTC)
Sorry, didn't notice the "placeholder colour" point in your proposal, I was too busy being overwhelmed by code Wink 222 talk 06:28, September 13, 2011 (UTC)
@Hofmic: You might find {{CSS3}} useful for future usages of CSS3 styles, as that would add all of those styles with every prefix to the code (except for the filters in IE, which need to be added manually). This won't work in JS, but when using wikicode that is shorter and simpler to use. JOEYTJE50TALKpull my finger 09:00, September 13, 2011 (UTC)
Oh, thanks, never new that existed. Wonder if it might be better all together to make a gradient template that could handle all formats, (since some use "gradient", some use "linear-gradient", and then there's InterCrap Explorer). Hofmic Talk 22:58, September 13, 2011 (UTC)

Btw - Just add importStylesheet('blah'); to import the css into the js file. This'll circumvent having to import two separate things to make it work. Suppa chuppa Talk

Good point. That would make the script:
importStylesheet('User:Hofmic/Collapsible_news.css');
$('#news_section').children().each(function() {
 
    $(this).click(function() {
 
        $(this).children().each(function() {
 
            var id = $(this).attr('id');
            var disp = $(this).attr('class');
 
            if (id == "news_body_shrinkable") {
                $(this).toggle();
                $(this).parent()('class', (disp == "show" ? 'hide' : 'show'));
            }
 
        });
 
    });
 
})
Hofmic Talk 21:57, September 12, 2011 (UTC)

Bump - Hofmic Talk 06:01, September 19, 2011 (UTC)

ಠ_ಠ Full Slayer Helmet! Evil1888 Talk A's L Dragon Platebody! 00:19, September 21, 2011 (UTC)
I hate to be appearing as though pushing this too much, but it'd be wonderful to at least get an opinion or two. It would appear that recently, I've been doing most of the creation of the update pages, as well as {{Updates}}, etc, but let's look at a case here: I was updating {{Updates}} last night when my internet was cut out before I finished all the pages, meaning the links to the updates were red links for roughly 18 hours, yet nobody noticed and/or continued the pages, showing it's largely based towards just those who actually care about keeping that section up to date (which would explain why this proposal has even been so quiet).
In that 18 hours or so, those two pages that I was still getting up were already bumped down because Jagex had released yet more news posts in the meantime. On the RuneScape site, a larger number is fine because they have six news posts, but we only have three (at times, we had six, but several editors found it to be too long). The "older" posts that were bumped off are only one day old, and should most certainly be visible, yet, are not with our current format. That is specifically what this proposal wants to fix: Expandable boxes similar to the official site, which would allow us to fit the news in better (heck, even makes it easier to see that they're direct quotes of the official news, not that that matters).
It'd just be nice to at least here a yay or nay. Hofmic Talk 22:45, September 22, 2011 (UTC)

Weak general support - I completely agree that the template is currently too long, not just in comparison to the the opposite side of the mainpage, but in its independent impact too. I'd much prefer a solution of this manner than something effectively removing content from the template in its current form. Looking at it, it seems that the proposed changes would work well, and in fact probably end up looking considerably better than it does currently. Obviously, minor details such as colour can be ironed out later, and so I won't even form an opinion on such a matter - functionally I think it is a good idea. I think the proposal needs to be presented more specifically in order to form a stronger opinion though, as I will elaborate below. Henneyj 19:31, September 29, 2011 (UTC)

Comment - I was wondering if we could make this discussion easier - more accessible - since it's not particularly easy to take part in. It has taken me this long to take the necessary measures to see what the proposed idea would look like and I take an interest in the template at hand. I don't think editing personal script makes for practical community discussion, nor should it be expected of somebody, and there's realistically no way to comment otherwise. By the looks of it, the script could be temporarily added to the relevent wiki-wide pages without affecting anything else on the wiki, and if I'm correct in this I think doing so would be for the best. In addition, a full example version of the updates template would probably be helpful, and it would be nice to see 2brainsbrainsbrains' issue addressed in code. Henneyj 19:31, September 29, 2011 (UTC)

Good point. This here is a nice "all in one" example of how it works, albeit only showing the JS and CSS code in action (naturally, there's no way to show the Template itself outside of the wiki). In other words, it's a full example, off site. As for an arrow, we could simply use an image of a triangle or even a simple "+" sign; even add the text "(Click to expand)" to the end of the title (though that may use up too much room; arrows are more compact). There isn't really any code for that, since clicking anywhere on the header will open/close the box, so the image or text is added the same way as any image or text is added on the wiki. Hofmic Talk 02:55, October 1, 2011 (UTC)

Comment - The code should be more like this, I'd say.

importStylesheet("User:Hofmic/Collapsible_news.css");
$("#news_header_shrinkable, #news_body_shrinkable").click(function () {
    var a;
    if (this.id === "news_header_shrinkable") {
        a = $(this).siblings("#news_body_shrinkable");
    } else if (this.id === "news_body_shrinkable") {
        a = $(this);
    }
    a.toggle();
});

Ts4kNfA.png 04:05, October 2, 2011 (UTC)

In all honesty, I couldn't care the least what exactly the code looks like as long as it functions as intended. If it is more compact or has better fallback, awesome, but my intent is more to propose that we make the change, regardless of the exact code, to do this proposal (my wording sounds funny). Hofmic Talk 06:26, October 2, 2011 (UTC)

Neutral - I really don't care... --中亚人/中亞人 (Chinasian/Jeffwang16) 跟我谈话 04:37, October 2, 2011 (UTC)

Comment - The current color schemes provided in this thread will not work. I'll close this either when someone else proposes a new one or whenever I get around to it. Also, keep in mind that each individual update resides within a box already. Nesting boxes will make it look unsightly. Suppa chuppa Talk 22:07, October 12, 2011 (UTC)

How about something like the following: [1]; [2]; [3]? Goes with the current scheme - I tried a lighter colour and that looked quite good too if what I linked to is a little too sickly/too much.--Henneyj 21:43, October 13, 2011 (UTC)

Comment - I've been doing some testing with this stuff to see how it would work and look on the full homepage. I noticed that Hofmic's js code wasn't working in my transcluded template for some reason (works on this page but not elsewhere). Walrus' js code did function correctly, although it seemed that by default each box would be expanded, which is not as desired since having them collapsed at first is the main point of enabling this. --Henneyj 21:43, October 13, 2011 (UTC)

Hmm, that's odd. I don't seem to be seeing this issue. Did you ensure that you not only have the JS, but the CSS "installed" (at least partially), since it uses a class to hide the box as well. And should that not be the case, I'll assume you read the paragraph:
The templates themselves must exist inside a div with the id "news_section" in order to be recognized (the script makes use of this to find which elements it should be collapsing).
Hofmic Talk 06:46, October 14, 2011 (UTC)
OO yep that was it. Anyway, turns out hide was not working due to a missed bracket in User:Hofmic/Collapsible news, which I fixed. However, I've noticed that whilst hide is now working, "show" causes the header to be inexpandable for some reason. This can be solved simply by not including a hide/show class, in which case it works at "show" is intended to (note, User:Hofmic/Collapsible currently forces "show", but it would work if that were changed). Both js caused this, btw.--Henneyj 20:20, October 14, 2011 (UTC)
So... any progress? Suppa chuppa Talk 06:14, November 2, 2011 (UTC)
Meh, I gave the concept up as abandoned. The thread went more than three weeks without so much as a reply, so obviously nobody cares. Close 'er up? Hofmic Talk 06:34, November 2, 2011 (UTC)

Closed - While there is consensus to implement this, there aren't any suitable designs that can be used in conjunction with it. If someone wants to propose such a design at a later time, it should be done in a new thread. This thread has run its course. Suppa chuppa Talk 19:37, November 4, 2011 (UTC)