FeenixMakers/volunteers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

last story and last picture section style

Browse Source
This commit is contained in:
Torsten
2023-01-28 16:00:36 +02:00
parent 17a0ace013
commit 1cbb29f16a
12 changed files with 55 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/merged/section_preview/section_pictures.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 612 KiB

BIN
app/assets/images/merged/section_preview/section_story.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

2
app/helpers/members_helper.rb
View File

@ -1,6 +1,6 @@
module MembersHelper
def image_for(someone , classes = "")
def picture_for(someone , classes = "")
if someone.picture.blank?
image = asset_url("no_image.png")
else

2
app/views/members/index.html.haml
View File

@ -5,7 +5,7 @@
.overflow-hidden.border.border-gray-100.shadow-sm
.h-0.overflow-hidden.relative{class: "pt-[125%]"}
=link_to member , class: "absolute h-60 top-0 left-0 w-full h-full" do
= image_for( member , class: "object-cover")
= picture_for( member , class: "object-cover")
%h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
= member.name
.p-2.text-xs.bg-gray-50.text-black.font-bold.text-center

3
app/views/merged/view/_section_pictures.haml Normal file
View File

@ -0,0 +1,3 @@
.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
- Picture.all.limit(4).each do |picture|
= render "pictures/picture" , picture: picture

2
app/views/merged/view/_section_story.haml Normal file
View File

@ -0,0 +1,2 @@
- story = Story.last
= render_story story

4
app/views/pictures/_picture.haml
View File

@ -1,11 +1,11 @@
.group.relative.overflow-hidden
.flex.justify-between
.ml-2= link_to picture.member.name , member_path(picture.member) , class: :underline
.ml-2= link_to picture.member.name , main_app.member_path(picture.member) , class: :underline
.mr-2
= distance_of_time_in_words_to_now picture.happened
ago
.h-0.overflow-hidden.relative{class: "pt-[75%]"}
= image_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
= picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
-unless picture.text.blank?
.absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
.text-center.mt-2.text-white= picture.text

2
app/views/stories/_half.haml
View File

@ -1,6 +1,6 @@
%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
%div
= image_for( story , "h-56 w-full object-cover sm:h-full")
= picture_for( story , "h-56 w-full object-cover sm:h-full")
.p-8.md:p-12.lg:px-16.lg:py-24
.mx-auto.max-w-xl.text-center
%h2.text-2xl.font-bold.md:text-4xl

2
app/views/stories/_pic.haml
View File

@ -1,6 +1,6 @@
%section.flex.justify-center.p-8.flex-col.md:flex-row.m-20
.flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{class: "lg:w-2/3"}
= image_for(story ,"object-cover")
= picture_for(story ,"object-cover")
.flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
.flex-1
.text-center

2
app/views/stories/_text.haml
View File

@ -7,5 +7,5 @@
= distance_of_time_in_words_to_now story.happened
ago
.max-w-full.mt-4.gap-16.columns-1.md:columns-2.lg:columns-3.xl:columns-4{ prose_classes }
= image_for( story , "h-56 w-full object-cover sm:h-full")
= picture_for( story , "h-56 w-full object-cover sm:h-full")
= markdown(story.text)