elfprince13 wrote:
comicIDIOT wrote:
C6M was designed to be as lightweight as possible and mimic the feel of Cemetech6 but without any of the Javascript and much less HTML - ideally in the table end of things. C6M uses one table and one table only. I can't vouch for the the quote and code things but the base template for C6M is one table. Now, I may have multiple tables on a page but never one inside the other.

We should be able to pretty trivially have the same look and feel without tables at all.
I can't say I've had success using divs and the position and float attribute in CSS. I'm not an advanced HTML/CSS coder, so you'll have to pardon the best of my abilities.

Quote:
comicIDIOT wrote:
Using the same CSS for both desktop and mobile would get way to convoluted and you'd have things taking up valued space on small devices.

I don't want to be offensive, but I don't think you understand how it works. I'm not saying you use the same CSS for both, I'm saying you use the same HTML for both and choose the CSS individually using @media definitions and allow the user-agent to choose the proper style sheet. It would be trivially to stick global css definitions in one file, handheld in another, and screen in another, including all three by default, but with a link to allow users to switch at will (only include one or the other) if their user agent is too dumb to figure it out.
I did mean to write about HTML rather than CSS.

Quote:
Quote:
Also, I'm not sure you've seen the source for cemetech. There are no proper class names for each thing. If I wanted to hide "Latest Headlines" using just CSS, I'd be SOL; I'd have to restyle the WHOLE site anyways. Everything on the left side is composed of sideheadtop, sideheadmiddle and sideheadbottom. There's no div that specifies it's "Latest Headlines" or "Online Users."

It's damn easy to find classes that need to be differentiated and add a duplicate definition (with some commas) to the screen media file, and a separate definition with display:none in the handheld media file.
So, how would you hide any one of these divs without modifying the HTML?
Code:
<td style="width: 200px; vertical-align: top;">
               <div class="sideheadtop">
               Logged In               </div>
               <div class="sideheadmiddle">
               Welcome back, comicIDIOT.<br />
                     » <a style="color: #fff;" href="/forum/search.php?search_id=newposts">Go to the new posts</a><br />
                     » <a style="color: #fff;" href="/forum/viewonline.php">Online Users</a><br />
                     » <a style="color: #fff;" href="/forum/./calendar.php">Calendar</a><br />
                     » <a style="color: #fff;" href="/forum/profile.php?mode=editprofile">Edit Profile</a><br />
                     » <a style="color: #fff;" href="/forum/privmsg.php?folder=inbox">You have no new messages</a><br />» <a style="color: #fff;" href="/forum/login.php?logout=true&amp;redirect=/forum/posting.php?mode=quote&amp;p=140012&amp;sid=95585b66b9fda284e880474f64ac1a29">Logout</a>               </div>
               <div class="sideheadbottom">
               </div>
               <div class="sideheadtop">
               Latest Headlines
               </div>
               <div class="sideheadmiddle">
               » <a style="color: #fff;" href="/news.php?id=444">Obliterate v1.0: Scorched Earth for Your Calc</a> <br />» <a style="color: #fff;" href="/news.php?id=443">Casio Prizm: Why TI Calc Coders Should Abandon the Nspire CX</a> <br />» <a style="color: #fff;" href="/news.php?id=441">Obliterate v1.0 Beta: AIs and More</a> <br />» <a style="color: #fff;" href="/news.php?id=440">globalCALCnet Slashdotted, Obliterate Progress</a>               </div>
               <div class="sideheadbottom">
               </div>
               <div class="sideheadtop">
                  Online Users
               </div>
               <div class="sideheadmiddle">
               There are a total of 55 users online: 9 members, 39 guests and 7 bots.<BR>Members: christop, DShiznit, Goplat, IRC, <span class="admincolor">KermMartian</span>, <span class="modcolor">Kllrnohj</span>, ParkerR, <span class="modcolor">TheStorm</span>, <span class="modcolor">_player1537</span>.<BR>Bots: <i>Googlebot (3)</i>, <i>Yahoo! Slurp (3)</i>, <i>Spinn3r (1)</i>.               </div>
               <div class="sideheadbottom">
               </div>
               <div class="sideheadtop">
                  RSS Feeds
               </div>
               <div class="sideheadmiddle">
                  <a href="/scripts/cemetechnews.php"><img style="border: 0px;" src="/forum/templates/Cemetech6/images/rss.png" alt="[RSS]" /></a> News Headlines<br />
                  <a href="/forum/rss.php"><img style="border: 0px;" src="/forum/templates/Cemetech6/images/rss.png" alt="[RSS]" /></a> Latest Posts
               </div>
               <div class="sideheadbottom">
               </div>
Psuedo-classes? sideheadtop:n+1 or however they work?
comicIDIOT wrote:
I can't say I've had success using divs and the position and float attribute in CSS. I'm not an advanced HTML/CSS coder, so you'll have to pardon the best of my abilities.

