Zak's Design Tweaks & Rewrites Thread

caycefischer commented 11 years ago

Just a log for me to record before/after screencaps of my random interface tweaks. Anyone is welcome to suggest further changes or critique.

This is probably only of interest to UI nerds and members of the dev team.

caycefischer commented 11 years ago

Commit ba1a8dabc854b286575ef11bb7acbf9ff07badb1

Moving styles away from bootstrap
start implementing Lato as app-wide font (fuck helvetica)
normalize font sizes and padding/margin/radii using relative em units
begin refactoring of tasks html (remove pre element, add module classes)

Before: Screen Shot 2013-03-04 at 8 33 52 PM

After: Screen Shot 2013-03-04 at 8 33 42 PM

Notes to self:

Reduce letter-spacing on task text

switz commented 11 years ago

I like helvetica :\

On Monday, March 4, 2013 at 8:49 PM, Rudd Fawcett wrote:

to your Helvetia comment @zakkain (https://github.com/zakkain)

— Reply to this email directly or view it on GitHub (https://github.com/lefnire/habitrpg/issues/585#issuecomment-14419008).

caycefischer commented 11 years ago

@switz I have nothing against helvetica intrinsically, but it's become so genericized in design and especially thanks to bootstrap, it's like the times new roman of the web now. It's not really a serious option anymore, in this kind of minimal application—regrettable, but true. Lato might not be the right option, I'm open to suggestions.

caycefischer commented 11 years ago

Apple actually uses Myriad Pro for its own branding, but you're absolutely right—in the era of OSX Helvetica came bundled with the system and became one of the default sans-serif fonts on desktops (and the web). But the popularity of Helvetica as the standard "good design" font has been strong for at least a few decades more than the internet age. It was originally a heading/signage/poster font, and more recently, as you say, has been popularized as a body font due to the digital ubiquity.

On Mon, Mar 4, 2013 at 9:44 PM, Rudd Fawcett notifications@github.comwrote:

@zakkain https://github.com/zakkain @switz https://github.com/switzThis may just be me, but I feel like Apple popularized Helvetica, and more people started to use it... Might just be me, though...

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14420454 .

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

wildcate commented 11 years ago

Looks nice! Personally, I rather like Trebuchet (even if it was designed for Microsoft), but I'm not sure how well it would serve for this purpose.

lefnire commented 11 years ago

Some thoughts:

Let's not go too crazy gutting Bootstrap until we're rich. Here's why. The files come in heavy, but they're the least of our optimization concerns in Habit - trust me. We use tons of their styles, so it's gonna be a major overhaul and extra project to maintain replacing them. It's not as simple as replacing the styles, as we saw with the progress-bars scare. Also, we use almost all of their javascript components, which depend on the styles anyway - so we'd be sending the css to the client regardless (we're definitely not rewriting their JS components). Add & alter as necessary, but let's not gut - not till we have $$.

Re fonts: I trust Zach's opinion here because he does this professionally, but we just heard 4 font opinions, in which case I'm inclined to go with the opinion of Twitter (Bootstrap - aka, Helvetica). But let's give Zach's commits a shot and see what people think.

Side note - let's make all non-hotfix commits as pull requests, it makes merge-sets much easier to track. I'm gonna start doing this myself as well.

Hope this doesn't sound like a combo-breaker. You truly are the man, Zach!

caycefischer commented 11 years ago

@lefnire Really good point re: bootstrap—I won't gut anything, I'll just layer new CSS on top. It gets compressed anyway so like you said, it isn't an optimization concern.

You're going to get pushback whenever you make changes, and people are used to the Bootstrap look. I'm certainly open to font changes but I'm campaigning pretty hard for ditching helvetica. Let's see if there's mass complaining or not.

OK, good point as well. So, how should I do this? How do you pull request commits from the same repo? Or should I maintain my fork, and just PR stuff in from zakkain/habitrpg and merge it?

lefnire commented 11 years ago

Fair, I'll keep take complaints with a grain of salt (you're absolutely right, the push back has already begun now we have established users). I'll support you on the font change then my friend.

Don't worry abou this merge set, keep in mind for next batch. Branches. You can do it either zakkain/habitrpg, you can even push to lefnire/habitrpg#new-branch and PR it against develop (that's how I'm doing it). Whatever's easiest.

caycefischer commented 11 years ago

Oh OK! I'll make a ui-tweaks branch or something and PR across branches.

On Tue, Mar 5, 2013 at 8:34 AM, Tyler Renelle notifications@github.comwrote:

Fair, I'll keep take complaints with a grain of salt (you're absolutely right, the push back has already begun now we have established users). I'll support you on the font change then my friend.

Don't worry abou this merge set, keep in mind for next batch. Branches. You can do it either zakkain/habitrpg, you can even push to lefnire/habitrpg#new-branch and PR it against develop (that's how I'm doing it). Whatever's easiest.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14440010 .

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

switz commented 11 years ago

Just to reiterate Tyler for cleanliness' sake, fork the repo (button at top right) and make changes on a new branch in your repo. Then send a pull request from your repo to the develop branch on tyler's repo. This makes life much easier when working with a team.

On Tuesday, March 5, 2013 at 8:40 AM, Zachary Kain wrote:

Oh OK! I'll make a ui-tweaks branch or something and PR across branches.

On Tue, Mar 5, 2013 at 8:34 AM, Tyler Renelle <notifications@github.com (mailto:notifications@github.com)>wrote:

Fair, I'll keep take complaints with a grain of salt (you're absolutely
right, the push back has already begun now we have established users). I'll
support you on the font change then my friend.

Don't worry abou this merge set, keep in mind for next batch. Branches.
You can do it either zakkain/habitrpg, you can even push to
lefnire/habitrpg#new-branch and PR it against develop (that's how I'm doing
it). Whatever's easiest.

—
Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14440010
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com (mailto:zakkain@gmail.com)
→ view my resume/profile http://zerply.com/zakkain/public

— Reply to this email directly or view it on GitHub (https://github.com/lefnire/habitrpg/issues/585#issuecomment-14440233).

caycefischer commented 11 years ago

@lefnire Thanks Tyler—Lato might not be right in the end, but the helvetica non-choice is no better :P

@switz aha OK. Yes, that does make it clearer. Wilco.

@lefnire And to be clear just so I don't muck this process up, d'you want to be the guy managing PRs or should I merge them myself?

lefnire commented 11 years ago

Me please :) Just so I can do quick-scan checks pre-merge

On Tuesday, March 5, 2013, Zachary Kain wrote:

@lefnire https://github.com/lefnire Thanks Tyler—Lato might not be right in the end, but the helvetica non-choice is no better :P

@switz https://github.com/switz aha OK. Yes, that does make it clearer. Wilco.

@lefnire https://github.com/lefnire And to be clear just so I don't muck this process up, d'you want to be the guy managing PRs or should I merge them myself?

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14440775 .

caycefischer commented 11 years ago

byyourcommand

lefnire commented 11 years ago

Woo! I haven't gotten a zakkain special in a while, forgot how awesome those are!

caycefischer commented 11 years ago

I'm working on better checkboxes and buttons, for a few reasons:

moves us from the default browser UI and makes the app more unique, something that's identifiable as "our style"
that will be useful in the mobile app too, to get a nice "native" feel
improve accessibility and visual aesthetics

So, here they are so far:

Screen Shot 2013-03-05 at 12 53 32 PM

\ I want feedback on the faded-out checkmark on uncompleted tasks. When that area is blank it looks really weird, and I think this lets users know you can interact with it. Are they not subtle enough? Too subtle? Maybe replace them with an "X"?**

Secondly, I've been extending this style to the other buttons, currently the Habit column. Things are a little different here, as the PLUS and MINUS buttons currently have a green/red colour to help show what they do, but that can clash with the color of the actual task. See two options below:

Screen Shot 2013-03-05 at 1 43 41 PM Screen Shot 2013-03-05 at 1 44 57 PM

I want feedback on which of the two techniques you think works better, or if you have suggestions for a better way. Personally, I like the buttons when they're the same color as the task, it looks a lot more harmonious, and I don't think you need the green/red to help you figure out which is better.

Pandoro commented 11 years ago

First of all, I like this style! But it does change the general UI a lot I guess? We should see how users react to this as well. Give it a while on the test server maybe ?

Too subtle in my opinion. I don't really see the difference between checked and not. Maybe try a circle for still open task? A check more for done. Furthermore I think the disabled grey tasks aren't so clear. I would somehow distinguish them stronger from tasks that need to be completed.
I like the second one better as well :) I would round of the edges to the left though, as with the others. (Probably this was intended right?)

On Tue, Mar 5, 2013 at 7:56 PM, Zachary Kain notifications@github.comwrote:

I'm working on better checkboxes and buttons, for a few reasons:

moves us from the default browser UI and makes the app more unique, something that's identifiable as "our style"

that will be useful in the mobile app too, to get a nice "native" feel

improve accessibility and visual aesthetics

So, here they are so far:

[image: Screen Shot 2013-03-05 at 12 53 32 PM]https://f.cloud.github.com/assets/546495/223907/8e9ce84e-85c5-11e2-840c-82dee98fbf8e.png

\ I want feedback on the faded-out checkmark on uncompleted tasks. When that area is blank it looks really weird, and I think this lets users know you can interact with it. Are they not subtle enough? Too subtle? Maybe

replace them with an "X"?**

Secondly, I've been extending this style to the other buttons, currently the Habit column. Things are a little different here, as the PLUS and MINUS buttons currently have a green/red colour to help show what they do, but that can clash with the color of the actual task. See two options below:

[image: Screen Shot 2013-03-05 at 1 43 41 PM]https://f.cloud.github.com/assets/546495/223921/19c48a1c-85c6-11e2-9bc8-8253dad1eeff.png[image: Screen Shot 2013-03-05 at 1 44 57 PM]https://f.cloud.github.com/assets/546495/223922/1e58bf26-85c6-11e2-99a8-3fc114736118.png

I want feedback on which of the two techniques you think works better, or if you have suggestions for a better way. Personally, I like the buttons when they're the same color as the task, it looks a lot more harmonious, and I don't think you need the green/red to help you figure out which is better.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14458062 .

wc8 commented 11 years ago

I like the big shaded checkboxes.

I thought they were all checked and wondered why they weren't all grey. Perhaps a faded ☐ symbol in place of the faded checkmark?
The right hand/second one looks cleaner, clearer. The mix of green and red on the left/first one seems strange.

caycefischer commented 11 years ago

@Pandoro good points!

Definitely won't push this live right away, there's a lot of UI left to go over so yes—a testing server would be great to get some opinions.

Glad you agree on point 2. I'll try with some different symbols, an empty circle/square might be really nice. :D

lefnire commented 11 years ago

Stunning, I love this! I don't have too much advice, but I really like where this is going

Pandoro commented 11 years ago

Btw, regarding the rounded edges, we might also go with the trend of sharp edges :p Like android and windows x)

On Tue, Mar 5, 2013 at 8:13 PM, Tyler Renelle notifications@github.comwrote:

Stunning, I love this! I don't have too much advice, but I really like where this is going

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14459031 .

wildcate commented 11 years ago

I like the empty/checked checkboxes and the same colour of all the task boxes of the current version a lot - better than the two-tone version of the mockup. Though there is more choice for strong colours when one can fade it for the text background... and that is nice, too. (Proper angry red for those languishing tasks!) How about adding an outline to each task, in the stronger colour? Like so:

outlined

And yes, I also thought that the light checkmark was a sign for "done" at first.

For the +/- habits, I like the right-side column better - the darker shading of the button part sort of overrides the shading of the habit itself, so it looks like they are just red or just green. Especially if the todo lists and dailies will have the two-tone shading with the darker version of the task colour in front.

Edit: Now that I've looked at these nice strong solid colours while meddling with the mockup, on returning to the UI as is it seemed awfully pale. So :+1: for the new, more solid stuff!

caycefischer commented 11 years ago

@wildcate that looks pretty chunky, I dunno. To me that UI feels heavier without really needing it.

@Pandoro I'm a big fan of sharp corners, but I think in this case it's a minor aesthetic thing. Your thoughts on these variations?

Rounded: Screen Shot 2013-03-05 at 3 09 04 PM

Square: Screen Shot 2013-03-05 at 3 09 48 PM

Square with subtle border: Screen Shot 2013-03-05 at 3 12 16 PM

Shaners commented 11 years ago

Sharp corners are really in this season!

lefnire commented 11 years ago

Actually getting very excited for this!

caycefischer commented 11 years ago

Hokay folks, switching tacks for a second to talk about responsive design! Currently the responsive breakpoints are based off of bootstrap's defaults, which for our four-column layout is pretty bad and makes screen sizes just above the breakpoint impossible to use.

Here's my first crack and new responsive styles (excuse the low quality gif):

rspnsv

I made breakpoints based on the content, so that when things get too cramped, we switch to the best layout. What do people think of the two-column layout at smaller screen sizes? Do you like the scrolling inside a section when it gets too long (so there aren't big empty spaces), or do you find that confusing?

rspnsv

lefnire commented 11 years ago

drool

caycefischer commented 11 years ago

Bleeding-Edge Preview Server

OK, so Tyler and I have decided to throw up a live preview server for these new UI changes. What you see here is 100% bleeding-edge, it will be broken, there will be bugs, designs will be half-baked. Code gets pushed here more or less as I write it.

Feel free to check it out, post bug reports and suggestions in this thread.

lefnire commented 11 years ago

looks like bootstrap components nested within effected elements inherited some styling: before | after. Not a biggie, and more something for my own plate - move all modals / popovers outside of partials & pass in data with JS, rather than instantiating components for each task

wildcate commented 11 years ago

Hey wow! Sleeping makes one miss things!

at a few window sizes, the gold/silver icons move over the "Rewards" text and are thus intelligible; the "add new" boxes are wider than the columns they sit in - both these are also issues in the current version
I like the boxes with border better than those without (makes it seem more like one item and not like a two-part thingie), and the rounded edges better than the sharp corners
I totally love being able to scroll inside a list when it's too long (my to-do is waaaay longer than the others)

Oh, and regarding the chunky borders I drew in... my tasks are solid, chunky tasks or want to seem like that ;)

Edit: Forgot to mention that the font did not work for me - too irregular/thick-and-thin looking on my screen.

wc8 commented 11 years ago

I like the look overall. I personally think the sharp corners make a nice contrast with the circle, but that's a minor detail.

Perhaps already planned, but could the box design be expanded to the rewards section for consistency? Maybe the gold cost can be centered in a box matching the checkmarks/plus buttons.

Usability wise, the checkmark on mouseover is a good touch for helping the user know what that box will do. :+1: The plus and minus buttons are not as clear, but that's something that can be taken care of by tooltips perhaps, and ultimately comes from knowing how HabitRPG works. Idea: moused-over habit button to change color based on its effect for a visual cue: the - button turn red and the + button turn green.

Awkwardnesses:

Reward Price box wide for a number input box; too wide to fit when in 4 column view (Gold label not visible).
I can scroll far below the bottom of the main page when the 2x2 view is in effect.
I think the odd alignment/wrap of long task/reward names is probably covered by @ruddfawcett's comment.
I've died twice when the page refreshed and it's unclear why, HP seemed good.
already present issues: habit note popups aren't fully visible in the 4 column width (although it shows up nicely in 2x2 arrangement), and the known algorithm issues

Pandoro commented 11 years ago

See my comments in the image. Overall it looks nice, but after seeing it, I am longing back a little to the good old habitrpg feeling. But well I guess that is something you get during every change ^^;

bugs

wildcate commented 11 years ago

I have looked a bit more at the old vs. the new version - the new design takes up a lot of space with the buttons/checkpoint area; having just the little box is using much less space. I also still get the impression that the button/checking area is the main item with its darker colour and the lighter-shaded actual task sort of fades into the background. Even if you did not like my chunky borders ; ) I think they made it very clearly one item visually. Now my eye gets drawn away from the task text and toward the button area.

There's also some light grey box-like thingies around the daily and to-do list items that are missing for the others. They appear when an item is checked.

wc8 commented 11 years ago

My circles do not look like @Pandoro's. Mine are a nice ratio to the box size. Perhaps a browser/OS difference?

Pandoro commented 11 years ago

I'm on Ubuntu 12.04 FF 16.0.2

I hate to say it @zakkain and I really like you as a person, but giving it a little more thought and especially comparison, I like the traditional view better :x

I think by itself, your design looks really awesome, it looks clean and stylish, it would fit any current system. The problem I have with it though, is that Habitrpg, for me, has a kind of nostalgic feeling. I am not sure what makes the real difference, but if I look at the current design, I get a feeling of a 90s RPG. Rounded corners + pixel art. Simple UI structures, because they did not have anything fancy back then. Now if I look at your design, it just SCREAMS modern in my face. And while I seriously respect that someone can just pull that of in a day or two, it does not feel right in habitrpg for me. With the original version, you see the header and you look down and the general style continues and you get the idea that it fits. With the new version, the header seems nice and all, then you look down and you have the idea you are looking at some other website, it simply doesn't fit the pixelish style so well.

Now if it is just me, please go ahead, push it onto the live server once the bugs are fixed, but honestly I would be cautious here. Many people play this because it brings them back part of their childhood feelings I think. If you start taking that away from them... not so good I think :x I would fix it up a little and then do a poll, see what people like. Or... the other option, which I would right now really feel for, redesign the header as well. Tear out everything into "theme" files and make it selectable in the menu.

Just to say it again :x Please don't hate me for this @zakkain, I just want to get my honest opinion out here.

caycefischer commented 11 years ago

(circles are kinda different in every browser, it's a weird line-height thing. It'll get changed to a more reliable method)

@Pandoro I certainly take your point, there is something fast-talking and modern about the new interface that perhaps lacks some of the original... innocence. But I think the larger point (which I feel too) is that we have some nostalgia for the the original interface, and the whole app is kind of built on nostalgia in a way. Any progress we make is going to have resistance, from ourselves and others, that's just how it goes.

Now, the old UI had a lot of problems and we do need to move forward—but it is still very much a work in progress, and I'll certainly try my best to bring back some of that '90s vibe for ya :)

freshprince

PS: @Pandoro holy crap that's a lot of XP! :sob:

wc8 commented 11 years ago

Strangely (since I like user customizations), I'm not a fan of the theming idea at this stage. It seems like HabitRPG should stay uniform for awhile to develop its own character.

Maybe to emphasize Habit+RPG, the buttons/checkboxes should be even more game-like than the original ones? Or perhaps just the checkmarks and circles within the new theme could get a facelift? Game-style buttons? Bars of gold with coin amounts on the reward button?

Just my 2¢ brainstorming. Looking forward to see what comes next.

caycefischer commented 11 years ago

@wc8 I agree.

There's actually a parallel UI in the pipe that's exactly what you're talking about—an optional "skin" you'll be able to toggle to take the app from the basic clean interface to a retro-style game interface. Some talk about it sprinkled in the Interface & Aesthetics thread.

Our goal for the basic design is to keep it as clean and simple as possible, the vast majority of people who've chimed in seem to want a beautiful utilitarian interface to GTD, at least to start with.

wc8 commented 11 years ago

Just in case, my button suggestions were for just a small hint of game quality; and that was just brainstorming. I agree that utilitarian is really important for HabitRPG. Fun shouldn't come at the cost of clarity or performance.

[P.S. Catching up on that Interface thread. Thanks for pointing it out. I can see myself switching back & forth between a Clean-Modern basic skin and a future Enhanced Skin in different circumstances.]

One really good benefit of the new design: I often zoom out to see more tasks at once (I have long lists). The large areas for clicking work better on zoom out than the old version. With the old version it's hard to get the right spot for that tiny checkbox to be clicked. With the new version, I have no trouble. Although when very zoomed-out there are alignment/visual issues with the circles and checkmarks, I can still click anywhere in the shaded version and register the completion. I really appreciate that.

PhilipHow commented 11 years ago

This has also just become free

http://designmodo.com/flat-free/

caycefischer commented 11 years ago

aaactually, they're currently embroiled in a DCMA dispute! O_o Their original repo got taken down, looks like the just moved it.

On Fri, Mar 8, 2013 at 5:36 AM, Philip How notifications@github.com wrote:

This has also just become free

http://designmodo.com/flat-free/

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14613250 .

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

PhilipHow commented 11 years ago

Indeed, all the more reason to use them.

lefnire commented 11 years ago

@zakkain make sure to do a merge of develop, lotta changes in there. Also we're going to have a beta server in the near future with @alanthing's migration to aws. we'll debut your redesign on the beta server, which will track develop (while habitrpg.com tracks master) and use the production database. Twill fulfilling the KS beta promise, shard the server load, and allow the "dangerous livers" to kick the redesign tires in production while harbinging it's arrival to prod.

ghost commented 11 years ago

So we are going to use circles instead of checkmarks now? On Mar 8, 2013 8:46 AM, "Tyler Renelle" notifications@github.com wrote:

@zakkain https://github.com/zakkain make sure to do a merge of develop, lotta changes in there. Also we're going to have a beta server in the near future with @alanthing https://github.com/alanthing's migration to aws. we'll debut your redesign on the beta server, which will track develop(while habitrpg.com tracks master) and use the production database. Twill fulfilling the KS beta promise, shard the server load, and allow the "dangerous livers" to kick the redesign tires in production while harbinging it's arrival to prod.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14623697 .

caycefischer commented 11 years ago

@lefnire Wilco, I keep forgetting to pull that in. Planning on finishing the Rewards column and doing the PR tomorrow.

That beta server is a rad idea!

@Neohuman circles just indicate a task requires completion. It might change to an outlined square, still figuring this stuff out.

