forcing aspect on picture and profile
This commit is contained in:
parent
4a79350836
commit
d22d67b38a
@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
.flex.justify-center.m-5.m-5.md:m-12.lg:m-20
|
.flex.justify-center.m-5.m-5.md:m-12.lg:m-20
|
||||||
.flex.flex-col.text-center{class: "w-full md:w-10/12"}
|
.flex.flex-col.text-center{class: "w-full md:w-10/12"}
|
||||||
|
The Picture box is landscape with ratio 3/4.
|
||||||
= simple_form_for @member do |f|
|
= simple_form_for @member do |f|
|
||||||
.grid.grid-cols-1.md:grid-cols-2.gap-10
|
.grid.grid-cols-1.md:grid-cols-2.gap-10
|
||||||
= render "merged/form/editor" , object: @member , field: :bio, form: f
|
= render "merged/form/editor" , object: @member , field: :bio, form: f
|
||||||
@ -16,9 +17,9 @@
|
|||||||
.grid.grid-cols-2.gap-10
|
.grid.grid-cols-2.gap-10
|
||||||
= f.input :arrived
|
= f.input :arrived
|
||||||
= f.input :left
|
= f.input :left
|
||||||
.flex.h-16.mt-2
|
.flex.h-16.mt-2.col-span-2
|
||||||
= image_tag(@member.picture_url , class: "align-middle mr-2") if @member.picture?
|
= image_tag(@member.picture_url , class: "align-middle mr-4") if @member.picture?
|
||||||
= f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
|
.w-full= f.input :picture , as: :file ,
|
||||||
label: (@member.picture.blank? ? "Add picture" : "Change picture")
|
label: (@member.picture.blank? ? "Add picture" : "Change picture")
|
||||||
= f.hidden_field :picture_cache
|
= f.hidden_field :picture_cache
|
||||||
.flex.justify-center.actions.m-10
|
.flex.justify-center.actions.m-10
|
||||||
|
@ -1,14 +1,15 @@
|
|||||||
= paginate @members
|
= paginate @members
|
||||||
|
|
||||||
.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-4
|
.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
|
||||||
- @members.each do |member|
|
- @members.each do |member|
|
||||||
.fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
|
.overflow-hidden.border.border-gray-100.shadow-sm
|
||||||
=link_to member do
|
.h-0.overflow-hidden.relative{class: "pt-[125%]"}
|
||||||
= image_for( member , class: "h-60 w-full object-cover")
|
=link_to member , class: "absolute h-60 top-0 left-0 w-full h-full" do
|
||||||
%h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
|
= image_for( member , class: "object-cover")
|
||||||
= member.name
|
%h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
|
||||||
.p-2.text-xs.bg-gray-50.text-black.font-bold.text-center
|
= member.name
|
||||||
= stayed member
|
.p-2.text-xs.bg-gray-50.text-black.font-bold.text-center
|
||||||
|
= stayed member
|
||||||
%div.h-full
|
%div.h-full
|
||||||
.p-5.text-center
|
.p-5.text-center
|
||||||
.m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
|
.m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
%div
|
%div
|
||||||
Pictures may have a small text, that will be diplayed on top of the
|
Pictures may have a small text, that will be diplayed on top of the
|
||||||
picure.
|
picure. The Picture box is landscape with ratio 3/4.
|
||||||
= simple_form_for @picture do |f|
|
= simple_form_for @picture do |f|
|
||||||
= f.error_notification
|
= f.error_notification
|
||||||
.flex.h-16.mt-2
|
.flex.h-16.mt-2
|
||||||
= image_tag(@picture.picture_url , class: "align-middle mr-2") if @picture.picture?
|
= image_tag(@picture.picture_url , class: "align-middle mr-2") if @picture.picture?
|
||||||
= f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
|
.w-full= f.input :picture , as: :file ,
|
||||||
label: (@picture.picture.blank? ? "Add picture" : "Change picture")
|
label: (@picture.picture.blank? ? "Add picture" : "Change picture")
|
||||||
= f.hidden_field :picture_cache
|
= f.hidden_field :picture_cache
|
||||||
= f.input :text , as: :text , input_html: { rows: 2 }
|
= f.input :text , as: :text , input_html: { rows: 2 }
|
||||||
|
@ -4,7 +4,8 @@
|
|||||||
.mr-2
|
.mr-2
|
||||||
= distance_of_time_in_words_to_now picture.happened
|
= distance_of_time_in_words_to_now picture.happened
|
||||||
ago
|
ago
|
||||||
= image_for( picture , "inset-0 h-full w-full object-fit hover:scale-105 ease-in duration-500")
|
.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")
|
||||||
-unless picture.text.blank?
|
-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
|
.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
|
.text-center.mt-2.text-white= picture.text
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
.border-r-4.mx-4
|
.border-r-4.mx-4
|
||||||
= sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
|
= sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
|
||||||
|
|
||||||
.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
|
.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
|
||||||
- @pictures.each do |picture|
|
- @pictures.each do |picture|
|
||||||
= render picture , picture: picture
|
= render picture , picture: picture
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
= f.error_notification
|
= f.error_notification
|
||||||
.flex.h-16.mt-2
|
.flex.h-16.mt-2
|
||||||
= image_tag(@story.picture_url , class: "align-middle mr-2") if @story.picture?
|
= image_tag(@story.picture_url , class: "align-middle mr-2") if @story.picture?
|
||||||
= f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
|
.w-full= f.input :picture , as: :file ,
|
||||||
label: (@story.picture.blank? ? "Add picture" : "Change picture")
|
label: (@story.picture.blank? ? "Add picture" : "Change picture")
|
||||||
= f.hidden_field :picture_cache
|
= f.hidden_field :picture_cache
|
||||||
= f.input :header
|
= f.input :header
|
||||||
|
Loading…
Reference in New Issue
Block a user