Merge pull request #1790 from OpenTechFund/fix/pagedown-editor-styling

Improving pagedown editor styling with css flex.

opentech/apply/activity/forms.py

@@ -13,7 +13,7 @@ class CommentForm(forms.ModelForm):
         fields = ('message', 'visibility')
         labels = {
             'visibility': 'Visible to',
-            'message': '',
+            'message': 'Message',
         }
         widgets = {
             'visibility': forms.RadioSelect(),

opentech/static_src/src/sass/apply/components/_editor.scss

-.wmd-panel {
-}
-
-.wmd-input {
-}
-
 .wmd-preview {
     background-color: $color--sky-blue;
     padding: 0 10px;
@@ -25,32 +19,23 @@
 }
 
 .wmd-button-row {
-    position: relative;
+    display:  flex;
     background-color: $color--white;
-    height: 35px;
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-bottom: 5px;
-    padding-top: 10px;
+    padding:  4px;
 }
 
 .wmd-spacer {
-    position: absolute;
-    display: inline-block;
     background-color: $color--mid-grey;
     width: 1px;
     height: 20px;
-    margin-left: 14px;
+    margin: 0 14px;
     list-style: none;
 }
 
 .wmd-button {
-    position: absolute;
-    display: inline-block;
     width: 20px;
     height: 20px;
-    padding-left: 2px;
-    padding-right: 3px;
+    margin: 0 2px;
     list-style: none;
     cursor: pointer;
 
@@ -64,18 +49,6 @@
     }
 }
 
-.wmd-spacer1 {
-    left: 50px;
-}
-
-.wmd-spacer2 {
-    left: 175px;
-}
-
-.wmd-spacer3 {
-    left: 300px;
-}
-
 .wmd-prompt-background {
     background-color: $color--black;
 }

opentech/static_src/src/sass/public/components/_editor.scss

-.wmd-panel {
-}
-
-.wmd-input {
-}
-
 .wmd-preview {
     background-color: $color--sky-blue;
     padding: 0 10px;
@@ -20,33 +14,25 @@
     }
 }
 
+
 .wmd-button-row {
-    position: relative;
+    display:  flex;
     background-color: $color--white;
-    height: 35px;
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-bottom: 5px;
-    padding-top: 10px;
+    padding:  4px;
 }
 
 .wmd-spacer {
-    position: absolute;
-    display: inline-block;
     background-color: $color--mid-grey;
     width: 1px;
     height: 20px;
-    margin-left: 14px;
+    margin: 0 14px;
     list-style: none;
 }
 
 .wmd-button {
-    position: absolute;
-    display: inline-block;
     width: 20px;
     height: 20px;
-    padding-left: 2px;
-    padding-right: 3px;
+    margin: 0 2px;
     list-style: none;
     cursor: pointer;
 
@@ -60,18 +46,6 @@
     }
 }
 
-.wmd-spacer1 {
-    left: 50px;
-}
-
-.wmd-spacer2 {
-    left: 175px;
-}
-
-.wmd-spacer3 {
-    left: 300px;
-}
-
 .wmd-prompt-background {
     background-color: $color--black;
 }