It's a little tricky to get the hang of, but not hard once you get the feel of it. Take a look at both the HTML and CSS source of http://www.sustainableheatingvt.org or http://www.village2villageproject.org (somewhere off the front page where the navigation is showing). I'm not using multiple media types, but the navigation columns are exactly what you'd want to be using here.


comicIDIOT wrote:
So, how would you hide any one of these divs without modifying the HTML?

..

Psuedo-classes? sideheadtop:n+1 or however they work?

I would modify the html in that case, but very small stranges would be required - not an overhaul of the whole template (though changing to div's from tables would require an overhaul). You can specifiy multiple classes for a single element, and insert the secondary classes into the tags which you MIGHT want to hide. Alternatively, you can give each link an id, and define #idrules in the css, or give each link its own class and assign the same definitions to multiple classes (comma separated declarations in the css) like I suggested in the previous post. All of those would require very small changes to the HTML, and most other things would be unchanged. The easiest thing would be to define a mobile_optional class to use as a secondary class for some of the elements (or a mobile_optional_block and mobile_optional_inline).

Anything with inline styling should be made its own class anyway.
Everything's looking good! I love that the profile editing is skinned now, so people won't get stuck in Cemetech6Mobile. Smile And the logo is a great touch. A minor complaint about the New Posts page: can the link be to the last page of the thread (ie, the new post link) rather than to the topic (which is the first page of the topic)? I think that would save extra page loads.
KermMartian wrote:
Everything's looking good! I love that the profile editing is skinned now, so people won't get stuck in Cemetech6Mobile. Smile And the logo is a great touch. A minor complaint about the New Posts page: can the link be to the last page of the thread (ie, the new post link) rather than to the topic (which is the first page of the topic)? I think that would save extra page loads.
I'll see what I can do, I'll take a look at the variables you've sent me (though I don't think anything pertains to search yet) and add the most appropriate and hope it works.

Also, quoting from C6M; Works great.

Edit works great too!
I got the page list to show up, need a new variable for C6M: the image is broken in in this variable.
Double Post but good enough for a *Major Bump*

I have continued working on C6M bringing it to more pages of the site. Pages now include: Archives & Projects. These are all fully skinned and some variabales are awaiting to be created, however there's only two required and they reside in the "Archives" section, you'll notice it right away.

I've decided to leave out MobileTunes3, SourceCoder and the Photos Module out of the skinning for now.

SourceCoder may likely be added later if users start to browse the site in C6M from desktops, but the second two don't warrant enough traffic (in my opinion) to even consider skinning.

I'm thinking for SourceCoder that I'll detect the user agent of the device browsing C6M and display SC if it's a computer and give the text that's there now if it's a mobile, the same will hold true for MT3 and Photos if those ever get skinned.

Some pages still need to be updated with C6M, those pages include Links & About. The only page I could find to skin out of those two, was the hardware page from About, which isn't skinned itself.

KermM: The two variables I require are derived from {archiverow.DESCHTML};{archiverow.TITLE} & {archiverow.DESC}, with the same formatting. Also, there are pages I don't have access to (not the admin CP, but others) and I'll address those with you over Skype.

Other than that, most of this site is skinned in C6M for the common visitor!
ComicIDIOT, you have done some amazing work here, and I can't wait to turn it on for more users. I can convert the Links page to a template later; I never really wrote the backend for it. I guess I'll have to figure out something for the About pages too, not as sure what I'm going to do about those, since they have relatively static content.
Ah. If you could setup a switch or something, <!-- IF C6M --> <!-- IFEND C6M -->, to recognize the template, I can add the template stuff in that page through that. Then, I'd imagine I can use <!-- IF ! C6M --> to place the standard HTML within or something.
So last thing I knew, you guys were filtering on known user-agents for mobile devices. If this is still how you're doing it (instead of the more obvious m.cemetech.net option) I suggest using the Apache Mobile Filter service. You can pass it a user-agent as a query string and get back some XML that you can parse and check the IS_WIRELESS_DEVICE element. There's also IS_TABLET which could be useful.
I'm all for m.cemetech but I'm concerned about users who are on MobileIRC who then click on links. They'd open the default version of cemetech every time. So it'd be nice to have some level of user agent filtering to redirect those users to the appropriate theme.

At the moment, both phones and handheld tablets are under the same theme, there's no point in designing another site for a larger screen when this one scales just fine.
comicIDIOT wrote:
At the moment, both phones and handheld tablets are under the same theme, there's no point in designing another site for a larger screen when this one scales just fine.
My suggestion was more that you use the Apache thing, rather than making another site. I was just point out that IS_TABLET is there. More importantly, IS_WIRELESS_DEVICE is there.
Not sure how we'd use IS_TABLET but IS_WIRELESS_DEVICE would definitely be useful.
My alternate thought was continue doing the user-agent thing, but add a way for users in the mobile thing to set a cookie element to use the full site without forced mobile for the remainder of the session. I guess I would still like an m.cemetech.net at some point in the future, but I don't want to make things too complex for myself.
If you go with the cookie, I can place a link right next to "Edit Profile."
comicIDIOT wrote:
If you go with the cookie, I can place a link right next to "Edit Profile."
Not a bad idea, but let's see what these guys think of that option first. It sounds slightly awkward, and I'd like to keep this as non-awkward as possible.
I love finding interesting things.
Quote:
//
// Should really check the browser to stop this whining ...
//


