Kirby 3 Panel - last edited pages

The CMS Questions
15

My entire code for that :

  • Cool icons
  • Users, date and time modified

Capture d’écran 2020-04-11 à 12.19.29
Capture d’écran 2020-04-11 à 12.19.291340×626 37.7 KB

index.css

.k-history-section .latest-pages a {
	display: block;
	background: white;
	line-height: 1.25em;
	box-shadow: 0 2px 5px rgba(22,23,26,.05);
	margin-bottom: 2px;
        display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	justify-content:space-between;
}
.k-history-section .latest-pages a span{
       font-size:14px;
       padding: .5rem .75rem;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
}
.k-history-section .latest-pages a span:nth-child(2){
       flex:1
}
.k-history-section .latest-pages a div:nth-child(4){
       width:10em;
       text-align:right;
}
.k-history-section .latest-pages a div{
       padding: .5rem .75rem;
       color:#777;
       font-size:12px;
       line-height:21px
}
.k-history-section .latest-pages .k-icon {
       width: 38px;
       height: 38px;
}
.k-history-section .latest-pages .k-icon svg {
       opacity: .5;
}

index.js

panel.plugin('medienbaecker/history', {
	sections: {
		history: {
			data: function () {
				return {
					headline: null,
					latestPages: []
				}
			},
			created: function() {
				this.load().then(response => {
					this.headline = response.headline;
					this.latestPages = response.latestPages;
				});
			},
			template: `
				<section class="k-history-section">
					<header class="k-section-header">
						<h2 class="k-headline">{{ headline }}</h2>
					</header>
					<div class="latest-pages">
						
                        <a v-for="page in latestPages" :href="page.link"><span aria-hidden="true" data-back="pattern" class="k-icon k-icon-circle-filled"><svg viewBox="0 0 16 16" style="color: rgb(197, 201, 198);"><use xlink:href="#icon-circle-filled"></use></svg></span><span>{{ page.title }}</span><div>{{ page.user }}</div><div>{{ page.last }}</div></a>
        
					</div>
				</section>
			`
			}
	}
});

index.php

<?php

Kirby::plugin('medienbaecker/history', [
	'sections' => [
		'history' => [
			'props' => [
				'headline' => function($headline = "History") {
					return $headline;
				},
				'limit' => function($limit = 5) {
					return $limit;
				}
			],
			'computed' => [
				'latestPages' => function() {
					$latestPages = array();
					foreach(site()->index()->sortBy('modified', 'desc')->limit($this->limit()) as $latestPage) {
						$latestPages[] = [
							'title' => $latestPage->title()->value(),
							'link' => $latestPage->panelUrl(),
                            'last' => $latestPage->modified('d/m/y  H:i'),
                            'user' => kirby()->user()->name()->value(),
						];
					}
					return $latestPages;
				}
			]
		]
	]
]);
4 Likes