Skip to content

Commit 68c971d

Browse files
agragr
authored
Fix for overflowing api key hint text on certain zoom levels. (#8215)
* Fix for overflowing api key hint text on certain zoom levels.
1 parent 3fb9630 commit 68c971d

3 files changed

Lines changed: 156 additions & 50 deletions

File tree

‎src/Bootstrap/dist/css/bootstrap-theme.css‎

Lines changed: 66 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Bootstrap/less/theme/page-api-keys.less‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,56 @@
4141

4242
.available-packages {
4343
.panel-body {
44-
overflow: auto;
45-
height: 204px;
4644
padding-top: 0;
4745
padding-bottom: 0;
46+
@media (max-width: @screen-sm-min) {
47+
height: 200px;
48+
overflow: auto;
49+
}
50+
@media (min-width: @screen-sm-min) {
51+
height: auto;
52+
}
4853
}
4954
}
5055

5156
.glob-pattern-hint {
52-
.panel-body {
53-
height: 282px;
57+
table {
58+
margin-bottom: 0;
59+
}
60+
}
61+
62+
.select-packages-form {
63+
@media (min-width: @screen-sm-min) {
64+
display: flex;
65+
}
66+
}
67+
68+
.select-packages-inputs {
69+
@media (min-width: @screen-sm-min) {
70+
position: relative;
71+
72+
> div {
73+
position: absolute;
74+
top: 0;
75+
left: 0;
76+
bottom: 0;
77+
right: 0;
78+
display: flex;
79+
flex-direction: column;
80+
margin-right: 15px;
81+
margin-left: 15px;
82+
83+
.available-packages-container {
84+
flex: 1 1 0;
85+
display: flex;
86+
flex-direction: column;
87+
88+
.available-packages {
89+
flex: 1 1 0;
90+
overflow-y: auto;
91+
}
92+
}
93+
}
5494
}
5595
}
5696

‎src/NuGetGallery/Views/Users/ApiKeys.cshtml‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -418,59 +418,63 @@
418418
</div>
419419
</div>
420420
<div class="row select-packages-form" data-bind="css: { disabled: !SelectPackagesEnabled() }">
421-
<div class="col-sm-7">
422-
<div class="form-group">
423-
<input type="text" class="form-control" data-val="true"
424-
data-val-regex="Invalid glob pattern. See the example glob patterns below for further details."
425-
data-val-regex-pattern="^[\*\w_.-]*$"
426-
data-bind="textInput: PendingGlobPattern,
421+
<div class="col-sm-7 select-packages-inputs">
422+
<div>
423+
<div class="form-group">
424+
<input type="text" class="form-control" data-val="true"
425+
data-val-regex="Invalid glob pattern. See the example glob patterns below for further details."
426+
data-val-regex-pattern="^[\*\w_.-]*$"
427+
data-bind="textInput: PendingGlobPattern,
427428
attr: { id: GlobPatternId,
428429
name: GlobPatternId,
429430
'aria-labelledby': GlobPatternId() + '-label ' + GlobPatternId() + '-validation-message' },
430431
enable: SelectPackagesEnabled" />
431-
</div>
432-
<div class="form-group">
433-
<label>Available Packages</label>
434-
<div class="panel panel-default available-packages">
435-
<div class="panel-body">
436-
<!-- ko foreach: PendingPackages -->
437-
<div class="checkbox" data-bind="css: { disabled: Matched }">
438-
<label>
439-
<input type="checkbox" name="Packages"
440-
data-bind="checked: Checked,
432+
</div>
433+
<div class="form-group available-packages-container">
434+
<label>Available Packages</label>
435+
<div class="panel panel-default available-packages">
436+
<div class="panel-body">
437+
<!-- ko foreach: PendingPackages -->
438+
<div class="checkbox" data-bind="css: { disabled: Matched }">
439+
<label>
440+
<input type="checkbox" name="Packages"
441+
data-bind="checked: Checked,
441442
enable: $parent.SelectPackagesEnabled" />
442-
<!-- ko text: Id -->
443-
<!-- /ko -->
444-
</label>
443+
<!-- ko text: Id -->
444+
<!-- /ko -->
445+
</label>
446+
</div>
447+
<!-- /ko -->
445448
</div>
446-
<!-- /ko -->
447449
</div>
448450
</div>
449451
</div>
450452
</div>
451453
<div class="col-sm-5">
452-
<div class="panel panel-default glob-pattern-hint">
453-
<div class="panel-body">
454-
<p>A glob pattern allows you to replace any sequence of characters with '*'.</p>
455-
<p>Example glob patterns:</p>
456-
<table class="table table-condensed borderless">
457-
<thead>
458-
<tr>
459-
<th>Pattern</th>
460-
<th>Result</th>
461-
</tr>
462-
</thead>
463-
<tbody>
464-
<tr>
465-
<td>*</td>
466-
<td>Select all packages</td>
467-
</tr>
468-
<tr>
469-
<td>Alpha.*</td>
470-
<td>Select any package that has an ID beginning with <i>Alpha</i></td>
471-
</tr>
472-
</tbody>
473-
</table>
454+
<div class="form-group">
455+
<div class="panel panel-default glob-pattern-hint">
456+
<div class="panel-body">
457+
<p>A glob pattern allows you to replace any sequence of characters with '*'.</p>
458+
<p>Example glob patterns:</p>
459+
<table class="table table-condensed borderless">
460+
<thead>
461+
<tr>
462+
<th>Pattern</th>
463+
<th>Result</th>
464+
</tr>
465+
</thead>
466+
<tbody>
467+
<tr>
468+
<td>*</td>
469+
<td>Select all packages</td>
470+
</tr>
471+
<tr>
472+
<td>Alpha.*</td>
473+
<td>Select any package that has an ID beginning with <i>Alpha</i></td>
474+
</tr>
475+
</tbody>
476+
</table>
477+
</div>
474478
</div>
475479
</div>
476480
</div>

0 commit comments

Comments
 (0)