input-pill: Refactor pills to eliminate fixed positioning of elements.

zulip · Jul 12, 2018 · 0f5ad5e · 0f5ad5e
1 parent 3ac49c1
commit 0f5ad5e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 26 deletions.
diff --git a/static/styles/compose.scss b/static/styles/compose.scss
@@ -397,6 +397,10 @@ input.recipient_box {
     display: flex;
 }
 
+#private-message {
+    align-items: center;
+}
+
 .compose_table .drafts-link {
     position: relative;
     margin-right: 1em;

diff --git a/static/styles/input_pill.scss b/static/styles/input_pill.scss
@@ -1,5 +1,5 @@
 .pill-container {
-    display: inline-block;
+    display: inline-flex;
 
     padding: 2px;
     border: 1px solid hsla(0, 0%, 0%, 0.15);
@@ -11,12 +11,11 @@
 }
 
 .pill-container .pill {
-    position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
 
     height: 20px;
-    padding: 0px 18px 0px 3px;
-    margin: 1px 1px;
+    margin: 1px;
 
     color: inherit;
     border: 1px solid hsla(0, 0%, 0%, 0.15);
@@ -64,14 +63,8 @@
 }
 
 .pill-container .pill .exit {
-    content: "\D7";
-    position: absolute;
-    top: 0px;
-    right: 3px;
-
     opacity: 0.5;
-
-    font-size: 1.3em;
+    margin: 0 3px;
 }
 
 .pill-container .pill:hover .exit {
@@ -86,14 +79,7 @@
 }
 
 .pm_recipient .pill-container {
-    position: relative;
-    width: 100%;
     padding: 0px 2px;
-
-    /* this is because the pills have a margin-bottom of 2px, so we want to negate
-       the height of the bottom row. */
-    margin: -1px 0px;
-
     border: none;
 
     display: flex;
@@ -116,12 +102,9 @@
 }
 
 .pill-image {
-    position: relative;
-    left: -3px;
     height: 20px;
     width: 20px;
-    margin-right: 2px;
-    bottom: 1px;
+    margin-right: 3px;
     border-radius: 4px 0 0 4px;
 }
 

diff --git a/static/templates/input_pill.handlebars b/static/templates/input_pill.handlebars
@@ -2,8 +2,8 @@
     {{#if has_image}}
     <img class="pill-image" src={{img_src}} />
     {{/if}}
-    {{ display_value }}
-    <div class='exit'>
-        &times;
+    <span class="pill-value">{{ display_value }}</span>
+    <div class="exit" aria-label="{{t Remove pill }}">
+        <span aria-hidden="true">&times;</span>
     </div>
 </div>