Commit f2c8a2ed authored by Ladislav Pittner's avatar Ladislav Pittner
Browse files

refactor: update CSS class naming conventions to BEM methodology for consistency

parent 7dfad0ae

src/Components/FileDrop/DropArea.css

+6 −2
Original line number Diff line number Diff line 
.dropArea {

.drop-area { /* Block */

  border: 2px dashed #707070;

  border-radius: 0.5em;

  padding: 2em 0;
@@ -8,7 +8,11 @@ 
  height: 7%;

}



.dropArea p {

.drop-area--active { /* Modifier */

  border-color: #646cff;

}



.drop-area__text { /* Element */

  margin: 0;

  font-size: 16px;

  color: #666;

src/Components/FileDrop/DropArea.tsx

+4 −4
Original line number Diff line number Diff line
@@ -12,13 +12,13 @@ const DropArea: React.FC<DropAreaProps> = ({ onDrop }) => { 
  return (

    <div

      {...getRootProps()}

      className={`dropArea ${isDragActive ? 'is-active' : ''}`}

      className={`drop-area ${isDragActive ? 'drop-area--active' : ''}`}

    >

      <input {...getInputProps()} />

      {isDragActive ? (

        <p>Drop the files here ...</p>

        <p className="drop-area__text">Drop the files here ...</p>

      ) : (

        <p>Drag n drop some files here, or click to select files</p>

        <p className="drop-area__text">Drag n drop some files here, or click to select files</p>

      )}

    </div>

  );

src/Components/FileDrop/FileThumbnails.css

+10 −10
Original line number Diff line number Diff line 
.carousel-container {

.file-thumbnails { /* Block */

  display: flex;

  flex-direction: column;

}



.thumbnail-wrapper {

.file-thumbnails__thumbnail-wrapper { /* Element */

  display: flex;

  align-items: center;

  margin-bottom: 10px;

}



.file-name {

.file-thumbnails__name { /* Element */

  margin-left: 10px;

  font-size: 14px; /* Adjust font size if needed */

  font-size: 14px;

  flex-grow: 1;

}



.thumbnail-wrapper div {

  width: 100px; /* Adjust the size of the thumbnail */

  height: 56px; /* Maintain aspect ratio, assuming it's 16:9 */

.file-thumbnails__thumbnail img { /* Element */

  width: 100px;

  height: 56px;

  object-fit: cover;

}



.thumbnail-wrapper img, /* Assuming the thumbnail renders an image */

.thumbnail-wrapper video { /* If the Thumbnail is a video */

.file-thumbnails__media { /* Element */

  width: 100%;

  height: 100%;

  object-fit: cover;

src/Components/FileDrop/FileThumbnails.tsx

+7 −6
Original line number Diff line number Diff line 
import React from 'react';

import 'react-responsive-carousel/lib/styles/carousel.min.css'; // Import carousel styles

import 'react-responsive-carousel/lib/styles/carousel.min.css';

import Thumbnail from './VideoThumbnail';

import './FileThumbnails.css';
@@ -11,14 +11,15 @@ interface FileThumbnailsProps { 


const FileThumbnails: React.FC<FileThumbnailsProps> = ({ files, fileNames, filePaths }) => {

  return (

    <div className="carousel-container">

    <div className="file-thumbnails">

      <h3>File Thumbnails:</h3>

      {files.map((file, index) => (

        <div key={index} className="thumbnail-wrapper">

          <div title={filePaths[index]}>

        <div key={index} className="file-thumbnails__thumbnail-wrapper">

          <div className="file-thumbnails__thumbnail"

            title={filePaths[index]}>

            <Thumbnail videoFile={file} />

          </div>

          <p className="file-name" title={filePaths[index]}>{fileNames[index]}</p>

          <p className="file-thumbnails__name" title={filePaths[index]}>{fileNames[index]}</p>

        </div>

      ))}

    </div>

src/Components/FileDrop/VideoThumbnail.tsx

+1 −1
Original line number Diff line number Diff line
@@ -18,7 +18,7 @@ const Thumbnail = ({ videoFile }) => { 
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        const dataURL = canvas.toDataURL('image/png');

        setThumbnail(dataURL);

        URL.revokeObjectURL(video.src); // Clean up the object URL

        URL.revokeObjectURL(video.src);

      };

    };