@beckfield said:
Eagle eye.
Just want to see credit where it is due. 
You guys are doing a great job.
Alright its teaser time. This is a very rough cut of what I’m going for. I just finished up the javascript side of things which has dumped the page elements where I want them, and I am now working on styling up and aligning things. It obviously looks like crap right now, but the data I’m going to need is there. There’s no API for user avatars that I could find, so I have a weirdly cool, yet I think maybe clever, way of handling that. I’ll go into specifics tomorrow. Anyway I hope you guys are as excited about this as I am.
!
Author images will be going away and commenter images will be the only images here just like in the classic forums. This should also work on the main page, so I can bring it up that far hopefully when i get things done. It might take me a day or two to get this styled up appropriately, but I’m going to get there!
Also if anyone could summarize the things that have been debugged today for me that would be great. I’m incredibly tired and I’m off to bed and I can hit any bugs quick in the morning with the current skin.
@vanstinator - A bit concerned that what we have working nicely now may end up a beast and give rise to issues.
Is this paragraph headed Avoid mixing with other technologies on the Javascript Best Practices web page relevant to what you are trying to do now ?
A good point to raise. Everything I’m doing right now is independent of what I currently have working. Anything I changed gets a separate class so I can style it independently of Plex. I’m not doing any CSS whatsoever in my code. What this will end up meaning is even if the JS side completely breaks down the styling I’ve already done will still work unless Plex breaks things. It also means you may or may not use the JS side and the CSS side will still work. At this point I’m forging ahead with this for my own personal enjoyment. I think I can make something workable that isn’t a beast, but in the event I don’t I won’t have destroyed all the work I’ve already done.
Thanks - i just thought i should raise the point.
I am really impressed with what has been achieved in here
Thanks! It’s been good having @MovieFan.Plex around as I think both our scripts are better with the ideas and things we each try and find. I’m hoping that when my JS is done it’ll be simple enough for him to script over too if he wants to use it with his skin.
It’s been a very productive lunch break! I got a lot of the CSS doing what I wanted it to. I’m still cleaning some things up but I’m getting much closer to having something ready to release!
I also said we’d talk about user avatars. Right now there is no API for getting user avatars. Instead what I’ve done is devised a caching system that users the browsers local storage. As you browse the Plex Forums there is a small script that is scraping user avatars and storing the username and the image url in a map inside your browser. When it comes time to display an image for most recently commented there is no url on the page. So what I do is take the username of that individual and check it against the browser cache. I get the url and I insert that in the img tag. If there is no image it will display some default image which I’ve yet to determine. It’s an easy way to keep track of images until I can convince Plex to get me an API. In my testing it’s working well enough- I picked up almost 500 username to image url mappings in a minute or two of browsing. Since the cache is persistent between sessions this data will build up and then always be usable. Cache size should never get above 5MB as the browser API I’m using won’t allow it. I’ll be posting a the initial browser extension shortly using this caching code so anyone who wants to use the plugin will have an image cache created by the time I release the actual GUI changes.
Here’s the code snippet:
//Setup local storage so we can store a map of usernames and avatars
var localstorage = window['localStorage'];
var profilePhotos = document.getElementsByClassName('ProfilePhoto');
for(var i = 0; i < profilePhotos.length; i++) {
var imgUrl = profilePhotos*.src;
var username = profilePhotos*.alt;
localstorage[username] = imgUrl;
}
@vanstinator said:
Thanks! It’s been good having MovieFan.Plex around as I think both our scripts are better with the ideas and things we each try and find. I’m hoping that when my JS is done it’ll be simple enough for him to script over too if he wants to use it with his skin.
Well, you’ve gone past my abilities. Messing around with CSS is one thing, JS is beyond me. This themeing project has been fun and I might make some more, but I need to get back to work on my other scripting project that’s taken much longer than I expected.
@vanstinator said:
I like how the Avatars are moved to the right side of the pane. Much easier on the eyes and looks great. Looking forward to receiving this great new look. Thanks!
@MovieFan.Plex said:
Well, you’ve gone past my abilities. Messing around with CSS is one thing, JS is beyond me. This themeing project has been fun and I might make some more, but I need to get back to work on my other scripting project that’s taken much longer than I expected.
Which project is this?
@mjbxx said:
I like how the Avatars are moved to the right side of the pane. Much easier on the eyes and looks great. Looking forward to receiving this great new look. Thanks!
Do keep in mind these are also now the avatar of the user to last interact with that thread, not the author avatar.
@vanstinator said:
Do keep in mind these are also now the avatar of the user to last interact with that thread, not the author avatar.
Ok with me as I do not pay much attention to the avatars on that page. Just like the idea of them being moved to the right which will make reading the thread titles easier with an unobstructed view.
@MovieFan.Plex said:
Well, you’ve gone past my abilities. Messing around with CSS is one thing, JS is beyond me.
You and me both, brother. I’ll probably stay with the way I have it now. Having the avatars on the left may actually be the one improvement of the new over the old, in my opinion. Whether it’s the originator’s avatar, or the latest contributor, I can see an argument for either.
That, coupled with your Online indicator beneath the in-thread avatars, and I’m pretty comfortable with the current state.
I will totally continue support for just the CSS script. There are a few areas that need refinement yet and I plan to address them so the entire site looks profressional. I’ll also add the CSS Online content and I think I’m going to add the way beckfield did it (in that regard can you send me what you added.)
All that said my entire goal has always been a faithful reproduction of the old forums and I will continue phase 2 in that regard. It’ll never be exact but I’ll see how close I can get. It was a lot of fun bouncing ideas off of each other this last week, I really enjoyed it.
I’ll be opening a new thread solely for support of my skin - both modules. I’ll link to it here when I’ve finished drafting it and posted it. Further support will take place there. With two different pieces to the skin it will be easier to support with a proper thread.
@vanstinator, I’ve been using your stylesheet, and I created a second stylesheet to use in tandem.
Here is the complete content of my stylesheet:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("forums.plex.tv") {
/* Make the unread Categories and Messages a bit dimmer */
.Discussions .Unread,.Discussions .New {opacity:.95 !important;}
.CategoryList .Unread,.Discussions .New {opacity:.95 !important;}
/* Turn off the avatar border online indicator */
.Online .Author .PhotoWrap {padding:0px; background-color: transparent;}
/* Text Online indicator - modified from MovieFan's stylesheet */
div.Item-Body.Media div.Summary {color: #777}
div.Item-Body.Media div.Summary mark {color: #ccc; background: #777}
div.Item-Body.Media span.CrumbLabel {background: #777; padding: 0px 30px 0px 10px}
div.AuthorWrap a.PhotoWrap.Online:after {content: "Online"; text-align:center; font-weight: normal; color: #67ff5d; display: block; padding-top: 3px;}
.Section-Discussion .Role_PlexPass .MItem.RoleTitle {top: 68px;}
a.IndexPhoto.PhotoWrap.Online:after {content: "Online"; text-align:center; font-weight: bold; font-size: 85%; color: #67c25d; display: block; padding-top: 5px}
}Thanks. I’ll look at these and quite possibly wrap them into the official release. Before everyone goes separate ways are there any other user options you’d like on the installer?
@vanstinator said:
EDIT: I have no idea why I quoted this…
The Quote tool isn’t very reliable in that regard, I’ve noticed. Gotta be careful of what it thinks you want to quote. 
@vanstinator said:
Thanks. I’ll look at these and quite possibly wrap them into the official release. Before everyone goes separate ways are there any other user options you’d like on the installer?
Winning lottery numbers?
@beckfield said:
The Quote tool isn’t very reliable in that regard, I’ve noticed. Gotta be careful of what it thinks you want to quote.
Quote sucks. (^^ although it obviously worked this time ^^)
Yeah I have no idea why it’s as flaky as it is. I miss IP.Board…
@vanstinator said:
All that said my entire goal has always been a faithful reproduction of the old forums and I will continue phase 2 in that regard. It’ll never be exact but I’ll see how close I can get. It was a lot of fun bouncing ideas off of each other this last week, I really enjoyed it.
I had to react to this. Whilst there is always resistance to change from everyone - sometimes change is good. So faithful reproduction is only good if everything was perfect then. If there is room for improvement then you have to be a bit unfaithful
