Resolve "Вёрстка страницы списка конференций" #160
@ -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">
|
||||
<form id="conferences-form" method="post">
|
||||
<section id="conferences">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h3 class="section-heading text-uppercase text-center">Список конференций</h3>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="col-md-9 col-sm-12">
|
||||
|
||||
</div>
|
||||
<div class="form-check p-1 bd-highlight">
|
||||
<div class="circle"></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 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>
|
||||
</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">
|
||||
|
||||
</script>
|
||||
<div id="modalDelete"/>
|
||||
</form>
|
||||
<script></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</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…
Reference in New Issue
Block a user