Skip to content

Mobile/tablet channel page & share button visual improvements #4061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FreeTubeBot merged 9 commits into from
Sep 25, 2023
Merged

Mobile/tablet channel page & share button visual improvements #4061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
29f8728
Implement fix to elements escaping container on Channel page at small…
kommunarr Sep 18, 2023
2796bae
Show all Channel tabs on smaller viewport widths & reduce bulky gap
kommunarr Sep 18, 2023
a1da09a
Update Channel page to not break at even lower sizes
kommunarr Sep 19, 2023
6a33a07
Merge branch 'development' of github.com:FreeTubeApp/FreeTube into fe…
kommunarr Sep 20, 2023
a4d8e82
Re-introduce channel button clipping fix
kommunarr Sep 20, 2023
b72db70
Implement updated share button styling
kommunarr Sep 20, 2023
a5649f1
Fix issue with prompt box shrinking on small enough viewport sizes / …
kommunarr Sep 21, 2023
2c7ec59
Update share button to work at all sizes'
kommunarr Sep 21, 2023
921c921
Fix pre-existing issue of Channel tabs overflowing on desktop view in…
kommunarr Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/renderer/components/ft-prompt/ft-prompt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
position: fixed;
inset-block-start: 0px;
inset-inline-start: 0px;
inline-size: 100vw;
block-size: 100vh;
inline-size: 100%;
block-size: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 10;
padding: 15px;
Expand All @@ -13,6 +13,10 @@
justify-content: center;
}

.promptCard {
overflow-y: scroll;
}

.promptCard.autosize {
box-sizing: border-box;
margin-block: 0;
Expand Down
29 changes: 27 additions & 2 deletions src/renderer/components/ft-share-button/ft-share-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,19 @@
font-weight: bold;
margin-block: 4px 8px;
margin-inline: 0;
display: flex;
justify-content: center;
}

.buttons {
display: flex;
flex-direction: column;
max-inline-size: min-content;
min-inline-size: 150px;

.action {
padding: 6px;
white-space: initial;
}
}

Expand Down Expand Up @@ -55,8 +60,6 @@
}

.invidious {
display: flex;
justify-content: center;
letter-spacing: -0.4px;

.invidiousLogo {
Expand Down Expand Up @@ -85,3 +88,25 @@
}
}
}

@media only screen and (max-width: 450px) {
.shareLinks {
grid-auto-flow: row;
margin-inline: auto;
justify-items: center;
max-inline-size: max-content;

.header.invidious {
margin-block-start: 20px;
}

.buttons {
max-inline-size: min-content;
min-inline-size: 180px;
}

.divider {
display: none;
}
}
}
40 changes: 39 additions & 1 deletion src/renderer/views/Channel/Channel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@
justify-content: space-between;
}

.subscribeButton {
block-size: fit-content;
}

.shareIcon {
align-self: center;
}
Expand All @@ -94,11 +98,14 @@
gap: 32px;
padding-block: .3em;
padding-inline: 0;
flex-direction: column;
flex-wrap: nowrap;
}

.tabs {
display: flex;
flex: 0 1 33%;
flex-wrap: wrap;
}

.tab {
Expand Down Expand Up @@ -187,6 +194,7 @@
.channelInfoTabs {
block-size: auto;
flex-flow: column-reverse;
gap: 0;
}

.channelSearch {
Expand All @@ -195,9 +203,39 @@
}

.tabs {
overflow-x: scroll;
flex: 1 1 0;
flex-wrap: wrap;
}

#communityPanel {
margin-block-start: 1rem;
}
}

@media only screen and (max-width: 400px) {
.channelInfo {
justify-content: center;
gap: 10px;
}

.channelInfoActionsContainer {
flex-direction: column-reverse;
}

.thumbnailContainer {
flex-direction: column;
}

.thumbnailContainer, .channelInfoActionsContainer {
flex-wrap: wrap;
align-items: center;
text-align: center;
gap: 10px;
}
}

@media only screen and (max-width: 260px) {
.channelDetails {
max-inline-size: none;
}
}