Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve layout with CSS Grid #2612

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Improve layout with CSS Grid #2612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
95dc0eb
nicer layout for nested links in forms
Floppy Sep 4, 2024
40adfa8
change over to bootstrap's CSS grid model
Floppy Sep 4, 2024
0fac4eb
style model edit form with grid
Floppy Sep 4, 2024
26ad360
change creator and collection edit forms to grid layout
Floppy Sep 4, 2024
8349d7a
grid for footer
Floppy Sep 4, 2024
2122c33
change activity feed to a table
Floppy Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/assets/stylesheets/application.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
$enable-grid-classes: false;
$enable-cssgrid: true;

$color-mode-type: media-query;
$table-bg-scale: -90%;

Expand Down
8 changes: 8 additions & 0 deletions app/assets/stylesheets/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,11 @@
overflow-y: hidden;
position: relative;
}

.grid-2-auto {
grid-template-columns: auto auto;
}

.grid-4-auto {
grid-template-columns: auto auto auto auto;
}
4 changes: 2 additions & 2 deletions app/components/model_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class='preview-empty'> <p>no preview availiable</p></div>
<% end %>
<div class="card-body">
<div class="row ">
<div class="grid ">
<div class="col">
<div class="card-title">
<a data-field="model[name]" data-path="<%= model_path @model %>" contenteditable=true>
Expand All @@ -27,7 +27,7 @@
<%= link_to helpers.icon("trash", t(".delete_button.text")), model_path(@model), {method: :delete, class: "btn btn-outline-danger btn-sm", "aria-label": translate(".delete_button.label", name: @model.name), data: {confirm: translate("models.destroy.confirm")}} if @can_destroy %>
</div>
</div>
<div class="col-auto">
<div class="g-col-auto">
<small>
<ul class="list-unstyled">
<% if @creator.nil? && @model.creator %>
Expand Down
66 changes: 30 additions & 36 deletions app/helpers/application_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,48 +70,42 @@ def renderable?(format)
end

def text_input_row(form, name, options = {})
content_tag :div, class: "row mb-3 input-group" do
safe_join [
form.label(name, class: "col-auto col-form-label"),
content_tag(:div, class: "col p-0") do
safe_join [
form.text_field(name, {class: "form-control"}.merge(options)),
errors_for(form.object, name),
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
].compact
end
]
end
safe_join [
form.label(name, class: "col-form-label "),
content_tag(:div) do
safe_join [
form.text_field(name, {class: "form-control"}.merge(options)),
errors_for(form.object, name),
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
].compact
end
]
end

def password_input_row(form, name, options = {})
content_tag :div, class: "row mb-3 input-group" do
safe_join [
form.label(name, class: "col-auto col-form-label"),
content_tag(:div, class: "col p-0") do
safe_join [
form.password_field(name, {class: "form-control"}.merge(options)),
errors_for(form.object, name),
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
].compact
end
]
end
safe_join [
form.label(name, class: "col-form-label "),
content_tag(:div) do
safe_join [
form.password_field(name, {class: "form-control"}.merge(options)),
errors_for(form.object, name),
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
].compact
end
]
end

def rich_text_input_row(form, name, options = {})
content_tag :div, class: "row mb-3 input-group" do
safe_join [
form.label(name, class: "col-auto col-form-label"),
content_tag(:div, class: "col p-0") do
safe_join [
form.text_area(name, class: "form-control col-auto"),
errors_for(form.object, name),
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
].compact
end
]
end
safe_join [
form.label(name, class: "col-form-label "),
content_tag(:div) do
safe_join [
form.text_area(name, class: "form-control"),
errors_for(form.object, name),
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
].compact
end
]
end

