romanov73/ng-tracker
1
0
Fork 0
Code Issues 18 Pull Requests 4 Projects Releases Wiki Activity

#53 added custom checkboxes, added selection of all conferences

Browse Source
This commit is contained in:
Nightblade73 2019-03-23 12:39:53 +04:00
parent 9182a71015
commit 50dbe8cb8f
3 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/resources/public/css/conference.css
View File

@ -21,11 +21,29 @@
}
.form-check {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 41px;
}
.form-check input {
margin: 10px 5px;
.checkbox {
position: relative;
width: 13px;
height: 13px;
border-radius: 15%;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
.selected:before {
content: '✔';
position: absolute;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
}
.circle {

19
src/main/resources/public/js/conference.js
View File

@ -1,10 +1,25 @@
$(document).ready(function () {
$('.conference-info').click( function() {
$('.data-href-js').click( function() {
window.location = $(this).attr('data-href');
});
$('.circle').parent().click( function() {
$(this).children(".circle").toggleClass('circle-active');
$(this).children('.circle').toggleClass('circle-active');
});
$('.checkbox').parent().click( function() {
$(this).children('.checkbox').toggleClass('selected');
});
$('#select-all-js').click( function() {
var childNodes = $('.conference-item .form-check .checkbox')
.each(function(i, elem) {
if ($(this).hasClass('selected') && $('#select-all-js').hasClass('selected')) {
$(this).toggleClass('selected');
} else if (!$(this).hasClass('selected') && !$('#select-all-js').hasClass('selected')){
$(this).toggleClass('selected');
}
});
});
});

24
src/main/resources/templates/conferences/conferences.html
View File

@ -20,12 +20,12 @@
<div class="col-lg-12">
<div class="d-flex bd-highlight">
<div class="form-check p-1 bd-highlight">
<input class="" type="checkbox"/>
<div class="checkbox" id="select-all-js"></div>
</div>
<button type="button" class="btn btn-danger">Удалить</button>
<button type="button" class="btn btn-success">Добавить</button>
<button type="button" class="btn btn-success data-href-js" data-href="./conference">Добавить
</button>
<div class="p-1 flex-grow-1 bd-highlight">
</div>
</div>
</div>
@ -35,12 +35,26 @@
<div class="conference-list-body list-group">
<div class="conference-item d-flex bd-highlight list-group-item">
<div class="form-check p-1 bd-highlight">
<input class="" type="checkbox" disabled="disabled"/>
<div class="checkbox"></div>
</div>
<div class="form-check p-1 bd-highlight">
<div class="circle"></div>
</div>
<div class="conference-info p-1 flex-grow-1 bd-highlight d-flex" data-href="./conference">
<div class="conference-info p-1 flex-grow-1 bd-highlight d-flex data-href-js"
data-href="./conference">
<div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
<div class="conference-date p-1 bd-highlight">01.01.1990</div>
</div>
</div>
<div class="conference-item d-flex bd-highlight list-group-item">
<div class="form-check p-1 bd-highlight">
<div class="checkbox"></div>
</div>
<div class="form-check p-1 bd-highlight">
<div class="circle"></div>
</div>
<div class="conference-info p-1 flex-grow-1 bd-highlight d-flex data-href-js"
data-href="./conference">
<div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
<div class="conference-date p-1 bd-highlight">01.01.1990</div>
</div>