Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Create basic Postmodern stylesheets to emulate old interfaces #90

Closed
GoogleCodeExporter opened this Issue May 31, 2015 · 37 comments

Comments

Projects
None yet
1 participant
We need to create a Postmodern-compliant stylesheet to emulate the layout
of the old interfaces:

* Modern
** left: logo, finger, menu, autoread
** remaining: content
** footer: below left & remaining

* Centered
** left: logo, finger, menu
** center: content
** right: autoread
** footer: below left, center & right

Are there any perceivable layout differences between Modern and OldTerm?

*These stylesheets should not declare any styling--only positioning*.

Ultimately, they will be included by other stylesheets that provide styles
to emulate the existing styles.

Who ever has a suggestion, please attach files here.

Original issue reported on code.google.com by thatha7777 on 29 Jul 2009 at 6:11

Prototype for Modern. Still needs work.

Original comment by thatha7777 on 29 Jul 2009 at 6:12

Attachments:

Original comment by thatha7777 on 29 Jul 2009 at 6:14

IIRC, OldTerm is missing some of the image cells that go to the left of items 
on the
nav bar / autoread. If you compare it against Modern with the default 
stylesheet, you
should see what I'm talking about.

Original comment by ian.gree...@gmail.com on 29 Jul 2009 at 7:02

I noticed that. Are there any other differences?

Say, if I migrated everyone from OldTerm to Modern, would they complain? 
(Should they
complain?)

Original comment by thatha7777 on 29 Jul 2009 at 7:08

It's that and the autoread is called autofinger instead.

I'm sure some would object to losing old skool "autofinger," which is why I 
didn't
force a migration (that, and because the interface was ridiculously easy to 
build).

Original comment by ian.gree...@gmail.com on 29 Jul 2009 at 8:00

Looking forward, technology-wise it makes sense to deprecate as many interfaces 
as
possible and only keep Postmodern alive.

Stylesheets should be able to emulate layouts and styles.

Original comment by thatha7777 on 29 Jul 2009 at 8:23

I think I agree with that 90%.

The 10% keeping me from that is this:
We have a sizable number of people using multiple interfaces with at least 
Terminal,
default.css (I assume that's Pastel Hell), and oldstyle.css (I assume that's 
Black,
White, and Red All Over).

Do we have two style sheets for each "style?"  Do we recreate "Interface" as
stylesheets and then let people style over them?

I'm not sure quite how to deal with this.  However, we need an answer before we 
kill
any interefaces.

Original comment by rootwi...@gmail.com on 29 Jul 2009 at 8:35

The scope of this ticket is to recreate "interfaces" (layouts) as stylesheets 
(I call
them layout stylesheets).

You then create a styling stylesheet for each of the old styles.

We then combine them by importing these two stylesheets in a stylesheet that a 
user
can use.

For example:

===modern-emulate.css===
.logo .finger .menu .autoread {
   amazing-layout: left;
}

.content {
  amazing-layout: center-and-right;
}

.footer {
  amazing-layout: all-the-way-to-the-bottom;
}
===end===


===pastelhell.css===
.logo .finger .menu .autoread {
   color: fuchsia;
}

.content {
  color: red;
}
===end====

===pastelhell-modern.css===
@import modern-emulate.css
@import pastelhell.css
===end===

===pastelhell-centered.css===
@import centered-emulate.css
@import pastelhell.css
===end===

Original comment by thatha7777 on 29 Jul 2009 at 9:10

Okay, maybe I was confusing killing all of the specific interfaces (specific
table-based layouts) with killing interfaces in general (the concept of 
selecting a
layout).  I do understand the purpose of the ticket.

As long as we keep the distinction between styles and layout for the end user, 
I'm
happy with doing it all with stylesheets.

I hope that makes more sense.

Original comment by rootwi...@gmail.com on 29 Jul 2009 at 9:29

The end user would get the options he gets now in one screen, the stylesheet 
screen.

For example they'd see:

Centered Terminal
Three-row Terminal
et cetera.

Moving forward, styles will define both layout and color (like the Sky layout).

Original comment by thatha7777 on 29 Jul 2009 at 9:39

