Fix incorrect dropdown menu location for the archive button (lobsters…

…#1121)
thousand-rubies · Aug 24, 2022 · 7a69fb8 · 7a69fb8
1 parent 3e74f10
commit 7a69fb8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
@@ -155,13 +155,7 @@ class _LobstersFunction {
 
     const flaggingDropDown = document.createElement('div');
     flaggingDropDown.setAttribute('id', 'flag_dropdown');
-    const flagWrapper = document.createElement('span');
-    flagWrapper.setAttribute('id', 'flag_wrapper')
-    flagWrapper.style.position = 'relative';
-    flagWrapper.style.maxWidth = '1 px';
-    flagWrapper.style.maxHeight = '1 px';
-    flagWrapper.appendChild(flaggingDropDown);
-    voterEl.after(flagWrapper);
+    voterEl.after(flaggingDropDown);
 
     Object.keys(reasons).map(function(k, v) {
       let a = document.createElement('a')
@@ -258,7 +252,6 @@ class _LobstersFunction {
   removeFlagModal() {
     document.getElementById("flag_dropdown").remove();
     document.getElementById("modal_backdrop").remove();
-    document.querySelector('#flag_wrapper').remove();
   }
 
   postComment(form) {

diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb
@@ -1016,10 +1016,13 @@ div.comment_text code {
 	line-height: 1.2em;
 }
 
+.dropdown_parent {
+	position: relative;
+}
 
 #flag_dropdown, .archive-dropdown {
 	position: absolute;
-  left: -1.5rem;
+	left: -0.125rem;
 	width: 100px;
 	border: 1px solid var(--color-box-border);
 	border-bottom: 0;

diff --git a/app/views/stories/_listdetail.html.erb b/app/views/stories/_listdetail.html.erb
@@ -132,7 +132,10 @@ class="story <%= story.vote && story.vote[:vote] == 1 ? "upvoted" : "" %>
             | <a class="flagger">unflag (<%=
               Vote::STORY_REASONS[story.vote[:reason]].to_s.downcase %>)</a>
           <% elsif @user && @user.can_flag?(story) %>
-            | <a class="flagger">flag</a>
+            | 
+            <span class="dropdown_parent">
+              <a class="flagger">flag</a>
+            </span>
           <% end %>
           <% if story.is_hidden_by_cur_user %>
             | <%= link_to "unhide", story_unhide_path(story.short_id),
@@ -154,7 +157,7 @@ class="story <%= story.vote && story.vote[:vote] == 1 ? "upvoted" : "" %>
         <% end %>
         <% if story.url.present? %>
           |
-          <span>
+          <span class="dropdown_parent">
             <input id="archive_<%= story.short_id %>"  class="archive_button" type="checkbox">
             <label for="archive_<%= story.short_id %>">archive</label>
             <label for="archive_<%= story.short_id %>" class="archive_dismiss"></label>