iapt-platform
/
mint
дзеркало https://github.com/iapt-platform/mint.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
							<?PHP
include "../pcdl/html_head.php";
?>

<body>

	<?php
	require_once("../pcdl/head_bar.php");
	?>
	<style>
		.content_block {
			width: 230px;
		}

		.index_inner {
			margin-left: auto;
			margin-right: auto;
		}

		.content_inner {
			display: grid;
			justify-content: center;
			grid-gap: 20px;
		}

		.title_bar {
			justify-content: space-between;
			display: flex;
			margin: 1em 0;
			align-items: center;
		}

		h3 {
			font-size: 18px;
			margin: 0;
		}

		.index_list_categories {
			padding: 1rem;
			margin-bottom: 2rem;
		}

		.index_list_categories a:hover {
			color: var(--tool-link-hover-color);
		}

		/*.index_list_categories a,a:link{
		color: var(--main-color);
	}*/
		.index_list_categories button {
			border: none;
		}

		.card li {
			white-space: unset;
		}

		.card code {
			white-space: unset;
		}

		.teacher_photo {
			width: 230px;
			height: 178px;
			background-color: gray;
			border-radius: 8px;
		}

		.teacher_text {
			padding: 0 5px;
		}

		.teacher_text .title {
			font-size: 120%;
			font-weight: 700;
			margin: 0.5em 0;
		}

		.teacher_intro {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 100%;
			-webkit-line-clamp: 3;
		}

		#course_list_complete .card,
		#course_list_ongoing .card {
			height: 120px;
			padding: 0;
			display: grid;
			grid-template-columns: 120px 1fr;
		}

		.course_block {
			background-color: #f5f5f5;
			padding: 1rem;
		}

		.course_right {
			padding: 10px;
			display: flex;
			flex-direction: column;
			width: calc(100% - 10px);
		}

		.card_photo {
			border-radius: 20px 0 0 20px;
		}

		.course_right .title a {
			font-size: 120%;
			font-weight: 700;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			color: var(--main-color);
		}

		.subtitle {
			margin-top: auto;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 100%;
			-webkit-line-clamp: 2;
		}

		@media screen and (min-width:800px) {
			.index_list_categories {
				max-width: 760px;
				margin: 0 auto 3rem auto;
			}

			.content_inner {
				grid-template-columns: 230px 230px 230px;
			}

			h3 {
				font-size: 22px;

			}

			.course_block h3 {
				text-align: center;
				margin: 1em 0;
			}

			#course_list_ongoing,
			#course_list_complete {
				max-width: 600px;
				margin: 0 auto;
			}
		}

		@media screen and (min-width:1020px) {
			.index_list_categories {
				max-width: 1020px;
			}

			.content_inner {
				grid-template-columns: 230px 230px 230px 230px;
			}
		}
	</style>


	<div class="index_inner">

		<div class="index_list_categories">
			<div class="title_bar">
				<h3><?php echo $_local->gui->speaker ?></h3>
				<span class="title_more"><a href="../course"><?php echo $_local->gui->more ?></a></span>
			</div>
			<div class="content">
				<div id="course_list_new" class="content_inner">


				</div>
			</div>
		</div>
		<script>
			$.get("../course/teacher_list.php", function(data, status) {
				let xDiv = document.getElementById("course_list_new");
				if (xDiv) {
					xDiv.innerHTML = data;
				}
			});
		</script>
		<div class="course_block">
			<h3>
				<?php echo $_local->gui->in_progress; ?>
			</h3>
			<div id="course_list_ongoing">
			</div>
		</div>

		<div class="course_block">
			<h3>
				<?php echo $_local->gui->already_over; ?>
			</h3>
			<div id="course_list_complete">
			</div>
		</div>

		<script>
			var speaker = "<?php echo $_local->gui->speaker . '：' . $row['teacher'] ?>";

			$.get("../course/course_list.php", function(data, status) {
				let arrData = JSON.parse(data);
				let html_complete = "";
				let html_ongoing = "";

				for (const iterator of arrData) {
					let html = "";
					html += '<div class="card">';
					html += '<div style="height:120px;width:120px;">';
					html += '<img src="../../tmp/images/course/' + iterator.id + '.jpg" alt="cover" width="120" height="120"  class="card_photo">';
					html += '</div>';
					html += '<div class="course_right">';
					html += '<div class="title"><a href="../course/course.php?id=' + iterator.id + '">' + iterator.title + '</a></div>';

					//協助補上代碼：
					html += '<div class="author">主講人：</div>';

					html += '<div class="subtitle">' + iterator.subtitle + '</div>';

					/*let summary = "";
					try {
						summary = marked(iterator.summary);
					} catch (e) {}
					html += '<div class="summary">' + summary + '</div>';*/
					html += '</div>';
					html += '</div>';
					if (iterator.status == 40) {
						html_complete += html;
					} else if (iterator.status == 30 || iterator.status == 20) {
						html_ongoing += html;
					}
				}
				$("#course_list_complete").html(html_complete);
				$("#course_list_ongoing").html(html_ongoing);
				$("img").one("error", function() {
					$(this).attr("src", "../course/img/default.jpg");
				});
			});
		</script>

	</div>

	<?php
	include "../pcdl/html_foot.php";
	?>