[FEAT] multifile template

scottorr · Post by **scottorr** » Sun Oct 07, 2007 8:06 pm

I hope this may help, I just wanted people to see this.

I've been working on a new file template for a couple of weeks now, just trying to keep the main things in mind.

http://img225.imageshack.us/img225/2186 ... ateie1.jpg

That is what I came up with. I took a few elements from the draft posted above, I hope the creator doesn't mind. I'd just like to explain a few things. The main thing is, I tihnk each file should have a seperate file info, submitted and uploader, because two different people could submit files from the same book that they've scanned, the information is different. As well, where it says "Status: [[image]]"" i have designed 3 different ones, a green check for verified [and checked], a yellow dash for new, and a red x for copyright review. I figured since admins are the only ones it pertains to, the edit link need not be so large. Clicking on the image would take the admin to the status edit page. I've also always thought the file description should be more of a "title" element for each file.

The one last thing I was thinking was, is it possible to not have an "Editor" line if their is no editor inputted?

I hope my ideas and concept are of use.

Here are the admin icons, if anyone is interested:
http://img227.imageshack.us/img227/8421 ... onsjc9.jpg

Post by **Leonard Vertighel** » Sun Oct 07, 2007 8:34 pm

Very nice work, scottorr. A few remarks:
What would it look like with an even margin on the right (instead of having the top part wider than the rest)?
Why not move the status icon into the copyright line (since that's what it is about)?
How about trying to replace the neutral gray of the top part with the bluish hue from the Main Page? (In HSV coordinates, where H ranges from 0 to 360, it's about H=204. I have also posted a guide to the colours used so far on IMSLP.)
I don't mind dropping the red, maybe we can use it in the description template when we're going to redesign it?

A minor quibble: The right hand side of the top part looks a bit crowded. And personally, I'm not very fond of dashed lines, but that's probably just me....

Is your proposal just a mock-up, or do you have the code for it? I'd strongly suggest we try to do it in standards compliant XHTML+CSS (cross-browser and future proof), despite the problems with M$IE mentioned above...

scottorr · Post by **scottorr** » Sun Oct 07, 2007 9:15 pm

I took your suggestions and made a second version, I quite like it. However, I did have to change the font and link colours in the title bar, because the black was too dark on the blue, and the white link vs. the black text was too stark a contrast. I agree about the status thing, and gave the all aligned a try. I also eliminated the dashed border, so let me know what you think. I picked a blue border colour very quickly, so it's not the best choice for it, but it could be better selected when I get an extra moment.

http://img209.imageshack.us/img209/9990 ... te2xz9.jpg

Post by **imslp** » Sun Oct 07, 2007 9:43 pm

Wow... nice! My main question would be the same as Leonard's, namely whether you have actual code for the proposal, or that it is a visual mockup. If you have the code for it, it'd be very nice if you could post it on IMSLP; I would like to implement this as soon as possible. Even if you think it is not completely finished or polished, I believe it is a good idea to have the framework there (especially the template variables as I explained a few posts above), so that we don't have to redo the files that were submitted while we are trying to perfect the template

That said, I think it is very very nice as it is... it is very nice that you were able to improve upon your template by seeing Leonard's. Good work, both of you!

Post by **Leonard Vertighel** » Sun Oct 07, 2007 9:55 pm

Very nice. I'm only a bit worried that some people might find the low contrast top part hard to read. We could try to use a background that has the same hue as the dark one, but a brightness closer to your first proposal (something like #c2c8cd, i.e. R=194, G=200, B=205 (range 0-255)).

Can't think myself of a good solution to make the top right part look less crowded. Other than that, I really like it.

scottorr · Post by **scottorr** » Sun Oct 07, 2007 10:37 pm

Unfortunately I am more of a graphic designer than a coder, so this will need to be coded. But I don't worry, Leonard seems more than capable at coding!

I'll give you all the hex values and font styles, and the margins are approximations; whatever you need. Really, my colours may even be off; they are the standard fonts, and the font colours should be the same as on the page to their respective backgrounds. I think we should just use this, and then we can figure out a better colour choice for the header.

Title bar BG: #788791
Title bar border: 1px solid#4D6B84
Title bar text: #B8C7D0
-text on description: size 11. (IMSLP #_____ is bold)
Title bar link: #FFFFFF
-Descrption: size 14.
-Info on right: size 12.
------
Content BG: #ebeae4
Content text: size 12 same colour as composer template.
Content border: 1px solid #B7BEC5
------
Image BG: #bfbba5
Image border:1px solid #918F81

http://imslp.org/wiki/Image:Copyrightreview.png
http://imslp.org/wiki/Image:Newsymbol.png
http://imslp.org/wiki/Image:Verifiedcheckedsymbol.png

Let me know if there is anything else you need.

I don't know if it's sensible to create a no preview image, because so many files dont not have a preview. Is there still a plan to eventually create preview images out of PDFs in the future?

EDIT: Just one more thing I've been playing with...The template looks quite good without borders, and matches the rest of IMSLP in that way. Feel free to decide on whatever you like better.

Post by **Leonard Vertighel** » Mon Oct 08, 2007 7:04 am

scottorr wrote:Unfortunately I am more of a graphic designer than a coder, so this will need to be coded. But I don't worry, Leonard seems more than capable at coding!

...except that it's impossible to code two equal height columns with border in CSS (other than using some slightly insane background image trickery). I can try to do a mix of CSS and table based layout, but it's going to take a little while.

scottorr · Post by **scottorr** » Mon Oct 08, 2007 12:40 pm

With the edit i added last night; does it make easier (or possible, apparently) if there is no border on any of the sections?

EDIT: Just one more thing I've been playing with...The template looks quite good without borders, and matches the rest of IMSLP in that way. Feel free to decide on whatever you like better.

Post by **Leonard Vertighel** » Mon Oct 08, 2007 1:19 pm

scottorr wrote:With the edit i added last night; does it make easier (or possible, apparently) if there is no border on any of the sections?

Without borders it should be possible to code in standard CSS (well, it certainly is, the question is how to make IE play along - in my opinion, that thing is mislabeled: it is not a browser, but a shredder - but I digress), with borders it would take some trickery (ab-)using table markup (only for the bottom part however). Maybe I'll first code it without borders, so everyone can see what it looks like. I hope to at least start working on it later today.