Anyways, Private Messages are done.





I dropped the "Flag" and "Date" columns for space. They are fixed width and I didn't feel like revamping the entire design of the PM system. It will happen though. It will happen. I did revamp the way you read PM's, now much more like a proper post. Instead, I made the PM subject more prominent. Instead of a post where it's italicized and small, see this post in C6M. Can anyone that doesn't have an iDevice confirm the look of the PM Inbox? I want to make sure this is easily see able. But on a small screen when it's all mashed together, your eyes draw the line from subject, to sender rather easily. Other work I completed are the Post Preview & Topic Review segments. I removed the topic review from it's iframe as the scroll bars took valued space.

I'm not 100% positive how to implement the PM Notification text into the header but I'll drop the URL to your inbox in the footer, again.
Shock A doublepost? From Alex? Say it ain't so. Smile I think it was the right idea to drop those columns, and from your description, this sounds great. I'll check out all the new things on my phone later. I think removing topic review was also a good idea for my poor phone's memory. We'll have to talk about the PM notifications. I still haven't implemented those Archive variables for you, I'll do that now.

Edit: New variables are LINK_URL and LINK_TEXT. That's what you needed, right? DESC is still always plaintext.
KermMartian wrote:
Shock A doublepost? From Alex? Say it ain't so. Smile
Did I? I posted from C6M on my Desktop and believe I only clicked Post once. I'll try another long post from C6M and see if that double posts.
Quote:
I think it was the right idea to drop those columns, and from your description, this sounds great. I'll check out all the new things on my phone later.
Awesome!
Quote:
I think removing topic review was also a good idea for my poor phone's memory.
I didn't remove it, I just removed it from the iFrame. I suppose then I should remove it altogether?
Quote:
We'll have to talk about the PM notifications. I still haven't implemented those Archive variables for you, I'll do that now.

Edit: New variables are LINK_URL and LINK_TEXT. That's what you needed, right? DESC is still always plaintext.
I added those and I believe you misinterpreted what I needed.

{archiverow.DESCHTML} provides both the title (formatted) and description for the file and or folder being browsed. I need that broken down into separate, non-formatted, variables so I can place the Description below the program download link and it's title; I already have the variables for the program/folder paths. I was thinking of keeping the formatting for the Title but I'm not sure how'd that look on smaller devices, so I suppose I'll just style it with CSS.
Ah. I took a look at that, and there's a slightly complex function that generates that HTML. It might be moderately difficult to pull that apart, but I'll give it the old college try on Sunday or so. A few weird bugs I noticed using C6m today:

1) When the newposts search page shows more than 0 rows, the "this week" link does not appear for some reason. Any ideas?
2) I agree that removing the thread preview would be an excellent idea, if you don't totally object.
3) Benryves noticed that every time I clicked a link inside Cemetech on my phone and loaded a new page, SAX reported that I entered the room again. This had the unfortunate effect of wiping the newposts list for me. I'm not sure if that's on your end, though.
I love this, you guys. I'm always on cemetech.net on my iTouch, and this was much-needed! It makes things so much easier. One suggestion, though, for the current layout: avatar thumbnails, only as big as the header is tall.

Edit: because I recognize who the poster is first by their avatar.
KermMartian wrote:
Ah. I took a look at that, and there's a slightly complex function that generates that HTML. It might be moderately difficult to pull that apart, but I'll give it the old college try on Sunday or so.
Ikes, sounds good. I don't need the formatting HTML, just the name and description, or is that what you were talking about? As in, the two or closely knitted together?
Quote:
A few weird bugs I noticed using C6m today:

1) When the newposts search page shows more than 0 rows, the "this week" link does not appear for some reason. Any ideas?
2) I agree that removing the thread preview would be an excellent idea, if you don't totally object.
3) Benryves noticed that every time I clicked a link inside Cemetech on my phone and loaded a new page, SAX reported that I entered the room again. This had the unfortunate effect of wiping the newposts list for me. I'm not sure if that's on your end, though.
1) Unable to replicate at the moment, but it's likely that I didn't skin that part of the new posts. I'll take a look.
2)Not at all; others might but until we hear from them.
3)I tried to replicate that on my end to no avail. There must be some JS somewhere left on C6M that's causing this to happen (and that prevents users from creating a new session on every page load). It's likely a mix on both our ends.

progbeard: Thanks! What avatars are you referring to? Obviously the users but in forum posts or the profile pages? Currently, only the profile pages contain the avatars. I have no plans to add them to posts.
  
Page 19 of 21
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement