Finalise styling and placement of the "tutorials" link

RESOLVED FIXED

Status

Webmaker
Thimble
--
blocker
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: thecount, Assigned: thecount)

Tracking

Details

(Whiteboard: s=2013w24 p=1)

Attachments

(2 attachments)

(Assignee)

Description

5 years ago
Bug 871558 landed a bunch of functionality for tutorials in thimble.

Cassie has some UI updates it is going to need: https://bug871558.bugzilla.mozilla.org/attachment.cgi?id=750458

Also need to consider that popcorn maker needs this too.

Might be wise to move the tutorial UI into webmaker nav like the dashboard has.
Whiteboard: s=2013w21

Updated

5 years ago
Blocks: 875429

Updated

5 years ago
Summary: Update UI for displaying tutorials → Update UI with tool-specific bar

Updated

5 years ago
See Also: → bug 875043

Updated

5 years ago
Assignee: nobody → pomax
Status: NEW → ASSIGNED

Updated

5 years ago
Whiteboard: s=2013w21 → s=2013w22

Updated

5 years ago
Whiteboard: s=2013w22 → s=2013w23

Comment 1

5 years ago
I'm not sure what we really want to do, in terms of getting up and running by June 15th. For popcorn, the idea of the "app specific" toolbar makes sense, and is easily done, but for Thimble, it gets a bit weird since friendlycode has its own functional bar, housing options and buttons.

If we really want to add the bar in the same fashion for Thimble, then we probably need to strip that out of friendly code first... if we do, it'd be an invasive procedure, and probably not something we can get done before the 15th.

My 15th solution would be "it actually looks reasonably fine this way already", since it already looks like two bars, but this definitely requires some higher-level-view opinions.
Pomax - the "app specific bar" in Thimble would be exactly what you're describing - the functional bar that is thimble-specific (publish, the edit/preview pane, hints, etc).

What has prompted the need for this bar is tutorials - its a new bit of functionality that both apps need to accomodate.  Cassie's designs are an attempt to harmonize where and how these appear to users.

While its a "nice to have" that they have a consistent design, its a must have that we surface tutorials by June 15th.

Comment 3

5 years ago
reassigned to Scott, I'm pretty sure we're surfacing tutorials right now, but I'll have him confirm this.
Assignee: pomax → scott
(Assignee)

Comment 4

5 years ago
If it is on the table, I would prefer to put the tutorial link in the userbar for june 15th.

Comment 5

5 years ago
if it's still universal, I'd say let's do that; the userbar's also used on webmaker.org though, would the tutorials link exist there too?
(Assignee)

Comment 6

5 years ago
I don't think tutorials need to exist on webmaker.org, just thimble and popcorn.

Comment 7

5 years ago
Alright, in that case we technically already have everything we need, but we'll need to style the tutorials link nicely. We can actually do this when Cassie comes back, since it's a relatively simple thing to do. All the logic and the DOM elements are already in place, and "half" the styling's already there (i.e. it shows up as a link that users can interact with without looking horribly out of place)

Updated

5 years ago
Whiteboard: s=2013w23 → s=2013w24
(In reply to Mike "Pomax" Kamermans [:pomax] from comment #7)
> Alright, in that case we technically already have everything we need, but
> we'll need to style the tutorials link nicely. We can actually do this when
> Cassie comes back, since it's a relatively simple thing to do. All the logic
> and the DOM elements are already in place, and "half" the styling's already
> there (i.e. it shows up as a link that users can interact with without
> looking horribly out of place)

Is there anything you need from me in order to move on this?
(Assignee)

Comment 9

5 years ago
Yes, need you to take a look at the current tutorial nav.

I am on the side of not adding a second bar to both thimble and popcorn maker. Just not worth it at this point with the way the apps are. (this is still not in stone, and we can do it if an argument is made for it being worth it)

Given that, the tutorial nav was landed quick and dirty knowing it later would be moved into the toolnav. If we don't get a toolnav, we should probably update the tutorial nav to look better where it is.

Here it is right now https://thimble-node.mofostaging.net/remix/138/edit

As you can see, it is just shoved to the left of the userbar to not get in the way.

I am thinking put it next to My Makes and add another | seperation. Make it work like My Makes too, with a click and not a hover.
Flags: needinfo?(cassie)
I can see that working, putting it next to Makes for now, specifically if it looks like it works the same as My Makes by popping down a list. 

It's not ideal, as those upper right-hand links are more specific to your account, but if it's impossible to move it down into the actual project space (e.g. next to publish) then this will do for MVP.
Flags: needinfo?(cassie)

Updated

5 years ago
Summary: Update UI with tool-specific bar → Finalise styling and placement of the "tutorials" link

Updated

5 years ago
Duplicate of this bug: 875429

Updated

5 years ago
Whiteboard: s=2013w24 → s=2013w24 p=1
(Assignee)

Updated

5 years ago
Depends on: 878963
Severity: normal → blocker
(Assignee)

Comment 13

5 years ago
Created attachment 761497 [details]
what it all looks like

Just added a screen shot to show what it should look like.

Comment 14

5 years ago
Comment on attachment 761490 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/116

looks fine to me. R+
Attachment #761490 - Flags: review?(pomax) → review+
(Assignee)

Updated

5 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Attachment mime type: text/plain → text/x-github-pull-request
You need to log in before you can comment on or make changes to this bug.