Forum:New Metabox development

This is an old revision of this page, as edited by imported>LostInRiverview at 06:06, 3 April 2015. The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.
Forums: IndexCommunity discussionsNew Metabox development | Post

The following text has been relocated from Forum:New theme proposal:

On the subject of updating {{Metabox}}, I accidentally worked up this as a new style of message box. What do you think?

This is Metabox
Hi, I'm Metabox! I'm sure I look familiar to you, don't I?


Hello!
I don't have a name yet, because I'm brand new! What do you think of me?

As I said, this design was more-or-less a complete accident, much like the headers on the main page. I think it would be a pretty good replacement for Metabox, but I'd like to hear what you all think about that. Here's another "real case" example to compare the two:

Metabox deletion template
Delete

This page has been nominated for deletion. Reason: just because
You can discuss this nomination at Category talk:Candidates for deletion.

"New Metabox" deletion template
Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.

Thoughts? -- LostInRiverview talkblogcontribs 05:53, March 27, 2015 (UTC)

The metabox is excellent! It looks really pretty! But I've already told this to LiR on IRC. :p I have one thing in mind. In the above examples, you used icons from TS3 and TS4. The one from TS4 is rescaled to 60px, but all icons from TS3 are in 54x54px. You can see the "Hello!" header text doesn't align with content text.
This can be fixed if the header text is wrapped around, like how LiR did it with the content text by adding margin to the text. The wraparound is necessary so that the text would align if it's really long. Since header text is rarely more than 2 lines, LiR didn't use it there, and I agreed. But seeing this small problem, I think that wrapping around the header text can also solve it.
Hello!
I don't have a name yet, because I'm brand new! What do you think of me?
What do you think? Nikel Talk Vote! 06:28, March 27, 2015 (UTC)
Another thing is that since TS3 icons are smaller than TS4 ones, the icon above looks hanging to the border... Maybe if it's centered it would look better for smaller icons? I'll try tweaking it and see how it looks. Nikel Talk Vote! 06:31, March 27, 2015 (UTC)
Hello!
I don't have a name yet, because I'm brand new! What do you think of me?
Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.
There. I made the div width 70px and the icon float center. It's subtle, but... I like it better. Nikel Talk Vote! 06:38, March 27, 2015 (UTC)
You're right, that is an improvement. You can actually notice the header protrudes slightly more on the left now. Very good job. -- LostInRiverview talkblogcontribs 06:41, March 27, 2015 (UTC)

I was kinda skeptic about this new theme, but it really looks good! I love the green color here! Øôppdëckš 08:09, March 27, 2015 (UTC)

