1
0
Fork 0
mirror of synced 2024-06-29 19:50:26 +12:00

Array list counter

This commit is contained in:
Eldad Fux 2020-04-30 19:34:51 +03:00
parent 2f76a8f293
commit 09c2d6fd3b
5 changed files with 51 additions and 36 deletions

View file

@ -20,33 +20,28 @@ if($type === 'document') {
<ul data-ls-loop="<?php echo $this->escape($namespace); ?>" data-ls-as="node" class="sortable numbers"> <ul data-ls-loop="<?php echo $this->escape($namespace); ?>" data-ls-as="node" class="sortable numbers">
<li data-forms-move-up data-forms-move-down> <li data-forms-move-up data-forms-move-down>
<div class="row thin responsive margin-bottom-small force-reverse"> <div class="drop-list bottom end settings" data-ls-ui-open="" data-button-text="" data-button-icon="icon-cog" data-button-selector="[data-toggler]" data-button-class="round dark small margin-bottom-small margin-top-tiny pull-end" data-blur="1" tabindex="1">
<div class="col span-2"> <ul class="arrow-end margin-top margin-end-negative-small">
<div class="drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-icon="icon-cog" data-button-selector="[data-toggler]" data-button-class="round dark small margin-bottom-small margin-top-tiny pull-end" data-blur="1" tabindex="1"> <li data-move-up>
<ul class="arrow-end margin-top margin-end-negative-small"> <button type="button" class="link"><i class="icon-up-dir"></i> Move Up</button>
<li data-move-up> </li>
<button type="button" class="link"><i class="icon-up-dir"></i> Move Up</button> <li data-move-down>
</li> <button type="button" class="link"><i class="icon-down-dir"></i> Move Down</button>
<li data-move-down> </li>
<button type="button" class="link"><i class="icon-down-dir"></i> Move Down</button> <li>
</li> <button type="button" data-ls-ui-trigger="splice-<?php echo $this->escape($namespace); ?>-{{$index}}" class="link" data-debug="1"><i class="icon-cancel"></i> Remove</button>
<li> </li>
<button type="button" data-ls-ui-trigger="splice-<?php echo $this->escape($namespace); ?>-{{$index}}" class="link" data-debug="1"><i class="icon-cancel"></i> Remove</button> </ul>
</li>
</ul>
</div>
</div>
<div class="col span-10">
<?php echo $comp->render(); ?>
</div>
</div> </div>
<?php echo $comp->render(); ?>
<hr class="margin-top-no" /> <hr class="margin-top-no" />
</li> </li>
</ul> </ul>
<?php if(!empty($list) && $type === 'document'): ?> <?php if(!empty($list) && $type === 'document'): ?>
<div class="drop-list" data-ls-ui-open="" data-button-text="Add" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="reverse margin-bottom-small" data-blur="1" tabindex="1"> <div class="drop-list" data-ls-ui-open="" data-button-text="Add" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="reverse small margin-bottom-small" data-blur="1" tabindex="1">
<ul> <ul>
<?php foreach($list as $item): <?php foreach($list as $item):
$name = (isset($collections[$item])) ? $collections[$item] : ''; $name = (isset($collections[$item])) ? $collections[$item] : '';
@ -58,5 +53,5 @@ if($type === 'document') {
</ul> </ul>
</div> </div>
<?php else: ?> <?php else: ?>
<button type="button" data-ls-ui-trigger="collection-child-<?php echo $this->escape($namespace); ?>" class="reverse margin-bottom-small">Add</button> <button type="button" data-ls-ui-trigger="collection-child-<?php echo $this->escape($namespace); ?>" class="reverse small margin-bottom-small">Add</button>
<?php endif; ?> <?php endif; ?>

View file

@ -82,13 +82,21 @@
ul.numbers { ul.numbers {
> li { > li {
position: relative; position: relative;
.func-margin-start(30px);
.func-margin-end(50px);
.settings {
position: absolute;
top: 3px;
.func-end(-50px);
}
&::after { &::after {
display: block; display: block;
width: 30px; width: 25px;
height: 30px; height: 25px;
line-height: 30px; line-height: 25px;
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 500;
border-radius: 50%; border-radius: 50%;
background: var(--config-color-focus); background: var(--config-color-focus);
@ -97,7 +105,7 @@
content: counter(section); content: counter(section);
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 2px; top: 3px;
.func-start(-45px); .func-start(-45px);
} }
} }

View file

@ -158,6 +158,12 @@
} }
&.sticky-footer { &.sticky-footer {
form {
footer {
margin: -30px;
}
}
footer { footer {
position: sticky; position: sticky;
bottom: -30px; bottom: -30px;
@ -165,7 +171,7 @@
height: 50px; height: 50px;
z-index: 1; z-index: 1;
padding: 30px; padding: 30px;
box-shadow: 0 0 1px rgba(0,0,0,.05); box-shadow: 0 0 1px rgba(0,0,0,.15);
form { form {
display: inline-block; display: inline-block;

View file

@ -732,24 +732,31 @@ input[type=checkbox], input[type=radio] {
font-weight: bold; font-weight: bold;
} }
ul, ul, ol {
ol {
margin: 0 0 20px 0; margin: 0 0 20px 0;
li { li {
display: list-item !important; display: list-item !important;
list-style: inherit; list-style: inherit;
margin-bottom: 10px; list-style-position: inside!important;
margin: 0 20px 2px 20px;
p { p {
margin: 0; margin: 0;
display: inline;
} }
} }
} }
ul li { ol {
margin: 0 20px; li {
display: list-item; list-style: decimal;
&::before {
content: '';
display: none;
}
}
} }
} }
@ -966,7 +973,7 @@ hr {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border: solid 2px var(--config-color-background-dark); border: solid 1px var(--config-color-background-dark);
&:hover:before { &:hover:before {
background: var(--config-color-focus); background: var(--config-color-focus);

View file

@ -18,7 +18,6 @@ table {
font-size: 14px; font-size: 14px;
th { th {
background: var(--config-color-background-fade);
position: sticky; position: sticky;
top: -30px; top: -30px;
z-index: 3; z-index: 3;