質問するログイン新規登録

質問編集履歴

2

タグを追加

2019/01/09 02:23

投稿

takagitoshinari
takagitoshinari

スコア24

title CHANGED
File without changes
body CHANGED
File without changes

1

HTMLソースを記載

2019/01/09 02:23

投稿

takagitoshinari
takagitoshinari

スコア24

title CHANGED
File without changes
body CHANGED
@@ -13,40 +13,49 @@
13
13
  ### 該当のソースコード
14
14
 
15
15
  ```HTML
16
- .sell-dropbox-container.clearfix
17
- .sell-upload-items{class: "have-item-#{@item.images.length}"}
18
- %ul
19
- -if @item.images.attached?
20
- =render partial: 'uploaded_image', collection: @item.images, locals: {form: f}
21
- =label :images, "", for: "item_images" do
16
+ <label for="item_images">
22
- .sell-upload-dropbox.clearfix{class: "have-item-#{@item.images.length}"}
17
+ <div class='clearfix have-item-0 sell-upload-dropbox'>
23
- =f.file_field :images, class: "sell-upload-drop-file", multiple: true, style: "display: none;"
18
+ <input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" />
24
- %pre
19
+ <pre>
25
- ドラッグアンドドロップ
20
+ ドラッグアンドドロップ
26
- またはクリックしてファイルをアップロード
21
+ またはクリックしてファイルをアップロード</pre>
27
- -if @item.errors[:images]
22
+ </div>
28
- %ul.has-error-text
23
+ <ul class='has-error-text'>
29
- -@item.errors.full_messages_for(:images).each do |error|
30
- %li=error
24
+ </ul>
25
+ </label>
31
- %section#modalArea.modalArea
26
+ <section class='modalArea' id='modalArea'>
27
+ <div class='modalBg' id='modalBg'>
32
- #modalBg.modalBg
28
+ </div>
33
- .modalWrappers
29
+ <div class='modalWrappers'>
34
- .modalContents
30
+ <div class='modalContents'>
31
+ <div class='modal-bold'>
35
- .modal-bold 写真を切りとる
32
+ 写真を切りとる
33
+ </div>
36
- =label :images, "", for: "item_images" do
34
+ <label for="item_images">
37
- %span{style: "cursor: pointer;"} 写真を変更する
35
+ <span style='cursor: pointer;'>
38
- %i.fas.fa-camera
36
+ 写真を変更する
39
- .sell-crop-editor
40
- %canvas{id: "c1",width: 400,height:300, style: "cursor: grab;"}
41
- .sell-crop-range
37
+ </span>
38
+ </label>
39
+ <i class='fas fa-camera'></i>
40
+ </div>
41
+ <div class='sell-crop-editor'>
42
+ <canvas height='300' id='c1' style='cursor: grab;' width='400'></canvas>
43
+ <div class='sell-crop-range'>
42
- %i.fas.fa-camera.small-camera
44
+ <i class='fas fa-camera small-camera'></i>
43
- %input.input-range-default{id: "zoom-slider",type: "range",step:"0.01",min: "1",max:"2",name:"scale"}
45
+ <input class='input-range-default' id='zoom-slider' max='2' min='1' name='scale' step='0.01' type='range'>
46
+ <i class='fas fa-camera'></i>
44
- %i.fas.fa-camera
47
+ </div>
45
- .clearfix
48
+ </div>
46
- %li#closeModal.cansel-button
49
+ <div class='clearfix'>
50
+ <li class='cansel-button' id='closeModal'>
47
- =link_to 'キャンセル',method: :post
51
+ <a href="/items/new?method=post">
52
+ キャンセル
48
- %li.ok-button
53
+ </a>
54
+ </li>
49
- =link_to '完了', ""
55
+ <li class='ok-button'>
56
+ <a href="">
57
+ 完了
58
+ </a>
50
59
  ```
51
60
 
52
61
  ```javascript
@@ -80,6 +89,4 @@
80
89
 
81
90
  一通りDOM操作は実行しましたが画像の情報は取得できませんでした。
82
91
 
83
- ### 補足情報(FW/ツールのバージョンなど)
92
+ ### 補足情報(FW/ツールのバージョンなど)
84
-
85
- ここにより詳細な情報を記載してください。