Karavel/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Add linked SVG image to button

Browse Source
This commit is contained in:
cryptogopher 2023-04-08 00:31:59 +02:00
parent d9943752e8
commit 7d0da45653
7 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/images/pictograms/alert-outline.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>alert-outline</title><g fill="white"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 152 B

2
app/assets/images/pictograms/check-circle-outline.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-circle-outline</title><g fill="white"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 323 B

After

Width:  |  Height:  |  Size: 278 B

1
app/assets/images/pictograms/login.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M10,17V14H3V10H10V7L15,12L10,17M10,2H19A2,2 0 0,1 21,4V20A2,2 0 0,1 19,22H10A2,2 0 0,1 8,20V18H10V20H19V4H10V6H8V4A2,2 0 0,1 10,2Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

11
app/assets/stylesheets/application.css
View File

@ -17,7 +17,7 @@
* {
font-family: system-ui;
}
// TODO: convert em to rem
body {
margin: 0 0.5em;
}
@ -48,12 +48,20 @@ input:focus:not([type=checkbox]) {
border-color: #a0a0a0;
border-radius: 0.2em;
color: #a0a0a0;
display: flex;
fill: #a0a0a0;
float: right;
font-size: 0.8em;
font-weight: bold;
margin-left: 1em;
padding: 0.6em;
}
.application-menu a svg {
height: 1rem;
padding-right: 0.4rem;
width: 1rem;
}
.application-menu a.active,
.application-menu a:hover,
.application-menu a:focus-visible,
input[type=submit]:hover,
@ -62,6 +70,7 @@ input[type=submit]:focus-visible {
border-color: #009ade;
color: white;
cursor: pointer;
fill: white;
text-decoration: none;
}

7
app/helpers/application_helper.rb
View File

@ -25,4 +25,11 @@ module ApplicationHelper
options.merge! builder: TabularFormBuilder
form_for(record, **options, &block)
end
def svg_tag(source, options = {})
image_name, id = source.split('#')
content_tag :svg, options do
tag.use href: "#{image_path(image_name)}##{id}"
end
end
end

3
app/views/layouts/application.html.erb
View File

@ -14,7 +14,8 @@
<div class="application-menu">
<%= link_to_if user_signed_in?, t(:sign_out), destroy_user_session_path,
data: { turbo_method: :delete } do %>
<%= link_to t(:sign_in), new_user_session_path %>
<%= link_to svg_tag('pictograms/login.svg#icon')+t(:sign_in), new_user_session_path,
class: class_names(active: current_page?(new_user_session_path))%>
<% end %>
<%= link_to_unless(user_signed_in?, t(:register), new_user_registration_path) { } %>

2
config/initializers/assets.rb
View File

@ -9,4 +9,4 @@ Rails.application.config.assets.version = "1.0"
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
Rails.application.config.assets.precompile += %w( '*.svg' )