Adjust placement of image button on small screen (#867)

* Adjust placement of image button on small screen

* Adjust orgsettings css for small screen

* Update snapshot for article form

app/assets/stylesheets/preact/article-form.scss

@@ -47,17 +47,17 @@
 
 .articleform__orgsettings{
   padding: 0px;
-  padding-left: 10px;
+  padding-left: 0px;
   margin: 20px 2px 0px;
-  font-size:23px;
+  font-size:17px;
   cursor: pointer;
   user-select: none;
   img{
-    height: 33px;
-    width: 33px;
+    height: 28px;
+    width: 28px;
     border-radius: 50px;
-    vertical-align: -8px;
-    margin-right: 8px;
+    vertical-align: -7px;
+    margin-right: 4px;
   }
   button {
     background: transparent;
@@ -65,7 +65,7 @@
     border: 0px;
     font-size: 0.8em;
     font-family: $helvetica-condensed;
-    width: 120px;
+    width: 80px;
     border-radius: 100px;
     padding: 1px 0px;
     margin-left: 10px;
@@ -79,6 +79,19 @@
       color: white;
     }
   }
+  @media screen and ( min-width: 600px ){
+    font-size:23px;
+    padding-left: 10px;
+    img{
+      height: 33px;
+      width: 33px;
+      vertical-align: -8px;
+      margin-right: 8px;
+    }
+    button {
+      width: 120px;
+    }
+  }
 }
 
 .articleform__mainimage{
@@ -101,13 +114,17 @@
 }
 
 .articleform__title {
-  height: 50px;
-  width: 94%;
-  font-size: 29px;
+  height: 26px;
+  width: 99%;
+  font-size: 18px;
   word-break: break-word;
   border: 0;
   padding: 20px 0px 15px;
   font-weight: 600;
+  @media screen and ( min-width: 600px ){
+    font-size: 29px;
+    height: 50px;
+  }
 }
 .articleform__detailfields{
   display: flex;
@@ -125,12 +142,12 @@
 }
 
 .articleform__tags {
-  height: 60px;
-  width: 96%;
+  height: 40px;
+  width: 100%;
   border-radius: 3px;
   padding: 8px 8px 7px;
   @media screen and ( min-width: 500px ){
-    height: 40px;
+    width: 98%;
   }
   @media screen and ( min-width: 600px ){
     height: 19px;
@@ -150,10 +167,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  top: 70px;
-  @media screen and ( min-width: 500px ){
-    top: 50px;
-  }
+  top: 50px;
   @media screen and ( min-width: 600px ){
     top: 30px;
   }
@@ -186,8 +200,11 @@
   font-family: $helvetica-condensed;
   font-size: 14.4px;
   height: 34px;
-  display: inline-block;
-  margin-left:10px;
+  display: none;
+  @media screen and ( min-width: 600px ){
+    display: inline-block;
+  }
+  margin-left:25px;
   &:hover{
     background: lighten($green, 24%);
   }
@@ -195,10 +212,19 @@
     width: 21px;
     height: 21px;
     vertical-align: -4px;
-    display: none;
-    @media screen and ( min-width: 500px ){
-      display: inline;
-    }
+    display: inline-block;
+  }
+  &.articleform__imageButton--bottombutton{
+    margin-left: -5px;
+    margin-top:10px;
+    margin-bottom: 8px;
+    display: inline-block;
+    padding: 2px 15px;
+    border-radius: 3px;
+    width:100px;
+    @media screen and ( min-width: 600px ){
+      display: none;
+    }  
   }
 }
 
@@ -207,14 +233,18 @@
 }
 
 .articleform__body {
-  min-height: calc(90vh - 280px);
+  min-height: calc(90vh - 340px);
   // height: calc(90vh - 240px);
-  width: 94%;
+  width: 98%;
   border: 0;
-  font-size: 18px;
+  font-size: 15px;
   resize: none;
-  padding: 20px 8px;
+  padding: 20px 6px;
   font-family: $monospace;
+  @media screen and ( min-width: 600px ){
+    font-size: 18px;
+    min-height: calc(90vh - 280px);
+  }
 }
 
 .articleform__buttons{
@@ -278,7 +308,7 @@
   border-radius: 3px;
   h2{
     color: $green;
-    font-size: 3em;
+    font-size: 2em;
     font-family: $helvetica-condensed;
   }
   input[type="file"]{

app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap

@@ -56,6 +56,15 @@ exports[`<ArticleForm /> renders properly 1`] = `
       }
       value=""
     />
+    <button
+      class="articleform__imageButton articleform__imageButton--bottombutton"
+      onClick={[Function]}
+    >
+      <img
+        src=""
+      />
+       IMAGES
+    </button>
   </div>
   <div
     class="articleform__buttons"

app/javascript/article-form/articleForm.jsx

@@ -205,6 +205,12 @@ export default class ArticleForm extends Component {
                         defaultValue={bodyMarkdown}
                         onChange={linkState(this, 'bodyMarkdown')}
                       />
+                                              <button
+                          className="articleform__imageButton articleform__imageButton--bottombutton"
+                          onClick={this.toggleImageManagement}
+                        >
+                          <img src={ImageUploadIcon} /> IMAGES
+                        </button>
                       </div>
     }
     return (

app/views/articles/_v2_form.html.erb

@@ -24,6 +24,8 @@
       <img src="<%= asset_path 'image-upload.svg' %>"> IMAGES</button>
     </div>
     <textarea class="articleform__body" placeholder="Body" name="body_markdown"><%= @article.body_markdown %></textarea>
+    <button class="articleform__imageButton articleform__imageButton--bottombutton">
+      <img src="<%= asset_path 'image-upload.svg' %>"> IMAGES</button>
     <% if @article.published %>
       <div class="articleform__buttons"><button class="articleform__buttons--small inactive">?</button><button class="inactive">PREVIEW</button><button class="articleform__buttons--publish">SAVE CHANGES</button></div>    </form>
     <% else %>