Merge pull request #870 from TorstenDittmann/fix-ux-labels

fix(ux): adds interactive checkbox labels
This commit is contained in:
Eldad A. Fux 2021-02-02 13:25:47 +02:00 committed by GitHub
commit 62fef1f80b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 24 additions and 9 deletions

View file

@ -510,7 +510,7 @@ $maxCells = 10;
<div data-ls-loop="project-collections.collections" data-ls-as="project" data-ls-key="$index2" class="tiles cell-3 margin-bottom-negative">
<div class="margin-bottom" data-ls-if="{{project.$id}} != {{router.params.id}}">
<input type="checkbox" name="list" data-ls-attrs="value={{project.$id}}" data-ls-bind="{{rule.list}}" /> <span data-ls-bind="{{project.name}}"></span>
<input type="checkbox" name="list" data-ls-attrs="value={{project.$id}},id={{project.$id}}" data-ls-bind="{{rule.list}}" /> <label data-ls-attrs="for={{project.$id}}" data-ls-bind="{{project.name}}"></label>
</div>
</div>
</script>
@ -520,7 +520,8 @@ $maxCells = 10;
<div data-ls-loop="project-collections.collections" data-ls-as="project" data-ls-key="$index2" class="tiles cell-3 margin-bottom-negative">
<div class="margin-bottom" data-ls-if="{{project.$id}} != {{router.params.id}}">
<input type="radio" name="list" data-ls-attrs="value={{project.$id}}" data-ls-bind="{{rule.list|firstElement}}" data-cast-to="array" required /> <span data-ls-bind="{{project.name}}"></span>
<input type="radio" name="list" data-ls-attrs="value={{project.$id}},id={{project.$id}}" data-ls-bind="{{rule.list|firstElement}}" data-cast-to="array" required />
<label data-ls-attrs="for={{project.$id}}"data-ls-bind="{{project.name}}"></label>
</div>
</div>
</script>

View file

@ -514,7 +514,9 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
<div class="row responsive thin margin-top-small">
<?php foreach ($events as $i => $event) : ?>
<div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $event; ?>">
<input type="checkbox" name="events" data-ls-bind="{{project-function.events}}" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
<input type="checkbox" name="events" data-ls-bind="{{project-function.events}}" id="<?php echo $event; ?>" value="<?php echo $event; ?>" />
&nbsp;
<label class="inline" for="<?php echo $event; ?>"><?php echo $event; ?></label>
</div>
<?php if (($i + 1) % 2 === 0) : ?>
</div>

View file

@ -59,7 +59,9 @@ $scopes = $this->getParam('scopes', []);
<div class="row responsive thin">
<?php foreach ($scopes as $i => $scope) : ?>
<div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $scope; ?>">
<input data-ls-attrs="id=scope-<?php echo $scope; ?>" type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" /> &nbsp; <?php echo $scope; ?>
<input data-ls-attrs="id=scope-<?php echo $scope; ?>" type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" />
&nbsp;
<label class="inline" for="scope-<?php echo $scope; ?>"><?php echo $scope; ?></label>
</div>
<?php if (($i + 1) % 2 === 0) : ?>
</div>
@ -160,7 +162,9 @@ $scopes = $this->getParam('scopes', []);
<div class="row responsive thin">
<?php foreach ($scopes as $i => $scope) : ?>
<div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $scope; ?>">
<input type="checkbox" name="scopes" value="<?php echo $scope; ?>" /> &nbsp; <?php echo $scope; ?>
<input type="checkbox" name="scopes" id="<?php echo $scope; ?>" value="<?php echo $scope; ?>" />
&nbsp;
<label for="<?php echo $scope; ?>"><?php echo $scope; ?></label>
</div>
<?php if (($i + 1) % 2 === 0) : ?>
</div>

View file

@ -63,7 +63,9 @@ $events = array_keys($this->getParam('events', []));
<div class="row responsive thin">
<?php foreach ($events as $i => $event) : ?>
<div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $event; ?>">
<input type="checkbox" name="events" data-ls-bind="{{webhook.events}}" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
<input type="checkbox" name="events" data-ls-bind="{{webhook.events}}" id="update-<?php echo $event; ?>" value="<?php echo $event; ?>" />
&nbsp;
<label class="inline" for="update-<?php echo $event; ?>"><?php echo $event; ?></label>
</div>
<?php if (($i + 1) % 2 === 0) : ?>
</div>
@ -183,7 +185,9 @@ $events = array_keys($this->getParam('events', []));
<div class="row responsive thin">
<?php foreach ($events as $i => $event) : ?>
<div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $event; ?>">
<input type="checkbox" name="events" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
<input type="checkbox" name="events" id="add-<?php echo $event; ?>" value="<?php echo $event; ?>" />
&nbsp;
<label class="inline" for="add-<?php echo $event; ?>"><?php echo $event; ?></label>
</div>
<?php if (($i + 1) % 2 === 0) : ?>
</div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -243,6 +243,10 @@ label {
margin-bottom: 15px;
display: block;
line-height: normal;
&.inline {
display: inline;
}
}
.input,