Improve input groups and use one for update interval setting hint

This commit is contained in:
Maxime Corteel 2020-04-12 15:05:45 +02:00
Родитель 2eae96f1a8
Коммит cc9f67fb17
4 изменённых файлов: 69 добавлений и 48 удалений

Просмотреть файл

@ -1,3 +1,51 @@
/**
* Helpers
*/
.icon-arrow-up {
background-image: var(--icon-download-000);
transform: rotate(180deg);
}
.icon-arrow-down {
background-image: var(--icon-download-000);
}
.input-group {
display: flex;
width: 100%;
}
.input-group > input {
width: 100%;
margin: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .input-group-addon {
display: flex;
}
.input-group > .input-group-addon > button {
padding: 0;
margin: 0;
min-width: 34px;
}
.input-group > .input-group-addon > button {
border-radius: 0;
border-left-color: transparent;
border-right-color: transparent;
}
.input-group > .input-group-addon > button:last-child {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-right-width: 1px;
}
/**
* Main
*/
@ -416,39 +464,6 @@
border-bottom-right-radius: 0;
}
#app-content-wrapper form fieldset > ul > li > .list-item-tools {
display: flex;
}
#app-content-wrapper form fieldset > ul > li > .list-item-tools > button {
padding: 0;
margin: 0;
flex-basis: 34px;
min-width: 34px;
max-height: 34px;
}
#app-content-wrapper form fieldset > ul > li > .list-item-tools > button {
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
}
#app-content-wrapper form fieldset > ul > li > .list-item-tools > button:last-child {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-right-width: 1px;
}
#app-content-wrapper form fieldset > ul > li > .list-item-tools .icon-arrow-up {
background-image: var(--icon-download-000);
transform: rotate(180deg);
}
#app-content-wrapper form fieldset > ul > li > .list-item-tools .icon-arrow-down {
background-image: var(--icon-download-000);
}
#app-content-wrapper form fieldset > ul > li > button {
position: absolute;
right: 10px;

Просмотреть файл

@ -242,6 +242,9 @@ var Content = function (cookbook) {
$('#app-content-wrapper form ul li input[type="text"]').off('keypress');
$('#app-content-wrapper form ul li input[type="text"]').on('keypress', self.onListInputKeyDown);
$('#app-settings [title]').tooltip('destroy');
$('#app-settings [title]').tooltip();
self.updateListItems();
// View

Просмотреть файл

@ -91,9 +91,9 @@
<label><?php p($l->t('Tools')); ?></label>
<ul>
<template>
<li>
<li class="input-group">
<input type="text" name="tool[]" value="">
<div class="list-item-tools">
<div class="input-group-addon">
<button class="icon-arrow-up move-list-item-up"></button>
<button class="icon-arrow-down move-list-item-down"></button>
<button class="icon-delete right remove-list-item"></button>
@ -102,9 +102,9 @@
</template>
<?php if(isset($_['tool']) && is_array($_['tool'])) { ?>
<?php foreach ($_['tool'] as $i => $tool) { ?>
<li>
<li class="input-group">
<input type="text" name="tool[]" value="<?php echo $tool; ?>">
<div class="list-item-tools">
<div class="input-group-addon">
<button class="icon-arrow-up move-list-item-up"></button>
<button class="icon-arrow-down move-list-item-down"></button>
<button class="icon-delete right remove-list-item"></button>
@ -120,9 +120,9 @@
<label><?php p($l->t('Ingredients')); ?></label>
<ul>
<template>
<li>
<li class="input-group">
<input type="text" name="recipeIngredient[]" value="">
<div class="list-item-tools">
<div class="input-group-addon">
<button class="icon-arrow-up move-list-item-up"></button>
<button class="icon-arrow-down move-list-item-down"></button>
<button class="icon-delete right remove-list-item"></button>
@ -131,9 +131,9 @@
</template>
<?php if(isset($_['recipeIngredient']) && is_array($_['recipeIngredient'])) { ?>
<?php foreach ($_['recipeIngredient'] as $i => $ingredient) { ?>
<li>
<li class="input-group">
<input type="text" name="recipeIngredient[]" value="<?php echo $ingredient; ?>">
<div class="list-item-tools">
<div class="input-group-addon">
<button class="icon-arrow-up move-list-item-up"></button>
<button class="icon-arrow-down move-list-item-down"></button>
<button class="icon-delete right remove-list-item"></button>
@ -149,9 +149,9 @@
<label><?php p($l->t('Instructions')); ?></label>
<ul>
<template>
<li>
<li class="input-group">
<textarea name="recipeInstructions[]"></textarea>
<div class="list-item-tools">
<div class="input-group-addon">
<button class="icon-arrow-up move-list-item-up"></button>
<button class="icon-arrow-down move-list-item-down"></button>
<button class="icon-delete right remove-list-item"></button>
@ -160,9 +160,9 @@
</template>
<?php if(isset($_['recipeInstructions']) && is_array($_['recipeInstructions'])) { ?>
<?php foreach ($_['recipeInstructions'] as $i => $step) { ?>
<li>
<li class="input-group">
<textarea name="recipeInstructions[]"><?php echo $step; ?></textarea>
<div class="list-item-tools">
<div class="input-group-addon">
<button class="icon-arrow-up move-list-item-up"></button>
<button class="icon-arrow-down move-list-item-down"></button>
<button class="icon-delete right remove-list-item"></button>

Просмотреть файл

@ -15,10 +15,13 @@
<li class="settings-fieldset-interior-item">
<label class="settings-input">
<?php p($l->t('Update interval in minutes')); ?>
<br>
(<?php p($l->t('Last update')); ?>: <?php echo date('Y-m-d H:i', $_['last_update']); ?>)
</label>
<input id="recipe-update-interval" type="number" class="input settings-input" value="<?php echo $_['update_interval']; ?>" placeholder="<?php echo $_['update_interval']; ?>">
<div class="input-group">
<input id="recipe-update-interval" type="number" class="input settings-input" value="<?php echo $_['update_interval']; ?>" placeholder="<?php echo $_['update_interval']; ?>">
<div class="input-group-addon">
<button class="icon-info" disabled="disabled" title="<?php p($l->t('Last update')); ?>: <?php echo date('Y-m-d H:i', $_['last_update']); ?>"></button>
</div>
</div>
</li>
</ul>
</fieldset>