[23]dropzone << [ホームに戻る] >> [25]注文モデル
ナビゲーションバーにリンクを追加します。
記述追加 app\views\shared\_navbar.html.erb
72行目に「<%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %>」のリンクを追加しています。
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトOshigoto</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"> <div class="field has-addons"> <div class="control"> <input class="input" type="text" placeholder="どんなお仕事を？"> </div> <div class="control"> <a class="button is-success">検索</a> </div> </div> </div> </div> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-item" style="margin-right: 50px;"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <%= current_user.full_name %> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を売る人</a> <div class="navbar-dropdown"> <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> <a class="navbar-item"></a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を買う人</a> <div class="navbar-dropdown"> <a class="navbar-item"></a> <a class="navbar-item"></a> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // Check for click events on the navbar burger icon $(".navbar-burger").click(function() { // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
ブラウザ確認
http://localhost:3000/dashboard
ダッシュボードを更新します。
記述追加 app\views\users\dashboard.html.erb(166行目)
<!-- 新しいお仕事を登録 --> <div class="column is-one-third has-text-centered"> <%= link_to new_gig_path do %> <div class="card"> <div class="card-image card-content is-horizontal-center is-flex "> <figure class="image is-128x128 "> <%= image_tag 'icon_add.png' %> </figure> </div> <div class="card-content"> <strong>お仕事を新規登録する</strong> </div> </div> <% end %> </div> <!-- 登録したお仕事 --> <% current_user.gigs.each do |gig| %> <div class="column is-one-third"> <div class="card"> <div class="card-image"> <%= link_to edit_gig_path(gig) do %> <figure class="image is-4by3"> <%= image_tag gig_cover(gig) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <p class="subtitle is-6 m-b-5"><%= link_to gig.title, gig_path(gig) %></p> <span class="star-review"><i class="fa fa-star"></i> 4.8 <span class="has-text-primary">(23)</span> </span> </div> <footer class="card-footer"> <% basic_price = gig.pricings.find{ |p| p.pricing_type == 'basic' } %> <a class="has-text-danger is-block card-footer-item has-text-right"> <% if !basic_price.nil? %> <span class="small-title">最低価格</span> <strong><%= number_to_currency(basic_price.price) %></strong> <% else %> <strong> <span class="small-title has-text-dark">まだ価格がありません</span> </strong> <% end %> </a> </footer> </div> </div> <% end %>
app\views\users\dashboard.html.erb
<section class="section"> <div class="container"> <div class="columns"> <!-- 左パネル --> <div class="column is-one-third"> <div class="columns is-multiline"> <!-- 上部 --> <div class="column is-full"> <div class="card"> <!-- アバター --> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </figure> </div> <div class="card-content"> <!-- 画像アップロードボタン --> <div class="content has-text-centered"> <p class="title is-5"> <%= current_user.full_name %> </p> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> <div class="file"> <label class="button is-primary is-outlined is-fullwidth"> <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> <i class="fas fa-upload"></i> アバター画像アップロード </label> </div> <% end %> </div> <hr class="h-10"> <!-- アカウント情報 --> <article class="media"> <div class="media-content">アカウント登録日</div> <div class="media-right"> <strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong> </div> </article> <hr class="h-10"> <!-- 出身地 --> <article> <div class="media"> <div class="media-content">出身地</div> <div class="media-right"> <strong><%= current_user.from %></strong> <i class="toggle far fa-edit" aria-controls="user-from"></i> </div> </div> <div class="content"> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-from', class: 'is-hidden'} do |f| %> <div class="field"> <%= f.text_field :from, autofocus: true, autocomplete: 'form', class: 'input'%> </div> <a class="toggle button is-light" aria-controls="user-from">キャンセル</a> <%= f.submit "保存", class: "button is-danger" %> <% end %> </div> </article> <hr class="h-10"> <!-- オンラインステータス --> <article> <div class="media"> <div class="media-content">ステータス</div> <div class="media-right"> <strong><% if current_user.status %> オンライン <% else %> オフライン <% end %></strong> <i class="toggle far fa-edit" aria-controls="user-status"></i> </div> </div> <div class="content"> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-status', class: 'is-hidden'} do |f| %> <div class="field"> <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "select is-fullwidth"}) %> </div> <a class="toggle button is-light" aria-controls="user-status">キャンセル</a> <%= f.submit "保存", class: "button is-danger" %> <% end %> </div> </article> </div> </div> </div> <!-- 下部 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <!-- アカウント詳細 --> <article> <div class="media"> <div class="media-content"> <p> <strong>自己紹介</strong> <br> <%= current_user.about %> </p> </div> <div class="media-right"> <i class="toggle far fa-edit" aria-controls="user-about"></i> </div> </div> <div class="content"> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-about', class: 'is-hidden'} do |f| %> <div class="field"> <%= f.text_area :about, autofocus: true, autocomplete: 'form', class: 'input'%> </div> <a class="toggle button is-light" aria-controls="user-about">キャンセル</a> <%= f.submit "保存", class: "button is-danger" %> <% end %> </div> </article> <hr class="h-10"> <!-- 言語 --> <article> <div class="media"> <div class="media-content"> <p> <strong>言語</strong> <br> <%= current_user.language %> </p> </div> <div class="media-right"> <i class="toggle far fa-edit" aria-controls="user-language"></i> </div> </div> <div class="content"> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-language', class: 'is-hidden'} do |f| %> <div class="field"> <%= f.text_field :language, autofocus: true, autocomplete: 'form', class: 'input'%> </div> <a class="toggle button is-light" aria-controls="user-language">キャンセル</a> <%= f.submit "保存", class: "button is-danger" %> <% end %> </div> </article> <hr class="h-10"> <!-- アカウント連携 --> <article class="media"> <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider %> <span class="has-text-success">Facebookでログイン中</span> <% else %> <span class="has-text-danger">アカウント連携していません。</span> <% end %> </p> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 新しいお仕事を登録 --> <div class="column is-one-third has-text-centered"> <%= link_to new_gig_path do %> <div class="card"> <div class="card-image card-content is-horizontal-center is-flex "> <figure class="image is-128x128 "> <%= image_tag 'icon_add.png' %> </figure> </div> <div class="card-content"> <strong>お仕事を新規登録する</strong> </div> </div> <% end %> </div> <!-- 登録したお仕事 --> <% current_user.gigs.each do |gig| %> <div class="column is-one-third"> <div class="card"> <div class="card-image"> <%= link_to edit_gig_path(gig) do %> <figure class="image is-4by3"> <%= image_tag gig_cover(gig) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <p class="subtitle is-6 m-b-5"><%= link_to gig.title, gig_path(gig) %></p> <span class="star-review"><i class="fa fa-star"></i> 4.8 <span class="has-text-primary">(23)</span> </span> </div> <footer class="card-footer"> <% basic_price = gig.pricings.find{ |p| p.pricing_type == 'basic' } %> <a class="has-text-danger is-block card-footer-item has-text-right"> <% if !basic_price.nil? %> <span class="small-title">最低価格</span> <strong><%= number_to_currency(basic_price.price) %></strong> <% else %> <strong> <span class="small-title has-text-dark">まだ価格がありません</span> </strong> <% end %> </a> </footer> </div> </div> <% end %> </div> </div> </div> </div> </section>
「app\helpers\application_helper.rb」ファイルに以下のメソッドを追加します。
記述追加 app\helpers\application_helper.rb(13行目)
def gig_cover(gig) if gig.photos.attached? url_for(gig.photos[0]) else ActionController::Base.helpers.asset_path('icon_default_image.jpg') end end
app\helpers\application_helper.rb
module ApplicationHelper def avatar_url(user) if user.avatar.attached? url_for(user.avatar) elsif user.image? user.image else ActionController::Base.helpers.asset_path('icon_default_avatar.jpg') end end def gig_cover(gig) if gig.photos.attached? url_for(gig.photos[0]) else ActionController::Base.helpers.asset_path('icon_default_image.jpg') end end end
「app\javascript\packs\application.js」ファイルの14行目を以下の記述に書き換えます。
書き換え app\javascript\packs\application.js（14行目）
$(document).on('turbolinks:load', () => {
app\javascript\packs\application.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") window.Noty = require("noty") window.Dropzone = require("dropzone") $(document).on('turbolinks:load', () => { $('.toggle').on('click', (e) => { e.stopPropagation(); e.preventDefault(); $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); }) }) // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) require("trix") require("@rails/actiontext")
ブラウザ確認
http://localhost:3000/dashboard
登録したお仕事の詳細表示ができるようにします。
コマンド
画像をカルーセル表示できるようにします。
yarn add bulma-extensions
「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。
記述追加 app\assets\stylesheets\application.scss(19行目)
@import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min';
app\assets\stylesheets\application.scss
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import 'bulma'; @import 'bulma-extensions'; @import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min'; @import 'noty/lib/noty'; @import 'noty/lib/themes/sunset'; @import 'dropzone/dist/basic.css'; @import 'dropzone/dist/dropzone.css';
「app\javascript\packs\application.js」ファイルに以下の記述を追加します。
記述追加 app\javascript\packs\application.js(13行目)
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel")
app\javascript\packs\application.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") window.Noty = require("noty") window.Dropzone = require("dropzone") window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel") $(document).on('turbolinks:load', () => { $('.toggle').on('click', (e) => { e.stopPropagation(); e.preventDefault(); $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); }) }) // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) require("trix") require("@rails/actiontext")
「app\controllers\gigs_controller.rb」ファイルの「show()」メソッドを以下のように編集します。
記述追加 app\controllers\gigs_controller.rb（75行目）
def show @categories = Category.all end
app\controllers\gigs_controller.rb
class GigsController < ApplicationController protect_from_forgery except: [:upload_photo] before_action :authenticate_user!, except: [:show] before_action :set_gig, except: [:new, :create] before_action :is_authorised, only: [:edit, :update, :upload_photo, :delete_photo] before_action :set_step, only: [:update, :edit] def new @gig = current_user.gigs.build @categories = Category.all end def create @gig = current_user.gigs.build(gig_params) if @gig.save @gig.pricings.create(Pricing.pricing_types.values.map{ |x| {pricing_type: x} }) redirect_to edit_gig_path(@gig), notice: "保存しました" else redirect_to request.referrer, flash: { error: @gig.errors.full_messages } end end def edit @categories = Category.all end def update if @step == 2 gig_params[:pricings_attributes].each do |index, pricing| if @gig.has_single_pricing && pricing[:pricing_type] != Pricing.pricing_types.key(0) next; else if pricing[:title].blank? || pricing[:description].blank? || pricing[:delivery_time].blank? || pricing[:price].blank? return redirect_to request.referrer, flash: {error: "価格が無効です"} end end end end if @step == 3 && gig_params[:description].blank? return redirect_to request.referrer, flash: {error: "詳細を空白にすることはできません"} end if @step == 4 && @gig.photos.blank? return redirect_to request.referrer, flash: {error: "写真がありません"} end if @step == 5 @gig.pricings.each do |pricing| if @gig.has_single_pricing && !pricing.basic? next; else if pricing[:title].blank? || pricing[:description].blank? || pricing[:delivery_time].blank? || pricing[:price].blank? return redirect_to edit_gig_path(@gig, step: 2), flash: {error: "価格が無効です"} end end end if @gig.description.blank? return redirect_to edit_gig_path(@gig, step: 3), flash: {error: "詳細を空白にすることはできません"} elsif @gig.photos.blank? return redirect_to edit_gig_path(@gig, step: 4), flash: {error: "写真がありません"} end end if @gig.update(gig_params) flash[:notice] = "保存しました" else return redirect_to request.referrer, flash: {error: @gig.errors.full_messages} end if @step < 5 redirect_to edit_gig_path(@gig, step: @step + 1) else redirect_to dashboard_path end end def show @categories = Category.all end def upload_photo @gig.photos.attach(params[:file]) render json: { success: true } end def delete_photo @image = ActiveStorage::Attachment.find(params[:photo_id]) @image.purge redirect_to edit_gig_path(@gig, step: 4) end private def set_step @step = params[:step].to_i > 0 ? params[:step].to_i : 1 if @step > 5 @step = 5 end end def set_gig @gig = Gig.find(params[:id]) end def is_authorised redirect_to root_path, alert: "あなたには権限がありません。" unless current_user.id == @gig.user_id end def gig_params params.require(:gig).permit(:title, :video, :description, :active, :category_id, :has_single_pricing, pricings_attributes: [:id, :title, :description, :delivery_time, :price, :pricing_type]) end end
「app\views\shared」フォルダに「_categories.html.erb」ファイルを新規作成します。
app\views\shared\_categories.html.erb(新規作成したファイル)
<nav class="navbar has-shadow" style="z-index: 3"> <div class="container"> <div class="navbar"> <% @categories.each do |item| %> <%= link_to "#{item.name}", root_path, class: "navbar-item" %> <% end %> </div> </div> </nav>
「app\views\gigs\show.html.erb」ファイルを以下のように編集します。
app\views\gigs\show.html.erb
<%= render 'shared/categories' %> <section class="section"> <div class="container"> <div class="columns"> <!-- 左側 --> <div class="column is-two-thirds"> <div class="columns is-multiline"> <!-- 画像カルーセル表示 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="content"> <p class="title is-4"><%= @gig.title %></p> </div> <hr> <div class="hero-carousel" id="carousel-photo"> <% @gig.photos.each do |photo| %> <div class="carousel-item has-background image is-16by9"> <%= image_tag url_for(photo), class: "is-background", width: "100%" %> </div> <% end %> <% if @gig.video.present? %> <div class="video-container"> <iframe src="https://www.youtube.com/embed/<%= @gig.video %>" allowfullscreen></iframe> </div> <% end %> </div> </div> </div> </div> <!-- お仕事の内容 --> <div class="column"> <div class="card"> <div class="card-content"> <article class="media"> <div class="media-content"> <p><strong>このお仕事について</strong></p> <hr> <%= @gig.description %> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 価格プラン --> <div class="column is-full"> <div class="tabs is-fullwidth" id="tabs"> <ul> <% Pricing.pricing_types.each do |key, value| %> <li class="tab <%= 'is-active' if value == 0 %> " data-tab="<%= key %>" style="<%= 'display: none' if @gig.has_single_pricing && value != 0 %>"> <a> <% if value == 0 %> ベーシック <% elsif value == 1 %> スタンダード <% else %> プレミアム <% end %> </a> </li> <% end %> </ul> </div> <div class="tabs-content"> <% @gig.pricings.each do |p| %> <div class="tab-content" id="tab-<%= p.pricing_type %>" style="<%= 'display: none' if !p.basic? %>"> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-content"> <strong><%= p.title %></strong> </div> <div class="media-right"> <p class="title is-4"><%= number_to_currency(p.price) %></p> </div> </div> <div class="content f-15"> <p class="m-t-30"><%= p.description %></p> <p class="m-t-30"> <strong><i class="far fa-clock"></i> 期日： <%= p.delivery_time %>日</strong> </p> </div> <% if (!user_signed_in? && @gig.active) || (user_signed_in? && @gig.active && @gig.user_id != current_user.id) %> <button class="button is-fullwidth is-danger">購入する (<%= number_to_currency(p.price) %>)</button> <% else %> <button class="button is-fullwidth is-danger" disabled>ご利用できません</button> <% end %> </div> </div> </div> <% end %> </div> </div> <!-- プロフィール --> <div class="column"> <div class="card"> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag avatar_url(@gig.user), class: "is-rounded" %> </figure> </div> <div class="card-content f-15"> <div class="content has-text-centered"> <p class="title is-5"><%= @gig.user.full_name %></p> <button class="button is-black is-outlined is-fullwidth">メッセージを送る</button> </div> <article class="media"> <div class="media-content"> <i class="fas fa-user m-r-5"></i> アカウント登録日 </div> <div class="media-right"> <%= I18n.l(@gig.user.created_at, format: :full_date) %> </div> </article> <article class="media"> <div class="media-content"> <i class="fas fa-map-marker-alt m-r-5"></i> 出身地 </div> <div class="media-right"> <%= @gig.user.from %> </div> </article> <article class="media"> <div class="media-content"> <%= @gig.user.about %> </div> </article> </div> </div> </div> </div> </div> </div> </div> </section> <script> BulmaCarousel.attach('#carousel-photo', { slidesToScroll: 1, slidesToShow: 1 }); $(document).ready(function() { $('#tabs li').on('click', function() { var type = $(this).data('tab'); $('#tabs li').removeClass('is-active'); $(this).addClass('is-active'); $('.tab-content').hide(); $('#tab-' + type).show(); }) }) </script>
ブラウザ確認
http://localhost:3000/gigs/1
ナビゲーションバーにカテゴリーが表示され、お仕事の詳細を見ることができます。
「app\views\shared\_navbar.html.erb」ファイルの記述を修正します。
記述修正 app\views\shared\_navbar.html.erb
64行目の記述を「<% if (user_signed_in?) && !current_page?(root_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %>」に置き換えています。
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトOshigoto</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"> <div class="field has-addons"> <div class="control"> <input class="input" type="text" placeholder="どんなお仕事を？"> </div> <div class="control"> <a class="button is-success">検索</a> </div> </div> </div> </div> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-item" style="margin-right: 50px;"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <%= current_user.full_name %> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) && !current_page?(root_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を売る人</a> <div class="navbar-dropdown"> <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> <a class="navbar-item"></a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を買う人</a> <div class="navbar-dropdown"> <a class="navbar-item"></a> <a class="navbar-item"></a> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // Check for click events on the navbar burger icon $(".navbar-burger").click(function() { // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
↓↓クリックして頂けると励みになります。
[23]dropzone << [ホームに戻る] >> [25]注文モデル
