Spacing fixes in forms
form - helps with capturing the submit top level. no styling fieldset - helps with disabling elements in single place. no styling. in html, this does have a default border which we remove in style.css. FormGroup - pankow element. This defines the spacing between adjacent FormGroups as 6px.
This commit is contained in:
@@ -66,17 +66,19 @@ onMounted(() => {
|
||||
<fieldset :disabled="busy || app.error">
|
||||
<input style="display: none;" type="submit" />
|
||||
|
||||
<label for="crontabInput" style="display: flex; justify-content: space-between;">
|
||||
<span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
|
||||
<Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
|
||||
</label>
|
||||
<FormGroup>
|
||||
<label for="crontabInput" style="display: flex; justify-content: space-between;">
|
||||
<span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
|
||||
<Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
|
||||
</label>
|
||||
|
||||
<div>{{ $t('app.cron.description') }}</div>
|
||||
<div>{{ $t('app.cron.description') }}</div>
|
||||
|
||||
<textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
|
||||
|
||||
<Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
|
||||
<textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
|
||||
</FormGroup>
|
||||
</fieldset>
|
||||
</form>
|
||||
<br/>
|
||||
<Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -107,9 +107,9 @@ onMounted(() => {
|
||||
<TagInput id="tagsInput" :placeholder="$t('app.display.tagsPlaceholder')" v-model="tags" v-tooltip="$t('app.display.tagsTooltip')"/>
|
||||
<div class="text-error" v-if="tagsError">{{ tagsError }}</div>
|
||||
</FormGroup>
|
||||
|
||||
<Button @click="onSubmit()" :loading="busy" :disabled="busy || !haveValuesChanged">{{ $t('app.display.saveAction') }}</Button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<br/>
|
||||
<Button @click="onSubmit()" :loading="busy" :disabled="busy || !haveValuesChanged">{{ $t('app.display.saveAction') }}</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user