BG Development Форуми -> Проблем с лейаут при направата на сайт

BG Development · За реклама · За контакти

Помощ

Търсене

Потребители

Календар

Правила

Здравей! ( Включване | Регистриране )

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript

Проблем с лейаут при направата на сайт, с React, HTML /CSS

Абонирай се за темата | Изпрати адреса на темата на приятел | Принтирай темата

aleks.petkoff	Публикувано на: 07-02-2024, 19:51
Име: Александър Група: Потребител Ранг: Новопостъпил Мнения: 5 Регистриран на: 07.02.24	Здравейте колеги, нов съм в програмирането и имам проблем с направата ето този дизайн: ФИГМА дизайн Ето линк към моя код в гитхъб: Линк към кода В MovieCard.jsx се намира кода на всяка карта В Movies.jsx е логиката където мап-вам през данните и рендерирам страницата. При мен се получава ето този проблем, натискам примерно на филма The Martian и полето със заглавието излиза над него, а аз искам да е под него, както е видимов във дизайна по-горе. Ето още илюстрации какво искам да направя: Десктоп версия: Таблет версия: Мобилна версия: Ще съм много благодарен , ако може да ми дадете насоки как да го постигна, тъй като съм нов в програмирането. Благодаря!

Бай Аз	Публикувано на: 07-02-2024, 20:36
Име: Група: Потребител Ранг: Редовен член Мнения: 306 Регистриран на: 04.02.21	Значи, аз работя само с чист HTML и CSS, такива програми от типа на Figma - не ползвам! Ако сведеш въпроса си до чист HTML и CSS код - бих се опитал да помогна! Примерно приложи тази част от кода, която отговаря за това действие. Иначе - гледай видеоуроци или сайтове с уроци по Figma, или пиши в конкретен форум за нея.

aleks.petkoff

Публикувано на: 07-02-2024, 20:52

Име: Александър
Група: Потребител
Ранг: Новопостъпил

Мнения: 5
Регистриран на: 07.02.24

QUOTE (Бай Аз @ 07-02-2024, 20:36)

Значи, аз работя само с чист HTML и CSS, такива програми от типа на Figma - не ползвам!

Ако сведеш въпроса си до чист HTML и CSS код - бих се опитал да помогна!

Примерно приложи тази част от кода, която отговаря за това действие.

Иначе - гледай видеоуроци или сайтове с уроци по Figma, или пиши в конкретен форум за нея.

Ами не, аз Фигмата я ползвам само да гледам дизайна и да се опитам да го пресъздам, като си напиша кода сам. Преглеждам вече два дни сайтове и не мога да намеря подобен Accordion. ;(

Иначе по-горе съм оставил линк към моя код - с компонентите и лейаута, докъдето съм стигнал.

Това мнение е било редактирано от aleks.petkoff на 07-02-2024, 20:55

Бай Аз

Публикувано на: 07-02-2024, 22:21

Име:
Група: Потребител
Ранг: Редовен член

Мнения: 306
Регистриран на: 04.02.21

ОК, не ползваш Figma, но ползваш React, който си е framework.

Аз лично не ползвам frameworks по няколко причини, като основните са, че добавят прекалено много излишен код, трябва да учиш първо и как се работи със самият framework, и при възникване на някакъв проблем много трудно можеш да се ориентираш в кода и да разбереш за какво става въпрос, и как да отстраниш този проблем.

А за начинаещ да ползва framework е абсолютно непрепоръчително!
И това не го казвам само аз, а много от експертите в тази област.

framework може да използваш, когато започнеш да правиш сайтове на кило...

Както и да е - огледах кода ти, но за да ти се даде точен съвет - трябва да е от някой, който е работил с този framework.

За мен примерно е необяснимо как може във файла index.html, в тялото на документа <body>, при този сложен дизайн, да има само следния код:

CODE

Явно се ползват някакви други файлове...Но нямам намерение тепърва да уча React.

Затова поне приложи тук отделно тази част от кода, където според теб възниква проблемът, за да може някой който разбира, да го погледне и евентуално да ти помогне!

(Програмистите са мързеливи хора

и трудно някой ще се захване да анализира целия ти код, за да намери грешката!)

Това мнение е било редактирано от Бай Аз на 07-02-2024, 22:23

relax4o

Публикувано на: 08-02-2024, 00:28

Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2826
Регистриран на: 04.04.07

Сега си качи кода в stackblitz да се види ти какво виждаш. По фигма дизайна и това, което описваш аз лично не се ориентирам за какво говориш.

CODE

<div>
<div className="card-component">
<div className="image-container">
<img src={image} alt="movie image" />
</div>
<div className="categories-container">
{categories.map((c) => (
<span key={c._id} className="category">
{c.name}
</span>
))}
</div>
<div className="title">
<p className="movie-title">{title}</p>
</div>
<button onClick={handleClick} className="more-btn">
{isClicked ? "View less" : "View more"}
</button>
</div>
{isClicked && <div className="text">{title}</div>}
</div>

тук имаш две места със заглавието. Това, за което говориш е при клик. Като цяло няма нищо очевидно тук, за това клоня към това, че е грешка в CSS-а ти.

Видях, че използваш grid. Аз грид не съм ползвал, но има вероятност грида да ти обръща позицията на елементите по обратен ред, което ще сложи заглавието отгоре.

Също обръщай внимание къде си слагаш класовете и за кой компонент се отнасят, защото бъндлъра има голям шанс да ти ги scope-ва за конкретния компонент и да не се отразяват каскадно в другите.

Преди да правиш нещата с Реакт (особено, ако си нов), и се опитваш да кодираш дизайни - прави ги с чист HTML и CSS, и опростен JS, там, където искаш да имаш динамика в дизайна.

След това ще ти е по-лесно да си нагласиш нещата по компоненти в Реакт, защото ще имаш цялата картинка кодирана.

--------------------

Бисери :D

QUOTE (oveRLuckEd)

Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.

QUOTE (nbacool2)

Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy

Бай Аз	Публикувано на: 08-02-2024, 08:44
Име: Група: Потребител Ранг: Редовен член Мнения: 306 Регистриран на: 04.02.21	Погледнах ти CSS кода: Не използвай: font-size: 62.5%; Тази техника е демоде и не е препоръчително да се използва, има си калкулатори като си свикнал да мислиш и пресмяташ в пискели. Не ми се рови в целия ти код, затова дай тази част от HTML кода, където са описани блоковете ти и тази част от CSS кода, която се отнася за тях! Това мнение е било редактирано от Бай Аз на 08-02-2024, 08:44

aleks.petkoff

Публикувано на: 08-02-2024, 11:17

Име: Александър
Група: Потребител
Ранг: Новопостъпил

Мнения: 5
Регистриран на: 07.02.24

QUOTE (Бай Аз @ 07-02-2024, 22:21)

CODE

и трудно някой ще се захване да анализира целия ти код, за да намери грешката!)

