カードの新規作成 #48
カードの新規作成 #48
Conversation
|
デザインに合わせたカードのみ作成しています。 以下の残りタスク |
これに関しては別のタスクで切り出してやるので一旦考えなくて大丈夫かなと。
Fragment( |
|
ローディング中はスケルトンを使うと良いかなと思いました。 |
|
APIからstateとlabel_urlを取得して、card.tsxで任意（open or closed）のアイコンの設定とラベル表示させたいけど、分からない |
変更内容カードの作成 確認方法npm run devで実行 スケルトンが表示されること |
# Conflicts: # src/swr/client/issues.ts
エラーの際非表示に
src/app/_components/Milestones.tsx
Outdated
| `; | ||
|
|
||
| const Milestones = () => { | ||
| const { data } = useMilestones(); |
There was a problem hiding this comment.
useMilestones()でエラーが返却された場合どうなりますか
There was a problem hiding this comment.
考慮していなかったので、エラーが起きた際に非表示になるようにします。
| padding-bottom: 300px; | ||
| background-color: rgba(255, 255, 255, 0.6); | ||
| backdrop-filter: blur(10px); | ||
| `; |
There was a problem hiding this comment.
widthは%とmax-widthを併記すると画面サイズが変わってもデザインが崩れにくくて良いので以下のような感じにしてみて欲しいです。
const StyledContainer = styled('div')`
width: 100%;
max-width: 645px;
min-height: 300px;
あくまで例なのでdevツールとかで画面サイズ比とかいじくり回してデザイン崩れないようによしなにやってください。
他のコンポーネントも同じ容量で出来るだけstyledcomponentを使うようにしてみてください。
There was a problem hiding this comment.
CSSだと適用されなかったのでBoxコンポーネントでラッパーしたら適用されたことを思い出しました。
代替手段を探してみます
There was a problem hiding this comment.
%使って欲しいというのは極端な例にはなるけど以下の画像みたいにクソデカ画面で見た時とかに画面サイズに合わせないで決めうちの数字になってしまうのが困るという話でした。
あとデザイン的にも下の透過している部分に対してフェーズの方のボックスは横幅いっぱいにレイアウトされると思うのでそこも再現してほしい。
Boxコンポーネントの廃止
Ticket
変更内容
カードの新規作成
確認方法
npm run devで実行