UI change - Project tabs/buttons in tasks pushed down

[Barry_E_Haimo]

My team hates this.

[Amelia_Ciffone]

@tom_Bamford , @Chris_Sylvester ,

I’d really like to use this. I’m not a coder, so I’d appreciate a bit more of a how-to breakdown.

Here’s how far I got on my own:

1. Installed Stylish for Chrome
2. Created a New Style
3. Pasted code into the empty box
4. ???
5. Have projects back at the top

I’m not sure how to save and activate it.

It’s also giving me this error on line 9:

• warning 9 : 5 Expected (static | relative | absolute | fixed | inherit) but found ‘sticky’.

Alternatively, @Chris_Sylvester if you make your hack sharable in Stylish I can download and enable it that way.

I understand how difficult onboarding can be but moving the projects is a really big problem for me. Unfortunately not expecting an official hack from Asana anytime soon so it would be great to be able to handle it on my own.

Thanks!

[Amelia_Ciffone]

@Chris_Sylvester

@Susanna Adding to the thanks for mentioning Stylebot. I got the hack working through that program.

Unfortunately, I ran into another problem. I use Toggl as my time tracking plugin and the start/stop button is covering the menu buttons.

I might have to find another workaround.

[Amelia_Ciffone]

Ok. I tried @Tom_Bamford 's original code in StyleBot and I have reached a working layout!

The 140px margin was a little extreme so I shortened it to 60px, like so.

div.SingleTaskPane-projects--belowDescription.SingleTaskPane-projects.TaskProjects {
position: absolute;
top: 195px;
left: 0;
background-color: #fff;

}

div.SingleTaskPane-descriptionRow {
margin-top: 60px;
}

div.scrollable.scrollable–vertical.SingleTaskPane-body {
position: relative;
}

Here’s what it looks like:

This has been a very emotional journey for me. I’d like to thank everyone who contributed to this solution: @Chris_Sylvester , @Tom_Bamford , and @Susanna

[Amelia_Ciffone]

You might have better luck with @Tom_Bamford 's code in stylebot.
That’s what I ultimately did.

[Graeme_Orchard]

Ok thanks. I did past the earlier code into Stylebot, and got it working … but there was a frustrating overlap at the top of the screen where fields ended up hidden behind the project title.

The project information moved (which was great) - but the other compromises still gave problems, so I reverted to the current Asana view, despite it being severely sub-optimal for our usage.

[Susanna]

Thanks, @Amelia_Ciffone!

@Graeme_Orchard – I was having the same issue with overlap, and I was putting up with it, since I preferred it to having the projects down below the description. That said, I have a great colleague who wrote CSS code for fixing it, so the project appears at the top, and there haven’t been any overlap issues for me since I started using it in Stylebot.

He’s given me permission to share his code here. This was written by my colleague Gabriel Ramirez:

.SingleTaskPane-body {
display: flex;
flex-direction: column;
}

.SingleTaskPaneToolbarEasyCompletion {
order: 1;
display: block;
padding: 10px 30px;
text-align: right;
}

.SingleTaskPaneToolbarEasyCompletion-leftItems {
float: left;
}

.HeartButton.SingleTaskPaneToolbarEasyCompletion-button {
display: inline-block;
}

.SingleTaskPaneBanners.SingleTaskPane-banners {
order: 2;
display: block;
}

.TaskAncestry {
order: 3;
display: block;
}

.SingleTaskTitleInput.SingleTaskPane-titleRow {
order: 5;
display: block;
}

.TaskPaneAssigneeDueDateRowStructure {
order: 6;
display: block;
}

.TaskPaneAssigneeDueDateRowStructure-assignee {
display: inline-block;
margin-right: 40px;
}

.TaskPaneAssigneeDueDateRowStructure-dueDate {
display: inline-block;
}

.TaskPremiumFeaturesSection {
order: 7;
display: block;
}

.SingleTaskPane-descriptionRow {
order: 8;
display: block;
}

.SingleTaskPane-descriptionLabel {
display: inline-block;
vertical-align: top;
}

.TaskDescription {
display: inline-block;
vertical-align: top;
width: 94%;
}

.TaskProjects {
order: 4;
display: block;
}

