Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

practice_memo.vueをhtmlとjsでの実装に変更 #7442

Merged
merged 3 commits into from
Apr 16, 2024
Merged

practice_memo.vueをhtmlとjsでの実装に変更 #7442

merged 3 commits into from
Apr 16, 2024

Conversation

ghost
Copy link

@ghost ghost commented Feb 26, 2024 •
edited by ghost
Loading

Issue

概要

practice_memo.vueを削除し、htmlとjsでの実装に変更しました。
また、プラクティスメモの余白が正しく表示されるようになりました。

変更確認方法

  1. feature/convert-practice-memo-vue-to-slimをローカルに取り込む
  2. ローカル環境を起動し、管理者ユーザーでログインする
  3. 任意の提出物のページに移動し、「プラクティスメモ」タブ内の機能が正常に動作していることを、mainブランチと比較して確認する

「プラクティスメモ」タブ確認項目：

  1. 「プラクティスメモ」タブを選択すると、保存されているプラクティスメモの内容がmarkdownとしてレンダリングされた状態で表示され、「編集」ボタンが表示される
  2. 「編集」ボタンをクリックすると、「メモ」タブが選択された状態で、テキストエリア内に保存されているプラクティスメモの内容が表示されており、編集可能な状態になっている
  3. 「プレビュー」タブを選択すると、一時的に編集が不可能になり、プラクティスメモの内容がmarkdownとしてレンダリングされた状態で表示される
  4. 「メモ」タブ内でプラクティスメモを編集してから「キャンセル」ボタンをクリックすると、プラクティスメモの内容が編集前の状態に戻り、画面表示が1.の状態に戻る
  5. 「メモ」タブ内でプラクティスメモを編集してから「保存」ボタンをクリックすると、「保存しました！」とトーストが表示され、画面表示が1.の状態に戻り、プラクティスメモの内容は編集後のものになっている
  6. プラクティスメモの内容が空の状態で保存すると、画面表示が1.の状態になるが、画像と一緒に「プラクティスメモはまだありません。」との表示が出る
  7. ページを再読み込みすると、「プラクティスメモ」タブ内では、最後に保存した状態のプラクティスメモが表示される

　

Screenshot

変更前

提出物のページで「プラクティスメモ」タブを選択

image

「編集」ボタンをクリックし、「メモ」タブが選択された状態

image

「プレビュー」タブが選択された状態

image

プラクティスメモを空にして保存した直後の状態

image

変更後

提出物のページで「プラクティスメモ」タブを選択
image

「編集」ボタンをクリックし、「メモ」タブが選択された状態
image

「プレビュー」タブが選択された状態
image

プラクティスメモを空にして保存した直後の状態
image

@ghost ghost self-assigned this Feb 26, 2024
@ghost ghost marked this pull request as ready for review February 26, 2024 19:47
@ghost ghost requested a review from reckyy February 27, 2024 01:02
@ghost
Copy link
Author

ghost commented Feb 27, 2024

@reckyy
お疲れ様です。
こちらのPRのレビューをお願いしてもよろしいでしょうか🙏
お手すきの際で構いませんので、よろしくお願いいたします🙇‍♂️

@reckyy
Copy link
Contributor

reckyy commented Feb 27, 2024

@taco-nantai
レビュー依頼承知しました！
CIが失敗しているようなので、そちらご確認いただければと思います。👀
パスを確認後レビューいたしますので、再度コメントいただけますと幸いです。 🙇

@ghost
Copy link
Author

ghost commented Feb 28, 2024

@reckyy
お疲れ様です。
CIが通過したので、レビューをお願いします🙇‍♂️

reckyy
reckyy approved these changes Mar 1, 2024
View reviewed changes
Copy link
Contributor

@reckyy reckyy left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@taco-nantai
お疲れ様です〜。
読みやすかったです！勉強になりました。
一点コメントしていますが、何かしらコメント残したかっただけなので、全然スルーでも大丈夫です。
私からはOKです🙆

app/javascript/practice_memo.js
noMemoMessage.classList.toggle('is-hidden', memo !== '')
}

function toggleClass(elements, className) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

