質問編集履歴

4

変換後のソースに変更

2016/02/17 12:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,37 +30,59 @@
30
30
 
31
31
  _form.html.haml
32
32
 
33
- ```haml
33
+ ```html
34
34
 
35
- .full_display_container
35
+ <div class="full_display_container">
36
36
 
37
- .item_form
37
+ <div class="item_form">
38
38
 
39
- = form_for(@item, html: { multipart: true }) do |f|
39
+ <%= form_for(@item, html: { multipart: true }) do |f| %>
40
40
 
41
- = render 'shared/error_messages', object: f.object
41
+ <%= render 'shared/error_messages', object: f.object %>
42
42
 
43
- .field
43
+ <div class="field">
44
44
 
45
- = f.text_field :title, :placeholder => "タイトル", class: 'form-control'
45
+ <%= f.text_field :title, :placeholder => "タイトル", class: 'form-control' %>
46
46
 
47
- %ul#item-tags
47
+ <ul id="item-tags"></ul>
48
48
 
49
- .item_detail
49
+ <div class="item_detail">
50
50
 
51
- .left
51
+ <div class="left">
52
52
 
53
- .col-sm-6
53
+ <div class="col-sm-6">
54
54
 
55
- = f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control'
55
+ <%= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control' %>
56
56
 
57
- .right
57
+ </div>
58
58
 
59
- .col-sm-6
59
+ </div>
60
60
 
61
- #preview= markdown(@item.content)
61
+ <div class="right">
62
62
 
63
+ <div class="col-sm-6">
64
+
65
+ <div id="preview">
66
+
67
+ <%= markdown(@item.content) %>
68
+
69
+ </div>
70
+
71
+ </div>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
63
- = f.submit "投稿", class: "btn btn-primary"
79
+ <%= f.submit "投稿", class: "btn btn-primary" %>
80
+
81
+ <% end %>
82
+
83
+ </div>
84
+
85
+ </div>
64
86
 
65
87
  ```
66
88
 
@@ -72,50 +94,74 @@
72
94
 
73
95
  // Itemフォーム画面
74
96
 
75
- .item_form
97
+ .item_form {
76
98
 
77
- margin: 0 auto
99
+ margin: 0 auto;
78
100
 
79
- .field
101
+ .field {
80
102
 
81
- .item_detail
103
+ .item_detail {
82
104
 
83
105
  // .form-control
84
106
 
85
- h1, h2, h3, h4, h5, h6
107
+ h1, h2, h3, h4, h5, h6 {
86
108
 
87
- border-bottom: 2px solid $list_border_top_color
109
+ border-bottom: 2px solid $list_border_top_color;
88
110
 
89
- /* 下線
111
+ /* 下線 */
90
112
 
91
- margin: 50px 0 10px 0
113
+ margin: 50px 0 10px 0;
92
114
 
93
- .left
115
+ }
94
116
 
95
- .col-sm-6
117
+ .left {
96
118
 
97
- padding-left: 0
119
+ .col-sm-6 {
98
120
 
99
- .right
121
+ padding-left: 0;
100
122
 
101
- .col-sm-6
123
+ }
102
124
 
103
- padding-right: 0
125
+ }
104
126
 
105
- height: 70vh
127
+ .right {
106
128
 
107
- overflow-y: auto
129
+ .col-sm-6 {
108
130
 
109
- .col-sm-6
131
+ padding-right: 0;
110
132
 
111
- @media (max-width: 767px)
133
+ height: 70vh;
112
134
 
113
- padding-left: 0
135
+ overflow-y: auto;
114
136
 
115
- padding-right: 0
137
+ }
116
138
 
117
- #item_content
139
+ }
118
140
 
141
+ }
142
+
143
+ .col-sm-6 {
144
+
145
+ @media (max-width: 767px) {
146
+
147
+ padding-left: 0;
148
+
149
+ padding-right: 0;
150
+
151
+ }
152
+
153
+ #item_content {
154
+
119
- height: 70vh !important
155
+ height: 70vh !important;
156
+
157
+ }
158
+
159
+ }
160
+
161
+ }
162
+
163
+ }
164
+
165
+
120
166
 
121
167
  ```

