From b3f04539bf7eef755487c79f707d705d8cd901b3 Mon Sep 17 00:00:00 2001 From: Felix Eckhofer <felix@eckhofer.com> Date: Mon, 23 Dec 2024 17:50:06 +0100 Subject: [PATCH] Overhaul styling of buttons and add popdown menu for shiftcoordinators --- app/views/sessions/_session.html.erb | 40 +++++++++++++++++----------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/app/views/sessions/_session.html.erb b/app/views/sessions/_session.html.erb index 2fcfc0f..f7f70e4 100644 --- a/app/views/sessions/_session.html.erb +++ b/app/views/sessions/_session.html.erb @@ -20,24 +20,34 @@ </svg> <%= session.stage.name %> </span> - <span class="absolute top-0 right-0 text-3xl only-loggedin hidden"> - <%= form_with url: update_notes_conference_session_path(session.conference, session), method: :patch, class: "inline", data: { turbo_frame: dom_id(session) } do |form| %> - <%= link_to update_notes_conference_session_path(session.conference, session), class: "only-shiftcoordinator hidden", title: "Edit Note", aria_label: "Edit Note", data: { action: "session#submitWithPrompt", prompt: "Please enter the note", prefill: session.notes, submitempty: true, turbo_prefetch:"false" } do %> - 📠+ <ul class="absolute top-0 right-0 text-2xl only-loggedin hidden flex"> + <li> + <%= link_to conference_session_candidates_path(session.conference, session), class: "only-candidate hidden mx-0.5 p-0.5 bg-rose-400 bg-opacity-30 hover:bg-opacity-50 rounded-md border border-rose-300 hover:border-rose-400", title: "Withdraw", aria_label: "Withdraw", data: { turbo_method: :delete, turbo_frame: dom_id(session) }, method: :delete do %> + 🙅 <% end %> - <% end %> - <%= link_to conference_session_candidates_path(session.conference, session), class: "only-candidate hidden", title: "Withdraw", aria_label: "Withdraw", data: { turbo_method: :delete, turbo_frame: dom_id(session) }, method: :delete do %> - 🙅 - <% end %> - <%= link_to conference_session_candidates_path(session.conference, session), class: "only-no-candidate hidden", title: "Volunteer Myself", aria_label: "Volunteer Myself", data: { action: "session#verifyLanguages", turbo_method: :post, turbo_frame: dom_id(session) } do %> - 🙋 - <% end %> - <%= form_with url: conference_session_candidates_path(session.conference, session), method: :post, class: "inline", data: { turbo_frame: dom_id(session) } do |form| %> - <%= link_to conference_session_candidates_path(session.conference, session), class: "only-no-candidate hidden", title: "Volunteer (with special skills)", aria_label: "Volunteer (with special skills)", data: { action: "session#verifyLanguages session#submitWithPrompt", prompt: "Why are you especially qualified? (Please keep it short, thanks)", turbo_prefetch:"false" } do %> - 🙌 + </li><li> + <%= link_to conference_session_candidates_path(session.conference, session), class: "only-no-candidate hidden mx-0.5 p-0.5 bg-green-400 bg-opacity-30 hover:bg-opacity-50 rounded-md border border-green-400 hover:border-green-600", title: "Volunteer Myself", aria_label: "Volunteer Myself", data: { action: "session#verifyLanguages", turbo_method: :post, turbo_frame: dom_id(session) } do %> + 🙋 + <% end %> + </li><li> + <%= form_with url: conference_session_candidates_path(session.conference, session), method: :post, class: "inline", data: { turbo_frame: dom_id(session) } do |form| %> + <%= link_to conference_session_candidates_path(session.conference, session), class: "only-no-candidate hidden mx-0.5 p-0.5 bg-green-400 bg-opacity-30 hover:bg-opacity-50 rounded-md border border-green-400 hover:border-green-600", title: "Volunteer (with special skills)", aria_label: "Volunteer (with special skills)", data: { action: "session#verifyLanguages session#submitWithPrompt", prompt: "Why are you especially qualified? (Please keep it short, thanks)", turbo_prefetch:"false" } do %> + 🙌 <% end %> <% end %> - </span> + </li><li class="only-shiftcoordinator hidden"> + <span class="relative group inline-block"> + <span class="mx-0.5 p-0.5 bg-slate-400 bg-opacity-30 group-hover:bg-opacity-60 rounded-md border border-slate-200 group-hover:border-slate-400">🔧</span> + <ul class="absolute inset-x-0 top-7 pt-2 invisible group-hover:visible opacity-0 group-hover:opacity-100 motion-safe:duration-300 z-30"> + <li class="py-0.5"> + <%= form_with url: update_notes_conference_session_path(session.conference, session), method: :patch, class: "inline", data: { turbo_frame: dom_id(session) } do |form| %> + <%= link_to update_notes_conference_session_path(session.conference, session), class: "mx-0.5 p-0.5 bg-slate-400 bg-opacity-30 hover:bg-opacity-60 rounded-md border border-slate-200 hover:border-slate-400", title: "Edit Note", aria_label: "Edit Note", data: { action: "session#submitWithPrompt", prompt: "Please enter the note", prefill: session.notes, submitempty: true, turbo_prefetch:"false" } do %>ðŸ“<% end -%> + <%- end -%> + </li> + </ul> + </span> + </li> + </ul> </div> <div> <ul class="flex flex-wrap text-xs gap-1"> -- GitLab