Skip to content
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

Small screen adjustments for mobile PWA usage #2184

Open
wants to merge 15 commits into
base: the-future
Choose a base branch
from
Open

Small screen adjustments for mobile PWA usage #2184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4684294
Add padding to feed
logiczsniper Mar 4, 2023
20641f7
Add padding to navbar profile avatar
logiczsniper Mar 4, 2023
d93813b
Fix menu animation on phone size screens only
logiczsniper Mar 4, 2023
9cad6a1
Close navbar menu on click of library and groups
logiczsniper Mar 4, 2023
467ff9c
Add padding to library
logiczsniper Mar 4, 2023
dd03c0a
Fix width stutter on library entries loading skeleton
logiczsniper Mar 4, 2023
e331e4e
Make search bar usable
logiczsniper Mar 4, 2023
779c54b
Use close.svg instead of unicode cross bruh
logiczsniper Mar 4, 2023
e6e081e
Adjust settings pages for small screens
logiczsniper Mar 4, 2023
e157515
Fix spacing on profile-activity page
logiczsniper Mar 4, 2023
839ebd5
Fix group categories padding
logiczsniper Mar 4, 2023
a1468e7
Add margin to full page posts
logiczsniper Mar 4, 2023
c71a2b6
Fix user stats padding
logiczsniper Mar 4, 2023
763c33d
Fix feedback page header gap
logiczsniper Mar 4, 2023
6792fd0
Fix spacing on explore pages
logiczsniper Mar 4, 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
4 changes: 4 additions & 0 deletions app/components/search-results.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ export default Component.extend({
algolia: service(),
metrics: service(),
raven: service(),
tetherConstraints: [{
to: 'window',
pin: true
}],

init() {
this._super(...arguments);
Expand Down
10 changes: 10 additions & 0 deletions app/routes/feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,15 @@ export default Route.extend({
if (get(transition, 'targetName') === 'feedback.index') {
return this.transitionTo('feedback.bugs');
}
},

activate() {
this._super(...arguments);
jQuery('body').addClass('feedback-page');
},

deactivate() {
this._super(...arguments);
jQuery('body').removeClass('feedback-page');
}
});
2 changes: 1 addition & 1 deletion app/styles/base/_shame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ body {
}

@media (max-width: 431px) {
body.settings-page {
body.settings-page, body.feedback-page {
padding-top: 42px;
}
}
Expand Down
7 changes: 6 additions & 1 deletion app/styles/layout/_feeds.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@
width: 100%;
position: relative;
@media (max-width: 768px) {
margin: 0;
margin-left: 8px;
margin-right: 8px;
Comment on lines +123 to +124
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a fan of this change. At least not on smaller phones. It looks good on my OnePlus 6T but on my iPhone X, it takes up too much space. I suggest you add another media query for smaller screens.

@media (max-width: 380px) {
    margin-left: 2px;
    margin-right: 2px;
}

This also applies to the full-page posts.

}
&.quick-update-enabled {
margin-top: 250px;
Expand Down Expand Up @@ -1509,6 +1510,10 @@
width: 100%;
max-width: 540px;
margin: 0 auto;

@media (max-width: 562px) {
margin: 0 12px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the margin larger for a full-page post than for the feed? This just feels inconsistent.

}
}

// Stream review item
Expand Down
25 changes: 25 additions & 0 deletions app/styles/layout/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
}
@media (max-width: 768px) {
width: 100%;
max-height: 179px;
padding: 0;
margin: 0;
left: -2px;
Expand Down Expand Up @@ -223,6 +224,10 @@
&.navbar-nav .nav-item + .nav-item {
margin-left: 10px;
}

@media (max-width: 604px) {
padding-right: 10px;
}
}
.notifications {
width: 25px;
Expand Down Expand Up @@ -324,6 +329,11 @@

.search--drop {
width: 350px;

@media (max-width: 452px) {
width: 300px;
}

max-height: 90vh;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your changes result in the searchbar being hidden by the results dropdown while typing on iOS (at least on my phone with the browser interface on the bottom). I'd suggest making this max height use the new dvh unit and have a fallback to vh.

max-height: 85vh; /* less likely to interfere with other stuff */
max-height: 90dvh;

background-color: $search-background-color;
overflow: auto;
Expand All @@ -334,6 +344,12 @@
.search--results {
padding: 5px 0;
.media {
@media (max-width: 550px) {
display: grid;
grid-template-columns: 62px 1fr min-content;
column-gap: 8px;
}

padding: 5px 10px;
&:hover {
background: $search-results-hover-background;
Expand All @@ -359,6 +375,15 @@
background-color: $search-header-background;
padding: 10px;
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: space-between;

.search-close {
border: none;
background-color: inherit;
fill: $body-text-color;
}
}

.search--group-header {
Expand Down
31 changes: 31 additions & 0 deletions app/styles/layout/_sidebars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
top: 0;
bottom: 0;
padding: 0 0 60px 15px;

@media (max-width: 652px) {
padding-left: 0;
}

width: 300px;
margin-right: -10px;
> .sidebar-item:first-child {
Expand Down Expand Up @@ -176,6 +181,10 @@
&:hover {
color: $white;
}

@media (max-width: 380px) {
padding: 10px 40px;
}
}
}

Expand Down Expand Up @@ -392,6 +401,28 @@
}
}

@media (max-width: 652px) {
.cover-page {
.onboarding-mobile {
width: 96%;
}
.user-favorites {
padding-right: 16px;
}
.stream-onboarding {
margin-right: 16px;
}
.feed-stream {
>:last-child {
margin-right: 16px;
}
}
.user-stats {
padding-right: 16px;
}
}
}

@media (max-width: 1199px) {
.onboarding-mobile {
.rc-progress-line-path {
Expand Down
10 changes: 10 additions & 0 deletions app/styles/pages/_explore.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@
}
}
}

@media (max-width: 524px) {
margin-left: 8px;
margin-right: 8px;
}
}

.explore-section {
Expand Down Expand Up @@ -69,6 +74,11 @@
order: -1;
width: 100%;
max-width: 100%;

.card {
margin-left: 8px;
margin-right: 8px;
}
}
}

Expand Down
5 changes: 5 additions & 0 deletions app/styles/pages/_groups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,11 @@
@media (max-width: 768px) {
width: 100%;
}

@media (max-width: 618px) {
margin-left: 12px;
margin-right: 12px;
}
}

.group-category-list {
Expand Down
13 changes: 13 additions & 0 deletions app/styles/pages/_library.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,12 @@
}

.library-content {
@media (max-width: 768px) {
width: 100%;
margin-left: 8px;
margin-right: 8px;
}
Comment on lines +269 to +273
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refer to my comment on the spacing for feeds. Same applies here.


.media-browse {
padding: 0;
margin-bottom: 15px;
Expand Down Expand Up @@ -769,6 +775,13 @@
}

.library-empty-block {
h5 {
@media (max-width: 768px) {
margin-left: 8px;
margin-right: 8px;
}
}

img {
width: 200px;
height: 200px;
Expand Down
14 changes: 13 additions & 1 deletion app/styles/pages/_settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@
width: 100%;
margin-top: -38px;
margin-bottom: 30px;
padding: 30px 0 0px;
padding: 30px 0 0;

@media (max-width: 608px) {
padding: 30px 12px 0 12px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Too much padding. The existing spacing is already good. Fix the Facebook button instead.

margin-bottom: 0;
}

img {
width: 40px;
height: 40px;
Expand Down Expand Up @@ -96,6 +102,12 @@
.form-group {
padding-bottom: 20px;
margin-bottom: 0;

.form-check-label {
&.link-facebook-button {
margin-left: auto;
}
}
}
small {
color: #909090;
Expand Down
8 changes: 4 additions & 4 deletions app/templates/components/application/site-header.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
<ul class="nav navbar-nav">
{{! Library }}
{{#if session.hasUser}}
<li class="nav-item">
<li class="nav-item" data-toggle="collapse" data-target="#exCollapsingNavbar2">
{{link-to (t "header.library") "users.library" session.account class="nav-link"}}
</li>
{{/if}}
Expand All @@ -78,21 +78,21 @@
<a class="nav-link dropdown-toggle {{if isBrowseRoute "active"}}" href="#" data-toggle="dropdown" data-href-to-ignore=true>
{{t "header.browse"}}
</a>
<div class="dropdown-menu">
<div class="dropdown-menu" data-toggle="collapse" data-target="#exCollapsingNavbar2">
<a class="dropdown-item" href={{href-to "explore.index" "anime"}}>{{t "header.anime"}}</a>
<a class="dropdown-item" href={{href-to "explore.index" "manga"}}>{{t "header.manga"}}</a>
</div>
</li>
{{! Groups }}
<li class="nav-item">
<li class="nav-item" data-toggle="collapse" data-target="#exCollapsingNavbar2">
{{link-to (t "header.groups") "groups.index" class="nav-link"}}
</li>
{{! Feedback}}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {{if isFeedbackRoute "active"}}" href="#" data-toggle="dropdown" data-href-to-ignore=true>
{{t "header.feedback"}}
</a>
<div class="dropdown-menu">
<div class="dropdown-menu" data-toggle="collapse" data-target="#exCollapsingNavbar2">
<a class="dropdown-item" href={{href-to "feedback.bugs"}}>{{t "feedback.bugs"}}</a>
<a class="dropdown-item" href={{href-to "feedback.feature-requests"}}>{{t "feedback.features"}}</a>
<a class="dropdown-item" href="https://kitsu-stuff.com" target="_blank" rel="noopener">{{t "feedback.database"}}</a>
Expand Down
10 changes: 9 additions & 1 deletion app/templates/components/search-results.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,17 @@
attachment=(or attachment "top right")
targetAttachment=(or targetAttachment "bottom right")
offset=(or offset "-30px 0px")
constraints=tetherConstraints
}}
<div class="search--drop">
<p class="search--header">{{t "components.search.header"}}</p>
<p class="search--header">
{{t "components.search.header"}}
<button class="search-close" onclick={{action "close"}}>
<span class="svgIcon">
{{svg-jar "close"}}
</span>
</button>
</p>
<div style="overflow: auto">
{{! media group }}
{{search-results/group
Expand Down
26 changes: 12 additions & 14 deletions app/templates/settings/linked-accounts.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,18 @@
</div>
<div class="container">
<div class="form-group row">
<label class="col-xs-4 col-form-label">{{t "settings.linked-accounts.facebook"}}</label>
<div class="col-xs-8">
<label class="form-check-label">
{{#if session.account.facebookId}}
{{facebook-button text=(t "settings.linked-accounts.disconnect")
disabled=facebookTasks.isRunning
onclick=(perform disconnectFacebook)}}
{{else}}
{{facebook-button text=(t "settings.linked-accounts.connect")
disabled=facebookTasks.isRunning
onclick=(perform connectFacebook)}}
{{/if}}
</label>
</div>
<label class="col-form-label">{{t "settings.linked-accounts.facebook"}}</label>
<label class="form-check-label link-facebook-button">
{{#if session.account.facebookId}}
{{facebook-button text=(t "settings.linked-accounts.disconnect")
disabled=facebookTasks.isRunning
onclick=(perform disconnectFacebook)}}
{{else}}
{{facebook-button text=(t "settings.linked-accounts.connect")
disabled=facebookTasks.isRunning
onclick=(perform connectFacebook)}}
{{/if}}
</label>
</div>
</div>
</div>