BG Development


  Reply to this topicStart new topicStart Poll

> Проблем с лейаут при направата на сайт, с React, HTML /CSS
aleks.petkoff
Публикувано на: 07-02-2024, 19:51
Quote Post



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

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



Здравейте колеги,

нов съм в програмирането и имам проблем с направата ето този дизайн:
ФИГМА дизайн

Ето линк към моя код в гитхъб:
Линк към кода

В MovieCard.jsx се намира кода на всяка карта
В Movies.jsx е логиката където мап-вам през данните и рендерирам страницата.

При мен се получава ето този проблем, натискам примерно на филма The Martian и полето със заглавието излиза над него, а аз искам да е под него, както е видимов във дизайна по-горе.

Ето още илюстрации какво искам да направя:

Десктоп версия:
user posted image

Таблет версия:
user posted image

Мобилна версия:
user posted image

Ще съм много благодарен , ако може да ми дадете насоки как да го постигна, тъй като съм нов в програмирането. Благодаря!
PMEmail Poster
Top
Бай Аз
Публикувано на: 07-02-2024, 20:36
Quote Post



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

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




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

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

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

Иначе - гледай видеоуроци или сайтове с уроци по Figma, или пиши в конкретен форум за нея.
PMEmail Poster
Top
aleks.petkoff
Публикувано на: 07-02-2024, 20:52
Quote Post



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

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



QUOTE (Бай Аз @ 07-02-2024, 20:36)
Значи, аз работя само с чист HTML и CSS,  такива програми от типа на Figma - не ползвам!

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

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

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

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

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

Това мнение е било редактирано от aleks.petkoff на 07-02-2024, 20:55
PMEmail Poster
Top
Бай Аз
Публикувано на: 07-02-2024, 22:21
Quote Post



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

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




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

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

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

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

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

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

CODE
<body>
       <div id="root"></div>
       <script type="module" src="/src/main.jsx"></script>
</body>


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

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

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

Това мнение е било редактирано от Бай Аз на 07-02-2024, 22:23
PMEmail Poster
Top
relax4o
Публикувано на: 08-02-2024, 00:28
Quote Post



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

Мнения: 2797
Регистриран на: 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
PM
Top
Бай Аз
Публикувано на: 08-02-2024, 08:44
Quote Post



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

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



Погледнах ти CSS кода:

Не използвай: font-size: 62.5%;

Тази техника е демоде и не е препоръчително да се използва, има си калкулатори като си свикнал да мислиш и пресмяташ в пискели.

Не ми се рови в целия ти код, затова дай тази част от HTML кода, където са описани блоковете ти и тази част от CSS кода, която се отнася за тях!

Това мнение е било редактирано от Бай Аз на 08-02-2024, 08:44
PMEmail Poster
Top
aleks.petkoff
Публикувано на: 08-02-2024, 11:17
Quote Post



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

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



QUOTE (Бай Аз @ 07-02-2024, 22:21)
ОК, не ползваш Figma, но ползваш React, който си е framework.

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

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

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

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

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

CODE
<body>
       <div id="root"></div>
       <script type="module" src="/src/main.jsx"></script>
</body>


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

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

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

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

Ето кода от линка по-горе: (където са филтрите в момента съм направил само шаблон, за да видя как ще изглежда , там ще рендерирам данни от сървъра).
<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);
}

PMEmail Poster
Top
aleks.petkoff
Публикувано на: 08-02-2024, 11:25
Quote Post



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

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



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

Ето сниките, на едната се вижда как изглежда каталога с рендерираните карти и след като се натисне бутона View More трябва да излезат детайлите както се вижда от втората снимка.

user posted image

user posted image

PMEmail Poster
Top
relax4o
Публикувано на: 08-02-2024, 15:24
Quote Post



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

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



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


--------------------
Бисери :D

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


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
aleks.petkoff
Публикувано на: 08-02-2024, 16:40
Quote Post



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

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



QUOTE (relax4o @ 08-02-2024, 15:24)
text класа какво прави в CSS-а на Movies компонента? Премести го в MovieCard.css, иначе се скоупва за Movies. Имам усещането, че това е проблема ти, предвид че там му задаваш grid area-та.

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

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

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

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

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;
PMEmail Poster
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0