UX: Drop-down menu с учетом мобильных устройств

Мы можем скрыть «длинные цепочки» служебной информации в постах, ответах и комментариях доступных для персонала, чтобы не нарушат макет на устройствах, где ширина экрана ограничена.

We can hide "long chains" of service information in posts, replies and comments available to staff so as not to break the layout on devices where the screen width is limited.
This commit is contained in:
Evg 2022-05-30 20:26:30 +03:00
parent e39938af3b
commit e40feb993e
27 changed files with 91 additions and 261 deletions

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,30 @@
<?php if (UserData::checkAdmin()) : ?>
<div class="relative">
<span class="trigger gray-600 text-sm"> <i class="bi-three-dots gray-600 ml5"></i></span>
<ul class="dropdown">
<li>
<a data-type="post" data-id="<?= $post['post_id']; ?>" class="type-action text-sm gray-600">
<?php if ($post['post_is_deleted'] == 1) : ?>
<span class="sky">&#183; <?= __('app.recover'); ?></span>
<?php else : ?>
&#183; <?= __('app.remove'); ?>
<?php endif; ?>
</a>
</li>
<li>
<a data-id="<?= $post['post_id']; ?>" class="post-recommend gray-600">
<?php if ($post['post_is_recommend'] == 1) : ?>
<span class="sky"> &#183; <?= __('app.recommended'); ?></span>
<?php else : ?>
&#183; <?= __('app.recommended'); ?>
<?php endif; ?>
</a>
</li>
<li>
<a class="gray-600" href="<?= url('admin.logip', ['ip' => $post['post_ip']]); ?>">
&#183; <?= $post['post_ip']; ?>
</a>
</li>
</ul>
</div>
<?php endif; ?>

View file

@ -1,8 +1,8 @@
<?php if (UserData::checkAdmin()) : ?>
<a class="gray-600 ml10" href="<?= url('admin.logip', ['ip' => $ip]); ?>">
<?= $ip; ?>
</a>
</a>
<?php if ($publ == 0) : ?>
<span class="ml15 red lowercase"><?= __('app.audits'); ?></span>
<span class="ml15 red lowercase"><?= __('app.audits'); ?></span>
<?php endif; ?>
<?php endif; ?>

View file

@ -34,7 +34,7 @@
</span>
<?php endif; ?>
<a rel="nofollow" class="gray-600 mr5 ml10" href="<?= $post_url; ?>#answer_<?= $answer['answer_id']; ?>"><i class="bi-hash"></i></a>
<?= insert('/_block/show-ip', ['ip' => $answer['answer_ip'], 'publ' => $answer['answer_published']]); ?>
<?= insert('/_block/admin-show-ip', ['ip' => $answer['answer_ip'], 'publ' => $answer['answer_published']]); ?>
</div>
<div class="max-w780 ind-first-p">
<?= Content::text($answer['answer_content'], 'text'); ?>
@ -143,7 +143,7 @@
<a class="gray-600 mr10 ml10" rel="nofollow" href="<?= $post_url; ?>#answer_<?= $comment['comment_answer_id']; ?>"><i class="bi-arrow-up"></i></a>
<?php endif; ?>
<a class="gray-600 mr5 ml5" rel="nofollow" href="<?= $post_url; ?>#comment_<?= $comment['comment_id']; ?>"><i class="bi-hash"></i></a>
<?= insert('/_block/show-ip', ['ip' => $comment['comment_ip'], 'publ' => $comment['comment_published']]); ?>
<?= insert('/_block/admin-show-ip', ['ip' => $comment['comment_ip'], 'publ' => $comment['comment_published']]); ?>
</div>
<div class="max-w780 ind-first-p">
<?= Content::text($comment['comment_content'], 'text'); ?>

View file

