Switch from using fontawesome to ionicons

This commit is contained in:
Omar Roth 2018-07-30 18:38:55 -05:00
parent 78f995c903
commit b49456da97
6 changed files with 25 additions and 25 deletions

View file

@ -28,11 +28,11 @@ div {
justify-content: space-between; justify-content: space-between;
} }
.navbar>div { .navbar > div {
flex: 1; flex: 1;
} }
.navbar>.searchbar { .navbar > .searchbar {
flex-grow: 2; /* take double the space of the other items */ flex-grow: 2; /* take double the space of the other items */
} }
@ -44,7 +44,7 @@ div {
font-weight: bold; font-weight: bold;
} }
.navbar>.searchbar .pure-form input[type="search"] { .navbar > .searchbar .pure-form input[type="search"] {
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
@ -58,12 +58,12 @@ div {
transition: 0.1s border-bottom; transition: 0.1s border-bottom;
} }
.navbar>.searchbar .pure-form fieldset { .navbar > .searchbar .pure-form fieldset {
padding: 0; padding: 0;
} }
/* attract focus to the searchbar by adding a subtle transition */ /* attract focus to the searchbar by adding a subtle transition */
.navbar>.searchbar .pure-form input[type="search"]:focus { .navbar > .searchbar .pure-form input[type="search"]:focus {
border-bottom: 2px solid #aaa; border-bottom: 2px solid #aaa;
} }
@ -87,22 +87,22 @@ div {
flex-direction: column; flex-direction: column;
} }
.navbar>div { .navbar > div {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.navbar>div:not(:last-child) { .navbar > div:not(:last-child) {
margin-bottom: 1em; margin-bottom: 1em;
} }
.navbar>.searchbar>form { .navbar > .searchbar > form {
width: 60%; width: 60%;
} }
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
.navbar>.searchbar>form { .navbar > .searchbar > form {
width: 100%; width: 100%;
margin: 0 1em; margin: 0 1em;
} }

View file

@ -648,13 +648,13 @@ def add_alt_links(html)
if ["www.youtube.com", "m.youtube.com"].includes?(url.host) if ["www.youtube.com", "m.youtube.com"].includes?(url.host)
alt_link = <<-END_HTML alt_link = <<-END_HTML
<a href="#{url.full_path}"> <a href="#{url.full_path}">
<i class="fa fa-link" aria-hidden="true"></i> <i class="icon ion-ios-link" aria-hidden="true"></i>
</a> </a>
END_HTML END_HTML
elsif url.host == "youtu.be" elsif url.host == "youtu.be"
alt_link = <<-END_HTML alt_link = <<-END_HTML
<a href="/watch?v=#{url.path.try &.lchop("/")}&#{url.query}"> <a href="/watch?v=#{url.path.try &.lchop("/")}&#{url.query}">
<i class="fa fa-link" aria-hidden="true"></i> <i class="icon ion-ios-link" aria-hidden="true"></i>
</a> </a>
END_HTML END_HTML
else else

View file

@ -8,7 +8,7 @@
</div> </div>
<div class="pure-u-1-3" style="text-align:right;"> <div class="pure-u-1-3" style="text-align:right;">
<h3> <h3>
<a href="/feed/channel/<%= ucid %>"><i class="fas fa-rss-square"></i></a> <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
</h3> </h3>
</div> </div>
</div> </div>

View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> <link rel="stylesheet" href="https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css">
<link rel="stylesheet" href="/css/default.css"> <link rel="stylesheet" href="/css/default.css">
<% if env.get?("user") && env.get("user").as(User).preferences.dark_mode %> <% if env.get?("user") && env.get("user").as(User).preferences.dark_mode %>
<link rel="stylesheet" href="/css/darktheme.css"> <link rel="stylesheet" href="/css/darktheme.css">
@ -37,15 +37,15 @@
<a href="/feed/subscriptions" class="pure-menu-heading"> <a href="/feed/subscriptions" class="pure-menu-heading">
<% notification_count = env.get("user").as(User).notifications.size %> <% notification_count = env.get("user").as(User).notifications.size %>
<% if notification_count > 0 %> <% if notification_count > 0 %>
<%= notification_count %> <i class="fas fa-bell"></i> <%= notification_count %> <i class="icon ion-ios-notifications"></i>
<% else %> <% else %>
<i class="far fa-bell"></i> <i class="icon ion-ios-notifications-outline"></i>
<% end %> <% end %>
</a> </a>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<a href="/preferences" class="pure-menu-heading"> <a href="/preferences" class="pure-menu-heading">
<i class="fas fa-cog"></i> <i class="icon ion-ios-cog"></i>
</a> </a>
</div> </div>
<div class="pure-u-1-3"> <div class="pure-u-1-3">

View file

@ -10,7 +10,7 @@
</div> </div>
<div class="pure-u-1-3" style="text-align:right;"> <div class="pure-u-1-3" style="text-align:right;">
<h3> <h3>
<a href="/feed/private?token=<%= user.token %>"><i class="fas fa-rss-square"></i></a> <a href="/feed/private?token=<%= user.token %>"><i class="icon ion-logo-rss"></i></a>
</h3> </h3>
</div> </div>
</div> </div>

View file

@ -182,7 +182,7 @@ function load_comments(target) {
var body = target.parentNode.parentNode; var body = target.parentNode.parentNode;
var fallback = body.innerHTML; var fallback = body.innerHTML;
body.innerHTML = body.innerHTML =
'<h3><center><i class="loading fas fa-spinner"></i></center></h3>'; '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
var url = var url =
'/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation; '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
@ -277,11 +277,11 @@ get_youtube_comments();
<%= video.title %> <%= video.title %>
<% if listen %> <% if listen %>
<a href="/watch?<%= env.params.query %>"> <a href="/watch?<%= env.params.query %>">
<i class="fa fa-video" aria-hidden="true"></i> <i class="icon ion-ios-videocam" aria-hidden="true"></i>
</a> </a>
<% else %> <% else %>
<a href="/watch?<%= env.params.query %>&listen=true"> <a href="/watch?<%= env.params.query %>&listen=true">
<i class="fa fa-volume-up" aria-hidden="true"></i> <i class="icon ion-ios-volume-high" aria-hidden="true"></i>
</a> </a>
<% end %> <% end %>
</h1> </h1>
@ -290,9 +290,9 @@ get_youtube_comments();
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1 pure-u-md-1-5"> <div class="pure-u-1 pure-u-md-1-5">
<div class="h-box"> <div class="h-box">
<p><i class="fa fa-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p> <p><i class="icon ion-ios-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
<p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p> <p><i class="icon ion-ios-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
<p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p> <p><i class="icon ion-ios-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
<p id="Genre">Genre : <%= video.genre %></p> <p id="Genre">Genre : <%= video.genre %></p>
<p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p> <p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
<p id="Wilson">Wilson Score : <%= video.wilson_score.round(4) %></p> <p id="Wilson">Wilson Score : <%= video.wilson_score.round(4) %></p>
@ -347,7 +347,7 @@ get_youtube_comments();
</div> </div>
<hr style="margin-left:1em; margin-right:1em;"> <hr style="margin-left:1em; margin-right:1em;">
<div id="comments"> <div id="comments">
<h3><center><i class="loading fas fa-spinner"></i></center></h3> <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
</div> </div>
</div> </div>
</div> </div>