Merge branch '53-vyorstka-stranitsy-spiska-konferentsiy' into 'dev'

Resolve "Вёрстка страницы списка конференций"

Closes #53

See merge request romanov73/ng-tracker!33
This commit is contained in:
Anton Romanov 2019-03-30 07:10:47 +00:00
commit e98445bb48
8 changed files with 266 additions and 73 deletions

View File

@ -1,94 +1,122 @@
.col-lg-12 a{
position: absolute;
font-size: smaller;
body {
min-width: 400px;
}
.col-lg-12 a img{
width: 36px;
height: 33px;
}
.form-group textarea{
.form-group textarea {
min-height: 206px;
max-height: 463px;
}
.deadline-list{
.deadline-list {
height: 200px;
padding: 0px;
overflow-y: scroll;
}
.deadline{
.deadline {
margin: 0;
height: 40px;
}
.deadline-text{
.deadline-text {
flex: 1;
}
.member-list{
.member-list {
height: 200px;
padding: 0px;
overflow-y: scroll;
}
.member{
.member {
margin: 0;
}
.paper-list{
.paper-list {
height: 200px;
padding: 0px;
overflow-y: scroll;
}
.paper{
.paper {
margin: 0;
}
.paper-name{
.paper-name {
flex: 1;
}
.paper-name span{
.paper-name span {
margin: 6px 15px;
display: inline-block;
}
.icon{
.icon {
width: 38px;
height: 38px;
padding: 2px;
cursor: pointer;
}
.icon-delete{
.icon-delete {
background-color: #f44;
}
.icon-paper{
height: 26px;
width: 26px;
float: right;
margin: 5px;
.icon-delete:hover {
background-color: #ff2929;
transition: background-color .15s ease-in-out;
}
.grey-border{
.icon-paper {
height: 26px;
width: 26px;
float: right;
margin: 5px;
}
.grey-border {
color: #495057;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#add-paper{
margin-left: 10px;
}
#cancel-button{
#cancel-button {
position: relative;
font-size: 1rem;
}
.paper-control button {
margin: 0 0 10px 10px;
float: right;
}
@media (max-width: 1199px) {
.paper-control {
display: block!important;
}
}
@media (max-width: 991px) {
.dates-panel {
display: block!important;
}
.date {
margin-bottom: 10px;
}
}
@media (max-width: 768px) {
.dashboard-elements {
display: block!important;
}
.dashboard-right {
margin-bottom: 10px;
}
}

View File

@ -0,0 +1,27 @@
$(document).ready(function () {
$('.data-href-js').click( function() {
window.location = $(this).attr('data-href');
});
$('.circle').parent().click( function() {
$(this).children('.circle').toggleClass('circle-active');
});
$('.checkbox-js').parent().click( function() {
$(this).children('.checkbox').toggleClass('selected');
});
$('#select-all-js').click( function() {
$(this).toggleClass('selected');
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');
}
});
});
});

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default" xmlns:th="">
<head>
<link rel="stylesheet" type="text/css" href="../css/conference.css"/>
</head>
<body>
<div layout:fragment="content">
<section id="conference">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="section-heading text-uppercase text-center">Актуальные конференции</h3>
<div th:replace="conferences/fragments/confNavigationFragment"/>
</div>
</div>
<hr/>
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</section>
</div>
</body>
</html>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
layout:decorator="default" xmlns:th="">
<head>
<link rel="stylesheet" type="text/css" href="../css/conference.css"/>
</head>
@ -11,19 +11,16 @@
<div class="container">
<div class="row">
<div class="col-lg-12">
<a class="d-flex align-items-center" href="/conferences/conferences">
<img class="icon" src="/img/conference/back.png"/>
Назад к списку конференций
</a>
<h3 class="section-heading text-uppercase text-center">Редактирование конференции</h3>
<div th:replace="conferences/fragments/confNavigationFragment"/>
</div>
</div>
<hr/>
<div class="row">
<div class="col-lg-12">
<form id="paper-form" method="post">
<div class="row">
<form id="conference-form" method="post">
<div class="row">
<div class="col-md-7 col-sm-12">
<input type="hidden" name="id"/>
@ -47,14 +44,16 @@
<div class="form-group">
<label for="deadlines">Дедлайны:</label>
<div class="deadline-list form-control" id="deadlines">
<div class="row deadline grey-border">
<input class="form-control deadline-text" type="text"
<div class="deadline-list form-control list-group" id="deadlines">
<div class="deadline d-flex p-0 list-group-item list-group-horizontal">
<input class="deadline-text col-md list-group-item" type="text"
placeholder="Текст дедлайна"/>
<input type="date"/>
<img class="icon grey-border icon-delete" src="/img/conference/delete.png"
<input class="list-group-item" type="date"/>
<img class="icon icon-delete grey-border" src="/img/conference/delete.png"
alt="Удалить"/>
</div>
</div>
</div>
@ -69,39 +68,45 @@
<div class="form-group">
<label for="dates">Дата проведения:</label>
<div class="row" id="dates">
<div class="col">
<input type="date" id="date-begin"/>
-
<input type="date" id="date-end"/>
<div class="d-flex col justify-content-between dates-panel">
<div class="date">
<input class="grey-border form-control" type="date" id="date-begin"/>
</div>
<div class="date">
<input class="grey-border form-control" type="date" id="date-end"/>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="members">Участники:</label>
<div class="member-list form-control" id="members">
<div class="row member grey-border">
<div class="col-5 member-name">
<div class="member-list form-control list-group" id="members">
<div class="member d-flex list-group-item justify-content-between p-1">
<div class="member-name">
Пользователь 1
</div>
<div class="col-3 member-participation">
<div class="member-participation">
очная
</div>
<div class="col member-deposit">
<div class="member-deposit">
статья
</div>
</div>
<div class="row member grey-border">
<div class="col-5 member-name">
Пользователь 2
<div class="member d-flex list-group-item justify-content-between p-1">
<div class="member-name">
Пользователь 1
</div>
<div class="col-3 member-participation">
заочная
<div class="member-participation">
очная
</div>
<div class="col member-deposit">
<div class="member-deposit">
доклад
</div>
</div>
</div>
</div>
@ -114,20 +119,20 @@
<div class="form-group">
<label for="papers">Статьи:</label>
<div class="paper-list form-control" id="papers">
<div class="row paper grey-border">
<div class="paper-name grey-border">
<div class="paper-list form-control list-group" id="papers">
<div class="paper d-flex list-group-item p-0">
<a class="paper-name" href="/papers/papers">
<span>
Имя статьи
</span>
<img class="icon-paper" src="/img/conference/paper.png"/>
</div>
</a>
<img class="icon grey-border icon-delete" src="/img/conference/delete.png"
alt="Удалить"/>
</div>
</div>
</div>
<div class="form-group d-flex justify-content-end">
<div class="paper-control form-group d-flex justify-content-end">
<button id="attach-paper" class="btn btn-primary"
type="button">
Прикрепить статью

View File

@ -1,20 +1,51 @@
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
layout:decorator="default" xmlns:th="">
<head>
</head>
<body>
<div layout:fragment="content">
<form id="conferences-form" method="post">
<section id="conferences">
<div class="container">
<div class="row" id="conference-list">
<div class="col-lg-12 text-center">
<h3 class="section-heading text-uppercase">Конференции</h3>
<div th:replace="conferences/fragments/confNavigationFragment"/>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-9 col-sm-12">
<a href="./conference" style="
top: 100px;
position: absolute;
width: 100px;
height: 50px;
">нажать</a>
</div>
<div class="col-md-3 col-sm-12">
<div class="filter">
<h5>Фильтр:</h5>
<select class="form-control" id="author"
onchange="this.form.submit();">
<option value="">Все авторы</option>
<option>lastName
</option>
</select>
<select class="form-control" id="year"
onchange="this.form.submit();">
<option value="">Все годы</option>
<option>year
</option>
</select>
</div>
</div>
</div>
</div>
</section>
<div id="modalDelete"/>
</form>
<script></script>
</div>
</body>
</html>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerfiles">
<meta charset="UTF-8"/>
</head>
<body>
<div th:fragment="confDashboard (conference)" class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 dashboard-card">
<div class="row">
<div class="col-2">
</div>
<div class="col col-10 text-right">
<h7 class="service-heading"> title</h7>
<p class="text-muted"></p>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerfiles">
<meta charset="UTF-8"/>
</head>
<body>
<div th:fragment="confLine (conference)" class="row text-left paper-row" style="background-color: white;">
<div class="col">
<a href="/conference">
<span class="h6"></span>
<span class="text-muted"></span>
</a>
<input class="id-class" type="hidden"/>
<a class="remove-paper pull-right d-none"
data-confirm="Удалить статью?">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerfiles">
<meta charset="UTF-8"/>
</head>
<body>
<div class="row justify-content-center control-panel">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3">
<a href="./conferences" class="btn btn-light toolbar-button">
<i class="fa fa-list-alt"></i>
Весь список</a>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3">
<a href="./actual" class="btn btn-light toolbar-button">
<i class="fa fa-newspaper-o" aria-hidden="true"></i>
Актуальное</a>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3">
<a href="./conference?id=0" class="btn btn-light toolbar-button">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
Добавить конференцию</a>
</div>
</div>
</body>
</html>