I'll take Centered.  Ian's already started on Modern.  

I'll try to push this forward, but in a week we'll need some people to 
test/review
these.  Volunteers?

Original comment by rootwi...@gmail.com on 30 Jul 2009 at 2:27

I'll help review.

Original comment by ian.gree...@gmail.com on 30 Jul 2009 at 2:30

Alrighty, I'm uploading a Centered stylesheet.  I've done pretty thorough 
testing on
Windows in FF3, IE7, IE6, Opera, and Safari.  However, I want another set of 
eyes (or
two) to take a look at it.

Original comment by rootwi...@gmail.com on 30 Jul 2009 at 9:00

Attachments:

A couple small issues with centered.css:
 * All the particular pages in Preferences have content that is clearing to below the
links list.
 * The search results don't clear properly if they're not wide enough.

Other than that, it looks good.

Original comment by ian.gree...@gmail.com on 31 Jul 2009 at 4:42

Thanks, Ian.  I discovered those problems right after I uploaded the sheet...

Everything you mentioned should now be in working order.

Can someone else test-drive this for a day or two?

Original comment by rootwi...@gmail.com on 31 Jul 2009 at 1:18

Attachments:

Do we have browser statistics for plans?  I'm not very happy with how big my 
style
sheet got and I'm curious if we need to offer support for IE6.  That would cut a
bunch out of my sheet.

Original comment by rootwi...@gmail.com on 31 Jul 2009 at 2:28

Hm, we do have browser statistics now!

Here's the first 25 browsers, sorted from the most frequent to the least.

[root@grinnellplans httpd]# bzcat access_log*bz2 | awk -F\" '{print $6}' | sort 
|
uniq -c | sort -rn | head -25
  98450 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.4) Gecko/2008102920
Firefox/3.0.4
  53177 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.4)
Gecko/2008102920 Firefox/3.0.4
  41027 Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.4) Gecko/2008102920
Firefox/3.0.4
  30137 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.0.4)
Gecko/2008102920 Firefox/3.0.4
  22443 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.18) Gecko/20081029
Firefox/2.0.0.18
  20834 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_5; en-us) AppleWebKit/525.18
(KHTML, like Gecko) Version/3.1.2 Safari/525.20.1
  18450 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_4_11; en) AppleWebKit/525.18
(KHTML, like Gecko) Version/3.1.2 Safari/525.22
  15916 Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9.0.4)
Gecko/2008102920 Firefox/3.0.4
  13807 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727;
Media Center PC 5.0; .NET CLR 3.0.04506)
  12196 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702
Firefox/2.0.0.16
  10017 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
   9680 Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.18) Gecko/20081029
Firefox/2.0.0.18
   9553 Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1.18)
Gecko/20081029 Firefox/2.0.0.18
   9425 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.1)
Gecko/2008070206 Firefox/3.0.1
   8948 Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.18) Gecko/20081029
Firefox/2.0.0.18
   7876 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET
CLR 2.0.50727)
   7820 Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; en) AppleWebKit/525.18
(KHTML, like Gecko) Version/3.1.2 Safari/525.22
   6863 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET
CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)
   5788 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_5; en-us) AppleWebKit/525.26.2
(KHTML, like Gecko) Version/3.2 Safari/525.26.12
   5584 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)
   5085 Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.14) Gecko/20080404
Firefox/2.0.0.14
   5033 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.0.1)
Gecko/2008070206 Firefox/3.0.1
   4921 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317
Ubuntu/8.04 (hardy) Firefox/3.0.4
   4920 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
   4686 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML,
like Gecko) Chrome/0.3.154.9 Safari/525.19


I am VERY VERY pleased with how much Firefox there is.

Original comment by thatha7777 on 1 Aug 2009 at 12:05

Hey Ian A. et al -- Are y'all actively working on the stylesheet to emulate the
modern interface?

I ended up sticking very close to the modern layout in the stylesheet I made 
this
weekend (before I go nuts with creative ideas), so it might not be too bad for 
me to
strip it down and alter it to fit the modern emulation bill.  Shall I?

Original comment by veronica...@gmail.com on 24 Aug 2009 at 3:36

