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

11
src/views/Submit.vue
View file

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