@ -19,7 +19,7 @@
<?php if (empty($answer['edit'])) : ?>
(<?= __('app.ed'); ?>.)
<?php endif; ?>
<?= insert('/_block/show-ip', ['ip' => $answer['answer_ip'], 'publ' => $answer['answer_published']]); ?>
<?= insert('/_block/admin-show-ip', ['ip' => $answer['answer_ip'], 'publ' => $answer['answer_published']]); ?>
</div>
<a class="qa-login" href="<?= url('profile', ['login' => $answer['login']]); ?>"><?= $answer['login']; ?></a>
</div>
@ -81,7 +81,7 @@
<span class="lowercase gray-600">
&nbsp; <?= Html::langDate($comment['date']); ?>
</span>
<?= insert('/_block/show-ip', ['ip' => $comment['comment_ip'], 'publ' => $comment['comment_published']]); ?>
<?= insert('/_block/admin-show-ip', ['ip' => $comment['comment_ip'], 'publ' => $comment['comment_published']]); ?>
</span>
<?php if (UserData::getRegType(config('trust-levels.tl_add_comm_qa'))) : ?>

View file

@ -28,7 +28,7 @@ foreach ($data['answers'] as $answer) :
</span>
<?php endif; ?>
<a rel="nofollow" class="gray-600 mr5 ml10" href="<?= $post_url; ?>#answer_<?= $answer['answer_id']; ?>"><i class="bi-hash"></i></a>
<?= insert('/_block/show-ip', ['ip' => $answer['answer_ip'], 'publ' => $answer['answer_published']]); ?>
<?= insert('/_block/admin-show-ip', ['ip' => $answer['answer_ip'], 'publ' => $answer['answer_published']]); ?>
</div>
<div class="content-body">
<?= Content::text($answer['content'], 'text'); ?>

View file

@ -3,12 +3,10 @@
<ul class="nav">
<?= insert('/_block/navigation/nav', ['list' => config('navigation/nav.answers')]); ?>
</ul>
<div class="trigger">
<i class="bi-info-square gray-600"></i>
</div>
<div class="dropdown tooltip">
<?= __('meta.' . $data['sheet'] . '_' . $data['type'] . '_info'); ?>
</div>
<div class="relative">
<div class="trigger"><i class="bi-info-square gray-600"></i></div>
<div class="dropdown tooltip"><?= __('meta.' . $data['sheet'] . '_' . $data['type'] . '_info'); ?></div>
</div>
</div>
<?php if (!empty($data['answers'])) : ?>

View file

@ -35,7 +35,7 @@ foreach ($answer as $comment) :
<span class="mr5 ml5 gray-600 lowercase">
<?= Html::langDate($comment['date']); ?>
</span>
<?= insert('/_block/show-ip', ['ip' => $comment['comment_ip'], 'publ' => $comment['comment_published']]); ?>
<?= insert('/_block/admin-show-ip', ['ip' => $comment['comment_ip'], 'publ' => $comment['comment_published']]); ?>
</div>
<a href="<?= url('post', ['id' => $comment['post_id'], 'slug' => $comment['post_slug']]); ?>#comment_<?= $comment['comment_id']; ?>">
<?= $comment['post_title']; ?>

View file

@ -3,11 +3,9 @@
<ul class="nav">
<?= insert('/_block/navigation/nav', ['list' => config('navigation/nav.comments')]); ?>
</ul>
<div class="trigger">
<i class="bi-info-square gray-600"></i>
</div>
<div class="dropdown tooltip">
<?= __('meta.' . $data['sheet'] . '_' . $data['type'] . '_info'); ?>
<div class="relative">
<div class="trigger"><i class="bi-info-square gray-600"></i></div>
<div class="dropdown tooltip"><?= __('meta.' . $data['sheet'] . '_' . $data['type'] . '_info'); ?></div>
</div>
</div>

View file

@ -4,10 +4,12 @@
<?= insert('/_block/navigation/nav', ['list' => config('navigation/nav.home')]); ?>
</ul>
<div class="trigger">
<i class="bi-info-square gray-600"></i>
<div class="relative">
<div class="trigger">
<i class="bi-info-square gray-600"></i>
</div>
<div class="dropdown tooltip"><?= __('meta-main.' . $data['sheet'] . '_info'); ?></div>
</div>
<div class="dropdown tooltip"><?= __('meta-main.' . $data['sheet'] . '_info'); ?></div>
</div>
<?= insert('/content/post/post', ['data' => $data]); ?>

