mirror of
https://github.com/iv-org/invidious.git
synced 2024-11-09 09:48:23 +00:00
HTML/CSS: Fix buttons' responsiveness
This commit is contained in:
parent
cc30b00f8c
commit
42fa6ad2a3
@ -1,3 +1,7 @@
|
||||
/*
|
||||
* Common attributes
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
|
||||
@ -11,6 +15,16 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.h-box {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.v-box {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.deleted {
|
||||
background-color: rgb(255, 0, 0, 0.5);
|
||||
}
|
||||
@ -20,6 +34,34 @@ body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0.5em 0 1em 0;
|
||||
}
|
||||
|
||||
/* A flex container */
|
||||
.flexible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-left {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.flex-right {
|
||||
display: flex;
|
||||
flex: 2 0 auto;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Channel page
|
||||
*/
|
||||
|
||||
.channel-profile > * {
|
||||
font-size: 1.17em;
|
||||
font-weight: bold;
|
||||
@ -90,16 +132,6 @@ body a.channel-owner {
|
||||
}
|
||||
}
|
||||
|
||||
.h-box {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.v-box {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
div {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
@ -144,9 +176,15 @@ body a.pure-button-primary,
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Has to be combined with flex-left/right */
|
||||
.button-container {
|
||||
flex-flow: wrap;
|
||||
gap: 0.5em 0.75em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Thumbnails
|
||||
* Video thumbnails
|
||||
*/
|
||||
|
||||
div.thumbnail {
|
||||
@ -280,6 +318,11 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Responsive rules
|
||||
*/
|
||||
|
||||
@media only screen and (max-aspect-ratio: 16/9) {
|
||||
.player-dimensions.vjs-fluid {
|
||||
padding-top: 46.86% !important;
|
||||
@ -298,20 +341,28 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
.navbar > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar > div:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.navbar > .searchbar > form {
|
||||
width: 60%;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.25em;
|
||||
margin: 0.42em 0;
|
||||
}
|
||||
|
||||
/* Space out the subscribe & RSS buttons and align them to the left */
|
||||
.title.flexible { display: block; }
|
||||
.title.flexible > .flex-right { margin: 0.75em 0; justify-content: flex-start; }
|
||||
|
||||
/* Space out buttons to make them easier to tap */
|
||||
.user-field { font-size: 125%; }
|
||||
.user-field > :not(:last-child) { margin-right: 1.75em; }
|
||||
|
||||
.icon-buttons { font-size: 125%; }
|
||||
.icon-buttons > :not(:last-child) { margin-right: 0.75em; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
@ -328,10 +379,6 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
|
||||
.video-card-row { margin: 15px 0; }
|
||||
|
||||
.flexible { display: flex; }
|
||||
.flex-left { flex: 1 1 100%; flex-wrap: wrap; }
|
||||
.flex-right { flex: 1 0 auto; flex-wrap: nowrap; }
|
||||
|
||||
p.channel-name { margin: 0; }
|
||||
p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
|
||||
|
||||
@ -659,12 +706,7 @@ label[for="music-desc-expansion"]:hover {
|
||||
}
|
||||
|
||||
/* Bidi (bidirectional text) support */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
h1, h2, h3, h4, h5, p,
|
||||
#descriptionWrapper,
|
||||
#description-box,
|
||||
#music-description-box {
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div class="flex-right">
|
||||
<div class="flex-right flexible">
|
||||
<div class="icon-buttons">
|
||||
<a title="<%=translate(locale, "videoinfo_watch_on_youTube")%>" href="https://www.youtube.com/watch<%=endpoint_params%>">
|
||||
<i class="icon ion-logo-youtube"></i>
|
||||
@ -6,7 +6,7 @@
|
||||
<a title="<%=translate(locale, "Audio mode")%>" href="/watch<%=endpoint_params%>&listen=1">
|
||||
<i class="icon ion-md-headset"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
|
||||
<a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=%2Fwatch<%=URI.encode_www_form(endpoint_params)%>">
|
||||
<i class="icon ion-md-jet"></i>
|
||||
|
@ -6,30 +6,28 @@
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" />
|
||||
<% end %>
|
||||
|
||||
<div class="pure-g h-box">
|
||||
<div class="pure-u-1-2">
|
||||
<h3><%= title %></h3>
|
||||
</div>
|
||||
<div class="h-box flexible title">
|
||||
<div class="flex-left"><h3><%= title %></h3></div>
|
||||
|
||||
<div class="pure-u-1-2 user-field">
|
||||
<div class="flex-right button-container">
|
||||
<%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="pure-u">
|
||||
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/add_playlist_items?list=<%= plid %>">
|
||||
<i class="icon ion-md-add"></i> <%= translate(locale, "playlist_button_add_items") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="pure-u">
|
||||
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/edit_playlist?list=<%= plid %>">
|
||||
<i class="icon ion-md-create"></i> <%= translate(locale, "generic_button_edit") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="pure-u">
|
||||
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
|
||||
<i class="icon ion-md-trash"></i> <%= translate(locale, "generic_button_delete") %>
|
||||
</a>
|
||||
</div>
|
||||
<%- else -%>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="pure-u">
|
||||
<%- if IV::Database::Playlists.exists?(playlist.id) -%>
|
||||
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/subscribe_playlist?list=<%= plid %>">
|
||||
<i class="icon ion-md-add"></i> <%= translate(locale, "Subscribe") %>
|
||||
@ -42,7 +40,7 @@
|
||||
</div>
|
||||
<%- end -%>
|
||||
|
||||
<div class="pure-u-1-3">
|
||||
<div class="pure-u">
|
||||
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/feed/playlist/<%= plid %>">
|
||||
<i class="icon ion-logo-rss"></i> <%= translate(locale, "generic_button_rss") %>
|
||||
</a>
|
||||
|
Loading…
Reference in New Issue
Block a user