Veronica,
Check out Ian A.'s modern sheet in the first post of this thread.  I think your 
time
would be better spent taking that for a test ride and submitting any changes you
think should be made.

Original comment by rootwi...@gmail.com on 24 Aug 2009 at 5:00

Mark --

Alrighty, I'll take a look and see what I can suggest!

Original comment by veronica...@gmail.com on 4 Sep 2009 at 11:20

I've been working on this (at http://github.com/baldwint/planscss) and am 
pretty much done. A patch for plans can be made from the git repo by diffing 
the css branch against master. I attached that patch as it stands now.

The five older stylesheets should still look pretty much the same under modern, 
centered, and old term interfaces. Under postmodern, they should look roughly 
like modern, instead of like garbage (as previously). In addition there are 
five companion stylesheets which emulate the centered interface.

modern.css and centered.css are two new mixin sheets that set the basic layout 
rules to ape the interfaces. Including these at the top of custom sheets is 
helpful but not sufficient in migrating to postmodern since many elements have 
been renamed.

I am temporarily hosting copies of the modified sheets and put up a plea for 
beta testers on the [css] plan. I'd appreciate feedback, especially from users 
of IE, Firefox, Windows, secrets, and notes.

Original comment by umhecbaa on 14 Jun 2013 at 10:57

Attachments:

Despite pleas for feedback on my plan, Ian Young's, and [css], I haven't heard 
anything from stylesheet testers. I am reasonably confident that the work is 
ready for production, though, and that this would improve the experience for 
most users:

- people using a postmodern sheet will notice no change no matter which 
interface they use - on a postmodern interface, it will still look good; on a 
modern, oldterm, or centered interface, it will still look terrible
- people using modern, oldterm, or centered interfaces with Pastel Hell or 
Pastel Purgatory will notice only small changes (e.g., text now centers 
properly within border rectangles in Purgatory)
- people using modern, oldterm, or centered interfaces with Terminal, Jolly 
Rancher, Parchment, and Black, White, and Red All Over will notice that the old 
plans logos are back (they were deleted around r429, reason unclear)
- people using the postmodern interface and any of the older sheets will see 
big changes, mostly for the better, since these sheets were not designed for 
postmodern in the first place.

The stats Alex shared a few months ago show that this last group is not an 
insignificant share of people. That amazed me at first but it is actually a 
very easy mistake to make, given that new accounts have been defaulted to 
postmodern for several years now, and most of the options presented in the 
style chooser will break the site when using this interface. This leads to 
confusion, as evidenced by Issue 252.

In addition to serving that poor slice of people currently using broken 
stylesheets, committing this patch brings us closer to visual parity between 
modern and postmodern interfaces when using the classic styles, which is the 
goal being tracked in this issue. There are still refinements remaining on that 
front, but I think it is beneficial to commit the work so far because it lowers 
the barrier for people to test out how close we are.

For example, my rendition of Black, White, and Red All Over in Postmodern is 
close but not exactly spot-on (see http://pages.uoregon.edu/tbaldwin/planscss/ 
). This sheet has a rabid following by people other than me, who will be a 
better judge of whether the differences are acceptable. With the patch 
committed, these people need only change from Modern to Postmodern to see if it 
looks all right by them. At present they would have to do this and also set a 
custom css to the development version I am hosting, which understandably no one 
is bothering with.

Original comment by umhecbaa on 23 Aug 2013 at 6:18

Amazing work, Tom. It looks like you got it all to work with the same URLs, so 
we don't have to change anything on the backend, right?

I'm +1 on this for sure.

Original comment by ian.gree...@gmail.com on 23 Aug 2013 at 6:49

That's right, I modified the existing stylesheets in-place, so we shouldn't 
have to change anything in the database's style table. 

I do add several new css files that emulate the old 'centered' interface under 
postmodern. These are not in the database currently, but we could add them 
later (debatable). For now they can be used by setting a custom css rule.

Original comment by umhecbaa on 23 Aug 2013 at 8:07

We would still need to make backend changes to move everyone to the tableless 
interface. It's not a big deal - just grab everyone who's using default 
stylehseets on old interfaces, and push them to Postmodern - but it's not 
nothing.