def nav_link(ico, text, path, options = {})
Expand Down
52 changes: 24 additions & 28 deletions app/views/activities/_create_actor.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,28 @@
<%- object = activity&.entity %>
<%- thing = object&.entity %>
<% if thing && !thing.is_a?(User) && (thing.grants_permission_to?(["view", "edit", "own"], current_user) || thing.grants_permission_to?(["view", "edit", "own"], current_user&.roles)) %>
<div class="card border-0 border-bottom">
<div class="card-body py-2">
<div class="row">
<div class="col col-auto">
<%= icon icon_for(thing.class), thing.class.model_name.human %>
</div>
<div class="col">
<%- if object.local? %>
<%= link_to thing.name, thing %>
<%- elsif object.profile_url %>
<%= link_to object.name, object.profile_url %>
<%- else %>
<%= object.name %>
<%- end %>
</div>
<% if thing.is_a? Model %>
<div class="col col-auto">
<%= status_badges(thing) %>
</div>
<% end %>
<div class="col col-auto">
<small>
<%= t("home.index.create_actor", time: time_ago_in_words(thing.created_at), name: subject.name) %>
</small>
</div>
</div>
</div>
</div>
<tr>
<td>
<%= icon icon_for(thing.class), thing.class.model_name.human %>
</td>
<td>
<%- if object.local? %>
<%= link_to thing.name, thing %>
<%- elsif object.profile_url %>
<%= link_to object.name, object.profile_url %>
<%- else %>
<%= object.name %>
<%- end %>
</td>
<td>
<% if thing.is_a? Model %>
<%= status_badges(thing) %>
<% end %>
</td>
<td>
<small>
<%= t("home.index.create_actor", time: time_ago_in_words(thing.created_at), name: subject.name) %>
</small>
</td>
</tr>
<% end %>
34 changes: 16 additions & 18 deletions app/views/activities/_create_following.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<%- follow = activity.entity %>

<div class="card border-0 border-bottom">
<div class="card-body py-2">
<div class="row">
<div class="col">
<% if follow.actor.entity == current_user %>
You
<% else %>
<%= follow.actor.name %>
<% end %>
followed
<%= link_to follow.target_actor.name, follow.target_actor.entity %>
</div>
<div class="col col-auto">
<small><%= t("home.index.how_long_ago", time: time_ago_in_words(follow.created_at)) %></small>
</div>
</div>
</div>
</div>
<tr>
<td></td>
<td>
<% if follow.actor.entity == current_user %>
You
<% else %>
<%= follow.actor.name %>
<% end %>
followed
<%= link_to follow.target_actor.name, follow.target_actor.entity %>
</td>
<td></td>
<td>
<small><%= t("home.index.how_long_ago", time: time_ago_in_words(follow.created_at)) %></small>
</td>
</tr>
52 changes: 25 additions & 27 deletions app/views/activities/_update_actor.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,30 @@
<%- object = activity&.entity %>
<%- thing = object&.entity %>
<% if thing && !thing.is_a?(User) && (thing.grants_permission_to?(["view", "edit", "own"], current_user) || thing.grants_permission_to?(["view", "edit", "own"], current_user&.roles)) %>
<div class="card border-0 border-bottom">
<div class="card-body py-2">
<div class="row">
<div class="col col-auto">
<%= icon icon_for(thing.class), thing.class.model_name.human %>
<tr>
<td>
<%= icon icon_for(thing.class), thing.class.model_name.human %>
</td>
<td>
<%- if object.local? %>
<%= link_to thing.name, thing %>
<%- elsif object.profile_url %>
<%= link_to object.name, object.profile_url %>
<%- else %>
<%= object.name %>
<%- end %>
</td>
<td>
<% if thing.is_a? Model %>
<div class="col g-col-auto">
<%= status_badges(thing) %>
</div>
<div class="col">
<%- if object.local? %>
<%= link_to thing.name, thing %>
<%- elsif object.profile_url %>
<%= link_to object.name, object.profile_url %>
<%- else %>
<%= object.name %>
<%- end %>
</div>
<% if thing.is_a? Model %>
<div class="col col-auto">
<%= status_badges(thing) %>
</div>
<% end %>
<div class="col col-auto">
<small>
<%= t("home.index.update_actor", time: time_ago_in_words(thing.updated_at), name: subject.name) %>
</small>
</div>
</div>
</div>
</div>
<% end %>
</td>
<td>
<small>
<%= t("home.index.update_actor", time: time_ago_in_words(thing.updated_at), name: subject.name) %>
</small>
</td>
</tr>
<% end %>
4 changes: 2 additions & 2 deletions app/views/activity/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h1><%= t ".title" %></h1>

