📝 今日作った

SCSS作成完了

populateネスト/font-awesomeアイコンの挿入/共有フォームを使用します.scss合成/画像スケールによるクリップ/プロファイル画像が存在しない/テキストが垂直に中央揃え

📚 学識

1. styles

完全なコードをハブに配置
ここでは難しい部分だけを整理しました.

1)塗りつぶしオーバーラップの使用

Userオブジェクトのビデオフィールドのid値を実際のVideoオブジェクトに変換し、そのVideoオブジェクトのownerフィールドのid値も実際のUserオブジェクトに変換します.

// videoController.js
export const see = async (req, res) => {
  const { id } = req.params;
  const videos = await User.find(id).populate({
    path: "videos",
    populate: {
      path: "owner",
      model: "User",
    },
  });
};

2)font-awesomeアイコンをフォームに挿入する

input(value="search now", type="submit")が削除され、代わりにbuttonが追加されました.
次に、位置相対と絶対を用いて位置決めする.

//- search.pug

form(method="GET").search-form
  input(name="keyword", placeholder="Search by keywords", required, autofocus)
  button
    i.fas.fa-search

// search.scss
.search-form {
  position: relative;
  button {
    position: absolute;
    right: 5px;
    top: 7px;
    font-size: $font-regular;
    background-color: transparent;
    color: $bg;
    border-style: none;
  }
}

3)テキストを縦方向中央揃え

垂直方向中央揃えの4種類のCSSテキストを参照

li {
  margin-left: 44px;
  text-transform: uppercase;
  font-weight: bold;
  display: table;
  a {
    display: table-cell;
    vertical-align: middle;
  }
}

4) shared.scssの作成

container

video mixin container

empty message

joinとloginページを行き来するauth switch

プロファイル画像

.container {
  display: flex;
  flex-direction: column;
  margin: 40px auto;
  padding: 40px;
  max-width: 400px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  hr {
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
}

.video-mixin__container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 80px 0;
}

.empty-message {
  font-size: $font-regular;
}

.auth-switch {
  margin: 20px 0;
  font-size: $font-small;
  text-align: center;
  a {
    text-decoration: underline;
    transition: all 300ms;
  }
  a:hover {
    color: $red;
  }
}

.profile-outer-box {
  width: 60px;
  .profile-inner-box {
    padding-top: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    .profile-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

5）画像スケールで円形に切り取る

[TIL]21925に比例を保つ反応型画像を作成する参照で修正しました.
しかし、上記のようにして作成すると、画像の大きさにかかわらず、中央から無条件に(80 x 80)pxを切除し、画像の一部のみを表示するという問題がある.
私が欲しいのは、画像の中央にまず짧은 변을 기준으로 정사각형으로 자른 후에(80 x 80)pxの円形で表示することです.
widthとheightの両方を100%に指定すると、object-fit: coverを使用して、画像の一方のエッジが他方のエッジよりも長くても、ちょうど円上に位置します.
ただこの方法は使うたびにもっと良い方法があるかどうかを考えます.このようにdivを繰り返すのは最善の方法ではない.

.profile-outer-box {
  width: 60px;
  .profile-inner-box {
    padding-top: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    .profile-img {
      width: 100%; // 추가 ❗
      height: 100%; // 추가 ❗
      object-fit: cover; // 추가 ❗
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

6）プロファイルイメージがない

初めてパスワードを使って加入すると、アイコンがありません.
この場合、ヘッダーのプロファイル画像は大文字で置き換えられます.
履歴書確認ページも同様の方法で修正されています.
一度だけラベルを修正したいのですが、5)私にはできません.

if loggedInUser.avatarUrl === undefined
  a(href=`/users/${loggedInUser._id}`)
    span 😁
else
  div.profile-outer-box
    div.profile-inner-box
      a(href=`/users/${loggedInUser._id}`)
        img(src="/" + loggedInUser.avatarUrl).profile-img

明日作った

ビデオプレーヤー

を作成