scss 带Bootstrap模式的每月Cal V2列表视图
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 带Bootstrap模式的每月Cal V2列表视图相关的知识,希望对你有一定的参考价值。
<h3>Filter by State</h3>
<div id="state-selector">
{% assign groupState = "" %}
{% assign sorted = Events | OrderBy: 'State', 'asc' %}
{% for event in sorted %}
{% assign eventState = event.State %}
{% unless groupState == eventState %}
<a href="#" title="{{ eventState }}">{{ event.State }}</a>
{% assign groupState = eventState %}
{% endunless %}
{% endfor %}
</div>
<ul class="event-list">
{% assign groupDate = "" %}
{% for event in Events %}
{% assign eventDate = event.StartDateTime | DateFormat: "MMMM", event.TimeZone %}
{% unless groupDate == eventDate %}
<li><h3>{{ eventDate }}</h3></li>
{% assign groupDate = eventDate %}
{% endunless %}
<li class="single-event" title="{{ event.State }}">
<a class="modal-link" data-toggle="modal" data-target="#event-modal" data-title="{{ event.Subject}}"></a>
<div class="date">{{ event.StartDateTime | DateFormat:"MMMM %d",event.TimeZone }}</div>
<div class="date-time">{{ event.DateTimeText }}</div>
<div class="college">{{ event.Location }}</div>
<div class="location">{{ event.City }}, {{ event.State }}</div>
<div class="download-link">
<a href="{{ Config.ApiUrl }}/pageparts/calendars/{{ Settings.PagePartId }}/events/{{ event.EventModuleId }}.ics?siteId={{ Site.ID }}">Add to Calendar</a>
</div>
<div class="description">
{{ event.Description }}
</div>
</li>
{% endfor %}
</ul>
function sortThis() {
$("li.single-event").each(function () {
var eventState = $(this).attr("title"),
theValue = $("select#category").val();
if (eventState != theValue && theValue != "#") {
$(this).addClass("hidden");
} else if (theValue == "#") {
$(this).removeClass("hidden");
} else {
$(this).removeClass("hidden");
}
});
}
jQ171(document).ready(function ($) {
$(function () {
$("#state-selector").each(function () {
var $select = $('<select id="category" onchange="sortThis();"/>');
$select.append("<option value='#'>Choose A State</option>");
$(this).find('a').each(function () {
var $option = $('<option />');
$option.attr('value', $(this).attr('title')).html($(this)
.html());
$select.append($option);
});
$(this).replaceWith($select);
});
});
$('li.single-event a').on('click', function () {
var eventTitle = $(this).attr('data-title'),
$modal = $('#event-modal'),
eventDate = $(this).siblings(".date-time").html(),
eventLocation = $(this).siblings(".location").html(),
eventDownload = $(this).siblings(".download-link").html(),
eventDescription = $(this).siblings(".description").html();
$modal.on('show.bs.modal', function () {
$('div#event-modal').find('h5.modal-title').text(eventTitle);
$('div#event-modal').find('div.modal-body .date-time').html(eventDate);
$('div#event-modal').find('div.modal-body .location').html(eventLocation);
$('div#event-modal').find('div.modal-body .save-link').html(eventDownload);
$('div#event-modal').find('div.modal-body .description').html(eventDescription);
});
});
});
.event-module.school-visits {
.CalendarMonthFilter {
display: none;
}
#category {
font-size: 2rem;
}
.event-list {
margin: 50px 0;
padding-left: 0;
border-radius: 8px 8px 0 0;
box-shadow: 0 8px 32px rgba(37,38,39,0.1);
// overflow: hidden;
width: 100%;
li {
padding: 8px 16px;
list-style: none;
&.single-event {
cursor: pointer;
position: relative;
list-style: none;
padding-left: 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 1.6rem;
padding: 8px 16px;
background: white;
transform: scale(1);
transition: all .33s ease;
> * {
flex-basis: 32%;
}
a.modal-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.date-time {
display: none;
}
.download-link {
display: none;
}
.description {
display: none;
}
&:hover {
transform: scale(1.1);
}
}
&:nth-child(odd) {
background: #f3f3f3;
}
}
}
}
.event.modal {
z-index: 9999;
}
以上是关于scss 带Bootstrap模式的每月Cal V2列表视图的主要内容,如果未能解决你的问题,请参考以下文章
在 Next.js 12 中使用带有 SCSS 的 Bootstrap