caycefischer commented 11 years ago

Update before the hangout tomorrow.

1. Rewards

Screen Shot 2013-03-09 at 1 37 38 AM rewards min

I've brought the rewards and pets over to the new design. Several points:

this layout for Pets is only temporary, pending the major re-design and implementation of the Pet/Mount system currently underway

Screen Shot 2013-03-09 at 1 37 56 AM

the same goes for the Store, which at some point will become actual Store and Inventory screens
we need to solve the "shit isn't centered in our sprites" problem, so this doesn't happen: because that's ugly as sin. Maybe we solve it by having a sprite for the avatar where items are in their proper position, and a separate one for the store? Maybe we just write better store CSS positioning? I dunno.

2. What do y'all prefer: circle or shaded square for Uncompleted Task?

My money is on squares. Not sure if I like it when the square is still visible when checked off, or not. Screen Shot 2013-03-09 at 1 37 26 AM Screen Shot 2013-03-09 at 2 08 33 AM

3. Interactions

I've started digging into the jqueryUI stuff and it's a pain in the ass. Here's some sexy better drag interactions (sorry for the bad gif): newdrag min I personally didn't like the opacity, this makes more sense. Upcoming on my agenda is figuring out how to get touch events working and setting up sortable task lists for touch screens, not just desktop. That probably means not using the jQueryUI sortable module. We'll see. If it isn't easy or convenient I won't rock the boat.

lefnire commented 11 years ago

Fantastic! Pushing to Heroku now, should be up in a few minutes. I vote boxes too.

On Sat, Mar 9, 2013 at 2:02 AM, Zachary Kain notifications@github.comwrote:

Update before the hangout tomorrow. 1. Rewards

[image: Screen Shot 2013-03-09 at 1 37 38 AM]https://f.cloud.github.com/assets/546495/239371/64a89a74-8886-11e2-95f3-e5797f7d307c.png[image: rewards min]https://f.cloud.github.com/assets/546495/239372/6c8d3538-8886-11e2-82e2-6662e6f428d4.gif

I've brought the rewards and pets over to the new design. Several points:

this layout for Pets is only temporary, pending the major re-design and implementation of the Pet/Mount system currently underway

[image: Screen Shot 2013-03-09 at 1 37 56 AM]https://f.cloud.github.com/assets/546495/239369/57401c2c-8886-11e2-9f8d-50932edbf8ef.png

the same goes for the Store, which at some point will become actual Store and Inventory screens

we need to solve the "shit isn't centered in our sprites" problem, so this doesn't happen: [image: Screen Shot 2013-03-09 at 1 37 46 AM]https://f.cloud.github.com/assets/546495/239370/60e5a616-8886-11e2-92bc-10eb90563da1.pngbecause that's ugly as sin. Maybe we solve it by having a sprite for the avatar where items are in their proper position, and a separate one for the store? Maybe we just write better store CSS positioning? I dunno.

What do y'all prefer: circle or shaded square for Uncompleted Task?

My money is on squares. All the squares. [image: Screen Shot 2013-03-09 at 1 37 26 AM]https://f.cloud.github.com/assets/546495/239374/d0b1e37e-8886-11e2-8dd4-648e1f2e7c0b.png[image: Screen Shot 2013-03-09 at 1 37 20 AM]https://f.cloud.github.com/assets/546495/239375/d61e9abe-8886-11e2-9e3e-65fbc40c5eb0.png

Interactions

I've started digging into the jqueryUI stuff and it's a pain in the ass. Here's some sexy better drag interactions (sorry for the bad gif): [image: newdrag min]https://f.cloud.github.com/assets/546495/239376/eb656df8-8886-11e2-80b3-3546d70e363a.gif I personally didn't like the opacity, this makes more sense. Upcoming on my agenda is figuring out how to get touch events working and setting up sortable task lists for touch screens, not just desktop. That probably means not using the jQueryUI sortable module. We'll see. If it isn't easy or convenient I won't rock the boat.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14659243 .

caycefischer commented 11 years ago

Note to self:

Just decided, on a whim, you know, to test on Firefox (durp) and found huge bugs with the checkboxes and all the outlines I'm using: ffbug

lefnire commented 11 years ago

also "cost" input on rewards: screenshot

horusofoz commented 11 years ago

Similar to above for Custom Day Start field. Screenshot

horusofoz commented 11 years ago

Also I noticed all progress/history is missing. Sorry if I missed the memo but is this by design?

HabitRPG / habitica