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.

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

[モバイル対応]各ページへのリンクをハンバーガーメニューで表示する #148

Merged
merged 5 commits into from
Apr 24, 2024

Conversation

yamakeeeeeeeeen
Copy link
Collaborator

やったこと

  • 各ページへのリンクをハンバーガーメニューに表示
  • タイムゾーンを選択するセレクトボックスをモバイルの時はスケジュール画面に表示
  • ハンバーガーメニューのアイコン用でfont awesomeをCDNで読み込む

やらなかったこと

  • プロフィール画面のモバイル対応

スクショ

image

image

>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" width="1em" height="1em" class="" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" style="color: rgb(112, 109, 101);"><path d="M256 288A144 144 0 1 0 256 0a144 144 0 1 0 0 288zm-94.7 32C72.2 320 0 392.2 0 481.3c0 17 13.8 30.7 30.7 30.7H481.3c17 0 30.7-13.8 30.7-30.7C512 392.2 439.8 320 350.7 320H161.3z"></path></svg>
<%= I18n.t('nav.profile') %></a>
</li>
Copy link
Collaborator

Choose a reason for hiding this comment

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

チーム機能へのリンクが欲しいです!

<% if @user&.profile&.belongs_to_any_team? %>
<li>
<a
href="<%= team_path(@user.profile.current_team) %>"
class="flex items-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(team_path(@user.profile.current_team)) ? 'nav-current' : '' %>"
<%= sanitize current_path?(event_path) ? 'aria-current="page"' : '' %>
>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" width="1em" height="1em" class="" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" style="color: rgb(112, 109, 101);"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z"></path></svg>
<%= I18n.t('nav.team') %></a>
</li>
<% end %>

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

<div class="ml-2 mr-4 sm:hidden">
<button id="button" type="button" class="">
<span id="bars" class="">
<i class="fa-solid fa-bars fa-xl"></i>
Copy link
Collaborator

Choose a reason for hiding this comment

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

実機(iPhoneSE3)で見たときにハンバーガーメニューの一番上の線がちょっと欠けてしまってました
IMG_1173

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

こちらも手元で再現できず.... devtoolで画面幅調整しても確認できないのでどうしたものか...

Comment on lines +14 to +29
<label class="flex sm:hidden flex-col items-center mb-2">
<span class="mb-2 text-sm font-bold text-[rgb(112,109,101)]">
<%= I18n.t('nav.select_locale') %>
</span>
<div class="relative box-border w-[16.25em]" data-controller="locale" data-locale-current-value="<%= session[:locale] %>">
<select data-action="change->locale#change" class="py-[3px] px-2 min-h-[30px] appearance-none cursor-pointer outline-none rounded-md border border-solid border-[rgb(214,211,208)] bg-white ps-2 pe-8 text-sm text-[rgb(35,34,30)] w-full align-middle">
<% grouped_timezones.map do |k, v| %>
<optgroup label="<%= k %>">
<% v.map do |locale| %>
<option label="<%= locale %>" value="<%= locale %>" <%= locale == session[:locale] ? "selected" : nil %>><%= locale %></option>
<% end %>
</optgroup>
<% end %>
</select>
</div>
</label>
Copy link
Collaborator

@e-ikuta e-ikuta Apr 23, 2024

Choose a reason for hiding this comment

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

iPhone実機で試しました。
タイムゾーンを変更したあとに再度ナビゲーションのスケジュールへのリンクを押してスケジュールを表示するとタイムゾーンが変更されないことがありました。
PCの開発者モードでSEの画面にして試した時は再現しなかったので、iPhoneのChromeアプリ特有の問題かもしれません...。すみません、明確な原因はわかりませんでした🙇‍♀

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

手元で実機で試してみましたが同様の事象は再現しませんでした。。QAのときにもう一度見てみましょうか

@kinoppyd kinoppyd merged commit d16c699 into main Apr 24, 2024
2 checks passed
@yamakeeeeeeeeen yamakeeeeeeeeen deleted the add-hamberger-menu branch April 25, 2024 01:00
@e-ikuta e-ikuta linked an issue May 7, 2024 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

モバイル対応
3 participants