View file

@ -33,13 +33,14 @@
<h1><?= $post['post_title']; ?>
<?= insert('/content/post/post-title', ['post' => $post]); ?>
</h1>
<div class="text-sm lowercase flex gray-600">
<div class="text-sm lowercase3 flex gray-600">
<?= Html::langDate($post['post_date']); ?>
<?php if ($post['modified']) : ?>
(<?= __('app.ed'); ?>)
<?php endif; ?>
<?php if (UserData::checkActiveUser()) : ?>
<?php if (UserData::getUserLogin() == $post['login'] || UserData::checkAdmin()) : ?>
<a class="gray-600 mr10 ml10" href="<?= url('content.edit', ['type' => 'post', 'id' => $post['post_id']]); ?>">
<?= __('app.edit'); ?>
@ -56,24 +57,10 @@
</span>
<?php endif; ?>
<?php endif; ?>
<?php if (UserData::checkAdmin()) : ?>
<a data-type="post" data-id="<?= $post['post_id']; ?>" class="type-action gray-600 mr10 ml10">
<?php if ($post['post_is_deleted'] == 1) : ?>
<i class="bi-trash red"></i>
<?php else : ?>
<i class="bi-trash"></i>
<?php endif; ?>
</a>
<a data-id="<?= $post['post_id']; ?>" class="post-recommend gray-600 mr10 ml10">
<?php if ($post['post_is_recommend'] == 1) : ?>
<i class="bi-lightning sky"></i>
<?php else : ?>
<i class="bi-lightning"></i>
<?php endif; ?>
</a>
<?php endif; ?>
<?= insert('/_block/show-ip', ['ip' => $post['post_ip'], 'publ' => $post['post_published']]); ?>
<?= insert('/_block/admin-dropdown-post', ['post' => $post]); ?>
<?php endif; ?>
</div>
</div>

View file

@ -19,16 +19,18 @@
</span>
<?php if (!$fav['tag_id']) : ?>
<span class="trigger right lowercase gray-600 text-sm"> <i class="bi-plus-lg gray-600 mr5"></i></span>
<span class="dropdown right">
<?php if ($data['tags']) : ?>
<?php foreach ($data['tags'] as $tag) : ?>
<div class="save-folder gray-600 text-sm p5" data-id="<?= $tag['id']; ?>" data-tid="<?= $fav['tid']; ?>" data-type="favorite"><?= $tag['value']; ?></div>
<?php endforeach; ?>
<?php else : ?>
<?= __('app.no'); ?>...
<?php endif; ?>
</span>
<div class="relative right">
<span class="trigger lowercase gray-600 text-sm"> <i class="bi-plus-lg gray-600 mr5"></i></span>
<span class="dropdown">
<?php if ($data['tags']) : ?>
<?php foreach ($data['tags'] as $tag) : ?>
<div class="save-folder gray-600 text-sm p5" data-id="<?= $tag['id']; ?>" data-tid="<?= $fav['tid']; ?>" data-type="favorite"><?= $tag['value']; ?></div>
<?php endforeach; ?>
<?php else : ?>
<?= __('app.no'); ?>...
<?php endif; ?>
</span>
</div>
<?php endif; ?>
<?php if ($fav['action_type'] == 'post') : ?>

View file

@ -2,7 +2,7 @@
use Hleb\Constructor\Handlers\Request;
Request::getHead()->addStyles('/assets/css/style.css?12');
Request::getHead()->addStyles('/assets/css/style.css?14');
$type = $data['type'] ?? false;
$facet = $data['facet'] ?? false; ?>

View file

@ -2,7 +2,7 @@
use Hleb\Constructor\Handlers\Request; ?>
<?php Request::getHead()->addStyles('/assets/css/style.css?12'); ?>
<?php Request::getHead()->addStyles('/assets/css/style.css?14'); ?>
<?= insert('/meta', ['meta' => $meta]); ?>

View file

