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

Merged
VladimirZarayskiy merged 1 commits from 53-vyorstka-stranitsy-spiska-konferentsiy into dev 5 years ago

@ -2,119 +2,6 @@ body {
min-width: 400px;
}
.dashboard {
margin-bottom: 10px;
}
.dashboard button {
margin-left: 10px;
height: 41px;
}
.year-filter {
width: 65px;
margin-right: 5px;
}
.conference-list-body {
height: 500px;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.conference-item {
align-items: center;
justify-content: center;
padding: 0;
}
.conference-item:hover {
background-color: #eee;
}
.form-check {
display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 41px;
}
.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 {
position: relative;
width: 13px;
height: 13px;
margin: 10px 5px;
border-radius: 50%;
background: #fff;
border: 1px solid #fed136;
}
.circle-active:before {
content: '';
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
background: #ff9800;
}
.conference-info:hover {
cursor: pointer;
}
.conference-item:hover .form-check {
background-color: #ddd;
}
.conference-item:hover .form-check:hover {
background-color: #ccc;
cursor: pointer;
}
.conference-item:hover .form-check:hover .circle {
background: #ffdc64;
}
.control-panel {
height: auto;
}
.row-bottom {
margin-top: 10px;
}
.pagination li a {
color: #000;
}
.pagination li a:hover {
color: #000;
}
.pagination .active .page-link {
background-color: #ff9800;
border-color: #ff9800;
}
@ -226,18 +113,10 @@ body {
@media (max-width: 768px) {
.dashboard-elements {
position: relative!important;
display: block!important;
height: 100px;
}
.dashboard-left {
position: relative;
top: 58px;
}
.dashboard-right {
position: relative;
top: -39px;
margin-bottom: 10px;
}
}

@ -45,8 +45,9 @@
<div class="form-group">
<label for="deadlines">Дедлайны:</label>
<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 list-group-item" type="text"
<input class="deadline-text col-md list-group-item" type="text"
placeholder="Текст дедлайна"/>
<input class="list-group-item" type="date"/>
<img class="icon icon-delete grey-border" src="/img/conference/delete.png"

@ -3,94 +3,49 @@
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 dashboard">
<div class="col-lg-12">
<div class="dashboard-elements d-flex bd-highlight align-items-center justify-content-left">
<div class="dashboard-left d-flex mr-auto">
<div class="form-check p-1 bd-highlight">
<div class="checkbox" id="select-all-js"></div>
</div>
<button type="button" class="btn btn-danger ">Удалить</button>
</div>
<div class="dashboard-right form-row align-items-center justify-content-end">
<label for="filter" class="col-auto col-form-label">Фильтровать по годам:</label>
<div class="year-filter" id="filter">
<input type="text" class="form-control" placeholder="2000"/>
</div>
<div class="year-filter">
<input type="text" class="form-control" placeholder="2020"/>
</div>
</div>
<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>
</div>
<hr/>
<div class="row">
<div class="col-md-9 col-sm-12">
<div class="row">
<div class="col-lg-12">
<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">
<div class="checkbox checkbox-js"></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>
</div>
<div class="conference-item d-flex bd-highlight list-group-item">
<div class="form-check p-1 bd-highlight">
<div class="checkbox checkbox-js"></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>
</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>
<div class="row row-bottom">
<div class="col-lg-12">
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="#">Предыдущая</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Следующая</a></li>
</ul>
</div>
</div>
</div>
</section>
<script src="/js/conference.js">
</section>
</script>
<div id="modalDelete"/>
</form>
<script></script>
</div>
</body>
</html>
</html>

@ -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>

@ -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>
Loading…
Cancel
Save