diff options
| -rw-r--r-- | routes/mobilepanes.php | 7 | ||||
| -rw-r--r-- | static/mobilepanes.css | 8 | ||||
| -rw-r--r-- | static/skeleton.css | 26 | ||||
| -rw-r--r-- | static/style.css | 1 | ||||
| -rw-r--r-- | templates/head_tags.php | 7 | ||||
| -rw-r--r-- | templates/left_side_navigation.php | 26 | ||||
| -rw-r--r-- | templates/mobilepane_left.php | 32 | ||||
| -rw-r--r-- | templates/mobilepane_right.php | 29 | ||||
| -rw-r--r-- | templates/skeleton.php | 40 |
9 files changed, 148 insertions, 28 deletions
diff --git a/routes/mobilepanes.php b/routes/mobilepanes.php new file mode 100644 index 0000000..b7f7c04 --- /dev/null +++ b/routes/mobilepanes.php @@ -0,0 +1,7 @@ +<?php + +use Digitigrade\Router; + +Router::getInstance()->mount('/mobilepane/:side', function (array $args) { + render_template('mobilepane_' . $args['side']); +});
\ No newline at end of file diff --git a/static/mobilepanes.css b/static/mobilepanes.css new file mode 100644 index 0000000..abd3b68 --- /dev/null +++ b/static/mobilepanes.css @@ -0,0 +1,8 @@ +main.mobilePane { + /*overflow-y: hidden;*/ + display: block; + + #notificationsPanel { + box-sizing: border-box; + } +} diff --git a/static/skeleton.css b/static/skeleton.css index e9e39b2..2d7b216 100644 --- a/static/skeleton.css +++ b/static/skeleton.css @@ -84,11 +84,8 @@ nav { } } } - @media (width < 600px) { - max-width: 0; - max-height: 0; - font-size: 0; - visibility: hidden; + @media (width < 1200px) { + display: none; } } img.avatar { @@ -99,6 +96,9 @@ nav { max-width: 16em; overflow: hidden; text-overflow: ellipsis; + @media (width < 1200px) { + display: none; + } } } @@ -143,6 +143,22 @@ main { } } +#leftPaneActivator, +#rightPaneActivator { + display: none; + text-decoration: none; + cursor: pointer; +} +@media (width < 1200px) { + #leftPaneActivator, + #rightPaneActivator { + display: initial; + } +} +#rightPaneActivator { + text-align: end; +} + h1 { margin: var(--spacing-quadruple) var(--spacing-double); padding: 0; diff --git a/static/style.css b/static/style.css index 0c2bf9d..d1ac93d 100644 --- a/static/style.css +++ b/static/style.css @@ -4,4 +4,5 @@ @import url(note.css); @import url(form.css); @import url(profile.css); +@import url(mobilepanes.css); @import url(misc.css); diff --git a/templates/head_tags.php b/templates/head_tags.php new file mode 100644 index 0000000..66c706a --- /dev/null +++ b/templates/head_tags.php @@ -0,0 +1,7 @@ +<link rel="stylesheet" href="/static/style.css"> +<link rel="stylesheet" href="https://fonts.bunny.net/css?family=dm-sans:400,400i,800,800i"> +<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<script src="https://unpkg.com/htmx.org@2.0.4"></script> +<script src="https://unpkg.com/hyperscript.org@0.9.13"></script> +<script src="/static/language-switch.js" defer></script>
\ No newline at end of file diff --git a/templates/left_side_navigation.php b/templates/left_side_navigation.php new file mode 100644 index 0000000..983aa07 --- /dev/null +++ b/templates/left_side_navigation.php @@ -0,0 +1,26 @@ +<?php +use Digitigrade\Model\FollowRelation; +use Digitigrade\Model\UserAccount; + +$links = []; +$user = UserAccount::findByCurrentSession(); + +if ($user != null) { + $links = [[ + 'href' => '/followrequests', + 'icon' => 'person_add', + 'label' => __('navigation.followRequests'), + 'unreadCount' => FollowRelation::countWhere("object = ? AND status = 'pending'", [$user->actor->id]) + ]]; + if ($user->isAdmin) { + $links[] = ['href' => '/admin/settings/instance', 'icon' => 'settings', 'label' => __('navigation.instanceSettings')]; + } + $links[] = [ + 'href' => '/logout', + 'icon' => 'logout', + 'label' => __('navigation.logout'), + 'confirmation' => __('navigation.logout.confirmation') + ]; + + call_template('side_navigation', ['links' => $links]); +} diff --git a/templates/mobilepane_left.php b/templates/mobilepane_left.php new file mode 100644 index 0000000..77925cc --- /dev/null +++ b/templates/mobilepane_left.php @@ -0,0 +1,32 @@ +<?php +use Digitigrade\GlobalSettings; + +$settings = GlobalSettings::getInstance(); +?> +<!DOCTYPE html> +<html lang="en"> + +<head> + <title><?= __('writeNote.label') ?> — <?= $settings->get('instance.name') ?></title> + <?php call_template('head_tags'); ?> +</head> + +<body hx-boost="true"> + <header> + <nav> + <a id="leftPaneActivator" class="inlineIcon material-symbols-outlined" _="on click go back">close</a> + <span></span> + <span></span> + <span></span> + </nav> + </header> + <main class="mobilePane"> + <?php + call_template('write_note_form'); + call_template('left_side_navigation'); + ?> + <p class="versionInfo"><?= sprintf(__('version'), get_version()) ?></p> + </main> +</body> + +</html>
\ No newline at end of file diff --git a/templates/mobilepane_right.php b/templates/mobilepane_right.php new file mode 100644 index 0000000..6372d83 --- /dev/null +++ b/templates/mobilepane_right.php @@ -0,0 +1,29 @@ +<?php +use Digitigrade\GlobalSettings; +use Digitigrade\Model\UserAccount; + +$settings = GlobalSettings::getInstance(); +?> +<!DOCTYPE html> +<html lang="en"> + +<head> + <title><?= __('writeNote.label') ?> — <?= $settings->get('instance.name') ?></title> + <?php call_template('head_tags'); ?> +</head> + +<body hx-boost="true"> + <header> + <nav> + <span></span> + <span></span> + <span></span> + <a id="rightPaneActivator" class="inlineIcon material-symbols-outlined" _="on click go back">close</a> + </nav> + </header> + <main class="mobilePane"> + <?php call_template('notifications_panel', ['user' => UserAccount::requireByCurrentSession()]); ?> + </main> +</body> + +</html>
\ No newline at end of file diff --git a/templates/skeleton.php b/templates/skeleton.php index 3b2a963..f7670c0 100644 --- a/templates/skeleton.php +++ b/templates/skeleton.php @@ -11,18 +11,20 @@ $settings = GlobalSettings::getInstance(); <head> <title><?= $pageTitle ?> — <?= $settings->get('instance.name') ?></title> - <link rel="stylesheet" href="/static/style.css"> - <link rel="stylesheet" href="https://fonts.bunny.net/css?family=dm-sans:400,400i,800,800i"> - <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <script src="https://unpkg.com/htmx.org@2.0.4"></script> - <script src="https://unpkg.com/hyperscript.org@0.9.13"></script> - <script src="/static/language-switch.js" defer></script> + <?php call_template('head_tags'); ?> </head> <body hx-boost="true" hx-indicator="#loadingIndicator"> <header> <nav> + <?php if ($user != null): ?> + <a id="leftPaneActivator" href="/mobilepane/left" class="inlineIcon material-symbols-outlined"> + menu + </a> + <?php else: ?> + <span id="leftPaneActivator"></span> + <?php endif; ?> + <?php $links = $user == null ? [] : ['/feed/home' => __('timeline.home.shortName')]; $links = array_merge($links, [ @@ -33,6 +35,13 @@ $settings = GlobalSettings::getInstance(); ?> <span id="siteTitle"><?= $settings->get('instance.name') ?></span> <img id="loadingIndicator" class="htmx-indicator" src="/static/tail-spin.svg"> + + <?php if ($user != null): ?> + <a id="rightPaneActivator" href="/mobilepane/right" class="inlineIcon material-symbols-outlined"> + notifications + </a> + <?php endif; ?> + <?php if ($user == null): call_template('navigation_links', ['links' => [ '/login' => __('navigation.login') @@ -51,23 +60,8 @@ $settings = GlobalSettings::getInstance(); <?php if ($user != null) { call_template('write_note_form'); - $links = [[ - 'href' => '/followrequests', - 'icon' => 'person_add', - 'label' => __('navigation.followRequests'), - 'unreadCount' => FollowRelation::countWhere("object = ? AND status = 'pending'", [$user->actor->id]) - ]]; - if ($user->isAdmin) { - $links[] = ['href' => '/admin/settings/instance', 'icon' => 'settings', 'label' => __('navigation.instanceSettings')]; - } - $links[] = [ - 'href' => '/logout', - 'icon' => 'logout', - 'label' => __('navigation.logout'), - 'confirmation' => __('navigation.logout.confirmation') - ]; - call_template('side_navigation', ['links' => $links]); } + call_template('left_side_navigation'); ?> <p class="versionInfo"><?= sprintf(__('version'), get_version()) ?></p> </section> |