deblan/forms
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #410 from nextcloud/fix/descenders_cut

Browse source 
Adjust cut descenders on formtitle
This commit is contained in:
Jan C. Borchardt 2020-05-24 21:08:54 +02:00 committed by GitHub
parent 9aa17d7192 fe27a630c4
commit 862505d548
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/views/Create.vue
View file

@ -44,19 +44,22 @@
<!-- Forms title & description-->
<header>
<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
<input
id="form-title"
ref="title"
v-model="form.title"
:minlength="0"
:maxlength="maxStringLengths.formTitle"
:placeholder="t('forms', 'Form title')"
:required="true"
autofocus
type="text"
@click="selectIfUnchanged"
@keyup="onTitleChange">
<h2>
<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
<input
id="form-title"
ref="title"
v-model="form.title"
class="form-title"
:minlength="0"
:maxlength="maxStringLengths.formTitle"
:placeholder="t('forms', 'Form title')"
:required="true"
autofocus
type="text"
@click="selectIfUnchanged"
@keyup="onTitleChange">
</h2>
<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
<textarea
ref="description"
@ -417,22 +420,30 @@ export default {
margin-top: 44px;
margin-bottom: 24px;
#form-title,
h2 {
margin-bottom: 0; // because the input field has enough padding
}
.form-title,
.form-desc {
width: 100%;
padding: 0 16px;
border: none;
}
#form-title {
font-size: 2em;
.form-title {
font-size: 28px;
font-weight: bold;
color: var(--color-main-text);
min-height: 36px;
margin: 32px 0;
padding-left: 14px; // align with description (compensate font size diff)
padding-bottom: 6px; // align with h2 of .form-title on submit page
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-desc {
font-size: 100%;
padding-bottom: 20px;
resize: none;
}

11
src/views/Submit.vue
View file

@ -25,7 +25,7 @@
<AppContent>
<!-- Forms title & description-->
<header>
<h2 id="form-title">
<h2 class="form-title">
{{ formTitle }}
</h2>
<p v-if="!loading && !success" class="form-desc">
@ -202,15 +202,17 @@ export default {
margin-top: 44px;
margin-bottom: 24px;
#form-title,
.form-title,
.form-desc {
width: 100%;
padding: 0 16px;
border: none;
}
#form-title {
font-size: 2em;
.form-title {
font-size: 28px;
font-weight: bold;
color: var(--color-main-text);
min-height: 36px;
margin: 32px 0;
padding-left: 14px; // align with description (compensate font size diff)
overflow: hidden;
@ -218,6 +220,7 @@ export default {
white-space: nowrap;
}
.form-desc {
font-size: 100%;
padding-bottom: 20px;
resize: none;
}