Налага ми се да използвам реакт, тъй като ми е изискване от фирмата.

Ето кода от линка по-горе: (където са филтрите в момента съм направил само шаблон, за да видя как ще изглежда , там ще рендерирам данни от сървъра).
<MovieCard> в кода е компонента, който отговаря за рендериране на картата за всеки филм.

CODE

import MovieCard from "./MovieCard";
import { useContext, useState } from "react";
import DataContext from "../../contexts/dataContext";
import "./Movies.css";

function Movies() {
const { movies, categories, actors } = useContext(DataContext);
// // const [isClicked, setIsClicked] = useState(false);
// const [selectedMovie, setSelectedMovie] = useState(null);

// const handleClick = (title) => {
// setIsClicked(() => !isClicked);
// setSelectedMovie(() => title);
// };

return (
<div className="movies-component">
<div className="premier">
<div className="titles">
<p className="premier-title">Premiere 2023</p>
<p className="premier-subtitle">Comming soon.</p>
</div>
</div>

<div className="movies-container">
<div className="filters">
<div className="filter-title">Filters:</div>
<div className="dropdown">
<select className="dropbtn">
<option value="">Category</option>
<option value="genre1">Genre 1</option>
<option value="genre1">Genre 1</option>
<option value="genre1">Genre 1</option>
<option value="genre1">Genre 1</option>
</select>
</div>
</div>

<div className="movie-cards-container">
{movies.map((m) => (
<MovieCard
key={m._id}
title={m.title}
image={m.image}
categories={m.categories}
/>
))}
</div>
</div>
</div>
);
}

export default Movies;

CODE

import { useState } from "react";
import "./MovieCard.css";

function MovieCard({ title, image, categories }) {
const [isClicked, setIsClicked] = useState(false);

const handleClick = () => {
setIsClicked((prevIsClicked) => !prevIsClicked);
};

return (
<div>
<div className="card-component">
<div className="image-container">
<img src={image} alt="movie image" />
</div>
<div className="categories-container">
{categories.map((c) => (
<span key={c._id} className="category">
{c.name}
</span>
))}
</div>
<div className="title">
<p className="movie-title">{title}</p>
</div>
<button onClick={handleClick} className="more-btn">
{isClicked ? "View less" : "View more"}
</button>
</div>
{isClicked && <div className="text">{title}</div>}
</div>
);
}

export default MovieCard;

CSS code:

CODE

.movies-component {
margin-top: 4rem;
max-width: 120rem;
}

.premier {
text-align: center;
background-color: aqua;
}

.titles {
padding-top: 4rem;
padding-bottom: 4rem;

background-color: rgba(13, 1, 67, 0.87);
}

.premier-title {
font-size: 4rem;
color: white;
display: inline-block;
position: relative;
}

.premier-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30%;
height: 2px;
background-color: rgb(222, 185, 0);
}

.premier-subtitle {
font-size: 1.6rem;
color: rgba(221, 221, 221, 0.802);
margin-top: 1rem;
}