.TaskProjects-label {
display: inline-block;
vertical-align: top;
margin-top: 7px;
}

.TaskProjects-projects {
display: inline-block;
vertical-align: top;
}

.TaskTags {
order: 9;
display: block;
}

.TaskTags-tagIcon {
vertical-align: middle;
margin-bottom: 10px;
}

.TaskTags-tokenizer {
display: inline-block;
vertical-align: middle;
}

.SubtaskGrid {
order: 10;
display: block;
}

.TaskAttachments {
order: 11;
display: block;
}

.TaskAttachments-attachIcon {
vertical-align: top;
}

.TaskAttachments-attachmentList {
display: inline-block;
vertical-align: top;
}

.SingleTaskPane-feed {
order: 12;
display: block;
}

[Susanna]

Oh, I meant to add screenshots for the above code by Gabriel Ramirez:

[Joshua2]

I went ahead and created a stylus that adds in a modification of Sussana’s css to move the project menu up from under the description. Asana Dark, Reduce Noise, Tasks Projects Menu Move | Userstyles.org

[Joshua2]

screen shot is here.

[Ryan_Mauldin]

@lpb

words

Second all of this!

[Wesley_Black]

+1 - My team uses asana all day everyday and this change just causes a ton of scrolling. We need to keep all 10 fingers from cramping up if possible. Stop the madness please!

[Tyler_Clowe]

Yes, please move that back! Our team uses projects and tags extensively and, especially after loads of text has been added to the entry, it’s a pain to scroll all the way to the bottom just to update a project/tag.

[Amelia_Ciffone]

I was having some frame overlap and ended up tweaking my margins a little.

Margin top: 70px;
and
Top: 160px;

Here’s the full code:

div.SingleTaskPane-descriptionRow {
    margin-top: 70px;
}
div.SingleTaskPane-projects--belowDescription.SingleTaskPane-projects.TaskProjects {
    background-color: #fff;
    left: 0;
    position: absolute;
    top: 160px;
}
div.scrollable.scrollable--vertical.SingleTaskPane-body {
    position: relative;
}

I’ve been pretty happy with this solution. It restores the project management functionality I needed to Asana and eliminated all the tedious scrolling.

I hope Asana is taking notes.

Here’s what the task pane looks like with my new padding.

[Amelia_Ciffone]

Nice. I tried this solution also. It looks great and was really easy to do.

Here’s a screenshot of Susana’s coder’s new layout with my Toggl integration on:

And here is Susana’s layout side by side with Tom’s, Chris’, and Asana’s for comparison.

Once you add the styles to StyleBot, they’re very easy to toggle on and off whenever you want.

I slightly prefer having the projects below the Task Name and Assignee so I’m going to stick with Tom’s for now. But it’s nice to have lots of options that don’t give me tennis elbow.

[Chris_Sylvester]

So here are some stats on this topic:

As of this reply, the topic has had 118 Replies and 63 votes.

It is the most commented on and voted for “Product Feedback” topic of the year.
It is the 6th most replied to Product Feedback topic of all time.

Despite this, there has been no further comment from Asana staff for a month.
@Alexis @louis

Any chance of an update from Asana?

[Paul_Hoogeveen]

I agree with @Chris_Sylvester. 11 days ago I asked @Alexis for an update, but till now, she hasn’t respond.

@louis sad that we would get used to it, but it’s now more than a month ago and I still struggle with the new UI. Every time I have to find the name of the project and the tags. And that’s the same with ‘assigned to’ and ‘due date’. It’s place is not natural.

I am confident that Asana will listen to this large group of users, although it is taking them some time. But I am convinced they will help us in the end, so that we are all happy users again!

[Susanne_Rothlisberge]

Our entire team has exactly the same issue. Please put the project back at the top, so that we do not have to scroll in case of a large description box. Thank you!

[Michael_C_Kring]

I agree. Projects and Tags should be in the top section. Long fields such and comments, is OK to scroll past. Project and Tags needs to be at the top.

Also it would be nice if the top section is fixed when I scroll through a task.

[Chris_Sylvester]

And the deafening silence from Asana continues.

Friends, be sure to vote for this (at the top of the page). I’m sure there’s a point to having a voting system, a product feedback topic and a user community. If anyone knows what it is, feel free to let me know.