gui: fix accordion titles #3172
Conversation
Adjusted gap between folder icons and folder title to be the same as gap between identicons and device name. Putting the spans on a single line is necessary, as they are inline and the whitespace affects layout.
fix 'language' and 'actions' dropdowns that do not outline when tabbing through on keyboard.
| <span class="fa hidden-xs fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span> | ||
| <span ng-show="folder.label.length == 0">{{folder.id}}</span> | ||
| <span tooltip data-original-title="{{folder.id}}" ng-show="folder.label.length != 0">{{folder.label}}</span> | ||
| <span class="fa hidden-xs fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span><span ng-show="folder.label.length == 0">{{folder.id}}</span><span tooltip data-original-title="{{folder.id}}" ng-show="folder.label.length != 0">{{folder.label}}</span> |
There was a problem hiding this comment.
This was over multiple lines to prevent long lines, which you seem to have reintroduced.
|
What exactly does this do? Removes the requirement for whitespace? |
|
The whitespace that I have removed causes the underline to be all messed up, because they are inline elements and the multiple whitespace(s), such as indenting and new lines condense to a single space. Personally I would also prefer to have them on separate lines for readabilty, but it's not an option if it is to remain inline. I will add some screenshots in the next 10 to clarify the overall purpose. |
|
I will have a look at changing it somehow so that we can have the newlines =]. Let me get back to you... |
|
The underline on those header links is custom though, right? |
|
Not custom, they show when Once 37816e3 is applied it looks even worse (as shown in top half of screenshot) with the underline stretching out past the left of the words. To get this underline to show:
both methods work for me to show underline in firefox and chrome win10. |
|
ok, i'm looking and thinking, I believe I can see a few things wrong here. Tooltips are not working on folders for example. Let me think some more and I will add some more commits in the next few days. |
|
👍 |
norgeous
changed the title
|
i updated the description of the PR. I think this is now done and this works way better than the current release. I'm happy to take any questions or comments at this stage and make further adjustments... |
| .panel-heading { | ||
| position: relative; | ||
| overflow: hidden; | ||
| .modal-header .fa{ |
There was a problem hiding this comment.
Missing space before the brace
|
LGTM, yet someone probably needs to compile and look at it. |
|
Spacing is inconsistent on Safari/Mac
|
|
That's just ms but why do we need ID + name + tooltip with ID? |
|
The ID is only in the tooltip. The default folder just has a label that includes the ID to differentiate from all other "Default Folder"s that may exist. |
|
Ah |
|
will fix that spacing on remote devices shortly |
Thanks! yep, fixed. wasn't just Safari tho, but fixed now... |
|
LGTM now |
|
@st-review merge please gui: Improve layout of accordion titles |
st-review
added
the
frozen-due-to-age
Purpose
attempt to address some visual styling and accessability issues with all accordion title bars.
essentially following on from #3139
alinks, rather than clickabledivs.inlinetofloatfor accordion title bars for pixel perfect spacing.:focus).this deviceis now available in the keyboard tab order.Screenshots
v0.13.4
This PR