.movies-container {
margin-top: 2rem;
margin-bottom: 2rem;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.filters {
align-self: flex-start;
gap: 2rem;
}

.filter-title {
font-size: 2rem;
display: inline;
margin-right: 2rem;
}
.dropdown {
display: inline-block;
}
.dropbtn {
background-color: #001997;
color: white;
padding: 1rem;
font-size: 1.2rem;
border-radius: 5px;
border: none;
cursor: pointer;
}

option {
font-size: 1.2rem;
}

.movie-cards-container {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"card card card"
"test test test";
gap: 2rem;
position: relative;
}

.text {
font-size: 5rem;
grid-area: test;
position: relative;
margin-top: 2rem;
background-color: rgb(195, 195, 195);
}

.card-component {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgb(173, 173, 173);
}

.image-container {
width: 100%;
height: 40rem;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}
.categories-container {
margin-top: 2rem;
}

.category {
font-size: 1rem;
padding: 0.5rem 1rem;
margin: 1rem;

background-color: rgb(255, 201, 4);
border-radius: 5px;
}

.movie-title {
font-size: 2rem;
margin-top: 2rem;
}

.more-btn {
font-size: 1.2rem;
padding: 0.8rem;
margin: 2rem;
width: 90%;

background-color: white;
border: 1px solid rgb(156, 156, 156);
border-radius: 5px;
cursor: pointer;

transition: all 0.5s ease;
}

.more-btn:hover {
transform: translateY(-5%);
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
}

aleks.petkoff	Публикувано на: 08-02-2024, 11:25
Име: Александър Група: Потребител Ранг: Новопостъпил Мнения: 5 Регистриран на: 07.02.24	Идеята е да направя ето тази фукнция от дизайна, като нали ще е нагло да искам кода да ми напише някой, а просто насоки как да го направя. Ето сниките, на едната се вижда как изглежда каталога с рендерираните карти и след като се натисне бутона View More трябва да излезат детайлите както се вижда от втората снимка.

relax4o

Публикувано на: 08-02-2024, 15:24

Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2826
Регистриран на: 04.04.07

text класа какво прави в CSS-а на Movies компонента? Премести го в MovieCard.css, иначе се скоупва за Movies. Имам усещането, че това е проблема ти, предвид че там му задаваш grid area-та.

--------------------

Бисери :D

QUOTE (oveRLuckEd)

Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.

QUOTE (nbacool2)

Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy

aleks.petkoff

Публикувано на: 08-02-2024, 16:40

Име: Александър
Група: Потребител
Ранг: Новопостъпил

Мнения: 5
Регистриран на: 07.02.24

QUOTE (relax4o @ 08-02-2024, 15:24)

да , бях го сложил на грешното място, но не е там проблема, то като се рендерира страницата обединява CSS-a.

проблема беше, че grid-template-area, не работи по начина , по-който мислех.
трябва всеки ред от каталога да е в отделен див, върху който да приложа самия grid-template-area

Преди 10мин го оправих, и сега всичко работи както искам.
Благодаря все пак на всички отзовали се

Ето и кода, ако някой го интересува как реших проблема: (целия код може да се види в репозиторито по-горе / вече е ъпдейтнато )

CODE

import MovieCard from "./MovieCard";
import { useContext, useState } from "react";
import DataContext from "../../contexts/dataContext";
import "./Movies.css";

function Movies() {
const { movies, categories, actors } = useContext(DataContext);

const [clickedIndex, setClickedIndex] = useState(null);

const handleCardClick = (index) => {
clickedIndex != index ? setClickedIndex(index) : setClickedIndex(null);
};

const chunkArray = (arr, chunkSize) => {
const chunkedArray = [];
for (let i = 0; i < arr.length; i += chunkSize) {
chunkedArray.push(arr.slice(i, i + chunkSize));
}
return chunkedArray;
};

const chunkedMovies = chunkArray(movies, 3);

return (
<div className="movies-component">
<div className="premier">
<div className="titles">
<p className="premier-title">Premiere 2023</p>
<p className="premier-subtitle">Comming soon.</p>
</div>
</div>

<div className="movies-container">
<div className="filters">
<div className="filter-title">Filters:</div>
<div className="dropdown">
<select className="dropbtn">
<option value="">Category</option>
<option value="genre1">Genre 1</option>
<option value="genre1">Genre 1</option>
<option value="genre1">Genre 1</option>
<option value="genre1">Genre 1</option>
</select>
</div>
</div>

<div className="movie-cards-container">
{chunkedMovies.map((row, rowIndex) => (
<div key={rowIndex} className="grid-row">
{row.map((m, index) => (
<MovieCard
key={m._id}
title={m.title}
image={m.image}
categories={m.categories}
isClicked={
clickedIndex === rowIndex * 3 + index
}
onClick={() =>
handleCardClick(rowIndex * 3 + index)
}
/>
))}
</div>
))}
</div>
</div>
</div>
);
}

export default Movies;

1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)

Потребители, преглеждащи темата в момента:

« Предишна тема | HTML/CSS/JavaScript/VBScript | Следваща тема »

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript