Flyspray - The bug killer!

  • Status New
  • Percent Complete
    0%
  • Task Type Feature Request
  • Category User Interface
  • Assigned To No-one
  • Operating System All
  • Severity Low
  • Priority Very Low
  • Reported Version 1.0-rc
  • Due in Version Undecided
  • Due Date Undecided
  • Votes
  • Private
Attached to Project: Flyspray - The bug killer!
Opened by peterdd - 20.05.2016
Last edited by peterdd - 25.05.2016

FS#2127 - overhaul task detail page layout

There was a question on the mailing list:

I have a suggestion, even though I don´t know if it´s possible to do it. But if it is, it would be great!
In the comments list of a given task, is it possible that the comments appear from the newest one to the oldest ones, and not as it is now, with the new ones coming at the end of the list? This is because I deal with long comments list for a given task, and it is becoming difficult to reach the last one, that is, the newest comment, because the order in the comments is on the top, the older ones. If this could be altered it would be great. Kind regards
Ana ...

Quick anwsers:

  1. Users can use ‘End’-key and ‘Pos1’-key on their keyboard to scroll to bottom and top of page. (lame anwser I know)
  2. Another quick anwser is to just reverse the comments array in the appropriate template themes/CleanFS/templates/details.tabs.comments.tpl :

Replace

<?php foreach($comments as $comment): ?>

with

<?php
$comments_latestfirst=array_reverse($comments);
foreach($comments_latestfirst as $comment): ?>

But the real problem I think is that the details page (and others too..) is not optimized for todays wide screens (landscape views). Laptops have FullHD or higher but the Flyspray users still have to scroll to get an overview of a task.

And for narrows views too (mobile phones, tablet portrait view)

The attached screenshot shows moving the task details tabs beside their task description if the display width is over 1200 css pixel. (and the reversed comments too ;-) ). Done with pure css media query:

E.g. add to a custom stylesheet file custom_detailswidescreen.css in folder themes/CleanFS/ :

@media only screen and (min-width: 1200px) and (orientation: landscape) {
.details .tab.active{
        display:inline-block;
}
 
.details .tab{
width:44%;
padding-left:0px;
/*margin-top:60px;*/
box-sizing:border-box;
}
 
.details .commenttext pre {
overflow:auto;
}
.details .comment_container .comment {
width:auto;
margin-left:30px;
display:block;
}
.details .comment_avatar {
position:absolute;
}
.details #comments .fa.fa-user{
font-size:30px !important;
}
 
#submenu li a{margin-left:0;}
 
.details #submenu{
display:inline-block;
position:absolute;
padding:1em 0 0;
margin-top:26px;
}
 
.details #content{
display:inline-block;
box-sizing:border-box;
vertical-align:top;
width:55%;
}
 
/* just a temporary fix: should be redone in theme.css with class instead ids*/
#comments, #related, #notify, #remind, #effort, #history {margin-top:72px;}
 
}

(Has still some problems with current 1.0-rc1 when the project selector wraps. Also tab labels wrap if not enough width available and tab content do not adapt.)

What do you think? How should the details page look on different display sizes? How can it improve the workflow of the user?

Project Manager
peterdd commented on 20.05.2016 06:24

I forgot to mention that I made the javascript driven tabs now working better for responsive layout stuff:

https://github.com/Flyspray/flyspray/pull/560

So use Flyspray github master for that or wait for Flyspray 1.0-rc2 .

Loading...

Available keyboard shortcuts

Tasklist

Task Details

Task Editing