midou/invidious
1
0
Fork 1
mirror of https://github.com/iv-org/invidious.git synced 2024-12-22 08:09:51 +05:30
Code Issues Packages Projects Releases Wiki Activity

HTML/CSS: Fix buttons' responsiveness

Browse Source
This commit is contained in:
Samantaz Fox 2023-04-24 19:44:15 +02:00
parent cc30b00f8c
commit 42fa6ad2a3
No known key found for this signature in database
GPG Key ID: F42821059186176E
3 changed files with 78 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
assets/css/default.css
View File

@ -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 {

4
src/invidious/views/components/video-context-buttons.ecr
View File

@ -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>

18
src/invidious/views/playlist.ecr
View File

@ -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>&nbsp;<%= 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>&nbsp;<%= 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>&nbsp;<%= 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>&nbsp;<%= 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>&nbsp;<%= translate(locale, "generic_button_rss") %>
</a>