-
Notifications
You must be signed in to change notification settings - Fork 231
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Follow-on updates from jennyhaines #2400
Follow-on updates from jennyhaines #2400
Conversation
@@ -4,14 +4,10 @@ | |||
ng-if="showHeader" | |||
class="key-value-editor-entry key-value-editor-entry-header"> | |||
<div class="form-group key-value-editor-header key-header"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we still need form-group
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well, it's setting the margin-bottom but that could be set using the specific class *-header
If so we'd need to do the same for the KVE ones above to be consistent
<div class="input-group"> | ||
<span class="help-block">{{keyPlaceholder}}</span> | ||
</div> | ||
{{keyPlaceholder}} | ||
</div> | ||
<div class="form-group key-value-editor-header value-header"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we still need form-group
?
app/styles/_kve.less
Outdated
@@ -192,6 +192,12 @@ | |||
margin-bottom: 0; | |||
padding-right: 5px; | |||
width: 50%; | |||
&.prefix-header { | |||
display: none; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the header is totally hidden, I'm not sure how you know what that field does on mobile.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
b577249
to
8806409
Compare
@spadgett updated |
Hey @sg00dwin I'd suggest keeping the current layout for desktop, but stacking the labels above at mobile. Something like
|
@spadgett Is this the structure you suggest? |
Yeah, that's what I was thinking. Seeing it, I'm good with either approach, though. @beanh66 Opinion? |
8806409
to
14cf0ec
Compare
@spadgett PTAL |
Nevermind on the prefix width: I see it's to give room for the view details link |
app/styles/_tooltip.less
Outdated
@@ -2,6 +2,10 @@ | |||
// Tooltips | |||
// -------------------------------------------------- | |||
|
|||
.tooltip-default-icon { | |||
font-size: @font-size-base - 1; | |||
vertical-align: top; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, thought about that. Maybe add a todo to sweep through and common class.
Prefix | ||
<small class="pficon pficon-help" | ||
<small class="pficon pficon-help tooltip-default-icon" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should add a style to switch the cursor to the help icon on hover like other tooltips.
@@ -62,7 +64,16 @@ | |||
</div> | |||
</div> | |||
|
|||
<div class="form-group environment-from-input prefix"> | |||
<div class="environment-from-input prefix"> | |||
<div |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally this is a <label for="...">
for accessibility, but that's a bit tricky since you have to generate IDs. I'm OK leaving that for later.
@@ -1,7 +1,7 @@ | |||
<form ng-if="$ctrl.apiObject" name="$ctrl.form" class="mar-bottom-xl"> | |||
<confirm-on-exit ng-if="$ctrl.canIUpdate && !$ctrl.ngReadonly" dirty="$ctrl.form.$dirty"></confirm-on-exit> | |||
<div ng-repeat="container in $ctrl.containers"> | |||
<h3>Container {{container.name}}</h3> | |||
<h2>Container {{container.name}}</h2> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this change was suggested by @jennyhaines, but I'm a little concerned that we're not making it on other browse pages / other tabs. All of the other headers are h3
on the browse pages.
We might hold off on this and look at it in the large context of all the pages later. Any objections @jennyhaines ?
If so, we'd probably keep the "Environment From" header an h4
(without the section-label
class) keep the hierarchy.
14cf0ec
to
cb8cef3
Compare
cb8cef3
to
9b85d2f
Compare
@spadgett updated with changes PTAL |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @sg00dwin
/lgtm |
/kind bug |
Automatic merge from submit-queue. |
Requested changes
#2362 (comment) and #2182 (comment)