I think the Metabox looks good with the fresh look. I do Nikel's improvement make it look better. I like it. -- Icemandeaf (talk) 17:00, March 27, 2015 (UTC)
Hello!
I don't have a name yet, because I'm brand new! What do you think of me?
Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.
I added rounded borders (because I like the roundedness, but you can do away with it if you don't want it). A left margin to the icon was also added so that it wouldn't hide the newly rounded header. And I also added a bottom margin to the Metabox so that the shadow isn't completely hidden when there are multiple boxes stacked onto each other. I know it is very subtle, but it seems to make a difference to me. What do you all think? -- Icemandeaf (talk) 17:21, March 27, 2015 (UTC)
When I developed the theme and the main page style, I deliberately avoided rounded corners. My preference would be to keep the squared corner style going in the other templates, but of course if others would like to have the round corners instead, that's something that can be decided. My focus right now is to get Metabox in-line with the main page style, which does not use rounded corners. So, if we choose to make this box with rounded corners, then that should probably be applied to the main page style as well. As far as my own personal opinion, I would rather keep the square corners. -- LostInRiverview talkblogcontribs 18:41, March 27, 2015 (UTC)
Understandable, and I am actually ok with that. So here is the changes without the rounded corners. Very minor stuff, but I think the margins added make it look nice. -- Icemandeaf (talk) 18:53, March 27, 2015 (UTC)
Hello!
I don't have a name yet, because I'm brand new! What do you think of me?
Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.

────────────────────────────────────────────────────────────────────────────────────────────────────I do have a concern regarding font colors versus the header colors, specifically for the yellow/gold "featured content" templates. Take a look:

"Featured content" gold
Featured Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{subst:#ifeq: {{{1}}}| 2 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?}}{{subst:#ifeq: {{{1}}}| 3 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.}}

Additionally, there are other matters that should be considered. Right now, Metabox can be displayed in two forms; the "standard" form, or a "small" form, like this for example:

 
This article requires a cleanup to meet The Sims Wiki's quality standards.
Please improve this article if you can.

I'm not sure how we would accommodate a header on this template, or even if we'd want to.

As well, right now metabox can be displayed with or without an image; what will this new template look like if an image isn't included? -- LostInRiverview talkblogcontribs 21:18, March 27, 2015 (UTC)

Continued discussion

I have relocated this discussion onto its own thread so that we can further focus on the issues relevant to Metabox.

I have taken the code that we've refined above and placed it into a new template: {{Metabox2}}. Metabox2 is generally in a testing phase right now, but I feel most of the bugs are worked out. There are a few matters still up for discussion, of which I have listed out a few. I am sure this list is not exhaustive so if I've forgotten something please point it out.

  • What to do when Metabox doesn't have an image. Right now, Metabox can be utilized either with or without an icon. I have edited Metabox2 to make the image parameter optional, but I am not sure if my solution is the most elegant. Observe:
Metabox2 without an image
Test
Simply put, I'm not sure if having that blank space on the left side of the template is ideal. Surely using an icon would be the preferred approach but in some situations it is not practical to do so. Additionally, several templates that utilize Metabox do not have images, so we need to do our best to make sure Metabox2 is backward compatible.
  • No header specified. Another matter of backward compatibility is that of the template's header when the headline parameter is not specified. On Metabox, headline is an optional parameter, so there are several cases where a headline is not specified. I have tried to adapt Metabox2 to this situation, while still maintaining some portion of the header bar, since the bar itself is a defining feature of the template.
 
Test
As you can see, there are a few issues with my approach, not the least of which is that the image inside the template is larger than the template itself. As well, I have maintained a small strip of the "header bar," but is this the ideal approach?
  • Small version. In preparing for rolling-out the template, I prepared a small version, just as Metabox Prime has the option to set a small version of the template. I haven't gotten any feedback on this design, however. Check it out:
Small with headline and icon
Text
 
Small with no headline, and icon
Small with headline and no icon
Text
  • Legacy support for old parameters. Metabox one utilizes parameters for custom colours: backgroundcolor and bordercolor. Metabox2 has two custom color options as well: backgroundcolor and headercolor. For sake of backward compatibility, I have set Metabox2 to interpret a bordercolor input as if it were the headercolor, and we can carry this into the full rollout of the template as well. However, it may be necessary or preferable to make other modifications to the template as well. Specifically I'm talking about changing either the names of parameters or the accepted entries for those parameters. The biggest question mark right now for me is whether we should adjust the image parameter to allow File: input or not. Right now, when specifying an image to be used in the template (on Metabox1 and Metabox2), the name of the file must be included without the File: prefix. Most other templates that utilize images require that prefix, so should this template be edited to conform to that quasi-standard? And if we chose to do that, would Metabox2 have any issues with backward compatibility?

As I said, there's a few matters still up for discussion. -- LostInRiverview talkblogcontribs 18:56, March 30, 2015 (UTC)

I'm not really sure if I like this template or not. While it does match the new theme and the template looks good when its all filled out and in the example without the image, the headerless versions look a bit strange. I don't know how you'd go about fixing that but I'd be interested to see what it looks like without the header bar. All of the stuff you've said in regards to legacy support is fine by me, if you're trying to make it so that it will accept images regardless of whether file is present I'd be really happy with that as I've nearly slipped up and made mistakes with that several times. That's all I can think of for now. ђ talk 00:50, March 31, 2015 (UTC)
Here's the template without a header:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{subst:#ifeq: {{{1}}}| 2 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?}}{{subst:#ifeq: {{{1}}}| 3 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.}}
As you can see it's a bit plain. I'd prefer to find a way to accommodate legacy support for templates lacking a headline, rather than throwing out the whole template. If it comes down to it, maybe we can change over the templates so that they use headline? The alternative is to find some way to spruce up the template for non-headline cases.
Regarding file prefix acceptance... I think I may have a way to accomplish this.
{{#ifexist:{{{image}}}|{{{image}}}|File:{{{image}}}}}
I haven't tested this yet to see if it will work. If someone wants to try it, I'd appreciate it. Otherwise I can get to it later on. -- LostInRiverview talkblogcontribs 07:08, March 31, 2015 (UTC)
Overall, I like the new metabox. The theme design is pretty good to me, if it's not for the current issues. I have several things to point out:
  • For the metabox without headline, how about we add a single space as the default text? Check out my sandbox (2nd metabox).
  • For the metabox without image, how about making the text wrapper not use padding? Check that out on my sandbox too (3rd metabox).
  • For the File: prefix, I'd say let's not think about other templates first. Since metabox is used in a lot of templates, I think it's best to assure that it's backward compatible. Let's just follow how the current metabox utilizes the image parameter.
  • Do you think we should add a {{clr}} at the end of the box? If you look between the 1st and 2nd metabox in my sandbox, I added a horizontal line there. The line doesn't cover the whole width because it's crossed by the icon. It seems uncommon that an icon exceeds the box, but still, it might be something to consider.
Nikel Talk Vote! 13:49, March 31, 2015 (UTC)
Alright, I implemented your suggestions in points 1 and 2 onto {{Metabox2}}. I did plan on implemeting {{clr}} but have encountered some issues that have caused me to temporarily remove it from the template. You can see what I mean here. I wanted to test how Metabox would interact when placed alongside other templates, specifically infoboxes like {{Sim}}. The result was... not as I had expected. I've done some experimentation and it appears that the image used on Metabox2 will continue to move downwards on the page as more instances of a Sim or Simbio template are added, and the image will align itself to the top of the final instance of the template used on that page. To be honest I'm not exactly sure of why this is - could it have anything to do with the fact that the image on Metabox2 is set to float left? I'm baffled at this point. Obviously this is a significant problem, and I wouldn't feel comfortable rolling out the changes until it's fixed. -- LostInRiverview talkblogcontribs 03:02, April 3, 2015 (UTC)
Whoa, that's a terrible bug. I have no idea what's wrong with it either. I'll try to figure out what's wrong if I can. Nikel Talk Vote! 04:10, April 3, 2015 (UTC)
I don't want to speak too soon, but it looks like you fixed it. - LostInRiverview talkblogcontribs 05:04, April 3, 2015 (UTC)
It looks like I did speak too soon. You did indeed fix the problem with it interacting with {{Sim}}, but a new problem has introduced itself. Behold:
Headline text
Template text
That's the small version of the template. Whatever fix was implemented, it did not take kindly to this version. I'll take a look at what's going on. -- LostInRiverview talkblogcontribs 05:08, April 3, 2015 (UTC)
Nope, looks like that error was my fault. It looks like it is fixed now. I see no other errors that need to be corrected. -- LostInRiverview talkblogcontribs 05:12, April 3, 2015 (UTC)

────────────────────────────────────────────────────────────────────────────────────────────────────

 

Yeah, I was going to report it after having lunch, but it seems that you've found it (and even fixed it). This is why you shouldn't postpone a report. :p Anyway, there's one other side effect by adding position:absolute; attribute. The height of the metabox doesn't extend to the height of the image if it's too large. Normally, it will follow the height of the image. This is pretty subtle, but I'm not sure how to fix it. We might as well put it on a low priority in the to-do list. Nikel Talk Vote! 05:42, April 3, 2015 (UTC)

I had noticed that issue as well. Could we perhaps set the height of the largest element to only be a minimum of a certain height in relation to the imagesize? So the template right now is set to display images at a fixed 60px for the standard and 45px for the small version. That size can be adjusted with {{{imagesize}}}, and I've gotten the text and margins and everything else to re-size depending on the amount in that parameter (that's what all the {{#expr:}} calculations are for). I'll look into setting a minimum height in the outermost div bracket. -- LostInRiverview talkblogcontribs 05:58, April 3, 2015 (UTC)
Proof of concept
Image is set to 100px. As you see, the template is resized to fit the image. -- LostInRiverview talkblogcontribs 06:06, April 3, 2015 (UTC)