deblan/deblan.io-murph
deblan/deblan.io-murph
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity

update similar posts

Browse source
This commit is contained in:
Simon Vieille 2022-09-10 11:12:14 +02:00
parent f33e16b198
commit a142474085
Signed by: deblan
GPG key ID: 579388D585F70417
6 changed files with 48 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
assets/css/app.scss
View file

@ -337,8 +337,9 @@ pre[class*="language-"] {
padding: 25px 40px;
max-width: $content-max-width;
&.body-full {
max-width: 100%;
&.body--posts {
padding-top: 0;
padding-bottom: 0;
}
margin-left: auto;
@ -809,7 +810,7 @@ $links: (
}
}
.mesh {
.card {
border: 1px solid $color-hr-border;
border-radius: 10px;
margin: 20px;
@ -849,26 +850,34 @@ $links: (
}
.meshes {
.cards {
padding: 0 20px 20px 20px;
&--posts {
padding-left: 0;
padding-right: 0;
.mesh-preview {
.card-preview {
img {
width: 100%;
max-height: 200px;
width: 100%;
}
}
.row > .col-4:nth-child(1) .card {
margin-left: 0;
}
.row > .col-4:nth-child(3) .card {
margin-right: 0;
}
}
}
.ejs-link {
margin: 10px auto;
border: 2px solid $color-very-light-grey;
border-radius: 5px;
margin: 10px auto;
&--anchor {
display: block;
@ -967,9 +976,14 @@ $links: (
}
@media screen and (max-width: 1280px) {
.mesh-wrapper {
.card-wrapper {
width: 100%;
}
.cards--posts .card {
margin-left: 0;
margin-right: 0;
}
}
@media screen and (max-width: 980px) {
@ -1129,7 +1143,7 @@ $links: (
}
}
.mesh {
.card {
border-color: #86899f;
&-title {

4
assets/js/app.js
View file

@ -4,7 +4,7 @@ const App = require('./app/app')
const FormPnw = require('./app/form-pwn')
const Post = require('./app/post')
const LazyLoad = require('./app/lazy-load')
const QuickPost = require('./app/quick-post')
const PxImage = require('./app/px-image')
const Code = require('./app/code')
const Knmc = require('./app/knmc')
const VideoRatio = require('./app/video-ratio')
@ -17,7 +17,7 @@ const app = new App([
new FormPnw(window),
new Post(window),
new LazyLoad(window),
new QuickPost(window),
new PxImage(window),
new Code(window),
new Knmc(window),
new VideoRatio(window),

6
assets/js/app/quick-post.js → assets/js/app/px-image.js
View file

@ -1,4 +1,4 @@
class QuickPost {
class PxImage {
constructor(w) {
this.window = w
}
@ -6,7 +6,7 @@ class QuickPost {
init() {
const doc = this.window.document
const images = doc.querySelectorAll('.quick-image img, .mesh-preview img')
const images = doc.querySelectorAll('.quick-image img, .card-preview img')
for (let i = 0, len = images.length; i < len; i++) {
(function(image) {
@ -24,4 +24,4 @@ class QuickPost {
}
}
module.exports = QuickPost
module.exports = PxImage

14
templates/page/mesh/default.html.twig
View file

@ -10,20 +10,20 @@
</div>
<div class="row">
<div class="col-12 meshes">
<div class="col-12 cards">
<div class="row">
{% for mesh in pager %}
<div class="col-4 mesh-wrapper">
<div class="mesh">
<div class="mesh-preview">
<div class="col-4 card-wrapper">
<div class="card">
<div class="card-preview">
<img src="{{ asset(mesh.preview)|imagine_filter('mesh_preview_filter') }}" alt="{{ mesh.label }}">
</div>
<h2 class="mesh-title">{{ mesh.label }}</h2>
<div class="mesh-description">
<h2 class="card-title">{{ mesh.label }}</h2>
<div class="card-description">
{{ mesh.description|murph_url|file_attributes|markdown('post') }}
{% for key, item in mesh.files %}
<div class="mesh-file">
<div class="card-file">
<ul class="list--inline">
<li>
<span class="button small alt">

12
templates/page/post/_post.html.twig
View file

@ -105,16 +105,16 @@
{% if full %}
{% if similarPosts is defined and similarPosts|length > 0 %}
<div class="body">
<div class="col-12 meshes meshes--posts">
<div class="body body--posts">
<div class="col-12 cards cards--posts">
<div class="row">
{% for item in similarPosts %}
<div class="col-4 mesh-wrapper">
<div class="mesh">
<div class="col-4 card-wrapper">
<div class="card">
{% set url = safe_path('blog_menu_post', {post: item.id, slug: item.slug, _domain: _domain}) %}
{%- if item.image -%}
<div class="mesh-preview">
<div class="card-preview">
<a href="{{ url }}">
{% set image = asset(item.image)|imagine_filter('post_preview_filter') %}
<img src="{{ asset('build/images/px.png') }}" data-src="{{ image }}" alt="{{ item.title }}">
@ -122,7 +122,7 @@
</div>
{%- endif -%}
<h2 class="mesh-title">
<h2 class="card-title">
<a href="{{- url -}}">
{{- item.title -}}
</a>

14
templates/page/simple/projects.html.twig
View file

@ -14,22 +14,22 @@
</div>
<div class="row">
<div class="col-12 meshes">
<div class="col-12 cards">
<div class="row">
{% for project in projects %}
<div class="col-4 mesh-wrapper">
<div class="mesh">
<div class="col-4 card-wrapper">
<div class="card">
{% if project.image %}
<div class="mesh-preview">
<div class="card-preview">
<img src="{{ asset(project.image)|imagine_filter('project_preview_filter') }}" alt="{{ project.label }}">
</div>
{% endif %}
<h2 class="mesh-title">{{- project.label -}}</h2>
<div class="mesh-description">
<h2 class="card-title">{{- project.label -}}</h2>
<div class="card-description">
{{- project.description|murph_url|markdown('post') -}}
{% if project.links %}
<div class="mesh-file">
<div class="card-file">
<ul class="list--inline">
{% for link in project.links %}
<li>