0.0.279
This commit is contained in:
410
static/css/datarangepicker.css
Normal file
410
static/css/datarangepicker.css
Normal file
@@ -0,0 +1,410 @@
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
width: 278px;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin-top: 7px;
|
||||
top: 100px;
|
||||
left: 20px;
|
||||
z-index: 3001;
|
||||
display: none;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.daterangepicker:before, .daterangepicker:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.daterangepicker:before {
|
||||
top: -7px;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker:after {
|
||||
top: -6px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:before {
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:after {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:before {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:after {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:before {
|
||||
top: initial;
|
||||
bottom: -7px;
|
||||
border-bottom: initial;
|
||||
border-top: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:after {
|
||||
top: initial;
|
||||
bottom: -6px;
|
||||
border-bottom: initial;
|
||||
border-top: 6px solid #fff;
|
||||
}
|
||||
|
||||
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-buttons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.auto-apply .drp-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar {
|
||||
display: none;
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.single .calendar-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
|
||||
color: #fff;
|
||||
border: solid black;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .prev span {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table {
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
|
||||
background-color: #eee;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.daterangepicker td.week, .daterangepicker th.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.daterangepicker td.in-range {
|
||||
background-color: #ebf4f8;
|
||||
border-color: transparent;
|
||||
color: #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.end-date {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date.end-date {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.active, .daterangepicker td.active:hover {
|
||||
background-color: #357ebd;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker th.month {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker td.disabled, .daterangepicker option.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.daterangepicker select.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
background: #eee;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
outline: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time {
|
||||
text-align: center;
|
||||
margin: 4px auto 0 auto;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time select.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
padding: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
display: none;
|
||||
line-height: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-selected {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons .btn {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.rtl .drp-calendar.right {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: none;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .ranges {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li {
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li.active {
|
||||
background-color: #08c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Larger Screen Styling */
|
||||
@media (min-width: 564px) {
|
||||
.daterangepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-calendar.left {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right .calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges, .daterangepicker .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 730px) {
|
||||
.daterangepicker .ranges {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker.rtl .ranges {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1011,9 +1011,14 @@
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.block-finded-routes{
|
||||
.block_w_paging.routes{
|
||||
width: 68%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.block-finded-routes{
|
||||
/*width: 68%;*/
|
||||
/*float: right;*/
|
||||
/*display: inline-block;*/
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,20 @@
|
||||
page_iterator = 2
|
||||
standart_page_iterator = 1
|
||||
separator_iterator = 1
|
||||
|
||||
function load_routes (el,news=null) {
|
||||
let local_page_iterator = standart_page_iterator
|
||||
if (!news){
|
||||
local_page_iterator = page_iterator
|
||||
}
|
||||
let number_last_route = el.id
|
||||
let incrase = 3
|
||||
if (!news){
|
||||
incrase = 11
|
||||
}
|
||||
let data_d = {
|
||||
'from_el':parseInt(number_last_route) + 1,
|
||||
'to_el':parseInt(number_last_route) + 11
|
||||
'to_el':parseInt(number_last_route) + incrase
|
||||
}
|
||||
let get_url = ""
|
||||
let url_ajax = "get_articles_block/"
|
||||
@@ -47,11 +56,16 @@ function load_routes (el,news=null) {
|
||||
// let place_ins = document.querySelector(url_insert)
|
||||
//
|
||||
|
||||
//
|
||||
let place_ins_parent = el.closest(".block_w_paging")
|
||||
let place_ins = place_ins_parent.querySelector(`.page_paging_elements_${local_page_iterator}`)
|
||||
//
|
||||
|
||||
// let place_ins = el
|
||||
|
||||
let place_ins = el.parentNode.previousElementSibling.previousElementSibling
|
||||
place_ins.innerHTML = data.html
|
||||
let old_page_iterator = page_iterator
|
||||
page_iterator++
|
||||
let old_page_iterator = local_page_iterator
|
||||
local_page_iterator++
|
||||
loader.classList.toggle("show")
|
||||
if (!data.last_block_routes){
|
||||
el.classList.toggle("hide")
|
||||
@@ -63,11 +77,11 @@ function load_routes (el,news=null) {
|
||||
// }
|
||||
// )
|
||||
let new_page_routes = document.createElement("div")
|
||||
new_page_routes.classList.add("page_routes_" + page_iterator)
|
||||
$(new_page_routes).insertAfter(".page_routes_" + old_page_iterator);
|
||||
new_page_routes.classList.add("page_paging_elements_" + local_page_iterator)
|
||||
$(new_page_routes).insertAfter(".page_paging_elements_" + old_page_iterator);
|
||||
let line_separator = document.createElement("div")
|
||||
line_separator.classList.add("line_separator_page_w_el")
|
||||
$(line_separator).insertAfter(".page_routes_" + separator_iterator);
|
||||
$(line_separator).insertAfter(".page_paging_elements_" + separator_iterator);
|
||||
// document.querySelector(".info_profile").innerHTML = data.html;
|
||||
el.setAttribute("id",parseInt(number_last_route) + 11)
|
||||
history.pushState({'data':data_d,'str_data':get_url}, "state_filters", `?${get_url}`);
|
||||
|
||||
@@ -1,22 +1,6 @@
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
<div class="news_block_pagination">
|
||||
{% for art in articles %}
|
||||
{% if from_el and forloop.counter > from_el %}
|
||||
<div class="news_item_pagination">
|
||||
<div class="pag_news_img"><img src="{{ MEDIA_URL }}{{ art.picture }}" /></div>
|
||||
<div class="pag_news_item_text">
|
||||
<div class="news_header">{{ art.name }}</div>
|
||||
<div class="news_description">
|
||||
{{ art.description|truncatechars:400 }}
|
||||
{# <div class="news_gradient"></div>#}
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear_both"></div>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
{#<div>{{ art.text|safe }}</div>#}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="clear_both"></div>
|
||||
{% for art in articles %}
|
||||
{% include "widgets/w_news_element_item.html" %}
|
||||
{#<div>{{ art.text|safe }}</div>#}
|
||||
{% endfor %}
|
||||
7
templates/blocks/articles/b_news_elements_content.html
Normal file
7
templates/blocks/articles/b_news_elements_content.html
Normal file
@@ -0,0 +1,7 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div class="page_paging_elements_1">
|
||||
{% include "blocks/articles/b_news_elements.html" %}
|
||||
</div>
|
||||
<div class="page_paging_elements_2"></div>
|
||||
<div class="clear_both"></div>
|
||||
@@ -12,20 +12,23 @@
|
||||
|
||||
{% include "forms/f_find_route_filters_form.html" %}
|
||||
|
||||
{% include "blocks/b_finded_routes.html" %}
|
||||
<div class="block_w_paging routes">
|
||||
|
||||
{% include "blocks/b_finded_routes.html" %}
|
||||
|
||||
|
||||
<div class="clear_both"></div>
|
||||
<div class="clear_both"></div>
|
||||
|
||||
{% if last_block_routes == False %}
|
||||
<div class="text-align-center w-68 f-r">
|
||||
<button class="button-find-more-routes" id="{{ last_el }}" onclick="load_routes(this)">{% trans "Показать ещё 10" %}</button>
|
||||
<div class="width-100 text-align-center mb-10">
|
||||
<img class="loader_f_loading_routes" src="{% static "img/svg/loader.svg" %}">
|
||||
{% if last_block_routes == False %}
|
||||
<div class="text-align-center">
|
||||
<button class="button-find-more-routes" id="{{ last_el }}" onclick="load_routes(this)">{% trans "Показать ещё 10" %}</button>
|
||||
<div class="width-100 text-align-center mb-10">
|
||||
<img class="loader_f_loading_routes" src="{% static "img/svg/loader.svg" %}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="clear_both"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="page_routes_1">
|
||||
<div class="page_paging_elements_1">
|
||||
{% include "blocks/b_search_routes.html" %}
|
||||
</div>
|
||||
<div class="page_routes_2">
|
||||
<div class="page_paging_elements_2">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -31,19 +31,20 @@
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% with from_el=3 %}
|
||||
{% include 'blocks/articles/b_news_elements.html' %}
|
||||
{% endwith %}
|
||||
{# boris edited #}
|
||||
{% if last_block == False %}
|
||||
<div class="text-align-center w-68 f-r">
|
||||
{% csrf_token %}
|
||||
<button class="button-find-more-routes" id="{{ last_el }}" onclick="load_routes(this,'news')">{% trans "Показать ещё 10" %}</button>
|
||||
<div class="width-100 text-align-center mb-10">
|
||||
<img class="loader_f_loading_routes" src="{% static "img/svg/loader.svg" %}">
|
||||
<div class="block_w_paging">
|
||||
{% with from_el=3 %}
|
||||
{% include 'blocks/articles/b_news_elements.html' %}
|
||||
{% endwith %}
|
||||
{# boris edited #}
|
||||
{% if last_block == False %}
|
||||
<div class="text-align-center">
|
||||
{% csrf_token %}
|
||||
<button class="button-find-more-routes" id="{{ last_el }}" onclick="load_routes(this,'news')">{% trans "Показать ещё 10" %}</button>
|
||||
<div class="width-100 text-align-center mb-10">
|
||||
<img class="loader_f_loading_routes" src="{% static "img/svg/loader.svg" %}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{# boris edited end#}
|
||||
{% endblock %}
|
||||
@@ -14,7 +14,7 @@
|
||||
<script type="text/javascript" src="{% static "js/datarangepicker.js" %}"></script>
|
||||
<script src="{% static "js/rangecalendartech.js" %}"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
|
||||
<link rel="stylesheet" href="{% static 'css/datarangepicker.css' %}" />
|
||||
|
||||
|
||||
|
||||
|
||||
16
templates/widgets/w_news_element_item.html
Normal file
16
templates/widgets/w_news_element_item.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% load static %}
|
||||
|
||||
{% if from_el and forloop.counter > from_el %}
|
||||
<div class="news_item_pagination">
|
||||
<div class="pag_news_img"><img src="{{ MEDIA_URL }}{{ art.picture }}" /></div>
|
||||
<div class="pag_news_item_text">
|
||||
<div class="news_header">{{ art.name }}</div>
|
||||
<div class="news_description">
|
||||
{{ art.description|truncatechars:400 }}
|
||||
{# <div class="news_gradient"></div>#}
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear_both"></div>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user