Merge pull request #165 from openmcac/bootstrap4

Upgrade to Bootstrap 4

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/announcement-editor.scss

@@ -50,12 +50,13 @@ $announcement-height: 60px;
     }
 
     .url {
-      width: 100%;
-      border-style: none;
       border-bottom-style: solid;
       border-bottom-width: 1px;
       border-color: $gray-light;
+      border-style: none;
+      display: none;
       margin-bottom: $padding-m;
+      width: 100%;
     }
 
     .handle {

app/styles/app.scss

@@ -10,6 +10,7 @@
 @import "components/mcac-header.scss";
 @import "components/pace";
 @import "components/page-view";
+@import "components/pagination";
 @import "components/post-composer";
 @import "components/post-form";
 @import "components/post-view";
@@ -27,6 +28,7 @@
 body {
   background-color: $white;
   padding-top: $nav-bar-height;
+  font-size: 14px;
   @include body-font();
 }
 

app/styles/components/bulletin-cover.scss

@@ -63,7 +63,7 @@
     }
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     .inner {
       audio {
         max-width: initial;
@@ -83,7 +83,7 @@
     }
   }
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     .inner {
       padding: 0 $padding-xl;
     }

app/styles/components/bulletin-navigator.scss

@@ -4,18 +4,18 @@
   position: absolute;
   z-index: 100;
 
+  a, a:hover, a:visited, a:not([href]) {
+    color: $white;
+    text-decoration: none;
+  }
+
   .nav-button {
     background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
     background: rgba(0, 0, 0, .5);
     padding: $padding-m;
-
-    &, &:hover {
-      color: $white;
-      text-decoration: none;
-    }
   }
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-left: $padding-xl;
   }
 }

app/styles/components/bulletin-view.scss

@@ -57,8 +57,8 @@
   }
 
   @media only screen and
-    (min-width: $small-device-break) and
-    (max-width: $medium-device-break) {
+    (min-width: $medium-device-break) and
+    (max-width: $large-device-break) {
     .container {
     }
 
@@ -80,7 +80,7 @@
     }
   }
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     .service-order {
       text-align: right;
 

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/styles/components/mcac-header.scss

@@ -1,8 +1,9 @@
 .navbar {
-  z-index: 100;
   background-color: $white;
   border-style: none;
+  padding: 0;
   width: 100%;
+  z-index: 100;
 
   .navbar-header {
     float: none;
@@ -14,6 +15,7 @@
       color: $black;
       float: none;
       line-height: $nav-bar-height;
+      margin-right: 0;
       padding: 0;
       position: relative;
 
@@ -35,7 +37,7 @@
     display: initial !important;
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     .navbar-header .navbar-brand {
       margin-left: 0;
     }

app/styles/components/nav-bar.scss

@@ -35,7 +35,7 @@
     display: inline-block;
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     .navbar-brand {
       padding-left: 15px;
       padding-right: 15px;

app/styles/components/pagination.scss

@@ -0,0 +1,30 @@
+.pagination-wrapper {
+  text-align: center;
+
+  .pagination {
+    li {
+      background-color: $white;
+      display: inline-block;
+      font-size: 18px;
+      margin: $padding-s;
+      padding: $padding-s $padding-m;
+    }
+
+    a, a:visited {
+      color: $gray-dark;
+    }
+
+    .arrow {
+      &.prev {
+      }
+
+      &.next {
+      }
+    }
+  }
+
+  .page-number {
+    &.active {
+    }
+  }
+}