Though it would be nice to move them to a Centered version of the stylesheet if 
there's one available... should the Centered ones be added to the styles table? 
Would that make it unbearably cluttered?

Original comment by a...@alexcohn.com on 23 Aug 2013 at 8:15

Also, don't forget about guest users: We'd need to change 
functions-display.php's populate_guest_page() and interface_disp_page() to use 
postmodern. (And, if we're doing that, it might be a good time to re-evaluate 
our guest stylesheet choice?)

Original comment by a...@alexcohn.com on 23 Aug 2013 at 8:21

If necessary, you could have the migration move centered people to a custom URL 
pointing to the new centered style to bypass the need to add em to the defaults.

I'd say we should add any centered styles that look nice enough that we think 
new users might want to use them. Any that are old and funky can probably be 
left as a custom URL easter egg.

Original comment by ian.gree...@gmail.com on 23 Aug 2013 at 8:22

You are right about that, Alex, but I'm not advocating we do any migrations 
right now. We should have a voluntary test driving period beforehand I think. 
The patch as submitted puts the new CSS versions on the server so that becomes 
easier to do.

Original comment by umhecbaa on 23 Aug 2013 at 8:24

If you're replacing existing default styles' CSS files on the server (which you 
are, if you're modifying them in-place, as you said at #25), that's not exactly 
a voluntary test driving period. How do the new stylesheet versions look when 
viewed with the old interfaces?

Original comment by a...@alexcohn.com on 23 Aug 2013 at 8:29

You're right, modifying the styles in-place makes users of the old interfaces 
vulnerable to regressions, and that aspect of the test driving is not 
voluntary. There are two conditions:

- appearance staying the same under old interface upon modifying stylesheet
- appearance staying the same when switching interfaces, keeping stylesheet same

The second of these is the more difficult one to satisfy and that is the switch 
that remains voluntary.

I would argue that the voluntary testing period for the first condition has 
been the last two months since I finished the work and put up links to the 
draft sheets on [css]. Nobody reported anything, but then again I know of no 
other testers besides me and Ian.

> How do the new stylesheet versions look when viewed with the old interfaces?

I address some of the known differences in #22 (second and third bullet 
points): I brought old logos back, and took the liberty of making some 
alignment changes in Purgatory. I don't think there are any others but I would 
love to hear from some testers.

Original comment by umhecbaa on 23 Aug 2013 at 8:48

umhecbaa made tremendous progress on this front -- he posted his updates on the 
[css] grinnellplan.

Tom, this is tremendously helpful, thank you.

Original comment by i...@atha.io on 24 Feb 2014 at 12:18

Thank you for your kind words, Ian.

I actually finished this work last June and it has been in code review ever 
since. The patch I submitted on June 14 can be considered the finished product.

Alex, were there specific objections you had that I can work toward resolving 
before you will commit it, or is the holdup just inertia?

Original comment by umhecbaa on 13 Mar 2014 at 11:30

Just inertia. I will commit tonight, and look into getting you commit access. 

Original comment by a...@alexcohn.com on 13 Mar 2014 at 11:38

I created a branch, postmodern_css, containing these changes (r667). Check that 
out to see how the sheets look - if there are no objections, I'll merge it and 
close this issue.

Original comment by umhecbaa on 5 Mar 2015 at 1:44

Tom, that's great. I'm in favor of merging it if you feel comfortable with the 
changes.

Am I correct in understanding that these new sheets will continue to work with 
the old interfaces, but will also work with postmodern? So people can 
conceivably switch their interface without switching the stylesheet, and see 
negligible differences?

Original comment by ian.gree...@gmail.com on 7 Mar 2015 at 8:03

That's correct. The revised sheets still work with the old interfaces. They 
will appear just as they did before, with an exception: I brought back the 
logos that go with each sheet (e.g. green stripey plans logo under terminal).

Yes, people can switch their interface from the old interface to Postmodern and 
see only minor differences. I wouldn't call them negligible, but I would call 
them minor.

Original comment by umhecbaa on 10 Mar 2015 at 6:01

This issue was closed by revision r668.

Original comment by umhecbaa on 16 Mar 2015 at 12:29

  • Changed state: Fixed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment