diff --git a/app/controllers/contact_messages_controller.rb b/app/controllers/contact_messages_controller.rb index 16faf981..d3243102 100644 --- a/app/controllers/contact_messages_controller.rb +++ b/app/controllers/contact_messages_controller.rb @@ -1,7 +1,6 @@ class ContactMessagesController < ApplicationController def new @contact_message = ContactMessage.new - @about = About.first end def create @@ -55,4 +54,4 @@ def recaptcha_valid? flash[:alert].push('reCaptcha failed, please try again') false end -end \ No newline at end of file +end diff --git a/app/frontend/packs/styles/base/_mixins.scss b/app/frontend/packs/styles/base/_mixins.scss index a337aac2..60138086 100644 --- a/app/frontend/packs/styles/base/_mixins.scss +++ b/app/frontend/packs/styles/base/_mixins.scss @@ -5,6 +5,7 @@ // Desktop 1100px => ~ $breakpoints: ( + 'mobile' : ( max-width: 766px ), 'tablet' : ( min-width: 767px ), 'desktop': ( min-width: 1100px ), 'extra-wide': ( min-width: 2560px ) diff --git a/app/frontend/packs/styles/components/_forms.scss b/app/frontend/packs/styles/components/_forms.scss index 28d50180..a3e40566 100644 --- a/app/frontend/packs/styles/components/_forms.scss +++ b/app/frontend/packs/styles/components/_forms.scss @@ -187,6 +187,7 @@ @include respond-to(tablet) { align-items: center; flex-direction: row; + justify-content: space-between; margin: 20px 0; } diff --git a/app/frontend/packs/styles/custom/about.scss b/app/frontend/packs/styles/custom/about.scss index 6e8e4b51..41065521 100644 --- a/app/frontend/packs/styles/custom/about.scss +++ b/app/frontend/packs/styles/custom/about.scss @@ -3,10 +3,10 @@ @use '../base/mixins' as *; @use '../base/typography'; -.about-contact-container { +.profile-image-container { display: flex; flex-wrap: wrap; - max-width: 550px; + justify-content: center; position: relative; width: 100%; @@ -19,7 +19,10 @@ } .profile-image { - width: 50%; + margin-bottom: 0.5em; + margin-top: 1.4em; + max-width: 300px; + width: 100%; @include respond-to(tablet) { width: 100%; @@ -27,68 +30,16 @@ } } -.about-contact-details-container { - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: center; - padding-left: 20px; - position: relative; - width: 50%; - - @include respond-to(tablet) { - margin-top: 10px; - padding-left: 0; - width: 100%; - - .name { - font-size: 1.3em; - } - - .location { - font-size: 1.1em; - } - } - - .name { - font-size: 1.3em; - font-weight: 400; - margin-bottom: 10px; +.about-about-me-container { + @include respond-to(mobile) { + display: flex; + justify-content: center; } - .location { - font-size: 1em; - } - -} - - -.about-contact-links-section { - align-items: center; - box-sizing: border-box; - display: flex; - flex-direction: row; - margin-top: 10px; - position: relative; - width: 100%; - - a { - display: inline; - line-height: 1em; - padding: 5px; - - + * { - margin-left: 10px; - } - } - - .about-contact-link { - flex: 0 1 50%; - height: fit-content; - padding: 15px 0; - - + * { - margin-left: 20px; + .markdown { + @include respond-to(mobile) { + max-width: 50ch; + text-align: justify; } } } diff --git a/app/frontend/packs/styles/custom/contact.scss b/app/frontend/packs/styles/custom/contact.scss index 7107a43c..0e982042 100644 --- a/app/frontend/packs/styles/custom/contact.scss +++ b/app/frontend/packs/styles/custom/contact.scss @@ -3,6 +3,11 @@ @use '../base/mixins' as *; @use '../base/typography'; +.item-content.contact-messages-container { + align-content: center; + align-items: center; + flex-direction: column; +} .contact-details-container { margin-top: 10px; @@ -19,6 +24,11 @@ .contact-form-container { flex: 0 1 600px; + width: 100%; + + @include respond-to(tablet) { + width: 450px; + } } .embedded-text-area.contact { @@ -57,7 +67,10 @@ #contact-messages-new-form { padding: 0; - @include respond-to(tablet) { - padding-left: 20px; + + .embedded-input-box { + @include respond-to(tablet) { + width: 75%; + } } } diff --git a/app/views/abouts/show.html.erb b/app/views/abouts/show.html.erb index cf67f362..6020c498 100644 --- a/app/views/abouts/show.html.erb +++ b/app/views/abouts/show.html.erb @@ -13,9 +13,9 @@
<%= render partial: 'partials/admin_toolbar', locals: { model: @about, singular: true } %> - <%= render partial: 'partials/contact_details', locals: { model: @about, contact_link: true } %> + <%= render partial: 'partials/profile_image', locals: { model: @about, contact_link: true } %> -
+
<%= markdown_admin(@about.about_me) %>
-
\ No newline at end of file + diff --git a/app/views/contact_messages/new.html.erb b/app/views/contact_messages/new.html.erb index 6d70ca4c..66878131 100644 --- a/app/views/contact_messages/new.html.erb +++ b/app/views/contact_messages/new.html.erb @@ -10,10 +10,8 @@ Talk to me <% end %> -
-
- <%= render partial: 'partials/contact_details', locals: { model: @about, contact_link: false } %> -
+
+

