Add post status administration (#105)

app/javascript/stylesheets/components/SiteSettings/PostStatuses/index.scss

@@ -0,0 +1,32 @@
+.postStatusList {
+  @extend
+    .p-0,
+    .m-0;
+ 
+  list-style: none;
+  
+  .postStatusEditable {
+    @extend
+      .d-flex,
+      .justify-content-between,
+      .p-3;
+
+    a {
+      cursor: pointer;
+
+      &:hover { text-decoration: underline; }
+    }
+
+    .postStatusFormCancelButton {
+      align-self: center;
+    }
+  }
+}
+
+.postStatusForm {
+  @extend
+    .d-flex,
+    .m-2;
+
+  column-gap: 16px;
+}

app/javascript/stylesheets/components/SiteSettings/index.scss

@@ -0,0 +1,7 @@
+.siteSettingsInfo {
+  text-align: center;
+
+  .error {
+    color: red;
+  }
+}

app/javascript/stylesheets/general/_components.scss

@@ -27,6 +27,35 @@ a {
   }
 }
 
+.multiColumnContainer {
+  @extend
+    .d-flex,
+    .justify-content-between,
+    .align-items-start;
+
+  flex-direction: row;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+
+    .postAndCommentsContainer { width: 100%; }
+  }
+}
+
+.multiRowContent {
+  @extend
+    .flex-grow-1,
+    .w-100;
+}
+
+.content {
+  @extend
+    .card,
+    .flex-grow-1,
+    .p-3,
+    .mb-3;
+}
+
 .sidebar {
   position: sticky;
   top: 79px;
@@ -48,6 +77,39 @@ a {
   }
 }
 
+.verticalNavigation {
+  @extend
+    .nav,
+    .flex-column,
+    .nav-pills,
+    .text-center,
+    .align-self-stretch;
+
+  .nav-link.active {
+    background-color: $astuto-black;
+  }
+}
+
+.drag-zone {
+  @extend
+    .align-self-center,
+    .pl-4,
+    .pr-4,
+    .pt-1,
+    .pb-1;
+
+  cursor: grab;
+
+  &.drag-zone-disabled {
+    cursor: not-allowed;
+
+    &:active { cursor: not-allowed; }
+  }
+
+  &:active { cursor: grabbing; }
+}
+
+
 @include media-breakpoint-down(sm) {
   .sidebar {
     position: relative;

app/javascript/stylesheets/icons/drag_icon.scss

@@ -0,0 +1,23 @@
+/* Code taken from: https://gist.github.com/JakeSidSmith/83c324dbe7e4d91ee8c52525b1d504d9 */
+/* Thanks JakeSidSmith */
+
+span.drag-icon {
+  display: inline-block;
+  width: 16px;
+  height: 8px;
+}
+
+span.drag-icon,
+span.drag-icon::before {
+  background-image: radial-gradient(black 40%, transparent 40%);
+  background-size: 4px 4px;
+  background-position: 0 100%;
+  background-repeat: repeat-x;
+}
+
+span.drag-icon::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 33%;
+}

app/javascript/stylesheets/main.scss

@@ -13,4 +13,11 @@
 @import 'components/Comments';
 @import 'components/LikeButton';
 @import 'components/Post';
-@import 'components/Roadmap';
+@import 'components/Roadmap';
+
+  /* Site Settings Components */
+  @import 'components/SiteSettings';
+  @import 'components/SiteSettings/PostStatuses';
+
+/* Icons */
+@import 'icons/drag_icon';