Shift UI changes (#4353)

* Shift UI changes

* Reverting config.json

webapp/sass/components/_dropdown.scss

@@ -17,8 +17,9 @@
         @include opacity(.15);
     }
 
-    > li > a {
+    div > a {
         color: inherit;
+        text-decoration: none;
 
         &:focus,
         &:hover {
@@ -26,3 +27,17 @@
         }
     }
 }
+
+.open {
+    > .dropdown-menu__content {
+        display: block;
+
+        > .dropdown-menu {
+            display: block;
+        }
+    }
+}
+
+.dropdown-menu__content {
+    display: none;
+}

webapp/sass/components/_modal.scss

@@ -590,6 +590,7 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
+        min-height: 65px;
         padding: 8px 15px;
     }
 

webapp/sass/layout/_sidebar-left.scss

@@ -117,6 +117,7 @@
             > a {
                 border-radius: 0;
                 line-height: 1.5;
+                outline: none;
                 overflow: hidden;
                 padding: 3px 10px 3px 25px;
                 text-overflow: ellipsis;

webapp/sass/responsive/_mobile.scss

@@ -1149,42 +1149,26 @@
 }
 
 @media screen and (max-width: 640px) {
-    .post-list__table {
-        .post-list__content {
-            .dropdown-menu {
-                &.bottom {
-                    bottom: auto;
-                    top: 30%;
-                }
+    .app__body {
+        .post {
+            .open {
+                > .dropdown-menu__content {
+                    display: table;
 
-                bottom: auto;
-                height: auto;
+                    > .dropdown-menu {
+                        display: table-cell;
+                    }
+                }
+            }
+
+            .dropdown-menu__content {
+                height: 100%;
                 left: 0;
-                margin-left: 25px;
                 position: fixed;
-                top: 30%;
-                width: calc(100% - 50px);
+                top: 0;
+                width: 100%;
                 z-index: 9999;
 
-                > li {
-                    > a {
-                        border-bottom: 1px solid;
-                        line-height: 50px;
-                        position: relative;
-                        text-align: center;
-
-                        &:hover {
-                            background: transparent;
-                        }
-                    }
-
-                    &:last-child {
-                        a {
-                            border: none;
-                        }
-                    }
-                }
-
                 &:before {
                     background: alpha-color($black, .3);
                     content: '';
@@ -1195,10 +1179,45 @@
                     width: 100%;
                 }
             }
-        }
-    }
 
-    .app__body {
+            .dropdown-menu {
+                &.bottom {
+                    bottom: auto;
+                    top: 0;
+                }
+
+                background: transparent;
+                border: none;
+                bottom: auto;
+                box-shadow: none;
+                float: none;
+                height: 100%;
+                left: 0;
+                margin: 0;
+                padding: 0 2em;
+                position: relative;
+                top: 0;
+                vertical-align: middle;
+                width: 100%;
+                z-index: 9999;
+
+                > li {
+                    &:last-child {
+                        a {
+                            border: none;
+                        }
+                    }
+                }
+
+                a {
+                    border-bottom: 1px solid;
+                    line-height: 50px;
+                    position: relative;
+                    text-align: center;
+                }
+            }
+        }
+
         .modal {
             overflow: hidden;
             padding: 0 !important;
@@ -1398,18 +1417,6 @@
             min-height: 440px;
         }
     }
-
-    .post-list__table {
-        .post-list__content {
-            .dropdown-menu {
-                &.bottom {
-                    top: 25%;
-                }
-
-                top: 25%;
-            }
-        }
-    }
 }
 
 // on iOS, allow clicks within an input's label to actually propagate through to the input itself