👋 Send me a message

<%= render partial: 'contact_messages/new_form', locals: {contact_message: @contact_message} %>
diff --git a/app/views/partials/_contact_details.html.erb b/app/views/partials/_contact_details.html.erb deleted file mode 100644 index 820575be..00000000 --- a/app/views/partials/_contact_details.html.erb +++ /dev/null @@ -1,25 +0,0 @@ -
- - <%= image_tag(image_path_helper(image_model: model.profile_image), class: 'profile-image about', alt: 'profile image') %> -
-
- <%= model.name %> -
-
- <%= model.location %> -
-
- -
- <% if contact_link %> - <%= link_to('Contact', contact_path, class: 'standard-button about-contact-link', itemprop: 'significantLink') %> - <% end %> - - <%= image_tag('icons/linkedin-icon.svg', alt: 'LinkedIn logo') %> - - - <%= image_tag('icons/github-icon.svg', alt: 'Github logo') %> - -
- -
diff --git a/app/views/partials/_profile_image.html.erb b/app/views/partials/_profile_image.html.erb new file mode 100644 index 00000000..4a65eb39 --- /dev/null +++ b/app/views/partials/_profile_image.html.erb @@ -0,0 +1,3 @@ +
+ <%= image_tag(image_path_helper(image_model: model.profile_image), class: 'profile-image about', alt: 'profile image') %> +
diff --git a/spec/feature/about_feature_spec.rb b/spec/feature/about_feature_spec.rb index 1839f161..e88fc463 100644 --- a/spec/feature/about_feature_spec.rb +++ b/spec/feature/about_feature_spec.rb @@ -37,11 +37,9 @@ def some(code) expect(page).to have_content('Contact email updated!') click_on('Return') expect(page).to have_content('new section name') - expect(page).to have_content('new about name') - expect(page).to have_content('new about location') expect(page.html).to match('

new about me text in markdown

') expect(page).to have_selector('code') expect(page).to have_selector('img.profile-image') end end -end \ No newline at end of file +end diff --git a/spec/feature/contact_message_feature_spec.rb b/spec/feature/contact_message_feature_spec.rb index 0b839503..fe0015d4 100644 --- a/spec/feature/contact_message_feature_spec.rb +++ b/spec/feature/contact_message_feature_spec.rb @@ -9,7 +9,6 @@ visit('/') click_on('CONTACT') expect(page).to have_current_path('/contact') - expect(page).to have_content(@about.name) fill_in('contact_message[from]', with: 'new from name') fill_in('contact_message[email]', with: 'email@example.com') fill_in('contact_message[subject]', with: 'new message') @@ -20,4 +19,4 @@ expect(page).to have_content('Message sent! You should receive a confirmation email shortly.') end end -end \ No newline at end of file +end diff --git a/spec/views/abouts/index.html.erb_spec.rb b/spec/views/abouts/index.html.erb_spec.rb index df14ce81..ad0763c4 100644 --- a/spec/views/abouts/index.html.erb_spec.rb +++ b/spec/views/abouts/index.html.erb_spec.rb @@ -11,11 +11,6 @@ render template: 'abouts/show' expect(rendered).to match(about.about_me) - expect(rendered).to match(about.linkedin_link) - expect(rendered).to match(about.github_link) - expect(rendered).to match(about.name) - expect(rendered).to match(about.location) - expect(rendered).to match(contact_path) expect(rendered).not_to match('toolbar-container') end @@ -27,4 +22,4 @@ expect(rendered).to match('toolbar-container') end end -end \ No newline at end of file +end diff --git a/spec/views/contact_messages/new.html.erb_spec.rb b/spec/views/contact_messages/new.html.erb_spec.rb index e22656b5..14c8c703 100644 --- a/spec/views/contact_messages/new.html.erb_spec.rb +++ b/spec/views/contact_messages/new.html.erb_spec.rb @@ -17,11 +17,6 @@ expect(rendered).to match('contact_message_content') expect(rendered).to match(contact_messages_path) end - - it 'it renders about details' do - expect(rendered).to match(about.name) - expect(rendered).to match(about.location) - end end end -end \ No newline at end of file +end