scss 带Bootstrap模式的每月Cal V2列表视图

Posted 2021-05-17

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

}