<div class="row">
<div class='col col-auto'>
<div class="grid">
<div class='col g-col-auto'>
<%= t ".description", retention_period: distance_of_time_in_words(ActiveJob::Status.options[:expires_in]) %>
</div>
<% if !SiteSettings.demo_mode_enabled? %>
Expand Down
10 changes: 5 additions & 5 deletions app/views/application/_caber_relation_fields.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%= cocooned_item class: "row mb-2 input-group" do %>
<%= cocooned_item class: "grid mb-2 input-group" do %>
<%- if f.object.persisted? %>
<span class="col col-auto">
<span class="col g-col-auto">
<%- case f.object.subject.class.name %>
<%- when "User" %>
<%= icon "person", f.object.subject.class.model_name.human %>
Expand All @@ -17,8 +17,8 @@
<%- end %>
</span>
<%- else %>
<%= f.text_field :subject, class: "col col-auto form-control", placeholder: translate(".subject.placeholder"), list: "caber-relations-role-list" %>
<%= f.text_field :subject, class: "col g-col-auto form-control", placeholder: translate(".subject.placeholder"), list: "caber-relations-role-list" %>
<%- end %>
<%= f.select :permission, Caber.configuration.permissions.map { |p| [translate(".permissions.%{perm}" % {perm: p}), p] }, {}, {class: "form-control col-auto", disabled: (f.object.subject == current_user)} %>
<%= cocooned_remove_item_button icon(:trash, translate(".delete")), f, class: "btn btn-outline-danger col-auto" unless f.object.subject == current_user %>
<%= f.select :permission, Caber.configuration.permissions.map { |p| [translate(".permissions.%{perm}" % {perm: p}), p] }, {}, {class: "form-control g-col-auto", disabled: (f.object.subject == current_user)} %>
<%= cocooned_remove_item_button icon(:trash, translate(".delete")), f, class: "btn btn-outline-danger g-col-auto" unless f.object.subject == current_user %>
<% end %>
36 changes: 15 additions & 21 deletions app/views/application/_caber_relations_form.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,20 @@
<%- if SiteSettings.multiuser_enabled? %>
<div class="row mb-3">
<div class="col col-auto">
<%= t(".permissions") %>
</div>
<div class="col border p-3">
<%= cocooned_container id: "cocooned-caber-relations" do %>
<%= form.fields_for :caber_relations do |f| %>
<%= render "caber_relation_fields", f: f %>
<% end %>
<div class="col-form-label ">
<%= t(".permissions") %>
</div>
<div class="border p-3">
<%= cocooned_container id: "cocooned-caber-relations" do %>
<%= form.fields_for :caber_relations do |f| %>
<%= render "caber_relation_fields", f: f %>
<% end %>
<% end %>
<div class="grid">
<%= tag.div class: "offset-sm-2 ps-0" do %>
<%= cocooned_add_item_button t(".add"), form, :caber_relations,
class: "btn btn-secondary",
insertion_node: "#cocooned-caber-relations",
insertion_method: "append" %>
<% end %>
<div class="row">
<%= tag.div class: "col-auto offset-sm-2 ps-0" do %>
<%= cocooned_add_item_button t(".add"), form, :caber_relations,
class: "btn btn-secondary",
insertion_node: "#cocooned-caber-relations",
insertion_method: "append" %>
<% end %>
</div>
</div>
<datalist id="caber-relations-role-list">
<option value="role::member" label="<%= translate "application.caber_relation_fields.subject.role.member" %>"></option>
<option value="role::public"><%= translate "application.caber_relation_fields.subject.role.public" %></option>
</datalist>
</div>
<%- end %>
6 changes: 3 additions & 3 deletions app/views/application/_content_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="col-9">
<div class="row row-cols-2 align-items-baseline">
<div class="g-col-9">
<div class="grid row-cols-2 align-items-baseline">
<% if !current_page?(root_path) %>
<div class="ms-auto col col-auto mt-2 mb-2">
<div class="ms-auto col g-col-auto mt-2 mb-2">
<%= link_to icon("book", t(".sort.name")), @filters.merge(order: "name"), class: "btn #{(session["order"] == "name") ? "btn-secondary" : "btn-outline-secondary"} btn-sm" %>
<%= link_to icon("clock", t(".sort.time")), @filters.merge(order: "recent"), class: "btn #{(session["order"] == "recent") ? "btn-secondary" : "btn-outline-secondary"} btn-sm" %>
</div>
Expand Down
Loading
Loading