development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-12 06:17:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Issue Reporter: align input fields, #44518

Browse source
This commit is contained in:
Rachel Macfarlane 2018-02-27 14:05:10 -08:00
parent 46a1e1d940
commit 8dad71652a
2 changed files with 16 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/vs/code/electron-browser/issue/issueReporterPage.ts
View file

@ -13,14 +13,14 @@ export default (): string => `
<div class="section">
<div class="input-group">
<label id="issue-type-label" class="inline-form-control" for="issue-type">${escape(localize('issueTypeLabel', "This is a"))}</label>
<label class="inline-label" for="issue-type">${escape(localize('issueTypeLabel', "This is a"))}</label>
<select id="issue-type" class="inline-form-control">
<!-- To be dynamically filled -->
</select>
</div>
<div class="input-group">
<label id="issue-title-label" for="issue-title">${escape(localize('issueTitleLabel', "Title"))} <span class="required-input">*</span></label>
<label class="inline-label" for="issue-title">${escape(localize('issueTitleLabel', "Title"))} <span class="required-input">*</span></label>
<input id="issue-title" type="text" class="inline-form-control" placeholder="${escape(localize('issueTitleRequired', "Please enter a title."))}" required>
<small id="similar-issues">
<!-- To be dynamically filled -->

43
src/vs/code/electron-browser/issue/media/issueReporter.css
View file

@ -62,10 +62,6 @@ input[type="text"], textarea {
border: 1px solid #ced4da;
}
.inline-form-control {
display: inline-block !important;
}
textarea {
overflow: auto;
resize: vertical;
@ -297,50 +293,39 @@ button {
color: #fff;
}
#issue-type-label {
width: 95px;
}
#issue-type {
width: calc(100% - 100px);
cursor: pointer;
}
#issue-title-label {
width: 80px;
.section .inline-form-control, .section .inline-label {
display: inline-block;
}
#issue-title {
width: calc(100% - 85px);
.section .inline-label {
width: 95px;
}
.section .inline-form-control {
width: calc(100% - 100px);
}
#issue-type {
cursor: pointer;
}
@media (max-width: 950px) {
#issue-type-label {
.section .inline-label {
width: 12%;
}
#issue-type {
.section .inline-form-control {
width: calc(88% - 5px);
}
#issue-title-label {
width: 10%;
display: inline-block
}
#issue-title {
width: calc(90% - 5px);
}
}
@media (max-width: 620px) {
#issue-title-label, #issue-type-label {
.section .inline-label {
display: none !important;
}
#issue-type, #issue-title {
.inline-form-control {
width: 100%;
}