Merge pull request #2044 from poanetwork/feature/#2038-new-network-selector
(Feature) New network selectorpull/2265/head
Victor Baranov
5 years ago
committed by
GitHub
commit
2a226dc51a
@ -0,0 +1,334 @@ |
||||
$network-selector-overlay-background: $modal-overlay-color !default; |
||||
$network-selector-close-color: $primary !default; |
||||
$network-selector-horizontal-padding: 28px; |
||||
$btn-network-selector-load-more-background: #fff !default; |
||||
$btn-network-selector-load-more-color: $primary !default; |
||||
$network-selector-search-input-color: #a3a9b5 !default; |
||||
$network-selector-tab-active-border-color: $primary !default; |
||||
$network-selector-item-icon-dimensions: 30px !default; |
||||
|
||||
.network-selector-visible { |
||||
bottom: 0; |
||||
left: 0; |
||||
position: fixed; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
|
||||
.network-selector-overlay { |
||||
background-color: rgba($network-selector-overlay-background, 0.9); |
||||
bottom: 0; |
||||
display: none; |
||||
left: 0; |
||||
position: fixed; |
||||
right: 0; |
||||
top: 0; |
||||
z-index: 123; |
||||
} |
||||
|
||||
.network-selector-overlay-close { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.network-selector-wrapper { |
||||
display: flex; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.network-selector { |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-grow: 1; |
||||
flex-shrink: 1; |
||||
margin-left: auto; |
||||
max-width: 398px; |
||||
min-width: 0; |
||||
padding-top: 28px; |
||||
position: relative; |
||||
transition: right 0.25s ease-out; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.network-selector-close { |
||||
flex-shrink: 0; |
||||
padding: 0 $network-selector-horizontal-padding; |
||||
margin: 0 0 8px; |
||||
|
||||
svg { |
||||
cursor: pointer; |
||||
display: block; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
path { |
||||
fill: $network-selector-close-color; |
||||
} |
||||
} |
||||
|
||||
.network-selector-text-container { |
||||
flex-shrink: 0; |
||||
margin: 0 0 15px; |
||||
padding: 0 $network-selector-horizontal-padding; |
||||
} |
||||
|
||||
.network-selector-title { |
||||
color: #333; |
||||
font-size: 18px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0 0 10px; |
||||
padding: 0; |
||||
} |
||||
|
||||
.network-selector-text { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.67; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.network-selector-search-container { |
||||
align-items: center; |
||||
background-color: #f5f6fa; |
||||
display: flex; |
||||
flex-shrink: 0; |
||||
height: 62px; |
||||
margin: 0; |
||||
padding: 0 $network-selector-horizontal-padding; |
||||
|
||||
path { |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
fill: $network-selector-search-input-color; |
||||
} |
||||
} |
||||
|
||||
.network-selector-search-input { |
||||
background-color: transparent; |
||||
border-color: transparent; |
||||
color: #333; |
||||
flex-grow: 1; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
height: 100%; |
||||
outline: none; |
||||
padding: 0 20px 0 10px; |
||||
|
||||
&[placeholder]{ |
||||
color: $network-selector-search-input-color !important; |
||||
} |
||||
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */ |
||||
color: $network-selector-search-input-color !important; |
||||
} |
||||
&::-moz-placeholder { /* Firefox 19+ */ |
||||
color: $network-selector-search-input-color !important; |
||||
} |
||||
&:-ms-input-placeholder { /* IE 10+ */ |
||||
color: $network-selector-search-input-color !important; |
||||
} |
||||
&:-moz-placeholder { /* Firefox 18- */ |
||||
color: $network-selector-search-input-color !important; |
||||
} |
||||
} |
||||
|
||||
.network-selector-tabs-container { |
||||
border-bottom: 1px solid $base-border-color; |
||||
display: flex; |
||||
flex-shrink: 0; |
||||
margin: 0 $network-selector-horizontal-padding; |
||||
} |
||||
|
||||
.network-selector-tab { |
||||
color: #a3a9b5; |
||||
cursor: pointer; |
||||
flex-shrink: 1; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
line-height: 1.2; |
||||
min-width: 0; |
||||
padding: 20px 18px 15px; |
||||
position: relative; |
||||
text-align: center; |
||||
user-select: none; |
||||
white-space: nowrap; |
||||
|
||||
&:hover { |
||||
color: #333; |
||||
} |
||||
|
||||
&.active { |
||||
color: #333; |
||||
cursor: default; |
||||
|
||||
&::after { |
||||
background-color: $network-selector-tab-active-border-color; |
||||
border-top-left-radius: 4px; |
||||
border-top-right-radius: 4px; |
||||
bottom: 0; |
||||
content: ""; |
||||
height: 4px; |
||||
left: 0; |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.network-selector-tab-content { |
||||
display: none; |
||||
|
||||
&.active { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.network-selector-item { |
||||
border-bottom: 1px solid $base-border-color; |
||||
display: flex; |
||||
position: relative; |
||||
|
||||
.radio { |
||||
cursor: pointer; |
||||
margin: 0 15px 0 0; |
||||
|
||||
input[type="radio"] { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.radio-icon { |
||||
margin: 0; |
||||
} |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.network-selector-item-url { |
||||
align-items: center; |
||||
cursor: pointer; |
||||
display: flex; |
||||
flex-grow: 1; |
||||
margin: 0; |
||||
padding: 20px 0; |
||||
|
||||
&:hover { |
||||
.network-selector-item-type { |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.network-selector-item-icon { |
||||
background-color: #dfdfdf; |
||||
background-position: 50% 50%; |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
border-radius: 50%; |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
height: $network-selector-item-icon-dimensions; |
||||
margin: 0 15px 0 0; |
||||
width: $network-selector-item-icon-dimensions; |
||||
} |
||||
|
||||
.network-selector-item-title { |
||||
color: #333; |
||||
flex-grow: 1; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
overflow: hidden; |
||||
text-align: left; |
||||
text-overflow: ellipsis; |
||||
user-select: none; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.network-selector-item-type { |
||||
color: #a3a9b5; |
||||
flex-shrink: 0; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
padding-left: 10px; |
||||
text-align: right; |
||||
user-select: none; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.network-selector-item-content { |
||||
align-items: center; |
||||
display: flex; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.network-selector-networks-container { |
||||
flex-grow: 1; |
||||
flex-shrink: 1; |
||||
min-height: 100px; |
||||
overflow: auto; |
||||
padding: 0 $network-selector-horizontal-padding; |
||||
} |
||||
|
||||
.network-selector-load-more-container { |
||||
flex-shrink: 1; |
||||
padding: 0 $network-selector-horizontal-padding; |
||||
|
||||
.btn-network-selector-load-more { |
||||
@include btn-line($btn-network-selector-load-more-background, $btn-network-selector-load-more-color); |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.network-selector-item-favorite { |
||||
align-items: center; |
||||
cursor: pointer; |
||||
display: flex; |
||||
flex-grow: 1; |
||||
flex-shrink: 0; |
||||
margin: 0; |
||||
max-width: 36px; |
||||
padding-left: 20px; |
||||
position: relative; |
||||
|
||||
input[type="checkbox"] { |
||||
cursor: pointer; |
||||
height: 100%; |
||||
opacity: 0; |
||||
position: absolute; |
||||
width: 100%; |
||||
z-index: 5; |
||||
|
||||
&:checked + svg { |
||||
position: relative; |
||||
z-index: 1; |
||||
|
||||
path { |
||||
fill: #ffb20d; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
path { |
||||
fill: rgba(#ffb20d, 0.4); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.network-selector-tab-content-empty { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
padding: 40px; |
||||
text-align: center; |
||||
} |
||||
@ -0,0 +1,49 @@ |
||||
$radio-color: $primary !default; |
||||
$radio-dimensions: 20px !default; |
||||
|
||||
.radio { |
||||
align-items: center; |
||||
display: flex; |
||||
position: relative; |
||||
|
||||
input[type="radio"] { |
||||
height: 100%; |
||||
opacity: 0; |
||||
position: absolute; |
||||
width: 100%; |
||||
z-index: 5; |
||||
|
||||
&:checked + .radio-icon::before { |
||||
background-color: $radio-color; |
||||
border-radius: 50%; |
||||
content: ""; |
||||
height: 12px; |
||||
left: 50%; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateX(-50%) translateY(-50%); |
||||
width: 12px; |
||||
} |
||||
} |
||||
|
||||
.radio-icon { |
||||
border: 1px solid $base-border-color; |
||||
border-radius: 50%; |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
height: $radio-dimensions; |
||||
margin: 0 10px 0 0; |
||||
position: relative; |
||||
width: $radio-dimensions; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.radio-text { |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
position: relative; |
||||
white-space: nowrap; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
@ -0,0 +1,77 @@ |
||||
import $ from 'jquery' |
||||
|
||||
$(function () { |
||||
const mainBody = $('body') |
||||
const showNetworkSelector = $('.js-show-network-selector') |
||||
const hideNetworkSelector = $('.js-network-selector-close') |
||||
const hideNetworkSelectorOverlay = $('.js-network-selector-overlay-close') |
||||
const networkSelector = $('.js-network-selector') |
||||
const networkSelectorOverlay = $('.js-network-selector-overlay') |
||||
const networkSelectorTab = $('.js-network-selector-tab') |
||||
const networkSelectorTabContent = $('.js-network-selector-tab-content') |
||||
const networkSelectorItemURL = $('.js-network-selector-item-url') |
||||
const FADE_IN_DELAY = 250 |
||||
|
||||
showNetworkSelector.on('click', (e) => { |
||||
e.preventDefault() |
||||
openNetworkSelector() |
||||
}) |
||||
|
||||
hideNetworkSelector.on('click', (e) => { |
||||
e.preventDefault() |
||||
closeNetworkSelector() |
||||
}) |
||||
|
||||
hideNetworkSelectorOverlay.on('click', (e) => { |
||||
e.preventDefault() |
||||
closeNetworkSelector() |
||||
}) |
||||
|
||||
networkSelectorTab.on('click', function (e) { |
||||
e.preventDefault() |
||||
setNetworkTab($(this)) |
||||
}) |
||||
|
||||
networkSelectorItemURL.on('click', function (e) { |
||||
window.location = $(this).attr('network-selector-item-url') |
||||
}) |
||||
|
||||
let setNetworkTab = (currentTab) => { |
||||
if (currentTab.hasClass('active')) return |
||||
|
||||
networkSelectorTab.removeClass('active') |
||||
currentTab.addClass('active') |
||||
networkSelectorTabContent.removeClass('active') |
||||
$(`[network-selector-tab="${currentTab.attr('network-selector-tab-filter')}"]`).addClass('active') |
||||
} |
||||
|
||||
let openNetworkSelector = () => { |
||||
mainBody.addClass('network-selector-visible') |
||||
networkSelectorOverlay.fadeIn(FADE_IN_DELAY) |
||||
setNetworkSelectorVisiblePosition() |
||||
} |
||||
|
||||
let closeNetworkSelector = () => { |
||||
mainBody.removeClass('network-selector-visible') |
||||
networkSelectorOverlay.fadeOut(FADE_IN_DELAY) |
||||
setNetworkSelectorHiddenPosition() |
||||
} |
||||
|
||||
let getNetworkSelectorWidth = () => { |
||||
return parseInt(networkSelector.css('width')) || parseInt(networkSelector.css('max-width')) |
||||
} |
||||
|
||||
let setNetworkSelectorHiddenPosition = () => { |
||||
return networkSelector.css({ 'right': `-${getNetworkSelectorWidth()}px` }) |
||||
} |
||||
|
||||
let setNetworkSelectorVisiblePosition = () => { |
||||
return networkSelector.css({ 'right': '0' }) |
||||
} |
||||
|
||||
let init = () => { |
||||
setNetworkSelectorHiddenPosition() |
||||
} |
||||
|
||||
init() |
||||
}) |
||||
@ -0,0 +1,58 @@ |
||||
import $ from 'jquery' |
||||
|
||||
var favoritesContainer = $('.js-favorites-tab') |
||||
var favoritesNetworksUrls = [] |
||||
|
||||
if (localStorage.getItem('favoritesNetworksUrls') === null) { |
||||
localStorage.setItem('favoritesNetworksUrls', JSON.stringify(favoritesNetworksUrls)) |
||||
} else { |
||||
favoritesNetworksUrls = JSON.parse(localStorage.getItem('favoritesNetworksUrls')) |
||||
} |
||||
|
||||
$(document).on('change', ".network-selector-item-favorite input[type='checkbox']", function () { |
||||
var networkUrl = $(this).attr('data-url') |
||||
var thisStatus = $(this).is(':checked') |
||||
var workWith = $(".network-selector-item[data-url='" + networkUrl + "'") |
||||
|
||||
// Add new checkbox status to same network in another tabs
|
||||
$(".network-selector-item-favorite input[data-url='" + networkUrl + "']").prop('checked', thisStatus) |
||||
|
||||
// Clone
|
||||
var parent = $(".network-selector-item[data-url='" + networkUrl + "'").clone() |
||||
|
||||
// Push or remove favorite networks to array
|
||||
var found = $.inArray(networkUrl, favoritesNetworksUrls) |
||||
if (found < 0 && thisStatus === true) { |
||||
favoritesNetworksUrls.push(networkUrl) |
||||
} else { |
||||
var index = favoritesNetworksUrls.indexOf(networkUrl) |
||||
if (index !== -1) { |
||||
favoritesNetworksUrls.splice(index, 1) |
||||
} |
||||
} |
||||
|
||||
// Push to localstorage
|
||||
var willBePushed = JSON.stringify(favoritesNetworksUrls) |
||||
localStorage.setItem('favoritesNetworksUrls', willBePushed) |
||||
|
||||
// Append or remove item from 'favorites' tab
|
||||
if (thisStatus === true) { |
||||
favoritesContainer.append(parent[0]) |
||||
$('.js-favorites-tab .network-selector-tab-content-empty').hide() |
||||
} else { |
||||
var willRemoved = favoritesContainer.find(workWith) |
||||
willRemoved.remove() |
||||
if (favoritesNetworksUrls.length === 0) { |
||||
$('.js-favorites-tab .network-selector-tab-content-empty').show() |
||||
} |
||||
} |
||||
}) |
||||
|
||||
if (favoritesNetworksUrls.length > 0) { |
||||
$('.js-favorites-tab .network-selector-tab-content-empty').hide() |
||||
for (var i = 0; i < favoritesNetworksUrls.length + 1; i++) { |
||||
$(".network-selector-item[data-url='" + favoritesNetworksUrls[i] + "'").find('input[data-url]').prop('checked', true) |
||||
var parent = $(".network-selector-item[data-url='" + favoritesNetworksUrls[i] + "'").clone() |
||||
favoritesContainer.append(parent[0]) |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import $ from 'jquery' |
||||
|
||||
var networkSearchInput = $('.network-selector-search-input') |
||||
var networkSearchInputVal = '' |
||||
|
||||
$(networkSearchInput).on('input', function () { |
||||
networkSearchInputVal = $(this).val() |
||||
|
||||
$.expr[':'].Contains = $.expr.createPseudo(function (arg) { |
||||
return function (elem) { |
||||
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0 |
||||
} |
||||
}) |
||||
|
||||
if (networkSearchInputVal === '') { |
||||
$('.network-selector-item').show() |
||||
} else { |
||||
$('.network-selector-item').hide() |
||||
$(".network-selector-item:Contains('" + networkSearchInputVal + "')").show() |
||||
} |
||||
}) |
||||
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 916 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 916 B |
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,53 @@ |
||||
<div class="network-selector-overlay js-network-selector-overlay"> |
||||
<div class="network-selector-overlay-close js-network-selector-overlay-close"></div> |
||||
<div class="network-selector-wrapper"> |
||||
<div class="network-selector js-network-selector"> |
||||
<div class="network-selector-close js-network-selector-close"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"> |
||||
<path fill-rule="evenodd" d="M7.881 6.5l4.834 4.834a.977.977 0 0 1-1.381 1.381L6.5 7.881l-4.834 4.834a.977.977 0 0 1-1.381-1.381L5.119 6.5.285 1.666A.977.977 0 0 1 1.666.285L6.5 5.119 11.334.285a.977.977 0 0 1 1.381 1.381L7.881 6.5z"/> |
||||
</svg> |
||||
</div> |
||||
<div class="network-selector-text-container"> |
||||
<h1 class="network-selector-title"><%= gettext("Change Network") %></h1> |
||||
<p class="network-selector-text"><%= gettext("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.") %></p> |
||||
</div> |
||||
<form class="network-selector-search-container"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17"> |
||||
<path fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.285-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"/> |
||||
</svg> |
||||
<input class="network-selector-search-input" type="text" placeholder='<%= gettext("Search network") %>' /> |
||||
</form> |
||||
<div class="network-selector-tabs-container"> |
||||
<div class="network-selector-tab js-network-selector-tab active" network-selector-tab-filter="all"><%= gettext("All") %></div> |
||||
<div class="network-selector-tab js-network-selector-tab" network-selector-tab-filter="mainnet"><%= gettext("Mainnet") %></div> |
||||
<div class="network-selector-tab js-network-selector-tab" network-selector-tab-filter="testnet"><%= gettext("Testnet") %></div> |
||||
<div class="network-selector-tab js-network-selector-tab" network-selector-tab-filter="favorites"><%= gettext("Favorites") %></div> |
||||
</div> |
||||
<div class="network-selector-networks-container"> |
||||
<% main_nets = dropdown_main_nets() %> |
||||
<% test_nets = dropdown_test_nets() %> |
||||
<div class="network-selector-tab-content js-network-selector-tab-content active" network-selector-tab="all"> |
||||
<%= for %{url: url, title: title} <- main_nets do %> |
||||
<%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %> |
||||
<% end %> |
||||
<%= for %{url: url, title: title} <- test_nets do %> |
||||
<%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %> |
||||
<% end %> |
||||
</div> |
||||
<div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="mainnet"> |
||||
<%= for %{url: url, title: title} <- main_nets do %> |
||||
<%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %> |
||||
<% end %> |
||||
</div> |
||||
<div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="testnet"> |
||||
<%= for %{url: url, title: title} <- test_nets do %> |
||||
<%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %> |
||||
<% end %> |
||||
</div> |
||||
<div class="network-selector-tab-content js-network-selector-tab-content js-favorites-tab" network-selector-tab="favorites"> |
||||
<div class="network-selector-tab-content-empty">No content.</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,25 @@ |
||||
<div class="network-selector-item" data-url="<%= @url %>" data-name="<%= @title %>"> |
||||
<label class="network-selector-item-url js-network-selector-item-url" network-selector-item-url="<%= @url %>"> |
||||
<span class="radio"> |
||||
<input type="radio" name="networkSelectorItem" <%= if @title == subnetwork_title() do %> checked="true" <% end %> /> |
||||
<span class="radio-icon"></span> |
||||
</span> |
||||
<span class="network-selector-item-content"> |
||||
<span class='network-selector-item-icon network-selector-item-icon-<%= String.downcase(String.replace(@title, " ", "-")) %>' style="background-image: url('/images/network-selector-icons/<%= String.downcase(String.replace(@title, " ", "-")) %>.png');"></span> |
||||
<span class="network-selector-item-title"> |
||||
<%= @title %> |
||||
</span> |
||||
<%= if @tab_type do %> |
||||
<span class="network-selector-item-type"> |
||||
<%= @tab_type %> |
||||
</span> |
||||
<% end %> |
||||
</span> |
||||
</label> |
||||
<label class="network-selector-item-favorite"> |
||||
<input type="checkbox" data-url="<%= @url %>" /> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15"> |
||||
<path fill="#E2E5EC" fill-rule="evenodd" d="M15.647 6.795c.315-.3.426-.741.29-1.151a1.135 1.135 0 0 0-.926-.764l-3.871-.551a.501.501 0 0 1-.381-.271L9.028.624A1.143 1.143 0 0 0 8-.001c-.44 0-.834.24-1.028.625L5.24 4.059a.506.506 0 0 1-.381.271l-3.871.55c-.435.062-.79.355-.926.765-.136.409-.025.85.29 1.15l2.801 2.673a.492.492 0 0 1 .146.439l-.661 3.774c-.058.333.031.656.25.911.342.397.937.518 1.414.272l3.462-1.782a.53.53 0 0 1 .471 0l3.463 1.782a1.16 1.16 0 0 0 1.413-.272c.22-.255.309-.579.25-.911L12.7 9.907a.489.489 0 0 1 .146-.439l2.801-2.673z"/> |
||||
</svg> |
||||
</label> |
||||
</div> |
||||
Loading…
Reference in new issue