bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New grid layout and addition of features menu

Browse Source
This commit is contained in:
Jason Zimdars
2024-11-12 15:26:16 -06:00
parent 171922a9b7
commit bcde27c4d1
12 changed files with 64 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/tag.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 7a1.5 1.5 0 0 1 -1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1 -1.5 1.5m15.91 4.58-9-9c-.36-.36-.86-.58-1.41-.58h-7c-1.11 0-2 .89-2 2v7c0 .55.22 1.05.59 1.41l8.99 9c.37.36.87.59 1.42.59s1.05-.23 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.56-.23-1.06-.59-1.42z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

app/assets/stylesheets/bubbles.css
+12 -2
View File
@@ -136,7 +136,7 @@
&.bubble__assignee {
aspect-ratio: 1;
font-size: 4.5 cqi;
font-size: 4.5cqi;
inset: -2cqi auto auto 26cqi;
padding: 0.4em;
@@ -307,6 +307,15 @@
}
}
.bubble__container {
inline-size: min(67ch, 75vw);
max-inline-size: 100vw;
@media (max-width: 70ch) {
inline-size: min(67ch, 100vw);
}
}
.bubble__image {
border: none;
border-radius: var(--bubble-shape);
@@ -347,7 +356,8 @@
}
.bubble__perma {
block-size: 65cqb;
block-size: 100%;
max-block-size: 65dvh;
max-inline-size: 100%;
}
app/assets/stylesheets/comments.css
-1
View File
@@ -3,7 +3,6 @@
--comment-padding-block: 1.2em;
--comment-padding-inline: 1.5em;
font-size: clamp(1rem, 1.6cqi, 2rem);
max-inline-size: 70ch;
row-gap: var(--comment-padding-block);
app/assets/stylesheets/layout.css
+6
View File
@@ -23,6 +23,12 @@ body {
text-justify: distribute;
widows: 2;
}
&:has(.bubble__perma) {
display: grid;
grid-template-columns: 1fr minmax(min-content, auto) 1fr;
gap: var(--inline-space);
}
}
:where(#footer) {
app/views/bubbles/_assignments.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<span class="bubble__bubble bubble__meta bubble__assignee <%= "bubble__assignee--new" if bubble.assignees.none? %>">
<span <%= "hidden" unless bubble.assignees.any? %> id="new-assignee" class="bubble__bubble bubble__meta bubble__assignee <%= "bubble__assignee--new" if bubble.assignees.none? %>">
<%= form_with url: bucket_bubble_assignments_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
<label class="btn btn--plain position-relative fill-transparent" style="<%= "--btn-icon-size: 2em;" unless bubble.assignees.any? %>">
<% if bubble.assignees.any? %>
app/views/bubbles/_color.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="bubble__bubble bubble__meta bubble__color" data-controller="dialog" data-action="keydown.esc->dialog#close">
<div hidden id="new-color" class="bubble__bubble bubble__meta bubble__color" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--plain" style="--btn-icon-size: 2.25em;" data-action="dialog#toggle" data-dialog-modal-value="true">
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path d="m14.2 15.2c.1-.7-.4-1.4-1.1-1.5-1.8-.2-3.5.8-4.2 2.5-.5 1.2-1 1.1-1.5.9-2.7-.7-4.6-3.1-4.8-5.8.1-3.5 3.6-6.3 7.9-6.3 1.7 0 3.3.4 4.7 1.3.6.4 1.5.2 1.9-.4s.2-1.5-.4-1.9c-1.9-1.1-4-1.7-6.1-1.7-6-.1-10.6 4-10.6 9 .2 3.9 2.8 7.3 6.6 8.4 1.9.7 4-.2 4.7-2.1 0-.1.1-.2.1-.3.2-.6.8-.9 1.4-.9s1.3-.5 1.4-1.2z"/><circle cx="6.1" cy="12.8" r="1.3"/><circle cx="7.4" cy="8.4" r="1.3"/><circle cx="11.8" cy="7.5" r="1.3"/><path d="m21.8 4.4c-.3-.2-.6-.2-.9-.1s-.5.4-.5.7c0 1.1-.6 2.1-1.5 2.6-1.3 1-2.2 2-1.8 3.7.1.4.3.8.5 1.1s.2.6.1.9l-4.5 8.9c-.3.7-.1 1.5.6 1.8s1.5.1 1.8-.6l4.7-9.3c.1-.2.3-.4.6-.5.9-.2 1.6-.8 2.2-1.5.8-1.1 1.1-2.5.8-3.8-.2-1.6-1-2.9-2.1-3.9z"/></svg>
<span class="for-screen-reader">Change color</span>
app/views/bubbles/_date.html.erb
+1 -1
View File
@@ -6,7 +6,7 @@
<span class="for-screen-reader">Change the due date</span>
</label>
<% else %>
<div class="bubble__bubble bubble__meta bubble__date bubble__date--new">
<div hidden class="bubble__bubble bubble__meta bubble__date bubble__date--new" id="new-date">
<label class="btn btn--plain" style="--btn-icon-size: 2.5em; margin-inline-end: -0.2em">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--bubble-color)"><path d="M9.569,16.5H2.5A.5.5,0,0,1,2,16V7.5A.5.5,0,0,1,2.5,7H16a.5.5,0,0,1,.5.5V9.57a7.281,7.281,0,0,1,2,0V3a1,1,0,0,0-1-1H15a.25.25,0,0,1-.25-.25v-1a.75.75,0,1,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H7a.25.25,0,0,1-.25-.25v-1a.75.75,0,0,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H1A1,1,0,0,0,0,3V16.5a2,2,0,0,0,2,2H9.569a7.281,7.281,0,0,1,0-2Z"/><path fill="var(--color-positive)" d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z"/></svg>
<%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker" } %>
app/views/bubbles/_image.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<%= image_tag bubble.image.presence || "", data: { upload_preview_target: "image" } %>
</div>
<div class="bubble__bubble bubble__meta bubble__attachment">
<div hidden class="bubble__bubble bubble__meta bubble__attachment" id="new-attachment">
<% if bubble.image.attached? %>
<%= button_to bucket_bubble_image_path(bubble.bucket, bubble), method: :delete, class: "btn btn--plain", style: "--btn-icon-size: 3em; margin-block-start: -0.5em; margin-inline-end: -0.2em" do %>
<svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path fill="var(--color-negative)" d="m19.1 0c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm-.8 5.7h-1.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.2s1.6 0 1.6 0h1.2c.3 0 .6.3.6.6s-.3.6-.6.6h-1.2s-1.6 0-1.6 0z"/><path d="m6.7 10.5c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6z" fill="none"/><path d="m9.7 16.9h.1l-.1-.1z"/><path d="m19.2 11.6v6.3c0 .2 0 .4-.4.4h-16.8v-13.7c0-.2 0-.4.4-.4h10.1c0-.7.3-1.3.5-1.8h-11.6c-.9.2-1.4.9-1.4 1.8v14c0 1 .8 1.8 1.8 1.8h17.5c1 0 1.8-.8 1.8-1.8v-6.9c-.6.2-1.2.3-1.8.3z"/><path d="m4.8 5.5c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s0 0 0 0c.4 0 .7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s0 0 0 0c.5 0 1 .3 1.3.7l3.1 5c0-.1 0-.2 0-.3v-4.2c-2.8-.6-4.9-3-5.1-6h-7.6zm1.9 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m5.2 16.9h2.6l1-1.5-1.2-1.7z"/><path d="m10.4 15.8-.7 1 .1.1h1.3 5.1l-3.1-5.1z"/></svg>
app/views/bubbles/_pop_toggle.html.erb
+4 -4
View File
@@ -1,11 +1,11 @@
<% if bubble.popped? %>
<%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), method: :delete, class: "btn" do %>
<%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), method: :delete, class: "btn full-width justify-start borderless" do %>
<%= image_tag "pop.svg", aria: { hidden: true }, size: 24 %>
<span>Un-pop</span>
<span>Restore it</span>
<% end %>
<% else %>
<%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn" do %>
<%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn full-width justify-start borderless" do %>
<%= image_tag "pop.svg", aria: { hidden: true }, size: 24 %>
<span>Pop</span>
<span>Pop it</span>
<% end %>
<% end %>
app/views/bubbles/_tags.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<% end %>
<% if bubble.tags.size < 3 %>
<span class="bubble__bubble bubble__meta bubble__tag">
<span class="bubble__bubble bubble__meta bubble__tag" id="new-tag" hidden>
<%= turbo_frame_tag :new_tag do %>
<%= link_to "#", new_bucket_bubble_tag_path(bubble.bucket, bubble), class: "bubble__tag--new" %>
<% end %>
app/views/bubbles/show.html.erb
+35 -8
View File
@@ -6,16 +6,43 @@
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Back</span>
<% end %>
<section class="flex flex-column align-end gap">
<%= render "bubbles/pop_toggle", bubble: @bubble %>
<%= turbo_frame_tag dom_id(@bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(@bubble.bucket, @bubble) %>
</section>
</nav>
<% end %>
<div class="bubble__perma flex justify-center center margin-block-end-double">
<%= render "bubbles/bubble", bubble: @bubble %>
<div class="flex align-start justify-end">
<%= turbo_frame_tag dom_id(@bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(@bubble.bucket, @bubble) %>
</div>
<%= render "bubbles/messages", bubble: @bubble %>
<div class="bubble__container">
<div class="bubble__perma flex justify-center center margin-block-end-double">
<%= render "bubbles/bubble", bubble: @bubble %>
</div>
<%= render "bubbles/messages", bubble: @bubble %>
</div>
<aside class="flex align-start justify-start" style="--bubble-color: <%= @bubble.color %>">
<div class="flex flex-column gap-half">
<button class="btn full-width justify-start borderless" onclick="document.getElementById('new-color').removeAttribute('hidden')">
<%= image_tag "art.svg", aria: { hidden: true }, size: 24 %>
<span>Color it</span>
</button>
<button class="btn full-width justify-start borderless" onclick="document.getElementById('new-date').removeAttribute('hidden')">
<%= image_tag "calendar-add.svg", aria: { hidden: true }, size: 24 %>
<span>Add a due date</span>
</button>
<button class="btn full-width justify-start borderless" onclick="document.getElementById('new-tag').removeAttribute('hidden')">
<%= image_tag "tag.svg", aria: { hidden: true }, size: 24 %>
<span>Tag this</span>
</button>
<button class="btn full-width justify-start borderless" onclick="document.getElementById('new-assignee').removeAttribute('hidden')">
<%= image_tag "person.svg", aria: { hidden: true }, size: 24 %>
<span>Assign to…</span>
</button>
<button class="btn full-width justify-start borderless" onclick="document.getElementById('new-attachment').removeAttribute('hidden')">
<%= image_tag "picture-add.svg", aria: { hidden: true }, size: 24 %>
<span>Attach a file</span>
</button>
<%= render "bubbles/pop_toggle", bubble: @bubble %>
</div>
</aside>
app/views/bubbles/stage_pickers/new.html.erb
+1 -1
View File
@@ -1,6 +1,6 @@
<%= turbo_frame_tag dom_id(@bubble, :stage_picker) do %>
<% if @selected_workflow %>
<aside style="position: absolute; top: 10rem; right: 3rem; --bubble-color: <%= @bubble.color %>"
<aside class="position-relative" style="--bubble-color: <%= @bubble.color %>"
data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<div class="flex flex-column">
<button class="btn center" data-action="click->dialog#toggle" data-dialog-modal-value="true">