ns.potapov/IP_PIbd-21_Potapov_Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Нижнее меню готово

Browse Source
This commit is contained in:
Никита Потапов 2023-10-15 12:58:35 +04:00
parent cbcc23a80a
commit 7f920dd722
7 changed files with 154 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
feed.html
View File

@ -36,6 +36,9 @@
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
class="bi bi-person me-2"></i>Моя страница</a>
</li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
<li>
<hr class="dropdown-divider">
@ -43,28 +46,27 @@
<li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Выход</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative">
<div id="left-menu"
class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-person"></i>
<span class="ms-2">Моя страница</span>
<span class="ms-2 d-none d-lg-block">Моя страница</span>
</a>
<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-layout-text-sidebar-reverse"></i>
<span class="ms-2">Новости</span>
<span class="ms-2 d-none d-lg-block">Новости</span>
</a>
<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-chat-text"></i>
<span class="ms-2">Сообщения</span>
<span class="ms-2 d-none d-lg-block">Сообщения</span>
</a>
<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-people"></i>
<span class="ms-2">Друзья</span>
<span class="ms-2 d-none d-lg-block">Друзья</span>
</a>
</div>
<div class="wrapper d-flex justify-content-center">
@ -258,7 +260,21 @@
</div>
</main>
<footer class="py-2 d-flex justify-content-center border-top border-dark">
<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
<span>Новости</span>
</a>
<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-chat-text fs-4"></i>
<span>Чаты</span>
</a>
<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-people fs-4"></i>
<span>Друзья</span>
</a>
</div>
<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
<span>&copy; <span id="current-year"></span> Неконтакте</span>
</footer>
</body>

29
friends.html
View File

@ -36,6 +36,9 @@
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
class="bi bi-person me-2"></i>Моя страница</a>
</li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
<li>
<hr class="dropdown-divider">
@ -49,22 +52,22 @@
</header>
<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
<div id="left-menu"
class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-person"></i>
<span class="ms-2">Моя страница</span>
<span class="ms-2 d-none d-lg-block">Моя страница</span>
</a>
<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-layout-text-sidebar-reverse"></i>
<span class="ms-2">Новости</span>
<span class="ms-2 d-none d-lg-block">Новости</span>
</a>
<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-chat-text"></i>
<span class="ms-2">Сообщения</span>
<span class="ms-2 d-none d-lg-block">Сообщения</span>
</a>
<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-people"></i>
<span class="ms-2">Друзья</span>
<span class="ms-2 d-none d-lg-block">Друзья</span>
</a>
</div>
<div class="wrapper d-flex justify-content-center">
@ -162,7 +165,21 @@
</div>
</main>
<footer class="py-2 d-flex justify-content-center border-top border-dark">
<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
<span>Новости</span>
</a>
<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-chat-text fs-4"></i>
<span>Чаты</span>
</a>
<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-people fs-4"></i>
<span>Друзья</span>
</a>
</div>
<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
<span>&copy; <span id="current-year"></span> Неконтакте</span>
</footer>
</body>

35
me.html
View File

@ -36,6 +36,9 @@
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
class="bi bi-person me-2"></i>Моя страница</a>
</li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
<li>
<hr class="dropdown-divider">
@ -49,28 +52,30 @@
</header>
<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative">
<div id="left-menu"
class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-person"></i>
<span class="ms-2">Моя страница</span>
<span class="ms-2 d-none d-lg-block">Моя страница</span>
</a>
<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-layout-text-sidebar-reverse"></i>
<span class="ms-2">Новости</span>
<span class="ms-2 d-none d-lg-block">Новости</span>
</a>
<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-chat-text"></i>
<span class="ms-2">Сообщения</span>
<span class="ms-2 d-none d-lg-block">Сообщения</span>
</a>
<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-people"></i>
<span class="ms-2">Друзья</span>
<span class="ms-2 d-none d-lg-block">Друзья</span>
</a>
</div>
<div class="wrapper d-flex justify-content-center">
<div class="center">
<div class="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex border rounded-2 border-dark">
<img src="./static/img/gachi.jpg" class="user-photo img-fluid rounded-2 h-25 me-5">
<div
class="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex flex-column flex-sm-row border rounded-2 border-dark">
<img src="./static/img/gachi.jpg"
class="user-photo img-fluid rounded-2 h-25 me-5 mb-3 mb-sm-0 w-100">
<div class="user-meta-wrapper d-flex flex-column">
<span class="fs-5 mb-2">Алексей Смирнов</span>
<span style="font-size: small; font-style: italic;" class="mb-2">Прежде чем задать вопрос,
@ -272,7 +277,21 @@
</div>
</main>
<footer class="py-2 d-flex justify-content-center border-top border-dark">
<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
<span>Новости</span>
</a>
<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-chat-text fs-4"></i>
<span>Чаты</span>
</a>
<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-people fs-4"></i>
<span>Друзья</span>
</a>
</div>
<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
<span>&copy; <span id="current-year"></span> Неконтакте</span>
</footer>
</body>

