Skip to content

Commit 757d5ff

Browse files
davidbeigdavidbeig
authored
Add new content_block: sidebar + 2 stack (meetings and posts) Platoniq#60 (#3)
* add new content_block: sidebar + 2 stack (meetings and posts) * fix locales * fix styles for mobile and move styles to tailwind (cherry picked from commit 79e19e2) * some other responsive fixes (cherry picked from commit ae48e10) * remove padding to sidebar section (cherry picked from commit 1748bde) * fixes on separation visualization (cherry picked from commit 98e937b)
1 parent 3399ca1 commit 757d5ff

File tree

15 files changed

+293
-0
lines changed

15 files changed

+293
-0
lines changed

‎app/cells/decidim/alternative_landing/content_blocks/sidebar_right_stack/show.erb‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<%
2+
meetings = meetings()
3+
posts = posts()
4+
%>
5+
6+
<section class="home__section alternative-landing sidebar-right-stack flex flex-col md:grid md:grid-cols-2 !p-0">
7+
<div class="column_one h-[max(80vh, fit-content)] bg-no-repeat border-b-4 md:border-b-0 md:border-r-4 p-[3rem]" style="background-image: url(<%= background_image %>);">
8+
<div>
9+
<h2 class="grid grid-cols-[1fr, 2fr, 1fr] text-5xl md:text-[4rem] md:mt-4 md:mb-4 text-pretty uppercase font-bold">
10+
<%= decidim_sanitize translated_title("sidebar") %>
11+
</h2>
12+
</div>
13+
<div class="text-2xl md:text-4xl w-2/3 text-balance">
14+
<p><%= translated_body %></p>
15+
</div>
16+
<div>
17+
<a href="<%= translated_url("sidebar")%>" class="button button__sm md:button__lg button__secondary no-underline mt-4 mb-4">
18+
<%= translated_link_text("sidebar") %>
19+
</a>
20+
</div>
21+
22+
</div>
23+
<div class="column_two h-[max(80vh, fit-content)] text-center flex flex-col">
24+
<div class="stack_one h-[40vh] w-[100vw] md:w-[50vw] grid grid-rows-3">
25+
<div class="w-[100vw] md:w-[50vw]">
26+
<h2 class="mt-4 mb-4 text-5xl font-bold uppercase"><%= decidim_sanitize translated_title("meetings") %> </h2>
27+
</div>
28+
<div id="alternative-landing-sidebar-splide-meeting" class="splide w-[100vw] md:w-[50vw] m-auto">
29+
<div class="splide__slider">
30+
<div class="splide__track">
31+
<ul class="splide__list">
32+
<% meetings.each do |meeting|%>
33+
<li class="splide__slide min-h-[100px] ">
34+
<%
35+
formatted_date = l(meeting.start_time, format: :long)
36+
%>
37+
<h3 class="text-2xl"><%= translated_attribute(meeting.title) %></h3>
38+
<p><%= "#{formatted_date}" %></p>
39+
</li>
40+
<% end %>
41+
</ul>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<div>
47+
<a href="<%= translated_url("meetings") %>" class="button button__sm md:button__lg button__secondary no-underline mt-4">
48+
<%= translated_link_text("meetings") %>
49+
</a>
50+
</div>
51+
</div>
52+
53+
<hr class="h-[4px] bg-black" aria-role="presentation">
54+
55+
<div class="stack_two h-[40vh] w-[100vw] md:w-[50vw] grid grid-rows-3">
56+
<div class="w-[100vw] md:w-[50vw]">
57+
<h2 class="mt-4 mb-4 text-5xl font-bold uppercase"><%= decidim_sanitize translated_title("posts")%></h2>
58+
</div>
59+
<div id="alternative-landing-sidebar-splide-post"class="splide w-[100vw] md:w-[50vw] m-auto">
60+
<div class="splide__slider">
61+
<div class="splide__track">
62+
<ul class="splide__list">
63+
<% posts.each do |post|%>
64+
<li class="splide__slide post">
65+
<h3 class="text-2xl"><%= translated_attribute(post.title) %></h3>
66+
</li>
67+
<% end %>
68+
</ul>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div>
74+
<a href="<%= translated_url("posts") %>" class="button button__sm md:button__lg button__secondary no-underline mt-4">
75+
<%= translated_link_text("posts") %>
76+
</a>
77+
</div>
78+
</div>
79+
</div>
80+
</section>
81+
<hr class="h-[4px] bg-black" aria-role="presentation">
82+
83+
<%= append_javascript_pack_tag "decidim_splide" %>

‎app/cells/decidim/alternative_landing/content_blocks/sidebar_right_stack_cell.rb‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# frozen_string_literal: true
2+
3+
module Decidim
4+
module AlternativeLanding
5+
module ContentBlocks
6+
class SidebarRightStackCell < BaseCell
7+
def translated_title(section)
8+
translated_attribute(model.settings.send("title_#{section}"))
9+
end
10+
11+
def translated_body
12+
translated_attribute(model.settings.body)
13+
end
14+
15+
def translated_link_text(section)
16+
translated_attribute(model.settings.send("link_text_#{section}"))
17+
end
18+
19+
def translated_url(section)
20+
translated_attribute(model.settings.send("link_url_#{section}"))
21+
end
22+
23+
def background_image
24+
model.images_container.attached_uploader(:background_image).path(variant: :big)
25+
end
26+
27+
def meetings
28+
@meetings ||= Meetings::Meeting.upcoming.where(
29+
component: component || components
30+
)
31+
end
32+
33+
def posts
34+
@posts ||= Blogs::Post.where(
35+
component: component || components
36+
).order(created_at: :desc)
37+
end
38+
end
39+
end
40+
end
41+
end

