Make group/index and index bootstrap4 compliant

Author: achan

app/styles/_variables.scss

@@ -18,9 +18,10 @@ $padding-m: 10px;
 $padding-l: 25px;
 $padding-xl: 42px;
 
-$small-device-break: 768px;
-$medium-device-break: 992px;
-$large-device-break: 1200px;
+$small-device-break: 544px;
+$medium-device-break: 768px;
+$large-device-break: 992px;
+$extra-large-device-break: 1200px;
 
 $nav-bar-height: 50px;
 $bulletin-announcements-color: $gray-blue-light;

app/styles/components/group-header.scss

@@ -52,7 +52,7 @@
     }
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     border-width: 0 1px;
     border-style: solid;
     border-color: $gray-extralight;
@@ -100,7 +100,7 @@
     }
   }
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     .group-details {
       .profile-picture-wrapper {
         text-align: center;

app/templates/group.hbs

@@ -1,21 +1,21 @@
 <div class="container group-header">
   <div class="row">
-    <header class="col-sm-12 group-banner"
+    <header class="col-md-12 group-banner"
             style="background-image: url('{{cloudinary-fetch url=model.bannerUrl width=1920}}')"
             data-auto-id="group-banner">
     </header>
   </div>
 
   <div class="row group-details">
-    <div class="col-xs-12 col-sm-2 col-md-offset-1">
+    <div class="col-xs-12 col-md-2 offset-lg-1">
       <div class="profile-picture-wrapper">
         <div class="profile-picture"
            data-auto-id="group-profile-picture"
            style="background-image: url('{{cloudinary-fetch url=model.profilePictureUrl width=200}}')"></div>
       </div>
     </div>
 
-    <div class="col-xs-12 col-sm-10 col-md-8">
+    <div class="col-xs-12 col-md-10 col-lg-8">
       <h1 class="group-name" data-auto-id="group-name">
         {{#link-to "group.index" model.slug}}{{model.name}}{{/link-to}}
       </h1>

app/templates/group/index.hbs

@@ -1,7 +1,7 @@
 <div class="container group-index" data-auto-id="group">
   <div class="row">
     {{#if posts.length}}
-      <section class="col-sm-7 col-md-offset-1 col-md-6 latest-news"
+      <section class="col-md-7 offset-lg-1 col-lg-6 latest-news"
         data-auto-id="group-posts">
         <h2>Latest news</h2>
         <div>
@@ -14,7 +14,7 @@
         </div>
       </section>
     {{/if}}
-    <section class="col-sm-5 col-md-4 about-group">
+    <section class="col-md-5 col-lg-4 about-group">
       <h2>About</h2>
       {{{group.aboutHtml}}}
     </section>

app/templates/index.hbs

@@ -8,7 +8,7 @@
   <section class="theme">
     <div class="container">
       <div class="row">
-        <div class="col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
+        <div class="offset-md-1 col-md-10 offset-lg-2 col-lg-8">
           As a congregation of the Montreal Chinese Alliance Church we believe
           <strong>because God loves us, we will love Jesus, love His people, and
           love the world, for Jesus' sake</strong>.
@@ -18,13 +18,13 @@
   </section>
   <section class="container around-church">
     <div class="row body">
-      <div class="col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
+      <div class="offset-md-1 col-md-10 offset-lg-2 col-lg-8">
         Want to know more about our church? Check out some of the groups within
         our church that may interest you.
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-offset-2 col-sm-4 group">
+      <div class="offset-md-2 col-md-4 group">
         {{#link-to "group.index" "childrens-church"}}
           <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/fabe359d-8611-4112-b675-842cd40ef57e.jpg"
                                       width=200
@@ -37,7 +37,7 @@
           {{/link-to}}
         </div>
       </div>
-      <div class="col-sm-4 group" {{action "viewGroup" "english-service"}}>
+      <div class="col-md-4 group" {{action "viewGroup" "english-service"}}>
         {{#link-to "group.index" "english-service"}}
           <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/5c7d76a8-d195-4907-951d-5b3fb00c438d.jpg"
                                       width=200