search

apprentice-team-3 / team-weekly-report

Team Weekly Reportのリポジトリです。
0 stars 0 forks source link

コード確認用 #312

Open YNSTakeru opened 5 months ago

YNSTakeru commented 5 months ago 
DROP DATABASE IF EXISTS team_weekly_report;

create database team_weekly_report character set 'utf8mb4';
use team_weekly_report;

/*
progressは0~100で、100になったら完了とする
parent_tasksテーブルのprogressから集計する
 */

CREATE TABLE projects (
    id INT PRIMARY KEY,
    title VARCHAR(128) NOT NULL,
    content TEXT NOT NULL,
    progress FLOAT DEFAULT 0 NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE users (
    id INT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

/*
advanced
そのプロジェクトに誰が参加しているかを管理するテーブル
評価が完了したかを調べるために使う
今回はusersテーブルの総数でも代用できるためadvanced
 */
CREATE TABLE user_project (
    user_id INT,
    project_id INT,
    PRIMARY KEY (user_id, project_id),
    FOREIGN KEY (user_id) REFERENCES users (id),
    FOREIGN KEY (project_id) REFERENCES projects (id)
);

/*
progressはchild_tasksのprogressから集計する
 */
CREATE TABLE parent_tasks (
    project_id INT,
    user_id INT,
    id INT,
    title VARCHAR(128) NOT NULL,
    progress FLOAT DEFAULT 0 NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (project_id, user_id, id),
    FOREIGN KEY (user_id) REFERENCES users (id),
    FOREIGN KEY (project_id) REFERENCES projects (id)
);

/*
contentにtaskの詳細を記入
 */
CREATE TABLE child_tasks (
    project_id INT,
    user_id INT,
    parent_task_id INT,
    id INT,
    title VARCHAR(128) NOT NULL,
    content TEXT,
    progress FLOAT DEFAULT 0 NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (project_id, user_id, parent_task_id, id),
    FOREIGN KEY (project_id, user_id, parent_task_id) REFERENCES parent_tasks (project_id, user_id, id)
);

/*
statusテーブル name候補
normal
danger
completed
pending : 評価待ち
evaluated
 */

CREATE TABLE status(
    id INT PRIMARY KEY,
    name VARCHAR(128) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE task_status (
    project_id INT,
    user_id INT,
    parent_task_id INT,
    task_id INT,
    status_id INT,
    isStatus BOOLEAN DEFAULT FALSE,
    primary key (project_id, user_id, task_id, status_id),
    FOREIGN KEY (project_id, user_id, parent_task_id,task_id) REFERENCES child_tasks (project_id, user_id, parent_task_id, id),
    FOREIGN KEY (status_id) REFERENCES status (id)
);

/*
メンバーのタスク評価項目を全て完了するとevaluationsテーブルに1行追加する
ユーザーの総数を取得し
evaluationsテーブルを使って、タスクの評価が完了したユーザーの総数を取得する
evaluations評価が完了すると、isEvaluationをTRUEにする

evaluationsテーブルのisEvaluationがTRUEにする条件
メンバー全員が評価を完了した場合
 */

CREATE TABLE evaluations(
    project_id INT,
    task_user_id INT,
    parent_task_id INT,
    task_id INT,
    user_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (project_id, task_user_id, parent_task_id, task_id, user_id),
    FOREIGN KEY (project_id, task_user_id, parent_task_id, task_id) REFERENCES child_tasks (project_id, user_id, parent_task_id, id),
    FOREIGN KEY (user_id) REFERENCES users (id)
);

/*
 name候補
 コードの綺麗さ
 実装難易度
 チーム貢献度
 報告のわかりやすさ
 実装速度

 フロント
 バック
 データベース
 要件定義
 WEBデザイン
 */

CREATE TABLE tags (
    id INT PRIMARY KEY,
    name VARCHAR(128) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

/*
evaluation_tagsテーブルを使って、評価して欲しいタスクを設定する
 */
CREATE TABLE evaluation_tags(
    project_id INT,
    task_user_id INT,
    parent_task_id INT,
    task_id INT,
    user_id INT,
    tag_name_id INT,
    isEvaluated BOOLEAN DEFAULT FALSE,
    comment VARCHAR(255),
    PRIMARY KEY (project_id, task_user_id, parent_task_id, task_id, user_id, tag_name_id),
    FOREIGN KEY (project_id, task_user_id, parent_task_id, task_id, user_id) REFERENCES evaluations (project_id, task_user_id, parent_task_id, task_id, user_id),
    FOREIGN KEY (tag_name_id) REFERENCES tags(id)
);

/*
advanced 子タスクへのコメント
 */

CREATE TABLE comments (
    project_id INT,
    task_user_id INT,
    task_id INT,
    user_id INT,
    comment TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (project_id, task_user_id, task_id, user_id),
    FOREIGN KEY (project_id, task_user_id, task_id) REFERENCES parent_tasks (project_id, user_id, id),
    FOREIGN KEY (user_id) REFERENCES users (id)
);

/*
    ユーザーがそのタスクを読んだか
    ユーザーがそのタスクにコメントしたか
    を管理するテーブル
 */

/*

ユーザーがタスク詳細画面に訪れたか
commentしたユーザーがいてかつ,isReadがFALSEの場合のみ

user_idはそのタスク詳細画面に訪れたユーザー
 */

CREATE TABLE is_read_comment(
    project_id INT,
    task_user_id INT,
    task_id INT,
    comment_user_id INT,
    user_id INT,
    isRead BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (project_id, task_user_id, task_id, comment_user_id, user_id),
    FOREIGN KEY (project_id, task_user_id, task_id, comment_user_id) REFERENCES comments (project_id, task_user_id, task_id, user_id),
    FOREIGN KEY (user_id) REFERENCES users (id)
);

INSERT INTO users (id, name, email, password, avatar_url) VALUES
(1, 'YNSTakeru', 'ynstakeru@gmail.com', 'password', 'https://drive.google.com/file/d/1FXvhb0P416fJKwo-3_y8J3SmxDq65_kR/view?usp=sharing'),
(2, 'gintoki', 'gintoki@gmail.com', 'password', ''),
(3, 'ryumasann', 'ryuumasann@gmail.com', 'password', ''),
(4, 'Ryunosuke Matsuoka', 'ryuunosukematsuoka@gmail.com', 'password', '');

-- 作成日時よりも120日前に作成する
INSERT INTO projects (id, title, content, created_at) VALUES
(1, '僕らのプロジェクト', '僕らのプロジェクトの内容', concat( date_sub(current_date(), interval 120 day))),
(2, 'プロジェクト2', 'プロジェクト2の内容', concat( date_sub(current_date(), interval 120 day))),
(3, 'プロジェクト3', 'プロジェクト3の内容', concat( date_sub(current_date(), interval 120 day))),
(4, 'プロジェクト4', 'プロジェクト4の内容', concat( date_sub(current_date(), interval 120 day)));

-- pending : 評価待ち、タスクの完了 = 評価待ち状態
INSERT INTO status (id, name) VALUES
(1, 'normal'),
(2, 'danger'),
(3, 'pending'),
(4, 'evaluated');

INSERT INTO tags (id, name) VALUES
(1, 'コードの綺麗さ'),
(2, '実装難易度'),
(3, 'チーム貢献度'),
(4, '報告のわかりやすさ'),
(5, '実装速度');

INSERT INTO parent_tasks (project_id, user_id, id, title, progress, created_at) VALUES
(1, 1, 1, 'ワイヤーフレームの作成', 30, '2024-03-28 00:00:00'),
(1, 2, 2, '画面遷移図', 60,'2024-03-28 00:00:00'),
(1, 3, 3, 'データベース設計', 80, '2024-03-28 00:00:00'),
(1, 4, 4, 'タスク出し', 100, '2024-03-28 00:00:00'),
(1, 1, 5, 'LPの作成', 0, '2024-03-27 00:00:00'),
(1, 2, 6, 'コア機能実装', 80, '2024-03-27 00:00:00'),
(1, 3, 7, 'データベース周りの実装', 80, '2024-03-27 00:00:00'),
(1, 4, 8, 'ユーザー登録処理の実装', 80, '2024-03-27 00:00:00'),
(1, 1, 9, 'aページの表示処理', 80, '2024-03-26 00:00:00'),
(1, 2, 10, 'bページの表示処理', 80, '2024-03-26 00:00:00'),
(1, 3, 11, 'cページの表示処理', 80, '2024-03-26 00:00:00'),
(1, 4, 12, 'dページの表示処理', 80, '2024-03-26 00:00:00'),
(1, 1, 13, 'aページのスタイルを整える', 80, '2024-03-25 00:00:00'),
(1, 2, 14, 'bページのスタイルを整える', 80, '2024-03-25 00:00:00'),
(1, 3, 15, 'cページのスタイルを整える', 80, '2024-03-25 00:00:00'),
(1, 4, 16, 'dページのスタイルを整える', 80, '2024-03-25 00:00:00'),
(1, 1, 17, 'aページの動的な画面処理', 80, '2024-03-24 00:00:00'),
(1, 2, 18, 'bページの動的な画面処理', 80, '2024-03-24 00:00:00'),
(1, 3, 19, 'cページの動的な画面処理', 80, '2024-03-24 00:00:00'),
(1, 4, 20, 'dページの動的な画面処理', 80, '2024-03-24 00:00:00'),
(1, 1, 21, 'aページのPHP処理', 80, '2024-03-23 00:00:00'),
(1, 2, 22, 'bページのPHP処理', 80, '2024-03-23 00:00:00'),
(1, 3, 23, 'cページのPHP処理', 80, '2024-03-23 00:00:00'),
(1, 4, 24, 'dページのPHP処理', 80, '2024-03-23 00:00:00'),
(1, 1, 25, '1,aページとcページ', 80, '2024-03-22 00:00:00'),
(1, 2, 26, '2,bページとdページ', 80, '2024-03-22 00:00:00'),
(1, 3, 27, '3,aページとcページ', 80, '2024-03-22 00:00:00'),
(1, 4, 28, '4,bページとdページ', 80, '2024-03-22 00:00:00'),
(1, 1, 29, 'ワイヤーフレームの作成', 80, '2024-03-21 00:00:00'),
(1, 2, 30, '画面遷移図', 80, '2024-03-21 00:00:00'),
(1, 3, 31, 'データベース設計', 80, '2024-03-21 00:00:00'),
(1, 4, 32, 'タスク出し', 80, '2024-03-21 00:00:00'),
(1, 1, 33, 'LPの作成', 80, '2024-03-20 00:00:00'),
(1, 2, 34, 'コア機能実装', 80, '2024-03-20 00:00:00'),
(1, 3, 35, 'データベース周りの実装', 80, '2024-03-20 00:00:00'),
(1, 4, 36, 'ユーザー登録処理の実装', 80, '2024-03-20 00:00:00'),
(1, 1, 37, 'aページの表示処理', 80, '2024-03-19 00:00:00'),
(1, 2, 38, 'bページの表示処理', 80, '2024-03-19 00:00:00'),
(1, 3, 39, 'cページの表示処理', 80, '2024-03-19 00:00:00'),
(1, 4, 40, 'dページの表示処理', 80, '2024-03-19 00:00:00'),
(1, 1, 41, 'aページのスタイルを整える', 80, '2024-03-18 00:00:00'),
(1, 2, 42, 'bページのスタイルを整える', 80, '2024-03-18 00:00:00'),
(1, 3, 43, 'cページのスタイルを整える', 80, '2024-03-18 00:00:00'),
(1, 4, 44, 'dページのスタイルを整える', 80, '2024-03-18 00:00:00'),
(1, 1, 45, 'aページの動的な画面処理', 80, '2024-03-17 00:00:00'),
(1, 2, 46, 'bページの動的な画面処理', 80, '2024-03-17 00:00:00'),
(1, 3, 47, 'cページの動的な画面処理', 80, '2024-03-17 00:00:00'),
(1, 4, 48, 'dページの動的な画面処理', 80, '2024-03-17 00:00:00'),
(1, 1, 49, 'aページのPHP処理', 80, '2024-03-16 00:00:00'),
(1, 2, 50, 'bページのPHP処理', 80, '2024-03-16 00:00:00'),
(1, 3, 51, 'cページのPHP処理', 80, '2024-03-16 00:00:00'),
(1, 4, 52, 'dページのPHP処理', 80, '2024-03-16 00:00:00'),
(1, 1, 53, '1,aページとcページ', 80, '2024-03-15 00:00:00'),
(1, 2, 54, '2,bページとdページ', 80, '2024-03-15 00:00:00'),
(1, 3, 55, '3,aページとcページ', 80, '2024-03-15 00:00:00'),
(1, 4, 56, '4,bページとdページ', 80, '2024-03-15 00:00:00'),
(1, 4, 57, '4,React', 80, '2024-03-15 00:00:00');

INSERT INTO child_tasks (project_id, user_id, parent_task_id, id, title, content, progress) VALUES
(1, 1, 1, 1, '画面1のワイヤーフレーム作成', 'LPのワイヤーフレーム', 100),
(1, 1, 1, 2, '画面2のワイヤーフレーム作成', '', 60),
(1, 1, 1, 3, '画面3のワイヤーフレーム作成', '登録画面のワイヤーフレーム', 0),
(1, 2, 2, 4, 'aページからの画面遷移図', 'aページからcページへの遷移図', 100),
(1, 2, 2, 5, 'bページからの画面遷移図', 'bページからdページへの遷移図', 100),
(1, 3, 3, 6, 'エンティティの定義', '', 100),
(1, 3, 3, 7, '正規化', '', 80),
(1, 3, 3, 8, 'ER図', '', 0),
(1, 4, 4, 9, 'タスク出し', '', 100),
(1, 4, 4, 10, '見積もり', '', 100),
(1, 1, 5, 11, 'HTMLで表示する', '', 100),
(1, 1, 5, 12, 'CSSでスタイルを整える', '', 100),
(1, 1, 5, 13, 'JSで動きをつける', '', 100),
(1, 2, 6, 14, 'PHPで...', '', 60),
(1, 2, 6, 15, 'MySQLから...', '', 0),
(1, 3, 7, 16, 'DBに接続する処理', '', 100),
(1, 3, 7, 17, 'エラー時の処理', '', 100),
(1, 4, 8, 18, '登録画面を作成', '', 100),
(1, 4, 8, 19, '通信を暗号化する', '暗号化!!', 80);

-- 初期設定
set @s_project_id = 1;

-- 親タスクを集計してプロジェクト全体の進捗を出す
SELECT  @s_project_progress := (sum(progress) / (count(progress))) FROM parent_tasks t where project_id = @s_project_id;
UPDATE projects SET progress = @s_project_progress WHERE id = @s_project_id;

INSERT INTO task_status (project_id, user_id, parent_task_id, task_id, status_id) VALUES
(1, 1, 1, 1, 3),
(1, 1, 1, 2, 1),
(1, 1, 1, 3, 1),
(1, 2, 2, 4, 3),
(1, 2, 2, 5, 3),
(1, 3, 3, 6, 3),
(1, 3, 3, 7, 1),
(1, 3, 3, 8, 1),
(1, 4, 4, 9, 3),
(1, 4, 4, 10, 3),
(1, 1, 5, 11, 3),
(1, 1, 5, 12, 3),
(1, 1, 5, 13, 3),
(1, 2, 6, 14, 1),
(1, 2, 6, 15, 1),
(1, 3, 7, 16, 3),
(1, 3, 7, 17, 3),
(1, 4, 8, 18, 3),
(1, 4, 8, 19, 1);
YNSTakeru commented 5 months ago

views/member-task.php

<link rel="stylesheet" href="/views/css/popup/popup.css">
<div class="task__container">
    <h2 class="project__container">
        <div class="project__detail">
        <?php echo $project->title ?>
        <script>
            const progress = Number("<?php echo $project->progress ?>")
            const progressPercent = progress.toFixed(4)
            document.write(progressPercent + "%")
        </script>
        完了
        </div>
    </h2>
    <ul class="weekly__report__container">
        <?php foreach ($users as $user) : ?>
            <li class="weekly__report">
                <div class="user__name">
                    <div>
                        <?php echo $user->name ?>
                    </div>
                    <div>
                        <!-- $userをdata-userに渡したい -->
                        <button class="btn transition__btn open__add__task__btn" data-user_id="<?php echo $user->name ?>" data-project_id="<?php echo $project->id ?>" >タスクを追加</button>
                    </div>
                </div>

                <?php foreach ($weekly_tasks as $weekly_task) : ?>
                    <?php if ($weekly_task->parent_tasks[0]->user_id === $user->id) : ?>
                        <div class="weekly__report__task__container">
                            <?php
                            $today = new DateTime();
                            $today = $today->format('Y-m-d');
                            ?>
                            <?php if ($weekly_task->date === $today) :?>
                                <div class="date">
                                    <div class="inner_date">
                                        <?php echo $weekly_task->getDate() . ' 本日'; ?>
                                    </div>
                                </div>
                            <?php endif ; ?>
                            <?php if ($weekly_task->date !== $today) :?>
                                <div class="date">
                                    <div class="inner_date">
                                        <?php echo $weekly_task->getDate(); ?>
                                    </div>
                                </div>
                            <?php endif ; ?>
                            <div class="task">
                                <?php for ($i = 0; $i < count($weekly_task->parent_tasks); $i++) :?>
                                    <?php $progress = $weekly_task->parent_tasks[$i]->progress; ?>
                                    <div class="title_progress">
                                        <div class="task_title"><?php echo $weekly_task->parent_tasks[$i]->title; ?></div>
                                        <div class="task_progress"><?php echo $progress; ?>%</div>
                                    </div>
                                    <div class="progress-bar">
                                        <div class="progress" style="width: <?php echo $progress; ?>%;"></div>
                                    </div>
                                <?php endfor ; ?>
                            </div>
                        </div>
                    <?php endif ;?>
                <?php endforeach; ?>
            </li>
        <?php endforeach; ?>
        <script>
            const $users = document.querySelectorAll('.user__name')

            // 文字の最大値を取得
            const max = Math.max(...Array.from($users).map(user => user.textContent.length))

            const maxValue = Array.from($users).find(user => user.textContent.length === max)
            // 横幅のピクセルを取得
            const width = maxValue.offsetWidth
            const $weeklyReport = document.querySelector('.weekly__report')

            const height = $weeklyReport.offsetHeight

            Array.from($users).forEach(user => {
                user.style.width = `${width}px`
                user.style.height = `${height}px`
            })
        </script>
    </ul>
</div>
<?php
    include __DIR__ . "/task-add-popup/task-add-popup-template.php";
    include __DIR__ . "/task-add-popup/task-add-popup-content.php";
    include __DIR__ . "/js/popup-handler-js.php";
    include __DIR__ . "/js/member-task-js.php";
?>
YNSTakeru commented 5 months ago

popup.scss

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  cursor: pointer;
  &:focus {
    outline: none;
  }
  border: none;
  background-color: transparent;
}

input {
  // デフォルトのスタイルを消す
  border: none;
  background-color: transparent;
  color: black;
  &:focus {
    outline: none;
  }
}

textarea {
  border: none;
  background-color: transparent;
  color: black;
  resize: none;
  outline: none;

  &:focus,
  :hover {
    outline: none;
  }
}

.button__container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  position: relative;
}

.register__btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.btn {
  display: block;
  width: fit-content;
  min-height: 40px;

  padding: 0 20px;
  border-radius: 90px;
  border: none;
  background-color: #f6c64b;
  color: white;
  box-shadow: 6px 6px 5px 0px #f6c64ba6;
  cursor: pointer;
  transition: all ease-in-out 0.2s;

  &:hover,
  &:focus {
    background-color: #f6c64ba6;
    box-shadow: none;
    color: gray;
    transform: scale(0.95);
  }

  &__danger {
    background-color: #ee6d6d;
    box-shadow: 6px 6px 5px 0px #ee6d6da6;
    margin-right: 20px;

    &:hover,
    &:focus {
      background-color: #ee6d6da6;
      box-shadow: none;
      color: gray;
      transform: scale(0.95);
    }
  }

  &__container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    position: absolute;
    bottom: 20px;
    right: 20px;

    & .register__btn {
      position: relative;
      top: 0;
      left: auto;
    }
  }
}

.popup {
  visibility: hidden;
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  z-index: 1000;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
  gap: 10px;
  min-height: 66vh;
  max-height: 70vh;

  & .parent__task__section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    & .parent__task__input {
      cursor: pointer;
      display: block;
      border: 1px solid black;
      border-radius: 10px;
      padding: 10px 20px;
      margin-right: 20px;
      width: 100%;

      & textarea {
        display: block;
        width: 100%;
      }
    }

    & .relative__progress__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 0px;
      right: 0px;

      & .parent__progress {
        font-size: 28px;
        -webkit-text-stroke: none;
        text-shadow: 0px 0px 3px black;

        &.red {
          color: #ee6d6d;
          text-shadow: 0px 0px 3px #ee6d6d;
        }
        &.yellow {
          color: #ffee00;
          text-shadow: 0px 0px 3px #ffee00;
        }
        &.blue {
          color: #6dcfee;
          text-shadow: 0px 0px 3px #6dcfee;
        }
        &.green {
          color: #77e48f;
          text-shadow: 0px 0px 3px #77e48f;
        }
      }
    }
  }

  .popup__text {
    -webkit-text-stroke: 1px black;
    text-shadow: 0px 0px 3px black;
    color: white;

    &.parent__task {
      font-size: 28px;
    }

    &.relation__child__task {
      font-size: 24px;
      text-shadow: 0px 0px 0px black;
    }

    &.child__task {
      font-size: 18px;
      text-shadow: 0px 0px 0px black;
      color: white;
    }

    & .progress__explanation__charactoer {
      font-size: 18px;
      text-shadow: 0px 0px 0px black;
      color: white;
    }
  }

  &.popup__open {
    visibility: visible;
    display: flex;
    flex-direction: column;
    opacity: 1;
    background-color: white;
    border: 1px solid white;
    border-radius: 10px;
    padding: 20px;
    padding-right: 60px;
    min-width: 33vw;
    height: 33vh;

    gap: 10px;

    & .child__task__section {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
      height: 100px;

      & .child__task__container {
        display: flex;
        gap: 20px;
        flex-direction: column;
        width: 100%;
        height: 29vh;
        overflow-y: scroll;
        scrollbar-width: none;

        // はみ出てる箇所は隠す

        & .child__task__list__container {
          display: flex;
          gap: 3px;
          flex-direction: column;

          & .child__task__name__remove {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          & .btn__container {
            display: flex;
            flex-direction: row;
            gap: 10px;
          }

          & .comment__box {
            border: 1px solid black;
            border-radius: 10px;
            margin-top: 10px;
            margin-right: 20px;
            padding: 10px 20px;
            text-shadow: none;

            // hiddenでアニメーションをつける
            opacity: 1;
            transition: all ease-in-out 0.2s;
            height: fit-content;
            visibility: visible;

            &.hidden {
              visibility: hidden;
              height: 0px;
              width: 0px;
              opacity: 0;
              margin-top: 0;
              padding: 0;
            }

            & .comment__textarea {
              border: none;
              width: 100%;

              &:focus {
                outline: none;
              }
            }
          }

          & .progress__container {
            display: flex;
            gap: 10px;
            flex-direction: column;
            padding-top: 20px;

            & .progress__character__container {
              display: flex;
              gap: 10px;
              flex-direction: row;

              & .progress__character {
                font-size: 18px;
                text-shadow: 0px 0px 0px black;
                color: white;
                cursor: pointer;
                transition: all ease-in-out 0.2s;

                &:hover,
                &.selected {
                  transform: scale(1.05);

                  &.red {
                    color: #ee6d6d;
                    text-shadow: 0px 0px 3px #ee6d6d;
                  }
                  &.yellow {
                    color: #ffee00;
                    text-shadow: 0px 0px 3px #ffee00;
                  }
                  &.blue {
                    color: #6dcfee;
                    text-shadow: 0px 0px 3px #6dcfee;
                  }
                  &.green {
                    color: #77e48f;
                    text-shadow: 0px 0px 3px #77e48f;
                  }
                }

                & label {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }

      & .child__task__add {
        display: flex;
        width: 100%;
        height: fit-content;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        padding-top: 5px;
        padding-bottom: 20px;
        padding-right: 0;
        padding-left: 0px;

        & .child__task__input {
          cursor: pointer;
          border: 1px solid black;
          border-radius: 10px;
          padding: 10px 20px;
          margin-right: 20px;
          //   flexで8割の幅を取る
          width: 80%;

          & input {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }

  & .close__btn {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: black;
      top: 50%;
      left: 0;
      transform: rotate(45deg);
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: black;
      top: 50%;
      left: 0;
      transform: rotate(-45deg);
    }
  }
}
.cover {
  visibility: hidden;
  position: fixed;
  //   DOMの範囲すべてを覆う 100vwを超えて
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;

  &.popup__open {
    visibility: visible;
    opacity: 1;
  }
}

.hidden {
  visibility: hidden;
  height: 0px;
  width: 0px;
  opacity: 0;
  margin-top: 0;
  padding: 0;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 3px;
  margin-bottom: 3px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  position: relative;
  transition: all ease-in-out 0.2s;

  &:hover,
  &:focus {
    box-shadow: none;
    transform: scale(0.95);
  }

  &__add {
    background-color: #77e48f;
    box-shadow: #19af3a 3px 3px 3px;

    &:hover,
    &:focus {
      background-color: #19af3a;
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      height: 2px;
      background-color: white;
      transform: translate(-50%, -50%);
      border: 1px solid white;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      height: 2px;
      background-color: white;
      transform: translate(-50%, -50%) rotate(90deg);
      border: 1px solid white;
    }
  }

  &__remove {
    background-color: #ee6d6d;
    color: white;
    box-shadow: #b9490a 3px 3px 3px;

    &:hover,
    &:focus {
      background-color: #b9490a;
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      height: 2px;
      background-color: white;
      transform: translate(-50%, -50%);
      border: 1px solid white;
    }
  }
}

.pagination-nav {
  position: fixed;
  top: 0;
  left: 0;

  @media screen and (max-width: 768px) {
  }
}
YNSTakeru commented 5 months ago

member-style.css

@charset "UTF-8";

body {
  margin: 0;
}

/* ヘッダー */
header {
  display: flex;
  justify-content: space-between;
  height: 3rem;
  position: fixed;
  top: 3px;
}

ul,
li {
  list-style: none;
  padding: 0;
}

.main-header {
  display: flex;
}

.main-header svg {
  width: 5rem;
  height: 3rem;
  margin: 0 0.6rem;
}

.main-header h1 {
  font-size: 1.4rem;
  margin: 0.6rem 1rem 1rem;
}

header nav {
  margin: 0 0.5rem 0;
  position: inherit;
  right: 30px;
}

header nav li {
  list-style: none;
  display: inline-block;
  margin: 0 0.5rem 0;
  font-weight: bold;
}

header nav li a {
  color: black;
}

/* ページネーション */
.pagination-nav {
  position: fixed;
  bottom: 0;
  right: 20px;
  width: fit-content;
  height: 34px;
}

.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
  background-color: rgb(6, 71, 6);
  border-radius: 5px;
}

.pagination li {
  display: inline;
}

.pagination li a {
  color: white;
  float: left;
  padding: 0.3rem 0.8rem;
  text-decoration: none;
}

.pagination li a {
  color: white;
}

.pagination li a:hover {
  background-color: rgb(215, 215, 99);
}

/* タスク一覧画面 */

.task__container {
  .project__container {
    display: flex;
    justify-content: end;
    position: fixed;
    right: 5px;
    top: 30px;

    .project__detail {
      font-size: 1.3rem;
      font-weight: bold;
    }
  }
}

.weekly__report__container {
  display: flex;
  gap: 20px;
  flex-direction: column;
  width: max-content;
  margin-top: 90px;

  .weekly__report {
    min-height: calc(((100vh - (48px + 45px) - 200px) / 4));
    background-color: rgb(6, 71, 6);
    color: white;
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: 3px;
    margin-left: 10px;

    .user__name {
      font-size: 1.3rem;
      font-weight: bold;
      line-height: 1.5;
      border-right: 5px solid white;
      width: 200px;
      height: 100px;

      .btn {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        padding: 0 10px;
        min-height: 30px;
        border-radius: 90px;
        border: none;
        background-color: #f6c64b;
        color: white;
        box-shadow: 6px 6px 5px 0px rgba(246, 198, 75, 0.6509803922);
        cursor: pointer;
        transition: all ease-in-out 0.2s;
      }
    }

    .weekly__report__task__container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      min-height: calc(((100vh - (48px + 45px) - 200px) / 4));
      border-right: solid;
      width: 180px;
      height: 120px;

      .date {
        width: inherit;
        font-size: 0.9rem;
        font-weight: bold;
        border-bottom: solid;
        margin-inline-end: auto;

        .inner_date {
          text-align: center;
        }
      }

      .task {
        font-size: 0.7rem;
        margin: 2px;
        width: inherit;

        .title_progress {
          display: flex;
          justify-content: space-evenly;
          margin: 1px 0 2px;
        }

        .progress-bar {
          width: 150px;
          height: 10px;
          background-color: #ddd;
          overflow: hidden;
          margin: auto;

          .progress {
            height: 100%;
            background-color: #4caf50;
            line-height: 20px;
          }
        }
      }
    }
  }
}
matsuryu-2529 commented 5 months ago

ありがとうございます！

YNSTakeru commented 5 months ago

popup.css

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}
button:focus {
  outline: none;
}

input {
  border: none;
  background-color: transparent;
  color: black;
}
input:focus {
  outline: none;
}

textarea {
  border: none;
  background-color: transparent;
  color: black;
  resize: none;
  outline: none;
}
textarea:focus,
textarea :hover {
  outline: none;
}

.button__container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  position: relative;
}

.register__btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 90px;
  border: none;
  background-color: #f6c64b;
  color: white;
  box-shadow: 6px 6px 5px 0px rgba(246, 198, 75, 0.6509803922);
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
.btn:hover, .btn:focus {
  background-color: rgba(246, 198, 75, 0.6509803922);
  box-shadow: none;
  color: gray;
  transform: scale(0.95);
}
.btn__danger {
  background-color: #ee6d6d;
  box-shadow: 6px 6px 5px 0px rgba(238, 109, 109, 0.6509803922);
  margin-right: 20px;
}
.btn__danger:hover, .btn__danger:focus {
  background-color: rgba(238, 109, 109, 0.6509803922);
  box-shadow: none;
  color: gray;
  transform: scale(0.95);
}
.btn__container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.btn__container .register__btn {
  position: relative;
  top: 0;
  left: auto;
}

.popup {
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 1000;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
  gap: 10px;
  min-height: 66vh;
  max-height: 70vh;
}
.popup .parent__task__section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.popup .parent__task__section .parent__task__input {
  cursor: pointer;
  display: block;
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 20px;
  width: 100%;
}
.popup .parent__task__section .parent__task__input textarea {
  display: block;
  width: 100%;
}
.popup .parent__task__section .relative__progress__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0px;
  right: 0px;
}
.popup .parent__task__section .relative__progress__container .parent__progress {
  font-size: 28px;
  -webkit-text-stroke: none;
  text-shadow: 0px 0px 3px black;
}
.popup .parent__task__section .relative__progress__container .parent__progress.red {
  color: #ee6d6d;
  text-shadow: 0px 0px 3px #ee6d6d;
}
.popup .parent__task__section .relative__progress__container .parent__progress.yellow {
  color: #ffee00;
  text-shadow: 0px 0px 3px #ffee00;
}
.popup .parent__task__section .relative__progress__container .parent__progress.blue {
  color: #6dcfee;
  text-shadow: 0px 0px 3px #6dcfee;
}
.popup .parent__task__section .relative__progress__container .parent__progress.green {
  color: #77e48f;
  text-shadow: 0px 0px 3px #77e48f;
}
.popup .popup__text {
  -webkit-text-stroke: 1px black;
  text-shadow: 0px 0px 3px black;
  color: white;
}
.popup .popup__text.parent__task {
  font-size: 28px;
}
.popup .popup__text.relation__child__task {
  font-size: 24px;
  text-shadow: 0px 0px 0px black;
}
.popup .popup__text.child__task {
  font-size: 18px;
  text-shadow: 0px 0px 0px black;
  color: white;
}
.popup .popup__text .progress__explanation__charactoer {
  font-size: 18px;
  text-shadow: 0px 0px 0px black;
  color: white;
}
.popup.popup__open {
  visibility: visible;
  display: flex;
  flex-direction: column;
  opacity: 1;
  background-color: white;
  border: 1px solid white;
  border-radius: 10px;
  padding: 20px;
  padding-right: 60px;
  min-width: 33vw;
  height: 33vh;
  gap: 10px;
}
.popup.popup__open .child__task__section {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}
.popup.popup__open .child__task__section .child__task__container {
  display: flex;
  gap: 20px;
  flex-direction: column;
  width: 100%;
  height: 29vh;
  overflow-y: scroll;
  scrollbar-width: none;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container {
  display: flex;
  gap: 3px;
  flex-direction: column;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .child__task__name__remove {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .btn__container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .comment__box {
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 10px;
  margin-right: 20px;
  padding: 10px 20px;
  text-shadow: none;
  opacity: 1;
  transition: all ease-in-out 0.2s;
  height: -moz-fit-content;
  height: fit-content;
  visibility: visible;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .comment__box.hidden {
  visibility: hidden;
  height: 0px;
  width: 0px;
  opacity: 0;
  margin-top: 0;
  padding: 0;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .comment__box .comment__textarea {
  border: none;
  width: 100%;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .comment__box .comment__textarea:focus {
  outline: none;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container {
  display: flex;
  gap: 10px;
  flex-direction: column;
  padding-top: 20px;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container {
  display: flex;
  gap: 10px;
  flex-direction: row;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character {
  font-size: 18px;
  text-shadow: 0px 0px 0px black;
  color: white;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character:hover, .popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character.selected {
  transform: scale(1.05);
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character:hover.red, .popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character.selected.red {
  color: #ee6d6d;
  text-shadow: 0px 0px 3px #ee6d6d;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character:hover.yellow, .popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character.selected.yellow {
  color: #ffee00;
  text-shadow: 0px 0px 3px #ffee00;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character:hover.blue, .popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character.selected.blue {
  color: #6dcfee;
  text-shadow: 0px 0px 3px #6dcfee;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character:hover.green, .popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character.selected.green {
  color: #77e48f;
  text-shadow: 0px 0px 3px #77e48f;
}
.popup.popup__open .child__task__section .child__task__container .child__task__list__container .progress__container .progress__character__container .progress__character label {
  cursor: pointer;
}
.popup.popup__open .child__task__section .child__task__add {
  display: flex;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-top: 5px;
  padding-bottom: 20px;
  padding-right: 0;
  padding-left: 0px;
}
.popup.popup__open .child__task__section .child__task__add .child__task__input {
  cursor: pointer;
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 20px;
  width: 80%;
}
.popup.popup__open .child__task__section .child__task__add .child__task__input input {
  display: block;
  width: 100%;
}
.popup .close__btn {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.popup .close__btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
}
.popup .close__btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  top: 50%;
  left: 0;
  transform: rotate(-45deg);
}

.cover {
  visibility: hidden;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}
.cover.popup__open {
  visibility: visible;
  opacity: 1;
}

.hidden {
  visibility: hidden;
  height: 0px;
  width: 0px;
  opacity: 0;
  margin-top: 0;
  padding: 0;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 3px;
  margin-bottom: 3px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  position: relative;
  transition: all ease-in-out 0.2s;
}
.icon:hover, .icon:focus {
  box-shadow: none;
  transform: scale(0.95);
}
.icon__add {
  background-color: #77e48f;
  box-shadow: #19af3a 3px 3px 3px;
}
.icon__add:hover, .icon__add:focus {
  background-color: #19af3a;
}
.icon__add::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 2px;
  background-color: white;
  transform: translate(-50%, -50%);
  border: 1px solid white;
}
.icon__add::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 2px;
  background-color: white;
  transform: translate(-50%, -50%) rotate(90deg);
  border: 1px solid white;
}
.icon__remove {
  background-color: #ee6d6d;
  color: white;
  box-shadow: #b9490a 3px 3px 3px;
}
.icon__remove:hover, .icon__remove:focus {
  background-color: #b9490a;
}
.icon__remove::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 2px;
  background-color: white;
  transform: translate(-50%, -50%);
  border: 1px solid white;
}

.pagination-nav {
  position: fixed;
  top: 0;
  left: 0;
}/*# sourceMappingURL=popup.css.map */