make person overview and edit view responsive

puzzle · Feb 27, 2024 · 8f7bbcf · 8f7bbcf
1 parent dab4f5a
commit 8f7bbcf
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/app/views/people/edit.html.haml b/app/views/people/edit.html.haml
@@ -1,6 +1,6 @@
 %turbo-frame{id: "#{dom_id @person}"}
   = form_with model: @person do |form|
-    %div.d-flex.justify-content-between
+    %div.d-flex.justify-content-between.flex-lg-row.flex-md-row.flex-sm-column.flex-column.overflow-scroll
       %div.pe-5
         %img.rounded-circle{src: "/api/people/#{@person.id}/picture", width: '141', height: '141'}
         = form.file_field :picture
@@ -65,5 +65,6 @@
         %div.border.border-dark-subtle.mt-1.p-2.rounded
           - @person.language_skills.each do |language|
             %div.mb-1= "#{language.language}: #{language.level} - #{language.certificate}"
-    = form.submit :Speichern, class: "btn btn-primary me-3"
-    = link_to "Abbrechen", person_path
+    %div.mt-3
+      = form.submit :Speichern, class: "btn btn-primary me-3"
+      = link_to "Abbrechen", person_path
diff --git a/app/views/people/show.html.haml b/app/views/people/show.html.haml
@@ -4,7 +4,7 @@
     's Profile
 
 %turbo-frame{id: "#{dom_id @person}"}
-  %div.d-flex.justify-content-between
+  %div.d-flex.justify-content-between.flex-lg-row.flex-md-row.flex-sm-column.flex-column.overflow-scroll
     %div
       %img.rounded-circle{src: "/api/people/#{@person.id}/picture", width: '141', height: '141'}
       %div.mt-3= link_to "Bearbeiten",  edit_person_path