From 24292edcd0cb4ee4f66389c12ae2e33b36cc6629 Mon Sep 17 00:00:00 2001 From: Manuel <109959820+ManuelMoeri@users.noreply.github.com> Date: Mon, 27 May 2024 11:00:37 +0200 Subject: [PATCH] Bug/692 Fix scrolling behaviour of side menu in userprofile (#700) * squash all commits * Fix scrolling after rebase * Fix one feature but break another for now * Fix spacing of skills page on person * Fix problem with overlapping when scrolling * Fix first test * Fix styling after rebase * Resolve conversations from review --- app/assets/stylesheets/styles.scss | 19 ++++--- .../controllers/scroll_controller.js | 12 ++++ app/views/layouts/person.html.haml | 16 +++--- app/views/people/_cv.html.haml | 8 +-- .../people/people_skills/index.html.haml | 21 +++---- .../controllers/api/people_controller_spec.rb | 2 +- .../api/person_roles_controller_spec.rb | 2 +- spec/features/advanced_trainings_spec.rb | 2 +- spec/features/profile_scroll_to_spec.rb | 7 ++- spec/fixtures/activities.yml | 32 +++++++++++ spec/fixtures/advanced_trainings.yml | 32 ++++++++++- spec/fixtures/educations.yml | 28 ++++++++++ spec/fixtures/people.yml | 24 +++++++- spec/fixtures/projects.yml | 56 ++++++++++++++++++- spec/models/activity_spec.rb | 8 ++- spec/models/advanced_training_spec.rb | 7 ++- spec/models/education_spec.rb | 8 ++- spec/models/project_spec.rb | 10 +++- 18 files changed, 247 insertions(+), 47 deletions(-) diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss index aa423760c..84142ea34 100644 --- a/app/assets/stylesheets/styles.scss +++ b/app/assets/stylesheets/styles.scss @@ -288,6 +288,12 @@ pzsh-topbar { height: min-content; } +.profile-header-and-tabs { + position: sticky; + top: 80px; + background-color: white; +} + .skills-selected { background-color: $skills-blue; color: white; @@ -306,12 +312,6 @@ pzsh-topbar { background-color: #2c97a6; } -.side-container { - max-height: 70em; - overflow-y: scroll; - overflow-x: hidden; -} - .skills-search-field { max-width: 300px; } @@ -323,4 +323,9 @@ pzsh-topbar { .center-xy{ align-items: center; justify-content: center; -} \ No newline at end of file +} + +.profile-sidebar { + position: sticky; + top: 204px; +} diff --git a/app/javascript/controllers/scroll_controller.js b/app/javascript/controllers/scroll_controller.js index e19938591..55bf0cf8c 100644 --- a/app/javascript/controllers/scroll_controller.js +++ b/app/javascript/controllers/scroll_controller.js @@ -5,6 +5,18 @@ export default class extends Controller { static targets = ["listItem", "scrollItem"] currentSelectedIndex = 0; + connect() { + document.addEventListener("scroll", () => { + this.scrollEvent(); + }); + } + + disconnect() { + document.removeEventListener("scroll", () => { + this.scrollEvent(); + }); + } + scrollToElement({params}) { document.getElementById(params.id).scrollIntoView({ behavior: "smooth" diff --git a/app/views/layouts/person.html.haml b/app/views/layouts/person.html.haml index 75caf38a0..aaf4a42e0 100644 --- a/app/views/layouts/person.html.haml +++ b/app/views/layouts/person.html.haml @@ -1,10 +1,10 @@ = content_for :content do - %div.mt-2 - =render partial:"people/search", :locals => {person: @person} + %div.profile-header-and-tabs.pt-2 + %div + =render partial:"people/search", :locals => {person: @person} %div{"data-controller": "profile-tab"} - = render "application/tabbar", tabs: person_tabs(@person) do - =link_to image_tag("export.svg", class: "text-primary")+ "Export", export_cv_person_path(@person), class: "btn text-primary", data: { turbo_frame: "remote_modal" } - %turbo-frame{id: "tab-content"} - = yield -= render template: "layouts/application" - \ No newline at end of file + = render "application/tabbar", tabs: person_tabs(@person) do + =link_to image_tag("export.svg", class: "text-primary")+ "Export", export_cv_person_path(@person), class: "btn text-primary", data: { turbo_frame: "remote_modal" } + %turbo-frame{id: "tab-content"} + = yield += render template: "layouts/application" \ No newline at end of file diff --git a/app/views/people/_cv.html.haml b/app/views/people/_cv.html.haml index de36a69d0..337f93869 100644 --- a/app/views/people/_cv.html.haml +++ b/app/views/people/_cv.html.haml @@ -1,8 +1,8 @@ %div.d-flex.flex-row.mt-3{"data-controller": "scroll"} - %div.w-20.bg-skills-gray.me-3.border.border-light-subtle.border-2.min-height - = render('scroll_to_menu', - items: %w[personal-data core-competences educations advanced-trainings activities projects], translate: true) - %div.w-80.side-container#scroll-content{"data-action": "scroll->scroll#scrollEvent"} + %div.w-20.bg-skills-gray.me-3.border.border-light-subtle.border-2.min-height.profile-sidebar + = render 'scroll_to_menu', + items: %w[personal-data core-competences educations advanced-trainings activities projects], translate: true + %div.w-80#scroll-content{"data-action": "scroll->scroll#scrollEvent"} = render('profile') = render('core_competences') = render('people/person_relations/index', list: @person.educations.list, id: "educations") diff --git a/app/views/people/people_skills/index.html.haml b/app/views/people/people_skills/index.html.haml index 42f4ec4a6..b09169787 100644 --- a/app/views/people/people_skills/index.html.haml +++ b/app/views/people/people_skills/index.html.haml @@ -1,15 +1,16 @@ %div.d-flex.flex-row.w-100.mt-2 %turbo-frame#people-skill-form.d-flex.flex-row.w-100.gap-2{"data-controller": "scroll"} - %div.w-20.d-flex.flex-column.me-3.gap-2 - %div.people-skills-actions.d-flex.flex-column - = render('people/scroll_to_menu', items: Category.all_parents.pluck(:title), translate: false) - %div.people-skills-actions - = link_to image_tag("pencil-square.svg", {class: "me-1"})+ t("helpers.submit.edit", model: Skill.model_name.plural.capitalize()), - people_skills_edit_person_path(@person), class: "d-flex align-items-center p-3" - %div.people-skills-actions - = link_to image_tag("plus-lg.svg", {class: "me-1"}) + t("helpers.submit.add", model: Skill), new_person_people_skill_path(@person), - class: "d-flex align-items-center p-3", data: { turbo_frame: "remote_modal"} - %div.w-80.side-container#scroll-content{"data-action": "scroll->scroll#scrollEvent"} + %div.w-20.d-flex.flex-column.me-3.mt-3 + %div.profile-sidebar + %div.people-skills-actions.d-flex.flex-column.test-class + = render('people/scroll_to_menu', items: Category.all_parents.pluck(:title), translate: false) + %div.people-skills-actions.edit-skills-buttton.mt-2 + = link_to image_tag("pencil-square.svg", {class: "me-1"})+ t("helpers.submit.edit", model: Skill.model_name.plural.capitalize()), + people_skills_edit_person_path(@person), class: "d-flex align-items-center p-3" + %div.people-skills-actions.add-skills-button.mt-2 + = link_to image_tag("plus-lg.svg", {class: "me-1"}) + t("helpers.submit.add", model: Skill), new_person_people_skill_path(@person), + class: "d-flex align-items-center p-3", data: { turbo_frame: "remote_modal"} + %div.w-80#scroll-content{"data-action": "scroll->scroll#scrollEvent"} %p.d-flex.align-items-center.profile-header Skills ="(#{@person.people_skills.count})" diff --git a/spec/controllers/api/people_controller_spec.rb b/spec/controllers/api/people_controller_spec.rb index ab77f4f68..802a202d6 100644 --- a/spec/controllers/api/people_controller_spec.rb +++ b/spec/controllers/api/people_controller_spec.rb @@ -84,7 +84,7 @@ people = json['data'] - expect(people.count).to eq(6) + expect(people.count).to eq(7) alice_attrs = people.first['attributes'] expect(alice_attrs.count).to eq(1) expect(alice_attrs.first[1]).to eq('Alice Mante') diff --git a/spec/controllers/api/person_roles_controller_spec.rb b/spec/controllers/api/person_roles_controller_spec.rb index ff7b12b59..5c40cf140 100644 --- a/spec/controllers/api/person_roles_controller_spec.rb +++ b/spec/controllers/api/person_roles_controller_spec.rb @@ -11,7 +11,7 @@ person_roles = json['data'] - expect(person_roles.count).to eq(8) + expect(person_roles.count).to eq(9) expect(person_roles.first['attributes'].count).to eq(2) json_object_includes_keys(person_roles.first['attributes'], keys) json_object_includes_keys(person_roles.first['relationships'], relationships) diff --git a/spec/features/advanced_trainings_spec.rb b/spec/features/advanced_trainings_spec.rb index 0f95a7c50..11ed6981d 100644 --- a/spec/features/advanced_trainings_spec.rb +++ b/spec/features/advanced_trainings_spec.rb @@ -12,7 +12,7 @@ it 'shows all' do within('turbo-frame#advanced_training') do expect(page).to have_content('2010 - 2012') - expect(page).to have_content('course about how to clean') + expect(page).to have_content('Course about how to clean') end end diff --git a/spec/features/profile_scroll_to_spec.rb b/spec/features/profile_scroll_to_spec.rb index bbd5b51b6..ca99864d6 100644 --- a/spec/features/profile_scroll_to_spec.rb +++ b/spec/features/profile_scroll_to_spec.rb @@ -1,15 +1,16 @@ require 'rails_helper' describe 'Profile scroll-to', type: :feature, js: true do - let(:bob) { people(:bob) } + let(:longmax) { people(:longmax) } before(:each) do sign_in auth_users(:user), scope: :auth_user visit root_path + Capybara.page.driver.browser.manage.window.maximize end it 'Should change background of selected section' do - visit person_path(bob) + visit person_path(longmax) page.find('span', text: 'Ausbildung').click expect(page.all('div', text: 'Ausbildung')[0]).to have_css('.skills-selected') @@ -18,7 +19,7 @@ end it 'Should be in viewport when clicked on list item' do - visit person_path(bob) + visit person_path(longmax) page.find('span', text: 'Weiterbildung').click in_view = evaluate_script("(function(el) { diff --git a/spec/fixtures/activities.yml b/spec/fixtures/activities.yml index 159caf0a9..839703b82 100644 --- a/spec/fixtures/activities.yml +++ b/spec/fixtures/activities.yml @@ -32,3 +32,35 @@ ascom: year_to: 2015 year_from: 2010 person: alice + +novartis: + description: Novartis + updated_by: MyString + role: Project Manager + year_to: 2005 + year_from: 2000 + person: longmax + +ubs: + description: UBS + updated_by: MyString + role: User Experience Consultant + year_to: 2010 + year_from: 2005 + person: longmax + +roche: + description: Roche + updated_by: MyString + role: Scrum Master + year_to: 2014 + year_from: 2010 + person: longmax + +migros: + description: Migros + updated_by: MyString + role: Businessman + year_to: 2020 + year_from: 2014 + person: longmax \ No newline at end of file diff --git a/spec/fixtures/advanced_trainings.yml b/spec/fixtures/advanced_trainings.yml index 82ef4ca14..6f0f266f3 100644 --- a/spec/fixtures/advanced_trainings.yml +++ b/spec/fixtures/advanced_trainings.yml @@ -17,15 +17,43 @@ # Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html course: - description: course about how to clean + description: Course about how to clean updated_by: bob year_to: 2012 year_from: 2010 person: bob education: - description: was nice + description: Was nice updated_by: alice year_to: 2015 year_from: 2011 person: alice + +training: + description: Training how to relax properly + updated_by: longmax + year_to: 2005 + year_from: 2000 + person: longmax + +scholarship: + description: Course about building a house + updated_by: longmax + year_to: 2010 + year_from: 2005 + person: longmax + +education: + description: Further training about writing music + updated_by: longmax + year_to: 2015 + year_from: 2010 + person: longmax + +tutoring: + description: Further training to programming ruby + updated_by: longmax + year_to: 2020 + year_from: 2015 + person: longmax diff --git a/spec/fixtures/educations.yml b/spec/fixtures/educations.yml index 5706233cb..2b6e1890b 100644 --- a/spec/fixtures/educations.yml +++ b/spec/fixtures/educations.yml @@ -29,3 +29,31 @@ msc: year_to: 2015 year_from: 2010 person: alice + +mscp: + location: Brookville Technical College + title: MSc in physics + year_to: 2005 + year_from: 2000 + person: longmax + +mod: + location: University of New York + title: Master of Design + year_to: 2010 + year_from: 2005 + person: longmax + +moe: + location: Iceborough College + title: Master of Engineering + year_to: 2014 + year_from: 2010 + person: longmax + +mscw: + location: University of Applied Sciences Bern + title: MSc in writing + year_to: 2020 + year_from: 2014 + person: longmax \ No newline at end of file diff --git a/spec/fixtures/people.yml b/spec/fixtures/people.yml index dff9eb518..5e53a1e7e 100644 --- a/spec/fixtures/people.yml +++ b/spec/fixtures/people.yml @@ -116,4 +116,26 @@ hope: title: BSc in Archeology competence_notes: Ruby email: hope@example.com - department: ux \ No newline at end of file + department: ux +longmax: + birthdate: 2003-02-05 01:01:01 + location: Biel + marital_status: <%= Person.marital_statuses[:single] %> + name: Longmax Smith + nationality: ZW + roles: [software-engineer] + company: firma + title: BSc in Architecture + competence_notes: | + C + Bash + Java + Ruby + LaTex + Puppet + HTML + CSS + Spring + .NET Maui + email: longmax@example.com + department: sys \ No newline at end of file diff --git a/spec/fixtures/projects.yml b/spec/fixtures/projects.yml index d407b33d9..8935af915 100644 --- a/spec/fixtures/projects.yml +++ b/spec/fixtures/projects.yml @@ -32,7 +32,61 @@ google: description: I learned so much title: google role: Developer - technology: java + technology: Java year_to: 2015 year_from: 2012 person: alice + +construction analyst: + description: Analyzing stuff + title: construction analyst + role: Analyst + technology: Graphs + year_to: 2005 + year_from: 2000 + person: longmax + +community manager: + description: Trying to make the community happy + title: community manager + role: Manager + technology: Discord + year_to: 2010 + year_from: 2005 + person: longmax + +salesman: + description: Selling drums + title: salesman + role: Sales + technology: HTML + year_to: 2014 + year_from: 2010 + person: longmax + +it director: + description: Beeing responsible for lots of people + title: it director + role: Director + technology: Hitobito + year_to: 2020 + year_from: 2014 + person: longmax + +system engineer: + description: Engineering lots of different stuff + title: system engineer + role: Engineer + technology: Java + year_to: 2021 + year_from: 2020 + person: longmax + +fisherman : + description: Fishing and selling the fish + title: fisherman + role: Fisher + technology: Boat driving + year_to: 2022 + year_from: 2021 + person: longmax \ No newline at end of file diff --git a/spec/models/activity_spec.rb b/spec/models/activity_spec.rb index a456fe128..7f11b3044 100644 --- a/spec/models/activity_spec.rb +++ b/spec/models/activity_spec.rb @@ -70,8 +70,12 @@ expect(list[1].description).to eq('test2') expect(list[2].description).to eq('test4') expect(list[3].description).to eq('test3') - expect(list[4].description).to eq('Ascom') - expect(list[5].description).to eq('Swisscom') + expect(list[4].description).to eq('Migros') + expect(list[5].description).to eq('Ascom') + expect(list[6].description).to eq('Roche') + expect(list[7].description).to eq('UBS') + expect(list[8].description).to eq('Swisscom') + expect(list[9].description).to eq('Novartis') end end diff --git a/spec/models/advanced_training_spec.rb b/spec/models/advanced_training_spec.rb index b7b7ce5d8..ce68851e7 100644 --- a/spec/models/advanced_training_spec.rb +++ b/spec/models/advanced_training_spec.rb @@ -72,8 +72,11 @@ expect(list[3].description).to eq('test4') expect(list[4].description).to eq('test5') expect(list[5].description).to eq('test6') - expect(list[6].description).to eq('was nice') - expect(list[7].description).to eq('course about how to clean') + expect(list[6].description).to eq('Further training to programming ruby') + expect(list[7].description).to eq('Further training about writing music') + expect(list[8].description).to eq('Course about how to clean') + expect(list[9].description).to eq('Course about building a house') + expect(list[10].description).to eq('Training how to relax properly') end end diff --git a/spec/models/education_spec.rb b/spec/models/education_spec.rb index 823d0b422..3b8c503c0 100644 --- a/spec/models/education_spec.rb +++ b/spec/models/education_spec.rb @@ -70,8 +70,12 @@ expect(list[1].location).to eq('test3') expect(list[2].location).to eq('test4') expect(list[3].location).to eq('test2') - expect(list[4].location).to eq('University of London') - expect(list[5].location).to eq('Uni Bern') + expect(list[4].location).to eq('University of Applied Sciences Bern') + expect(list[5].location).to eq('University of London') + expect(list[6].location).to eq('Iceborough College') + expect(list[7].location).to eq('University of New York') + expect(list[8].location).to eq('Uni Bern') + expect(list[9].location).to eq('Brookville Technical College') end end diff --git a/spec/models/project_spec.rb b/spec/models/project_spec.rb index ea280a71b..da1a0fdaa 100644 --- a/spec/models/project_spec.rb +++ b/spec/models/project_spec.rb @@ -81,8 +81,14 @@ expect(list[1].title).to eq('test2') expect(list[2].title).to eq('test4') expect(list[3].title).to eq('test3') - expect(list[4].title).to eq('google') - expect(list[5].title).to eq('duckduckgo') + expect(list[4].title).to eq('fisherman') + expect(list[5].title).to eq('system engineer') + expect(list[6].title).to eq('it director') + expect(list[7].title).to eq('google') + expect(list[8].title).to eq('salesman') + expect(list[9].title).to eq('duckduckgo') + expect(list[10].title).to eq('community manager') + expect(list[11].title).to eq('construction analyst') end end