86
messages.html
View File

@ -13,6 +13,7 @@
<link rel="stylesheet" href="./static/css/center.css">
<link rel="stylesheet" href="./static/css/post.css">
<link rel="stylesheet" href="./static/css/avatar.css">
<link rel="stylesheet" href="./static/css/messages.css">
<title>Неконтакте</title>
</head>
@ -36,6 +37,9 @@
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
class="bi bi-person me-2"></i>Моя страница</a>
</li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
<li>
<hr class="dropdown-divider">
@ -49,22 +53,22 @@
</header>
<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
<div id="left-menu"
class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-person"></i>
<span class="ms-2">Моя страница</span>
<span class="ms-2 d-none d-lg-block">Моя страница</span>
</a>
<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-layout-text-sidebar-reverse"></i>
<span class="ms-2">Новости</span>
<span class="ms-2 d-none d-lg-block">Новости</span>
</a>
<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-chat-text"></i>
<span class="ms-2">Сообщения</span>
<span class="ms-2 d-none d-lg-block">Сообщения</span>
</a>
<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-people"></i>
<span class="ms-2">Друзья</span>
<span class="ms-2 d-none d-lg-block">Друзья</span>
</a>
</div>
<div class="wrapper d-flex justify-content-center">
@ -72,13 +76,14 @@
<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
политехнический университет города Ульяновска!
</div>
</div>
</div>
@ -86,13 +91,14 @@
<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
политехнический университет города Ульяновска!
</div>
</div>
</div>
@ -100,13 +106,14 @@
<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
политехнический университет города Ульяновска!
</div>
</div>
</div>
@ -114,13 +121,14 @@
<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
политехнический университет города Ульяновска!
</div>
</div>
</div>
@ -128,13 +136,14 @@
<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
политехнический университет города Ульяновска!
</div>
</div>
</div>
@ -142,27 +151,14 @@
<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
</div>
</div>
</div>
</a>
<a class="people-row p-2 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
<div class="user-info ms-2 d-flex flex-column justify-content-center">
<div class="user-name">
Алексей Смирнов
</div>
<div class="user-message-text px-2 py-1 rounded-3"
style="background-color: #e8e8e8; font-size: smaller;">
Если бы ты знал как мне плохо от этих лабораторок...
Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
политехнический университет города Ульяновска!
</div>
</div>
</div>
@ -171,7 +167,21 @@
</div>
</main>
<footer class="py-2 d-flex justify-content-center border-top border-dark">
<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
<span>Новости</span>
</a>
<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-chat-text fs-4"></i>
<span>Чаты</span>
</a>
<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-people fs-4"></i>
<span>Друзья</span>
</a>
</div>
<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
<span>&copy; <span id="current-year"></span> Неконтакте</span>
</footer>
</body>

12
static/css/base.css
View File

@ -45,3 +45,15 @@ header {
.navbar-brand:hover {
color: white;
}
.bottom-menu {
background-color: #235D70;
}
.bottom-menu * {
color: white;
}
.bottom-menu span {
font-size: smaller;
}

12
static/css/center.css
View File

@ -6,13 +6,25 @@
width: 70%;
}
.user-message-trucated-text {
max-width: 60vw;
}
@media screen and (min-width: 992px) {
.user-message-trucated-text {
max-width: 30vw;
}
.center {
width: 40%;
}
}
@media screen and (max-width: 576px) {
.user-message-trucated-text {
max-width: 70vw;
}
.center {
width: 100%;
}

9
static/css/messages.css Normal file
View File

@ -0,0 +1,9 @@
@media screen and (min-width: 576px) {
.people-row {
transition: .1s;
}
.people-row:hover {
transform: translateX(10px);
}
}