実際にはhiddenかactiveかを切り替えてるのみなので、以下でもいいかなと思いました。ただこちらは好みなので、無視でも大丈夫です！（というかコメントすべきところが思いつかなかっただけです。）

Suggested change
function toggleClass(elements, className) {
function toggleVisibility(elements, className) {

@ghost
Copy link
Author

ghost commented Mar 2, 2024

@reckyy
お疲れ様です。
レビューして頂きありがとうございました🙇‍♂️🙇‍♂️

@ghost
Copy link
Author

ghost commented Mar 2, 2024 •
edited by ghost
Loading

@komagata
お疲れ様です。
PRにapproveをいただいたので、レビューをお願いします🙇‍♂️

3/6 追記
machidaさんにUIの修正をお願いしたので、そちらの修正が完了した後にレビューをお願いします🙇‍♂️

@ghost ghost requested a review from komagata March 2, 2024 01:04
@ghost ghost assigned machida Mar 6, 2024
@ghost
Copy link
Author

ghost commented Mar 6, 2024

@machida
お疲れ様です。
本日のチーム開発ミーティングの中で、プラクティスメモのタブの、上方向のpaddingが表示されていない件について指摘をいただいたので、デザインの修正をお願いします🙇‍♂️

@komagata
Copy link
Member

komagata commented Mar 9, 2024

@taco-nantai 他の似た部分のデザイン（HTML+CSS）を参考にすると治りそうな気がするのでちょっとみてみていただければありがたいです〜

無理でしたら再度 @machida さんに頼んでいただければと思います。

@ghost
Copy link
Author

ghost commented Mar 11, 2024

@komagata @machida
改めて該当箇所のHTMLとCSSを確認してみたのですが、メンターメモのような他の似た部分と比べても問題点が見つけられず、独力では原因の解明が難しいと感じたので、大変申し訳ないのですが、 @machida さんに確認をお願いしたいです。
お手数おかけしてしまい、申し訳ありません🙇‍♂️

@machida
Copy link
Member

machida commented Mar 11, 2024

@taco-nantai 了解ですー僕の方で見てみます🙆‍♂️

@machida
Copy link
Member

machida commented Mar 12, 2024

@taco-nantai お待たせしました！こちら対応しましたー

@machida machida removed their assignment Mar 12, 2024
@ghost
Copy link
Author

ghost commented Mar 12, 2024

machidaさん確認と対応ありがとうございます🙇‍♂️

@ghost
Copy link
Author

ghost commented Mar 12, 2024

@komagata
お疲れ様です。
machidaさんにUIを修正していただいたので、レビューをお願いします🙇‍♂️

@ghost
Copy link
Author

ghost commented Mar 20, 2024

@komagata
レビューありがとうございます!
ご指摘いただいた箇所を修正したので、確認をお願いします🙇‍♂️

@komagata
Copy link
Member

@taco-nantai テストが落ちているようです～。

@ghost ghost force-pushed the feature/convert-practice-memo-vue-to-slim branch from b0b1531 to 54a25a3 Compare March 26, 2024 14:19
@ghost
Copy link
Author

ghost commented Mar 26, 2024

@taco-nantai テストが落ちているようです～。

@komagata
失礼しました!
テストが通っていることを確認したので、再度確認をお願いします🙇‍♂️

@ghost ghost force-pushed the feature/convert-practice-memo-vue-to-slim branch from 54a25a3 to fb2a2e5 Compare March 29, 2024 22:47
@ghost
Copy link
Author

ghost commented Mar 29, 2024 •
edited by ghost
Loading

rebaseの操作の際にミスをしており、関係のないコミットを取り込んだ状態になっていたので修正しました。

komagata
komagata approved these changes Apr 16, 2024
View reviewed changes
Copy link
Member

@komagata komagata left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

確認させていただきました。OKです～👌

@komagata komagata merged commit 7673371 into main Apr 16, 2024
2 checks passed
@komagata komagata deleted the feature/convert-practice-memo-vue-to-slim branch April 16, 2024 08:26
@github-actions github-actions bot mentioned this pull request Apr 16, 2024
Merged
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@reckyy @komagata @machida