@ -80,7 +80,7 @@ body.item.dark .box {
background-color: #d0d0d0;
}
.dropdown { min-width: 220px; }
.item.dropdown { min-width: 220px; }
@media (max-width: 890px) {
.item.logo {

View file

@ -29,6 +29,7 @@ font-display: swap;
/* Editor */
.bi-type-bold::before { content: "\f5f0"; }
.bi-door-closed::before { content: "\f306"; }
.bi-three-dots::before { content: "\f5d4"; }
.bi-camera::before { content: "\f220"; }
.bi-emoji-smile::before { content: "\f327"; }
.bi-type-italic::before { content: "\f5f4"; }

View file

@ -28,7 +28,6 @@
position: absolute;
right: 0;
background-color: #fff;
top: 51px;
box-shadow: 0 12px 12px rgba(0,0,0,0.15);
padding: 5px 10px 5px 10px;
z-index: 5;

View file

@ -56,23 +56,8 @@
</span>
<?php endif; ?>
<?php endif; ?>
<?php if (UserData::checkAdmin()) : ?>
<a data-type="post" data-id="<?= $post['post_id']; ?>" class="type-action gray-600 mr10 ml10">
<?php if ($post['post_is_deleted'] == 1) : ?>
<i class="bi-trash red"></i>
<?php else : ?>
<i class="bi-trash"></i>
<?php endif; ?>
</a>
<a data-id="<?= $post['post_id']; ?>" class="post-recommend gray-600 mr10 ml10">
<?php if ($post['post_is_recommend'] == 1) : ?>
<i class="bi-lightning sky"></i>
<?php else : ?>
<i class="bi-lightning"></i>
<?php endif; ?>
</a>
<?php endif; ?>
<?= insert('/_block/show-ip', ['ip' => $post['post_ip'], 'publ' => $post['post_published']]); ?>
<?= insert('/_block/admin-dropdown-post', ['post' => $post]); ?>
<?php endif; ?>
</div>
</div>

View file

@ -20,16 +20,18 @@
</span>
<?php if (!$fav['tag_id']) : ?>
<span class="trigger right lowercase gray-600 text-sm"> <i class="bi-plus-lg gray-600 mr5"></i></span>
<span class="dropdown right">
<?php if ($data['tags']) : ?>
<?php foreach ($data['tags'] as $tag) : ?>
<div class="save-folder gray-600 text-sm p5" data-id="<?= $tag['id']; ?>" data-tid="<?= $fav['tid']; ?>" data-type="favorite"><?= $tag['value']; ?></div>
<?php endforeach; ?>
<?php else : ?>
<?= __('app.no'); ?>...
<?php endif; ?>
</span>
<div class="relative right">
<span class="trigger lowercase gray-600 text-sm"> <i class="bi-plus-lg gray-600 mr5"></i></span>
<span class="dropdown">
<?php if ($data['tags']) : ?>
<?php foreach ($data['tags'] as $tag) : ?>
<div class="save-folder gray-600 text-sm p5" data-id="<?= $tag['id']; ?>" data-tid="<?= $fav['tid']; ?>" data-type="favorite"><?= $tag['value']; ?></div>
<?php endforeach; ?>
<?php else : ?>
<?= __('app.no'); ?>...
<?php endif; ?>
</span>
</div>
<?php endif; ?>
<?php if ($fav['action_type'] == 'post') : ?>

View file

@ -1,22 +0,0 @@
<div>
<?= insert('/content/user/profile/header', ['data' => $data]); ?>
<div class="flex gap">
<main class="col-two">
<div class="box-flex">
<p class="m0"><?= __('app.answers'); ?> <b><?= $data['profile']['login']; ?></b></p>
</div>
<?php if (!empty($data['answers'])) : ?>
<div class="ml15">
<?= insert('/content/answer/answer', ['data' => $data]); ?>
<?= Html::pagination($data['pNum'], $data['pagesCount'], false, '/@' . $data['profile']['login'] . '/answers'); ?>
</div>
<?php else : ?>
<?= insert('/_block/no-content', ['type' => 'small', 'text' => __('app.no_answers'), 'icon' => 'bi-info-lg']); ?>
<?php endif; ?>
</main>
<aside>
<?= insert('/content/user/profile/sidebar', ['data' => $data]); ?>
</aside>
</div>
</div>
<?= insert('/_block/js-msg-flag'); ?>

View file

@ -1,23 +0,0 @@
<div>
<?= insert('/content/user/profile/header', ['data' => $data]); ?>
<div class="flex gap">
<main class="col-two">
<div class="box-flex">
<p class="m0"><?= __('app.comments'); ?> <b><?= $data['profile']['login']; ?></b></p>
</div>
<?php if (!empty($data['comments'])) : ?>
<div class="ml15">
<?= insert('/content/comment/comment', ['answer' => $data['comments']]); ?>
<?= Html::pagination($data['pNum'], $data['pagesCount'], false, '/@' . $data['profile']['login'] . '/comments'); ?>
</div>
<?php else : ?>
<?= insert('/_block/no-content', ['type' => 'small', 'text' => __('app.no_comments'), 'icon' => 'bi-info-lg']); ?>
<?php endif; ?>
</main>
<aside>
<?= insert('/content/user/profile/sidebar', ['data' => $data]); ?>
</aside>
</div>
</div>
<?= insert('/_block/js-msg-flag'); ?>

View file

@ -1,81 +0,0 @@
<?php
$profile = $data['profile'];
$css = 'w110 mb-w100 ml15 z-10 -mt90 br-rd5';
if ($profile['cover_art'] != 'cover_art.jpeg') {
$css = 'w160 mb-w100 z-10 -mt90 ml15 br-rd5';
}
?>
<div class="br-gray box">
<?php if ($profile['cover_art'] != 'cover_art.jpeg') : ?>
<div class="profile-box-cover relative">
<img class="w-100 min-h100" src="<?= Html::coverUrl($profile['cover_art'], 'user'); ?>" alt="<?= $profile['login']; ?>">
</div>
<?php else : ?>
<div class="profile-box relative" style="background: <?= $profile['color']; ?>;min-height: 90px;"></div>
<?php endif; ?>
<div class="flex justify-between">
<div class="z-10 w-100">
<?= Html::image($profile['avatar'], $profile['login'], $css, 'avatar', 'max'); ?>
<?php if (UserData::checkActiveUser()) : ?>
<div class="right m20">
<?php if ($profile['id'] == UserData::getUserId()) : ?>
<a class="btn btn-primary" title="<?= __('app.settings'); ?>" href="<?= url('setting'); ?>">
<i class="bi-gear"></i>
</a>
<?php else : ?>
<?php if ($data['button_pm'] === true) : ?>
<a class="btn btn-primary" title="<?= __('app.write_message'); ?>" href="<?= url('send.messages', ['login' => $profile['login']]); ?>">
<i class="bi-envelope"></i>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="flex">
<h1 class="mb-block mb-text-xl m15 mb-mt15 flex">
<?= $profile['login']; ?>
<?php if ($profile['name']) : ?> / <?= $profile['name']; ?><?php endif; ?>
<?php if ($profile['up_count'] > 0) : ?>
<i class="up-id bi-heart red mr10 ml20 mb-ml5 text-sm inline"></i>
<sup class="text-sm gray-600 inline"><?= Html::formatToHuman($profile['up_count']); ?></sup>
<?php endif; ?>
</h1>
<div class="ml120 mt10 mb-none">
<div class="flex justify-center">
<?php if ($data['count']['count_posts'] > 0) : ?>
<div class="ml15 mr15 center box-number">
<a class="focus-user sky" href="<?= url('profile.posts', ['login' => $profile['login']]); ?>">
<?= $data['count']['count_posts']; ?>
</a>
<div class="uppercase mt5 text-sm gray-600"><?= __('app.posts'); ?></div>
</div>
<?php endif; ?>
<?php if ($data['count']['count_answers'] > 0) : ?>
<div class="ml15 mr15 center box-number">
<a class="focus-user sky" href="<?= url('profile.answers', ['login' => $profile['login']]); ?>">
<?= $data['count']['count_answers']; ?>
</a>
<div class="uppercase mt5 text-sm gray-600"><?= __('app.answers'); ?></div>
</div>
<?php endif; ?>
<?php if ($data['count']['count_comments'] > 0) : ?>
<div class="ml15 mr15 center box-number">
<a class="focus-user sky" href="<?= url('profile.comments', ['login' => $profile['login']]); ?>">
<?= $data['count']['count_comments']; ?>
</a>
<div class="uppercase mt5 text-sm gray-600"><?= __('app.comments'); ?></div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>

View file

@ -1,15 +0,0 @@
<div>
<?= insert('/content/user/profile/header', ['data' => $data]); ?>
<div class="flex gap">
<main class="col-two">
<?= insert('/content/post/post', ['data' => $data]); ?>
<?= Html::pagination($data['pNum'], $data['pagesCount'], false, '/@' . $data['profile']['login'] . '/posts'); ?>
</main>
<aside>
<?= insert('/content/user/profile/sidebar', ['data' => $data]); ?>
</aside>
</div>
</div>

View file

@ -1,18 +0,0 @@
<div>
<?= insert('/content/user/profile/header', ['data' => $data]); ?>
<div class="flex gap">
<main class="col-two">
<div class="box-flex">
<p class="m0"><?= __('app.posts'); ?> <b><?= $data['profile']['login']; ?></b></p>
</div>
<?= insert('/content/post/post', ['data' => $data]); ?>
<?= Html::pagination($data['pNum'], $data['pagesCount'], false, '/@' . $data['profile']['login'] . '/posts'); ?>
</main>
<aside>
<?= insert('/content/user/profile/sidebar', ['data' => $data]); ?>
</aside>
</div>
</div>

View file

@ -11,7 +11,7 @@ $facet = $data['facet'] ?? false; ?>
<body<?php if (Request::getCookie('dayNight') == 'dark') : ?> class="dark" <?php endif; ?>>
<header class="bg-white mt0 mb15">
<div class="br-bottom mr-auto max-width w-100 pr10 pl15 mb10 mb-none items-center flex">
<div class="br-bottom wrap p5 mb-none items-center flex">
<a class="mr20 black text-xs" href="/topics">
<i class="bi-columns-gap mr5"></i> <?= __('app.topics'); ?>
</a>

View file

@ -10,7 +10,7 @@
<div class="w40">
<?= Html::votes($post, 'post', 'ps', 'bi-arrow-up-short text-xl font-semibold', 'block'); ?>
</div>
<div class="ml10">
<div>
<div>
<?php if ($data['sheet'] == 'subscribed') : ?>
<div data-id="<?= $post['post_id']; ?>" data-type="post" class="focus-id bg-violet text-sm right">
@ -18,7 +18,7 @@
</div>
<?php endif; ?>
<a href="<?= $post_url; ?>">
<h3 class="inline"><?= $post['post_title']; ?>
<h3 class=""><?= $post['post_title']; ?>
<?= insert('/content/post/post-title', ['post' => $post]); ?>
</h3>
</a>

View file

@ -48,23 +48,8 @@
</span>
<?php endif; ?>
<?php endif; ?>
<?php if (UserData::checkAdmin()) : ?>
<a data-type="post" data-id="<?= $post['post_id']; ?>" class="type-action gray-600 mr10 ml10">
<?php if ($post['post_is_deleted'] == 1) : ?>
<i class="bi-trash red"></i>
<?php else : ?>
<i class="bi-trash"></i>
<?php endif; ?>
</a>
<a data-id="<?= $post['post_id']; ?>" class="post-recommend gray-600 mr10 ml10">
<?php if ($post['post_is_recommend'] == 1) : ?>
<i class="bi-lightning sky"></i>
<?php else : ?>
<i class="bi-lightning"></i>
<?php endif; ?>
</a>
<?php endif; ?>
<?= insert('/_block/show-ip', ['ip' => $post['post_ip'], 'publ' => $post['post_published']]); ?>
<?= insert('/_block/admin-dropdown-post', ['post' => $post]); ?>
<?php endif; ?>
</div>
</div>