refactor about and contact pages

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
+end

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 )

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;
   }
 

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,76 +19,27 @@
   }
 
   .profile-image {
-    width: 50%;
+    margin-bottom: 0.5em;
+    margin-top: 1.4em;
+    max-width: 300px;
+    width: 100%;
 
     @include respond-to(tablet) {
       width: 100%;
     }
   }
 }
 
-.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;
     }
   }
 }

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%;
+    }
   }
 }

app/views/abouts/show.html.erb

@@ -13,9 +13,9 @@
 <section class='reading-pane' itemscope itemtype="http://schema.org/AboutPage">
   <%= 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 } %>
 
-  <div itemprop="mainContentOfPage">
+  <div class='about-about-me-container' itemprop="mainContentOfPage">
     <%= markdown_admin(@about.about_me) %>
   </div>
-</section>
+</section>

app/views/contact_messages/new.html.erb

@@ -10,10 +10,8 @@
   Talk to me
 <% end %>
 
-<div class='item-content' itemscope itemtype="https://schema.org/ContactPage">
-  <div class='contact-details-container' >
-    <%= render partial: 'partials/contact_details', locals: { model: @about, contact_link: false } %>
-  </div>
+<div class='item-content contact-messages-container' itemscope itemtype="https://schema.org/ContactPage">
+  <h2>👋 Send me a message</h2>
 
   <%= render partial: 'contact_messages/new_form', locals: {contact_message: @contact_message} %>
 </div>

app/views/partials/_profile_image.html.erb

@@ -0,0 +1,3 @@
+<div class='profile-image-container'>
+  <%= image_tag(image_path_helper(image_model: model.profile_image), class: 'profile-image about', alt: 'profile image') %>
+</div>

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('<h1>new about me text in markdown</h1>')
       expect(page).to have_selector('code')
       expect(page).to have_selector('img.profile-image')
     end
   end
-end
+end

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 protected]')
       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
+end

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
+end

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
+end