3

sass部分修正

2016/02/17 12:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  一つのボックスだけ画面の高さ100%にするようなことはできるようになったのですが、上記のやり方が分からず困っております。
8
8
 
9
- 現在は85%を設定することである画面サイズの時は全画面表示できているのですが、画面の高さを大きくしたりすると、下の方の空白が大きくなってしまいます。
9
+ 現在は70vhを設定することである画面サイズの時は全画面表示できているのですが、画面の高さを大きくしたりすると、下の方の空白が大きくなってしまいます。
10
10
 
11
11
  ご存じの方いらっしゃいましたら教えていただけますでしょうか。
12
12
 
@@ -76,76 +76,46 @@
76
76
 
77
77
  margin: 0 auto
78
78
 
79
- height: 100%
79
+ .field
80
80
 
81
- .new_item
81
+ .item_detail
82
82
 
83
- height: 85%
83
+ // .form-control
84
84
 
85
- .field
85
+ h1, h2, h3, h4, h5, h6
86
86
 
87
- height: 100%
87
+ border-bottom: 2px solid $list_border_top_color
88
88
 
89
- .item_detail
89
+ /* 下線
90
90
 
91
- height: 100%
91
+ margin: 50px 0 10px 0
92
92
 
93
- .form-control
93
+ .left
94
94
 
95
- height: 100%
96
-
97
- h1, h2, h3, h4, h5, h6
98
-
99
- border-bottom: 2px solid $list_border_top_color
100
-
101
- /* 下線
102
-
103
- margin: 50px 0 10px 0
104
-
105
- /* 上下の余白
106
-
107
- .container-fluid
95
+ .col-sm-6
108
96
 
109
97
  padding-left: 0
110
98
 
99
+ .right
100
+
101
+ .col-sm-6
102
+
111
103
  padding-right: 0
112
104
 
113
- height: 100%
105
+ height: 70vh
114
106
 
115
- .row-fluid
107
+ overflow-y: auto
116
108
 
117
- height: 85%
109
+ .col-sm-6
118
110
 
119
- .left
111
+ @media (max-width: 767px)
120
112
 
121
- height: 100%
113
+ padding-left: 0
122
114
 
123
- .col-sm-6
115
+ padding-right: 0
124
116
 
125
- padding-left: 0
117
+ #item_content
126
118
 
127
- height: 100%
119
+ height: 70vh !important
128
-
129
- .right
130
-
131
- .col-sm-6
132
-
133
- padding-right: 0
134
-
135
- max-height: 72vh
136
-
137
- overflow-y: scroll
138
-
139
- .col-sm-6
140
-
141
- @media (max-width: 767px)
142
-
143
- padding-left: 0
144
-
145
- padding-right: 0
146
-
147
- #item_content
148
-
149
- height: 100%
150
120
 
151
121
  ```

2

haml部分修正

2016/02/13 13:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -48,21 +48,17 @@
48
48
 
49
49
  .item_detail
50
50
 
51
- .container-fluid
51
+ .left
52
52
 
53
- .row-fluid
53
+ .col-sm-6
54
54
 
55
- .left
55
+ = f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control'
56
56
 
57
- .col-sm-6
57
+ .right
58
58
 
59
- = f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control'
59
+ .col-sm-6
60
60
 
61
- .right
62
-
63
- .col-sm-6
64
-
65
- #preview= markdown(@item.content)
61
+ #preview= markdown(@item.content)
66
62
 
67
63
  = f.submit "投稿", class: "btn btn-primary"
68
64
 

1

scss

2016/02/13 13:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
  items.sass
74
74
 
75
- ``` SASS
75
+ ``` scss
76
76
 
77
77
  // Itemフォーム画面
78
78