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

Jump to bottom

Fix content on mobile view not visible #42

Merged
merged 2 commits into from
Jul 16, 2023
Merged

Fix content on mobile view not visible #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6fe973
hold your horses mobile-mode-switcher
krowter Jul 15, 2023
81fa118
css: "js is stealing our jobs!"
krowter Jul 16, 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
3 changes: 1 addition & 2 deletions src/components/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,13 @@ const { title, keywords, summary, url } = Astro.props as Props;
<Seo keywords={keywords} summary={summary} url={url} title={title} />
<script>
import "../scripts/spa-navigation";
import "../scripts/mobile-mode-switcher";
</script>

<script>
import "../scripts/chat-box-scroll-restoration";
</script>
</head>
<body>
<body data-is-pathname-null={pathname === "/"}>
<div class="container">
<Sidebar talks={talks} pathname={pathname} client:load />
<div class="chat-content" id="chat-content">
Expand Down
35 changes: 0 additions & 35 deletions src/scripts/mobile-mode-switcher.ts
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions src/service/SpaNavigator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// ref: https://github.com/Charca/astro-music
import { switchToMobile } from "../scripts/mobile-mode-switcher";

export class SpaNavigator {
private shouldNotIntercept(navigationEvent: NavigateEvent) {
Expand Down Expand Up @@ -38,7 +37,10 @@ export class SpaNavigator {

navigateEvent.intercept({
handler: async () => {
switchToMobile();
// to handle mobile view, this attribute is used in layout.scss
// to hide chat-content and sidebar accordingly
document.body.dataset.isPathnameNull = (location.pathname === "/").toString();

const loadingFragment = await this.getFragment("/loading/");
this.render(loadingFragment);
const chatFragment = await this.getFragment((toPath === "/" ? "/chat/_" : toPath) + "/");
Expand Down
1 change: 1 addition & 0 deletions src/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "./variables.scss";
@use "./layout.scss";
@import "./preflight.scss";

body {
Expand Down
13 changes: 13 additions & 0 deletions src/styles/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use "./variables.scss";

@media (max-width: variables.$screen-md-min) {
body:not([data-is-pathname-null]) .sidebar {
display: none
}
}

@media (max-width: variables.$screen-md-min) {
body[data-is-pathname-null] #chat-content {
display: none
}
}
2 changes: 2 additions & 0 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ $font-mono: "Jetbrains Mono", monospace;

$code-fg: #1e2779;
$code-bg: #d7daef;

$screen-md-min: 768px;
Loading