doin lab5
This commit is contained in:
platoff aeeee
parent
8cd63206d4
commit
dabcb6d568
@ -1,28 +0,0 @@
|
||||
#banner {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
justify-content: space-around; /* распределяет элементы равномерно по горизонтали */
|
||||
flex-wrap: nowrap; /* если вы хотите, чтобы все элементы были в одной линии и не переходили на новую линию. Если нужно переход на новую линию при нехватке места, укажите 'wrap' */
|
||||
}
|
||||
|
||||
#banner img {
|
||||
border: 1px solid #3c3c3f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#banner img.banner-show {
|
||||
width: 20%;
|
||||
opacity: 1;
|
||||
transition: opacity 1s, visibility 0s;
|
||||
}
|
||||
|
||||
#banner img.banner-hide {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 0s 1s;
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
// модуль для смены изображения в баннере по таймеру
|
||||
|
||||
import '../css/banner.css';
|
||||
|
||||
// указывается блок, в котором будет баннер
|
||||
// блок должен содержать изображения
|
||||
function myBanner(root) {
|
||||
console.info("Loaded");
|
||||
|
||||
// получение всех изображений внутри баннера
|
||||
const banners = document.querySelectorAll(`${root} img`);
|
||||
|
||||
// всем изображениям устанавливается класс banner-hide
|
||||
// если были другие классы, то они будут удалены
|
||||
for (let i = 0; i < banners.length; i += 1) {
|
||||
banners[i].setAttribute("class", "banner-hide");
|
||||
}
|
||||
|
||||
let old = banners.length - 1;
|
||||
let current = 0;
|
||||
let current2 = 1;
|
||||
let current3 = 2;
|
||||
|
||||
// функция меняет изображения в цикле
|
||||
// изображение с классом banner-show будет показано
|
||||
// изображение с классом banner-hide будет скрыто
|
||||
// функция запускает таймер, который через 5 секунд
|
||||
// запускает функцию, снова создается таймер и т. д.
|
||||
function loop() {
|
||||
banners[current].setAttribute("class", "banner-show");
|
||||
banners[old].setAttribute("class", "banner-hide");
|
||||
|
||||
console.info("Banner changed");
|
||||
|
||||
old = current;
|
||||
current += 1;
|
||||
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
|
||||
setTimeout(loop, 5000);
|
||||
}
|
||||
|
||||
loop();
|
||||
}
|
||||
|
||||
export default myBanner;
|
||||
@ -484,7 +484,6 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
// export async function UpdateVideos() {
|
||||
// clearVideos();
|
||||
// console.info("UpdateVideos");
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -14,13 +14,13 @@ const LinesItemForm = ({ item, handleChange }) => {
|
||||
<img id='image-preview' className='rounded' alt='placeholder'
|
||||
src={item.image || imgPlaceholder} />
|
||||
</div>
|
||||
<Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
|
||||
required />
|
||||
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
|
||||
type='number' min='1000.0' step='0.50' required />
|
||||
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
|
||||
type='number' min='1' step='1' required />
|
||||
<Input name='image' label='Изображение' onChange={handleChange}
|
||||
{/* <Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
|
||||
required /> */}
|
||||
<Input name='price' label='Name of video' value={item.name} onChange={handleChange}
|
||||
type='string' mrequired />
|
||||
<Input name='count' label='Name of channel' value={item.description} onChange={handleChange}
|
||||
type='string' required />
|
||||
<Input name='image' label='Image' onChange={handleChange}
|
||||
type='file' accept='image/*' />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -11,6 +11,40 @@ import LinesItemForm from '../form/LinesItemForm.jsx';
|
||||
import useLines from '../hooks/LinesHook';
|
||||
// linesChangeHandle изменять состояние => при вызове изменения linesChangeHandle
|
||||
// должно все перерисовываться
|
||||
import {
|
||||
PencilFill, Trash3,
|
||||
} from 'react-bootstrap-icons';
|
||||
|
||||
const UpdateVideo1 = ({
|
||||
item, onEdit, onDelete,
|
||||
}) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
return (
|
||||
<div className="col-md-4 mb-4">
|
||||
<div className="rectNews d-flex flex-column">
|
||||
<img src={item.image} width="100%" alt={item.name} />
|
||||
<div className="rectNewsTextBox text-center">
|
||||
<span className="rectNewsText">
|
||||
<a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
|
||||
<a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
|
||||
{item.description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UpdateVideo.propTypes = {
|
||||
index: PropTypes.number,
|
||||
item: PropTypes.object,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
};
|
||||
|
||||
|
||||
const UpdateVideos = () => {
|
||||
const { lines, handleLinesChange } = useLines();
|
||||
@ -40,14 +74,16 @@ const UpdateVideos = () => {
|
||||
<Button variant='info' onClick={() => showFormModal()}>
|
||||
Добавить товар</Button>
|
||||
</div>
|
||||
<div className="mainDiv row">
|
||||
<div className="mainDiv col-md-9 ml-sm-auto col-lg-10 px-">
|
||||
<div className='mainRow row'>
|
||||
{lines.map((item) => (
|
||||
<UpdateVideo key={item.id}
|
||||
<UpdateVideo1 key={item.id}
|
||||
item={item}
|
||||
onDelete={() => showDeleteModal(item.id)}
|
||||
onEdit={() => showFormModal(item.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<ModalConfirm show={isDeleteModalShow}
|
||||
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||
|
||||
@ -13,20 +13,19 @@ import useLines from '../hooks/LinesHook'; // Замените 'путь_к_ва
|
||||
// import { createAnchor } from ''; // Замените 'путь_к_вашему_утилитарному_модулю' на актуальный путь к вашему утилитарному модулю
|
||||
|
||||
const VideoComponent = ({ item, onEdit, onDelete }) => {
|
||||
const handleAnchorClick = (event, handler) => {
|
||||
event.preventDefault();
|
||||
handler(item);
|
||||
};
|
||||
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="col-md-4 mb-4">
|
||||
<div className="rectNews d-flex flex-column">
|
||||
<img src={item.image} width="100%" alt={item.name} />
|
||||
<img src={item.image} width="100%"/>
|
||||
<div className="rectNewsTextBox text-center">
|
||||
<span className="rectNewsText">
|
||||
<a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
|
||||
<span className="rectNewsText">{item.name} {item.description}
|
||||
<a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
|
||||
<a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
|
||||
{item.description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,113 +1,158 @@
|
||||
|
||||
.col-md-2.sidebar {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
header nav {
|
||||
background-color: #292828;
|
||||
}
|
||||
|
||||
.col-md-2.sidebar .container {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
header nav {
|
||||
height: 64px;
|
||||
}
|
||||
container-fluid nav{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
header nav {
|
||||
height: 64px;
|
||||
}
|
||||
container-fluid nav{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.full-page-div {
|
||||
background-color: #ececec; /* Цвет фона */
|
||||
padding: 1%; /* Внутренний отступ */
|
||||
margin: 1%; /* Внешний отступ */
|
||||
background-color: #ececec; /* Цвет фона */
|
||||
padding: 1%; /* Внутренний отступ */
|
||||
margin: 1%; /* Внешний отступ */
|
||||
}
|
||||
|
||||
header nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #9c9c9c;
|
||||
height: 32px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5px;
|
||||
font-size: 1.5px;
|
||||
}
|
||||
/* .container{
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}*/
|
||||
/* .container-fluid{
|
||||
height: 100vh;
|
||||
}
|
||||
.full-page-div {
|
||||
width: 100%;
|
||||
height: calc(100vh - 56px); /* 56px - высота навигационной панели (navbar)
|
||||
overflow-y: auto; Добавляет вертикальную прокрутку, если содержимое не помещается
|
||||
|
||||
} */
|
||||
.card{
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.card{
|
||||
font-size: 19px;
|
||||
.circle-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden; /* обрезаем лишнее изображение за пределами круга */
|
||||
margin: auto; /* автоматическое выравнивание по горизонтали */
|
||||
margin-top: 20px; /* опциональное выравнивание по вертикали (если нужно) */
|
||||
}
|
||||
|
||||
.circle-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* сохраняем соотношение сторон и обрезаем изображение, чтобы оно полностью заполнило круг */
|
||||
}
|
||||
|
||||
a{
|
||||
margin-bottom: 2px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
/* .container-main {
|
||||
flex: 1;
|
||||
} */
|
||||
|
||||
.streamer-nickname {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 26px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.online-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.online-count {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
/* .sidebar {
|
||||
background-color: #f8f9fa;
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
height: 100vh;
|
||||
} */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.full-page-div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.video-thumbnail {
|
||||
/* width: 1920px;
|
||||
height: 1080px; */
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.embed-responsive{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 1600px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-info{
|
||||
color:rgb(22, 9, 93);
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
color:rgb(22, 9, 93);
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-img-top{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
.avatar-img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.modal-dialog img{
|
||||
max-width: 310px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
max-width: 310px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.fa-pencil{
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,6 +3,8 @@ import './Sidebar.css';
|
||||
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<div className="container-fluid ">
|
||||
|
||||
<div className="row">
|
||||
<nav className="col-md-2 bg-dark sidebar">
|
||||
<div className="d-flex flex-column align-items-center align-items-sm-start px-8 pt-3 text-white">
|
||||
@ -75,6 +77,7 @@ const Sidebar = () => {
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,10 +1,29 @@
|
||||
// import { Link } from 'react-router-dom';
|
||||
import UpdateVideos2 from '../components/lines/videos/UpdateVideos2.jsx';
|
||||
import { Link } from 'react-router-dom';
|
||||
import UpdateVideos from '../components/lines/videos/UpdateVideos.jsx';
|
||||
|
||||
const StartPage = () => {
|
||||
return (
|
||||
<UpdateVideos2 />
|
||||
<>
|
||||
<div className="d-flex">
|
||||
<main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
|
||||
<div className="full-page-div">
|
||||
<div className="p-5 text-center">
|
||||
<h1 className="display-4 fw-bold">Welcome to our streaming service</h1>
|
||||
<p className="fs-5">Explore the whole streaming world!</p>
|
||||
<Link className="btn btn-outline-danger btn-lg" to="page2" role="button">Главная страница</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-5 text-bg-dark rounded-3">
|
||||
<h2>Популярные трансляции</h2>
|
||||
<div className="row">
|
||||
<UpdateVideos />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
// <div className="d-flex">
|
||||
// <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
|
||||
// <div className="full-page-div">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user