Add inbox guidelines to users (#2473)

app/assets/javascripts/initializers/initScrolling.js.erb

@@ -73,10 +73,8 @@ function insertVideos(video_articles) {
   video_articles.forEach(function(video_article){
     var existingEl = document.getElementById("video-article-"+video_article.id);
     if(!existingEl) {
-      console.log('existing')
       var newHTML = buildVideoArticleHTML(video_article)
       newVideosHTML += newHTML
-      console.log(newHTML)
     }
   });
 
@@ -87,7 +85,6 @@ function insertVideos(video_articles) {
   var singleArticles = document.getElementsByClassName("single-article");
   var lastElement = singleArticles[singleArticles.length - 1];
   insertAfter(newNode, lastElement);
-  console.log(nextPage)
   if (nextPage > 0) {
     fetching = false;
   }

app/assets/stylesheets/user-profile-header.scss

@@ -392,45 +392,62 @@
     border: 1px solid #d6d6d6;
     box-shadow: 3px 3px 0px #bababa;
     border-radius: 3px;
-    max-width: 90%;
-    width: 80%;
+    max-width: 95%;
+    width: 600px;
 
     .message-form {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       flex-wrap: nowrap;
       justify-content: space-around;
       align-items: center;
       align-content: stretch;
-
+      @media screen and ( min-width: 500px ){
+        flex-direction: row;
+      }
       textarea {
         border-radius: 3px;
         border: 1px solid #d6d6d6;
         font-size: 14px;
         margin: 10px;
         padding: 5px;
-        width: calc(100% - 100px);
+        width: calc(100% - 50px);
         order: 1;
         flex-grow: 1;
+        height: 80px;
         resize: vertical;
-        max-height:30%;
+        max-height:50vh;
+        @media screen and ( min-width: 500px ){
+          width: calc(100% - 100px);
+        }
       }
 
       .submit-message {
-        margin: 10px 10px 10px 0;
+        margin: 0px auto;
         border-radius: 3px;
         background: $dark-purple;
         font-weight: 600px;
         font-family: $helvetica-condensed;
-        width: 80px;
+        width: 220px;
         color: white;
-        font-size: 18px;
-        height: 80px;
+        font-size: 17px;
+        height: 40px;
         order: 10;
         flex-grow: 1;
+        border: 0px;
+        @media screen and ( min-width: 500px ){
+          margin: 10px 10px 10px 0;
+          width: 82px;
+          height: 80px;
+        }  
       }
     }
-
+    p {
+      color: $dark-gray;
+      font-size: 0.8em;
+      margin: 5px auto;
+      width: 96%;
+    }
     .close-modal {
       position: absolute;
       right: 10px;

app/javascript/chat/content.jsx

@@ -14,7 +14,6 @@ export default class Content extends Component {
   };
 
   render() {
-    console.log(this.props);
     if (!this.props.resource) {
       return '';
     }

app/policies/user_policy.rb

@@ -87,6 +87,7 @@ class UserPolicy < ApplicationPolicy
        feed_mark_canonical
        feed_url
        gitlab_url
+       inbox_guidelines
        linkedin_url
        location
        looking_for_work

app/views/users/_misc.html.erb

@@ -159,6 +159,16 @@
     <div class="sub-field">
       <%= f.select :inbox_type, [["Open", "open"], ["Private", "private"]] %>
     </div>
+    <%= f.label :inbox_guidelines, "Open inbox guidelines/instructions (optional)" %>
+    <div class="sub-field">
+      <%= f.text_area :inbox_guidelines, maxlength: 200, placeholder: "For example:
+      
+- Only contact me about consulting opportunities.
+- I'm happy to help beginners with CSS.
+- Allow for a few days to respond.
+- etc.
+      " %>
+    </div>
     <%= f.submit "SUBMIT", class: "cta" %>
   </div>
 <% end %>

app/views/users/show.html.erb

@@ -117,10 +117,17 @@
       <div class="overlay"></div>
       <div class="modal-content " id="new-message-modal">
         <button title="Close" class="close-modal">X</button>
+        <% if @user.inbox_guidelines.present? %>
+          <p><b>@<%= @user.username %>'s guidelines:</b></p>
+          <p><%= @user.inbox_guidelines %></p>
+        <% end %>
         <form id="new-message-form" class="message-form" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>","username":"<%= @user.username %>", "showChat":"<%= @user.inbox_type %>"}'>
           <textarea id="new-message" rows="4" cols="70" placeholder="Enter your message here..."></textarea>
-          <button type="submit" value="Submit" class="submit-message">SEND</button>
+          <button type="submit" value="Submit" class="submit-message cta">SEND</button>
         </form>
+        <p>
+          <em>All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a></em>
+        </p>
       </div>
     </div>
     <%= render "articles/user_metadata", context: "profile" %>

db/migrate/20190417171019_add_inbox_instructions_to_users.rb

@@ -0,0 +1,5 @@
+class AddInboxInstructionsToUsers < ActiveRecord::Migration[5.2]
+  def change
+    add_column :users, :inbox_guidelines, :string
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_04_12_093614) do
+ActiveRecord::Schema.define(version: 2019_04_17_171019) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -810,6 +810,7 @@ ActiveRecord::Schema.define(version: 2019_04_12_093614) do
     t.datetime "github_repos_updated_at", default: "2017-01-01 05:00:00"
     t.string "github_username"
     t.string "gitlab_url"
+    t.string "inbox_guidelines"
     t.string "inbox_type", default: "private"
     t.jsonb "language_settings", default: {}, null: false
     t.datetime "last_article_at", default: "2017-01-01 05:00:00"