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 { .form-check {
padding: 0; display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 41px;
} }
.form-check input { .checkbox {
margin: 10px 5px; 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 { .circle {

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

@ -1,10 +1,25 @@
$(document).ready(function () { $(document).ready(function () {
$('.conference-info').click( function() { $('.data-href-js').click( function() {
window.location = $(this).attr('data-href'); window.location = $(this).attr('data-href');
}); });
$('.circle').parent().click( function() { $('.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="col-lg-12">
<div class="d-flex bd-highlight"> <div class="d-flex bd-highlight">
<div class="form-check p-1 bd-highlight"> <div class="form-check p-1 bd-highlight">
<input class="" type="checkbox"/> <div class="checkbox" id="select-all-js"></div>
</div> </div>
<button type="button" class="btn btn-danger">Удалить</button> <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 class="p-1 flex-grow-1 bd-highlight">
</div> </div>
</div> </div>
</div> </div>
@ -35,12 +35,26 @@
<div class="conference-list-body list-group"> <div class="conference-list-body list-group">
<div class="conference-item d-flex bd-highlight list-group-item"> <div class="conference-item d-flex bd-highlight list-group-item">
<div class="form-check p-1 bd-highlight"> <div class="form-check p-1 bd-highlight">
<input class="" type="checkbox" disabled="disabled"/> <div class="checkbox"></div>
</div> </div>
<div class="form-check p-1 bd-highlight"> <div class="form-check p-1 bd-highlight">
<div class="circle"></div> <div class="circle"></div>
</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-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
<div class="conference-date p-1 bd-highlight">01.01.1990</div> <div class="conference-date p-1 bd-highlight">01.01.1990</div>
</div> </div>