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-12-20 12:22:02 +04:00
parent a6c48a9fe7
commit 17706d97d1
12 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/chatrow/chatrow.css
View File

@ -1,3 +0,0 @@
.people-row:hover {
background-color: var(--hover-background-color);
}

2
src/components/chatrow/chatrow.jsx
View File

@ -3,7 +3,7 @@ import './chatrow.css';
const ChatRow = () => {
return (
<>
<a className="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<a className="people-row hoverable border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div className="d-flex justify-content-start align-items-center" style={{ fontSize: "small" }}>
<img src="/src/assets/gachi.jpg" className="user-avatar avatar-small img-fluid rounded-circle" />
<div className="user-info ms-2 d-flex flex-column justify-content-center w-100">

7
src/components/friendrow/friendrow.css
View File

@ -0,0 +1,7 @@
.btn-delete-from-friends svg {
transition: .3s;
}
.btn-delete-from-friends:hover svg {
fill: red;
}

7
src/components/friendrow/friendrow.jsx
View File

@ -1,9 +1,10 @@
import { Trash } from 'react-bootstrap-icons';
import './friendrow.css'
const FriendRow = () => {
return (
<>
<div className="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<div className="people-row hoverable border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
<a className="d-flex justify-content-start align-items-center" style={{ fontSize: "small" }}>
<img src="/src/assets/gachi.jpg" className="user-avatar avatar-small img-fluid rounded-circle" />
<div className="user-info ms-2 d-flex flex-column justify-content-center">
@ -15,7 +16,9 @@ const FriendRow = () => {
</div>
</div>
</a>
<button className="btn btn-close" title="Удалить из друзей"></button>
<button className="btn btn-delete-from-friends" title="Удалить из друзей">
<Trash />
</button>
</div>
</>
);

4
src/components/leftmenu/leftmenu.css
View File

@ -7,8 +7,4 @@
border-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0);
}
.left-menu-item:hover {
background-color: var(--hover-background-color);
}

2
src/components/leftmenu/leftmenu.jsx
View File

@ -11,7 +11,7 @@ const LeftMenu = ({ routes }) => {
>
{
routes.map((route) =>
<Link to={route.path} key={route.path} className="left-menu-item d-flex flex-row align-items-center rounded-2 py-1 px-2" title={route.title}>
<Link to={route.path} key={route.path} className="hoverable left-menu-item d-flex flex-row align-items-center rounded-2 py-1 px-2" title={route.title}>
{route.menuIcon}
<span className="ms-2 d-none d-lg-block">{route.title}</span>
</Link>)

58
src/components/post/post.jsx
View File

@ -4,13 +4,12 @@ const Post = () => {
return (
<>
<div className="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2">
<div className="post-header py-1 px-2 d-flex border-bottom justify-content-between align-items-center">
<a className="d-flex justify-content-start align-items-center">
<div className="post-header py-1 ps-1 pe-2 d-flex border-bottom justify-content-between align-items-center">
<a className="hoverable d-flex justify-content-start align-items-center rounded-pill px-1">
<div className="post-author-avatar-wrapper">
<img
src="/src/assets/gachi.jpg" className="post-author-avatar avatar-small rounded-circle" />
<img src="/src/assets/gachi.jpg" className="post-author-avatar avatar-small rounded-circle" />
</div>
<div className="post-meta ms-2 d-flex flex-column justify-content-center">
<div className="post-meta mx-2 d-flex flex-column justify-content-center">
<div className="post-author-name">
Алексей Смирнов
</div>
@ -44,60 +43,29 @@ const Post = () => {
<img src="/src/assets/korgi.jpg" className="post-body-img img-fluid" />
</div>
<div className="post-footer py-1 px-2 border-top d-flex">
<div className="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<div className="hoverable counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z"
fill="currentColor"
fillRule="nonzero"
></path>
<path d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z" fill="currentColor" fillRule="nonzero"></path>
</g>
</svg>
<span className="count ms-1">734</span>
</div>
<div
className="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4"
>
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<div className="hoverable counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor"
fillRule="nonzero"
></path>
<path d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z" fill="currentColor" fillRule="nonzero"></path>
</g>
</svg>
<span className="count ms-1">344</span>
</div>
<div
className="counter-block replies-block px-2 d-flex align-items-center rounded-4"
>
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<div className="hoverable counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor"
fillRule="nonzero"
></path>
<path d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z" fill="currentColor" fillRule="nonzero"></path>
</g>
</svg>
<span className="count ms-1">1</span>

5
src/components/postinputform/postinputform.css
View File

@ -4,4 +4,9 @@
#title-image-block * {
--bs-border-color: var(--alternative-font-color);
}
#post-publication-button {
--bs-btn-bg: var(--dark-background-color);
--bs-btn-border-color: var(--dark-background-color);
}

4
src/components/searchgroup/searchgroup.css Normal file
View File

@ -0,0 +1,4 @@
#button-addon:hover svg {
fill: white;
transition: .3s;
}

17
src/components/searchgroup/searchgroup.jsx Normal file
View File

@ -0,0 +1,17 @@
import { Search } from "react-bootstrap-icons";
import './searchgroup.css';
const SearchGroup = () => {
return (
<>
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="Найти друзей" />
<button className="btn btn-outline-secondary" type="button" id="button-addon">
<Search />
</button>
</div>
</>
);
};
export default SearchGroup;

9
src/index.css
View File

@ -26,7 +26,7 @@
--light-font-color: var(--color-black);
--alternative-font-color: var(--color-black);
--alternative-backgrond-color: var(--light-background-color);
--hover-background-color: rgba(0, 0, 0, 0.05);
--hover-background-color: rgba(0, 0, 0, 0.08);
}
* {
@ -51,6 +51,11 @@ a {
--dark-font-color: var(--color-white);
--alternative-font-color: var(--color-gray);
--alternative-backgrond-color: var(--color-black);
--hover-background-color: rgba(255, 255, 255, 0.05);
--hover-background-color: rgba(255, 255, 255, 0.2);
}
}
.hoverable:hover {
background-color: var(--hover-background-color);
cursor: pointer;
}

9
src/pages/FriendsPage.jsx
View File

@ -1,6 +1,6 @@
import Wrapper from "../components/wrapper/wrapper";
import Center from "../components/center/center";
import { Search } from "react-bootstrap-icons";
import SearchGroup from "../components/searchgroup/searchgroup";
import FriendRow from "../components/friendrow/friendrow";
const FriendsPage = () => {
@ -8,12 +8,7 @@ const FriendsPage = () => {
<>
<Wrapper>
<Center>
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="Найти друзей" />
<button className="btn btn-outline-secondary" type="button" id="button-addon">
<Search />
</button>
</div>
<SearchGroup />
<FriendRow />
<FriendRow />
<FriendRow />