‎app/cells/decidim/alternative_landing/content_blocks/sidebar_right_stack_settings_form/show.erb‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<% form.fields_for :settings, form.object.settings do |settings_fields| %>
2+
3+
<h3><%= t(".settings_sidebar") %></h2>
4+
<div class="grid-x">
5+
<%= settings_fields.translated :text_field, :"title_sidebar", label: t(".title_sidebar") %>
6+
<div class="large">
7+
<%= settings_fields.translated :text_area, :"body", rows: 5, label: t(".body") %>
8+
</div>
9+
<div class="large">
10+
<%= settings_fields.translated :text_field, :"link_text_sidebar", label: t(".link_text") %>
11+
<%= settings_fields.translated :text_field, :"link_url_sidebar", label: t(".link_url") %>
12+
</div>
13+
14+
<% form.fields_for :images, form.object.images do |images_fields| %>
15+
<%= images_fields.upload :background_image, label: t(".image") %>
16+
<% end %>
17+
</div>
18+
19+
<h3><%= t(".settings_meetings") %></h2>
20+
<div class="grid-x">
21+
<%= settings_fields.translated :text_field, :"title_meetings", label: t(".title_meetings") %>
22+
<div class="large">
23+
<%= settings_fields.translated :text_field, :"link_text_meetings", label: t(".link_text") %>
24+
<%= settings_fields.translated :text_field, :"link_url_meetings", label: t(".link_url") %>
25+
</div>
26+
</div>
27+
28+
29+
<h3><%= t(".settings_posts") %></h2>
30+
<div class="grid-x">
31+
<%= settings_fields.translated :text_field, :"title_posts", label: t(".title_posts") %>
32+
<div class="large">
33+
<%= settings_fields.translated :text_field, :"link_text_posts", label: t(".link_text") %>
34+
<%= settings_fields.translated :text_field, :"link_url_posts", label: t(".link_url") %>
35+
</div>
36+
</div>
37+
<% end %>
38+
39+

‎app/cells/decidim/alternative_landing/content_blocks/sidebar_right_stack_settings_form_cell.rb‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# frozen_string_literal: true
2+
3+
module Decidim
4+
module AlternativeLanding
5+
module ContentBlocks
6+
class SidebarRightStackSettingsFormCell < Decidim::ViewModel
7+
alias form model
8+
end
9+
end
10+
end
11+
end

‎app/packs/entrypoints/decidim_splide.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "src/decidim/alternative_landing/decidim_splide";

‎app/packs/src/decidim/alternative_landing/decidim_splide.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Splide from "@splidejs/splide";
2+
3+
document.addEventListener("DOMContentLoaded", () => {
4+
const options = {
5+
type: "loop",
6+
perPage: 1,
7+
pagination: false,
8+
width: "60%"
9+
};
10+
11+
new Splide("#alternative-landing-sidebar-splide-meeting", options).mount();
12+
new Splide("#alternative-landing-sidebar-splide-post", options).mount();
13+
});
14+

‎app/packs/stylesheets/decidim/alternative_landing/alternative_landing.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@
66
@import "stylesheets/decidim/alternative_landing/content_blocks/stack_vertical";
77
@import "stylesheets/decidim/alternative_landing/content_blocks/stack_horizontal";
88
@import "stylesheets/decidim/alternative_landing/content_blocks/tiles";
9+
@import "stylesheets/decidim/alternative_landing/content_blocks/sidebar_right_stack";

‎app/packs/stylesheets/decidim/alternative_landing/content_blocks/sidebar_right_stack.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import "stylesheets/decidim/alternative_landing/content_blocks/variables";
2+
@import "@splidejs/splide/dist/css/splide.min.css";
3+
4+
.alternative-landing {
5+
&.sidebar-right-stack {
6+
.column_one {
7+
background-position: bottom right;
8+
background-size: 25%;
9+
}
10+
11+
.splide__arrow {
12+
&.splide__arrow--prev {
13+
left: -3em;
14+
}
15+
16+
&.splide__arrow--next {
17+
right: -3em;
18+
}
19+
}
20+
}
21+
}
22+

‎config/assets.rb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@
2121
Decidim::Webpacker.register_entrypoints(
2222
decidim_alternative_landing: "#{base_path}/app/packs/entrypoints/decidim_alternative_landing.js",
2323
decidim_fullcalendar: "#{base_path}/app/packs/entrypoints/decidim_fullcalendar.js",
24+
decidim_splide: "#{base_path}/app/packs/entrypoints/decidim_splide.js",
2425
fullcalendar: "#{base_path}/app/packs/entrypoints/fullcalendar.js"
2526
)

‎config/locales/ca.yml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,19 @@ ca:
7676
button_text: Text del botó
7777
consultations: Consultes
7878
title: Títol
79+
sidebar_right_stack:
80+
name: "Barra lateral + 2 items verticals (Trobades, Posts)"
81+
sidebar_right_stack_settings_form:
82+
settings_sidebar: "Barra lateral"
83+
settings_meetings: "Trobades"
84+
settings_posts: "Posts"
85+
title_sidebar: "Títol per la barra lateral"
86+
title_meetings: "Títol per les trobades"
87+
title_posts: "Títol pels posts"
88+
body: 'Text'
89+
link_text: 'Text de l''enllaç'
90+
link_url: 'URL de l''enllaç'
91+
image: 'Imatge de fons'
7992
stack_horizontal:
8093
name: 3 Items configurables (Horitzontal)
8194
stack_horizontal_settings_form:

0 commit comments

Comments
 (0)