Description:
Merge pull request #30 from noppakorn/golden-submit-button
add golden submit button
Commit status:
[Not Reviewed]
References:
Diff options:
Comments:
0 Commit comments
0 Inline Comments
Unresolved TODOs:
There are no unresolved TODOs
r830:534e06ae3cce - - 2 files changed: 37 inserted, 1 deleted
@@ -1,558 +1,594 | |||||
|
1 | /* This is a manifest file that'll be compiled into application.css, which will include all the files |
|
1 | /* This is a manifest file that'll be compiled into application.css, which will include all the files |
|
2 | * listed below. |
|
2 | * listed below. |
|
3 | * |
|
3 | * |
|
4 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, |
|
4 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, |
|
5 | * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. |
|
5 | * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. |
|
6 | * |
|
6 | * |
|
7 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the |
|
7 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the |
|
8 | * compiled file so the styles you add here take precedence over styles defined in any styles |
|
8 | * compiled file so the styles you add here take precedence over styles defined in any styles |
|
9 | * defined in the other CSS/SCSS files in this directory. It is generally better to create a new |
|
9 | * defined in the other CSS/SCSS files in this directory. It is generally better to create a new |
|
10 | * file per style scope. |
|
10 | * file per style scope. |
|
11 | * |
|
11 | * |
|
12 | * // bootstrap says that we should not do this, but @import each file instead |
|
12 | * // bootstrap says that we should not do this, but @import each file instead |
|
13 | * # *= require_tree . |
|
13 | * # *= require_tree . |
|
14 | * # *= require_self |
|
14 | * # *= require_self |
|
15 | */ |
|
15 | */ |
|
16 |
|
16 | ||
|
17 | @import "jquery-ui"; |
|
17 | @import "jquery-ui"; |
|
18 | //@import "jquery.ui.core"; |
|
18 | //@import "jquery.ui.core"; |
|
19 | //@import "jquery.ui.theme"; |
|
19 | //@import "jquery.ui.theme"; |
|
20 | //@import "jquery.ui.datepicker"; |
|
20 | //@import "jquery.ui.datepicker"; |
|
21 | //@import "jquery.ui.slider"; |
|
21 | //@import "jquery.ui.slider"; |
|
22 | //@import "jquery-ui-timepicker-addon"; |
|
22 | //@import "jquery-ui-timepicker-addon"; |
|
23 | //@import "jquery-tablesorter/theme.metro-dark"; |
|
23 | //@import "jquery-tablesorter/theme.metro-dark"; |
|
24 | @import "jquery.countdown"; |
|
24 | @import "jquery.countdown"; |
|
25 | @import "tablesorter-theme.cafe"; |
|
25 | @import "tablesorter-theme.cafe"; |
|
26 |
|
26 | ||
|
27 | //bootstrap |
|
27 | //bootstrap |
|
28 | @import "bootstrap-sprockets"; |
|
28 | @import "bootstrap-sprockets"; |
|
29 | @import "bootstrap"; |
|
29 | @import "bootstrap"; |
|
30 | @import "select2"; |
|
30 | @import "select2"; |
|
31 | @import "select2-bootstrap"; |
|
31 | @import "select2-bootstrap"; |
|
32 |
|
32 | ||
|
33 | //@import bootstrap3-switch |
|
33 | //@import bootstrap3-switch |
|
34 | @import "bootstrap-toggle"; |
|
34 | @import "bootstrap-toggle"; |
|
35 | @import "bootstrap-sortable"; |
|
35 | @import "bootstrap-sortable"; |
|
36 | //@import "bootstrap-datepicker3"; |
|
36 | //@import "bootstrap-datepicker3"; |
|
37 | @import "bootstrap-datetimepicker"; |
|
37 | @import "bootstrap-datetimepicker"; |
|
38 | @import "datatables.net-bs/css/dataTables.bootstrap.min"; |
|
38 | @import "datatables.net-bs/css/dataTables.bootstrap.min"; |
|
39 | @import "datatables.net-buttons-bs/css/buttons.bootstrap.min"; |
|
39 | @import "datatables.net-buttons-bs/css/buttons.bootstrap.min"; |
|
40 |
|
40 | ||
|
41 | //bootstrap navbar color (from) |
|
41 | //bootstrap navbar color (from) |
|
42 | $bgDefault: #19197b; |
|
42 | $bgDefault: #19197b; |
|
43 | $bgHighlight: #06064b; |
|
43 | $bgHighlight: #06064b; |
|
44 | $colDefault: #8e8eb4; |
|
44 | $colDefault: #8e8eb4; |
|
45 | $colHighlight: #ffffff; |
|
45 | $colHighlight: #ffffff; |
|
46 | $dropDown: false; |
|
46 | $dropDown: false; |
|
47 |
|
47 | ||
|
48 | @font-face { |
|
48 | @font-face { |
|
49 | font-family: 'Glyphicons Halflings'; |
|
49 | font-family: 'Glyphicons Halflings'; |
|
50 | src: font-path('bootstrap/glyphicons-halflings-regular.eot'); |
|
50 | src: font-path('bootstrap/glyphicons-halflings-regular.eot'); |
|
51 | src: font-path('bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), |
|
51 | src: font-path('bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), |
|
52 | font-path('bootstrap/glyphicons-halflings-regular.woff') format('woff'), |
|
52 | font-path('bootstrap/glyphicons-halflings-regular.woff') format('woff'), |
|
53 | font-path('bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), |
|
53 | font-path('bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), |
|
54 | font-path('bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); |
|
54 | font-path('bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); |
|
55 | } |
|
55 | } |
|
56 |
|
56 | ||
|
57 |
|
57 | ||
|
58 | .navbar-default { |
|
58 | .navbar-default { |
|
59 | background-color: $bgDefault; |
|
59 | background-color: $bgDefault; |
|
60 | border-color: $bgHighlight; |
|
60 | border-color: $bgHighlight; |
|
61 |
|
61 | ||
|
62 | .navbar-brand { |
|
62 | .navbar-brand { |
|
63 | color: $colDefault; |
|
63 | color: $colDefault; |
|
64 |
|
64 | ||
|
65 | &:hover, &:focus { |
|
65 | &:hover, &:focus { |
|
66 | color: $colHighlight; |
|
66 | color: $colHighlight; |
|
67 | } |
|
67 | } |
|
68 | } |
|
68 | } |
|
69 |
|
69 | ||
|
70 | .navbar-text { |
|
70 | .navbar-text { |
|
71 | color: $colDefault; |
|
71 | color: $colDefault; |
|
72 | } |
|
72 | } |
|
73 |
|
73 | ||
|
74 | .navbar-nav { |
|
74 | .navbar-nav { |
|
75 | > li { |
|
75 | > li { |
|
76 | > a { |
|
76 | > a { |
|
77 | color: $colDefault; |
|
77 | color: $colDefault; |
|
78 |
|
78 | ||
|
79 | &:hover, &:focus { |
|
79 | &:hover, &:focus { |
|
80 | color: $colHighlight; |
|
80 | color: $colHighlight; |
|
81 | } |
|
81 | } |
|
82 | } |
|
82 | } |
|
83 |
|
83 | ||
|
84 | @if $dropDown { |
|
84 | @if $dropDown { |
|
85 | > .dropdown-menu { |
|
85 | > .dropdown-menu { |
|
86 | background-color: $bgDefault; |
|
86 | background-color: $bgDefault; |
|
87 |
|
87 | ||
|
88 | > li { |
|
88 | > li { |
|
89 | > a { |
|
89 | > a { |
|
90 | color: $colDefault; |
|
90 | color: $colDefault; |
|
91 |
|
91 | ||
|
92 | &:hover, &:focus { |
|
92 | &:hover, &:focus { |
|
93 | color: $colHighlight; |
|
93 | color: $colHighlight; |
|
94 | background-color: $bgHighlight; |
|
94 | background-color: $bgHighlight; |
|
95 | } |
|
95 | } |
|
96 | } |
|
96 | } |
|
97 |
|
97 | ||
|
98 | > .divider { |
|
98 | > .divider { |
|
99 | background-color: $bgHighlight; |
|
99 | background-color: $bgHighlight; |
|
100 | } |
|
100 | } |
|
101 | } |
|
101 | } |
|
102 | } |
|
102 | } |
|
103 | } |
|
103 | } |
|
104 | } |
|
104 | } |
|
105 |
|
105 | ||
|
106 | @if $dropDown { |
|
106 | @if $dropDown { |
|
107 | .open .dropdown-menu > .active { |
|
107 | .open .dropdown-menu > .active { |
|
108 | > a, > a:hover, > a:focus { |
|
108 | > a, > a:hover, > a:focus { |
|
109 | color: $colHighlight; |
|
109 | color: $colHighlight; |
|
110 | background-color: $bgHighlight; |
|
110 | background-color: $bgHighlight; |
|
111 | } |
|
111 | } |
|
112 | } |
|
112 | } |
|
113 | } |
|
113 | } |
|
114 |
|
114 | ||
|
115 | > .active { |
|
115 | > .active { |
|
116 | > a, > a:hover, > a:focus { |
|
116 | > a, > a:hover, > a:focus { |
|
117 | color: $colHighlight; |
|
117 | color: $colHighlight; |
|
118 | background-color: $bgHighlight; |
|
118 | background-color: $bgHighlight; |
|
119 | } |
|
119 | } |
|
120 | } |
|
120 | } |
|
121 |
|
121 | ||
|
122 | > .open { |
|
122 | > .open { |
|
123 | > a, > a:hover, > a:focus { |
|
123 | > a, > a:hover, > a:focus { |
|
124 | color: $colHighlight; |
|
124 | color: $colHighlight; |
|
125 | background-color: $bgHighlight; |
|
125 | background-color: $bgHighlight; |
|
126 | } |
|
126 | } |
|
127 | } |
|
127 | } |
|
128 | } |
|
128 | } |
|
129 |
|
129 | ||
|
130 | .navbar-toggle { |
|
130 | .navbar-toggle { |
|
131 | border-color: $bgHighlight; |
|
131 | border-color: $bgHighlight; |
|
132 |
|
132 | ||
|
133 | &:hover, &:focus { |
|
133 | &:hover, &:focus { |
|
134 | background-color: $bgHighlight; |
|
134 | background-color: $bgHighlight; |
|
135 | } |
|
135 | } |
|
136 |
|
136 | ||
|
137 | .icon-bar { |
|
137 | .icon-bar { |
|
138 | background-color: $colDefault; |
|
138 | background-color: $colDefault; |
|
139 | } |
|
139 | } |
|
140 | } |
|
140 | } |
|
141 |
|
141 | ||
|
142 | .navbar-collapse, |
|
142 | .navbar-collapse, |
|
143 | .navbar-form { |
|
143 | .navbar-form { |
|
144 | border-color: $colDefault; |
|
144 | border-color: $colDefault; |
|
145 | } |
|
145 | } |
|
146 |
|
146 | ||
|
147 | .navbar-link { |
|
147 | .navbar-link { |
|
148 | color: $colDefault; |
|
148 | color: $colDefault; |
|
149 |
|
149 | ||
|
150 | &:hover { |
|
150 | &:hover { |
|
151 | color: $colHighlight; |
|
151 | color: $colHighlight; |
|
152 | } |
|
152 | } |
|
153 | } |
|
153 | } |
|
154 | } |
|
154 | } |
|
155 |
|
155 | ||
|
156 | @media (max-width: 767px) { |
|
156 | @media (max-width: 767px) { |
|
157 | .navbar-default .navbar-nav .open .dropdown-menu { |
|
157 | .navbar-default .navbar-nav .open .dropdown-menu { |
|
158 | > li > a { |
|
158 | > li > a { |
|
159 | color: $colDefault; |
|
159 | color: $colDefault; |
|
160 |
|
160 | ||
|
161 | &:hover, &:focus { |
|
161 | &:hover, &:focus { |
|
162 | color: $colHighlight; |
|
162 | color: $colHighlight; |
|
163 | } |
|
163 | } |
|
164 | } |
|
164 | } |
|
165 |
|
165 | ||
|
166 | > .active { |
|
166 | > .active { |
|
167 | > a, > a:hover, > a:focus { |
|
167 | > a, > a:hover, > a:focus { |
|
168 | color: $colHighlight; |
|
168 | color: $colHighlight; |
|
169 | background-color: $bgHighlight; |
|
169 | background-color: $bgHighlight; |
|
170 | } |
|
170 | } |
|
171 | } |
|
171 | } |
|
172 | } |
|
172 | } |
|
173 | } |
|
173 | } |
|
174 |
|
174 | ||
|
175 | .secondnavbar { |
|
175 | .secondnavbar { |
|
176 | top: 50px; |
|
176 | top: 50px; |
|
177 | } |
|
177 | } |
|
178 |
|
178 | ||
|
179 | // --------------- bootstrap file upload ---------------------- |
|
179 | // --------------- bootstrap file upload ---------------------- |
|
180 | .btn-file { |
|
180 | .btn-file { |
|
181 | position: relative; |
|
181 | position: relative; |
|
182 | overflow: hidden; |
|
182 | overflow: hidden; |
|
183 | } |
|
183 | } |
|
184 |
|
184 | ||
|
185 | .btn-file input[type=file] { |
|
185 | .btn-file input[type=file] { |
|
186 | position: absolute; |
|
186 | position: absolute; |
|
187 | top: 0; |
|
187 | top: 0; |
|
188 | right: 0; |
|
188 | right: 0; |
|
189 | min-width: 100%; |
|
189 | min-width: 100%; |
|
190 | min-height: 100%; |
|
190 | min-height: 100%; |
|
191 | font-size: 100px; |
|
191 | font-size: 100px; |
|
192 | text-align: right; |
|
192 | text-align: right; |
|
193 | filter: alpha(opacity = 0); |
|
193 | filter: alpha(opacity = 0); |
|
194 | opacity: 0; |
|
194 | opacity: 0; |
|
195 | outline: none; |
|
195 | outline: none; |
|
196 | background: white; |
|
196 | background: white; |
|
197 | cursor: inherit; |
|
197 | cursor: inherit; |
|
198 | display: block; |
|
198 | display: block; |
|
199 | } |
|
199 | } |
|
200 |
|
200 | ||
|
201 | body { |
|
201 | body { |
|
202 | background: white image-url("topbg.jpg") repeat-x top center; |
|
202 | background: white image-url("topbg.jpg") repeat-x top center; |
|
203 |
|
203 | ||
|
204 | //font-size: 13px |
|
204 | //font-size: 13px |
|
205 | //font-family: Tahoma, "sans-serif" |
|
205 | //font-family: Tahoma, "sans-serif" |
|
206 | margin: 10px; |
|
206 | margin: 10px; |
|
207 | padding: 10px; |
|
207 | padding: 10px; |
|
208 | padding-top: 60px; |
|
208 | padding-top: 60px; |
|
209 | } |
|
209 | } |
|
210 |
|
210 | ||
|
211 | // ------------------ bootstrap sortable -------------------- |
|
211 | // ------------------ bootstrap sortable -------------------- |
|
212 | table.sortable th { |
|
212 | table.sortable th { |
|
213 | padding-right: 20px !important; |
|
213 | padding-right: 20px !important; |
|
214 |
|
214 | ||
|
215 | span.sign { |
|
215 | span.sign { |
|
216 | right: (-15px) !important; |
|
216 | right: (-15px) !important; |
|
217 | } |
|
217 | } |
|
218 |
|
218 | ||
|
219 | &.text-right { |
|
219 | &.text-right { |
|
220 | padding-left: 20px !important; |
|
220 | padding-left: 20px !important; |
|
221 | padding-right: 8px !important; |
|
221 | padding-right: 8px !important; |
|
222 |
|
222 | ||
|
223 | &:after, span.sign { |
|
223 | &:after, span.sign { |
|
224 | left: (-15px) !important; |
|
224 | left: (-15px) !important; |
|
225 | } |
|
225 | } |
|
226 | } |
|
226 | } |
|
227 | } |
|
227 | } |
|
228 |
|
228 | ||
|
229 | input { |
|
229 | input { |
|
230 | font-family: Tahoma, "sans-serif"; |
|
230 | font-family: Tahoma, "sans-serif"; |
|
231 | } |
|
231 | } |
|
232 |
|
232 | ||
|
233 | h1 { |
|
233 | h1 { |
|
234 | font-size: 24px; |
|
234 | font-size: 24px; |
|
235 | color: #334488; |
|
235 | color: #334488; |
|
236 | line-height: 2em; |
|
236 | line-height: 2em; |
|
237 | } |
|
237 | } |
|
238 |
|
238 | ||
|
239 | h2 { |
|
239 | h2 { |
|
240 | font-size: 18px; |
|
240 | font-size: 18px; |
|
241 | color: #5566bb; |
|
241 | color: #5566bb; |
|
242 | line-height: 1.5em; |
|
242 | line-height: 1.5em; |
|
243 | } |
|
243 | } |
|
244 |
|
244 | ||
|
245 | hr { |
|
245 | hr { |
|
246 | border-top: 1px solid #dddddd; |
|
246 | border-top: 1px solid #dddddd; |
|
247 | border-bottom: 1px solid #eeeeee; |
|
247 | border-bottom: 1px solid #eeeeee; |
|
248 | } |
|
248 | } |
|
249 |
|
249 | ||
|
250 | //#a |
|
250 | //#a |
|
251 | // color: #6666cc |
|
251 | // color: #6666cc |
|
252 | // text-decoration: none |
|
252 | // text-decoration: none |
|
253 | // |
|
253 | // |
|
254 | // &:link, &:visited |
|
254 | // &:link, &:visited |
|
255 | // color: #6666cc |
|
255 | // color: #6666cc |
|
256 | // text-decoration: none |
|
256 | // text-decoration: none |
|
257 | // |
|
257 | // |
|
258 | // &:hover, &:focus |
|
258 | // &:hover, &:focus |
|
259 | // color: #111166 |
|
259 | // color: #111166 |
|
260 | // text-decoration: none |
|
260 | // text-decoration: none |
|
261 |
|
261 | ||
|
262 | div { |
|
262 | div { |
|
263 | &.userbar { |
|
263 | &.userbar { |
|
264 | line-height: 1.5em; |
|
264 | line-height: 1.5em; |
|
265 | text-align: right; |
|
265 | text-align: right; |
|
266 | font-size: 12px; |
|
266 | font-size: 12px; |
|
267 | } |
|
267 | } |
|
268 |
|
268 | ||
|
269 | &.title { |
|
269 | &.title { |
|
270 | padding: 10px 0px; |
|
270 | padding: 10px 0px; |
|
271 | line-height: 1.5em; |
|
271 | line-height: 1.5em; |
|
272 | font-size: 13px; |
|
272 | font-size: 13px; |
|
273 |
|
273 | ||
|
274 | span.contest-over-msg { |
|
274 | span.contest-over-msg { |
|
275 | font-size: 15px; |
|
275 | font-size: 15px; |
|
276 | color: red; |
|
276 | color: red; |
|
277 | } |
|
277 | } |
|
278 |
|
278 | ||
|
279 | table { |
|
279 | table { |
|
280 | width: 100%; |
|
280 | width: 100%; |
|
281 | font-weight: bold; |
|
281 | font-weight: bold; |
|
282 | } |
|
282 | } |
|
283 |
|
283 | ||
|
284 | td { |
|
284 | td { |
|
285 | &.left-col { |
|
285 | &.left-col { |
|
286 | text-align: left; |
|
286 | text-align: left; |
|
287 | vertical-align: top; |
|
287 | vertical-align: top; |
|
288 | color: #444444; |
|
288 | color: #444444; |
|
289 | } |
|
289 | } |
|
290 |
|
290 | ||
|
291 | &.right-col { |
|
291 | &.right-col { |
|
292 | text-align: right; |
|
292 | text-align: right; |
|
293 | vertical-align: top; |
|
293 | vertical-align: top; |
|
294 | font-size: 18px; |
|
294 | font-size: 18px; |
|
295 | color: #116699; |
|
295 | color: #116699; |
|
296 | } |
|
296 | } |
|
297 | } |
|
297 | } |
|
298 | } |
|
298 | } |
|
299 | } |
|
299 | } |
|
300 |
|
300 | ||
|
301 | table.info { |
|
301 | table.info { |
|
302 | margin: 10px 0; |
|
302 | margin: 10px 0; |
|
303 | border: 1px solid #666666; |
|
303 | border: 1px solid #666666; |
|
304 | border-collapse: collapse; |
|
304 | border-collapse: collapse; |
|
305 | font-size: 12px; |
|
305 | font-size: 12px; |
|
306 |
|
306 | ||
|
307 | th { |
|
307 | th { |
|
308 | border: 1px solid #666666; |
|
308 | border: 1px solid #666666; |
|
309 | line-height: 1.5em; |
|
309 | line-height: 1.5em; |
|
310 | padding: 0 0.5em; |
|
310 | padding: 0 0.5em; |
|
311 | } |
|
311 | } |
|
312 |
|
312 | ||
|
313 | td { |
|
313 | td { |
|
314 | border-left: 1px solid #666666; |
|
314 | border-left: 1px solid #666666; |
|
315 | border-right: 1px solid #666666; |
|
315 | border-right: 1px solid #666666; |
|
316 | line-height: 1.5em; |
|
316 | line-height: 1.5em; |
|
317 | padding: 0 0.5em; |
|
317 | padding: 0 0.5em; |
|
318 | } |
|
318 | } |
|
319 | } |
|
319 | } |
|
320 |
|
320 | ||
|
321 | tr { |
|
321 | tr { |
|
322 | &.info-head { |
|
322 | &.info-head { |
|
323 | background: #777777; |
|
323 | background: #777777; |
|
324 | color: white; |
|
324 | color: white; |
|
325 | } |
|
325 | } |
|
326 |
|
326 | ||
|
327 | &.info-odd { |
|
327 | &.info-odd { |
|
328 | background: #eeeeee; |
|
328 | background: #eeeeee; |
|
329 | } |
|
329 | } |
|
330 |
|
330 | ||
|
331 | &.info-even { |
|
331 | &.info-even { |
|
332 | background: #fcfcfc; |
|
332 | background: #fcfcfc; |
|
333 | } |
|
333 | } |
|
334 | } |
|
334 | } |
|
335 |
|
335 | ||
|
336 | @mixin basicbox { |
|
336 | @mixin basicbox { |
|
337 | background: #eeeeff; |
|
337 | background: #eeeeff; |
|
338 | border: 1px dotted #99aaee; |
|
338 | border: 1px dotted #99aaee; |
|
339 | padding: 5px; |
|
339 | padding: 5px; |
|
340 | margin: 10px 0px; |
|
340 | margin: 10px 0px; |
|
341 | color: black; |
|
341 | color: black; |
|
342 | font-size: 13px; |
|
342 | font-size: 13px; |
|
343 | } |
|
343 | } |
|
344 |
|
344 | ||
|
345 | .infobox { |
|
345 | .infobox { |
|
346 | @include basicbox; |
|
346 | @include basicbox; |
|
347 | } |
|
347 | } |
|
348 |
|
348 | ||
|
349 | .submitbox { |
|
349 | .submitbox { |
|
350 | @include basicbox; |
|
350 | @include basicbox; |
|
351 | } |
|
351 | } |
|
352 |
|
352 | ||
|
353 | .errorExplanation { |
|
353 | .errorExplanation { |
|
354 | border: 1px dotted gray; |
|
354 | border: 1px dotted gray; |
|
355 | color: #bb2222; |
|
355 | color: #bb2222; |
|
356 | padding: 5px 15px 5px 15px; |
|
356 | padding: 5px 15px 5px 15px; |
|
357 | margin-bottom: 5px; |
|
357 | margin-bottom: 5px; |
|
358 | background-color: white; |
|
358 | background-color: white; |
|
359 | font-weight: normal; |
|
359 | font-weight: normal; |
|
360 |
|
360 | ||
|
361 | h2 { |
|
361 | h2 { |
|
362 | color: #cc1111; |
|
362 | color: #cc1111; |
|
363 | font-weight: bold; |
|
363 | font-weight: bold; |
|
364 | } |
|
364 | } |
|
365 | } |
|
365 | } |
|
366 |
|
366 | ||
|
367 | table.uinfo { |
|
367 | table.uinfo { |
|
368 | border-collapse: collapse; |
|
368 | border-collapse: collapse; |
|
369 | border: 1px solid black; |
|
369 | border: 1px solid black; |
|
370 | font-size: 13px; |
|
370 | font-size: 13px; |
|
371 | } |
|
371 | } |
|
372 |
|
372 | ||
|
373 | td.uinfo { |
|
373 | td.uinfo { |
|
374 | vertical-align: top; |
|
374 | vertical-align: top; |
|
375 | border: 1px solid black; |
|
375 | border: 1px solid black; |
|
376 | padding: 5px; |
|
376 | padding: 5px; |
|
377 | } |
|
377 | } |
|
378 |
|
378 | ||
|
379 | th.uinfo { |
|
379 | th.uinfo { |
|
380 | background: lightgreen; |
|
380 | background: lightgreen; |
|
381 | vertical-align: top; |
|
381 | vertical-align: top; |
|
382 | text-align: right; |
|
382 | text-align: right; |
|
383 | border: 1px solid black; |
|
383 | border: 1px solid black; |
|
384 | padding: 5px; |
|
384 | padding: 5px; |
|
385 | } |
|
385 | } |
|
386 |
|
386 | ||
|
387 | div { |
|
387 | div { |
|
388 | &.compilermsgbody { |
|
388 | &.compilermsgbody { |
|
389 | font-family: monospace; |
|
389 | font-family: monospace; |
|
390 | } |
|
390 | } |
|
391 |
|
391 | ||
|
392 | &.task-menu { |
|
392 | &.task-menu { |
|
393 | text-align: center; |
|
393 | text-align: center; |
|
394 | font-size: 13px; |
|
394 | font-size: 13px; |
|
395 | line-height: 1.75em; |
|
395 | line-height: 1.75em; |
|
396 | font-weight: bold; |
|
396 | font-weight: bold; |
|
397 | border-top: 1px dashed gray; |
|
397 | border-top: 1px dashed gray; |
|
398 | border-bottom: 1px dashed gray; |
|
398 | border-bottom: 1px dashed gray; |
|
399 | margin-top: 2px; |
|
399 | margin-top: 2px; |
|
400 | margin-bottom: 4px; |
|
400 | margin-bottom: 4px; |
|
401 | } |
|
401 | } |
|
402 | } |
|
402 | } |
|
403 |
|
403 | ||
|
404 | table.taskdesc { |
|
404 | table.taskdesc { |
|
405 | border: 2px solid #dddddd; |
|
405 | border: 2px solid #dddddd; |
|
406 | border-collapse: collapse; |
|
406 | border-collapse: collapse; |
|
407 | margin: 10px auto; |
|
407 | margin: 10px auto; |
|
408 | width: 90%; |
|
408 | width: 90%; |
|
409 | font-size: 13px; |
|
409 | font-size: 13px; |
|
410 |
|
410 | ||
|
411 | p { |
|
411 | p { |
|
412 | font-size: 13px; |
|
412 | font-size: 13px; |
|
413 | } |
|
413 | } |
|
414 |
|
414 | ||
|
415 | tr.name { |
|
415 | tr.name { |
|
416 | border: 2px solid #dddddd; |
|
416 | border: 2px solid #dddddd; |
|
417 | background: #dddddd; |
|
417 | background: #dddddd; |
|
418 | color: #333333; |
|
418 | color: #333333; |
|
419 | font-weight: bold; |
|
419 | font-weight: bold; |
|
420 | font-size: 14px; |
|
420 | font-size: 14px; |
|
421 | line-height: 1.5em; |
|
421 | line-height: 1.5em; |
|
422 | text-align: center; |
|
422 | text-align: center; |
|
423 | } |
|
423 | } |
|
424 |
|
424 | ||
|
425 | td { |
|
425 | td { |
|
426 | &.desc-odd { |
|
426 | &.desc-odd { |
|
427 | padding: 5px; |
|
427 | padding: 5px; |
|
428 | padding-left: 20px; |
|
428 | padding-left: 20px; |
|
429 | background: #fefeee; |
|
429 | background: #fefeee; |
|
430 | } |
|
430 | } |
|
431 |
|
431 | ||
|
432 | &.desc-even { |
|
432 | &.desc-even { |
|
433 | padding: 5px; |
|
433 | padding: 5px; |
|
434 | padding-left: 20px; |
|
434 | padding-left: 20px; |
|
435 | background: #feeefe; |
|
435 | background: #feeefe; |
|
436 | } |
|
436 | } |
|
437 | } |
|
437 | } |
|
438 | } |
|
438 | } |
|
439 |
|
439 | ||
|
440 | .announcementbox { |
|
440 | .announcementbox { |
|
441 | margin: 10px 0px; |
|
441 | margin: 10px 0px; |
|
442 | background: #bbddee; |
|
442 | background: #bbddee; |
|
443 | padding: 1px; |
|
443 | padding: 1px; |
|
444 |
|
444 | ||
|
445 | span.title { |
|
445 | span.title { |
|
446 | font-weight: bold; |
|
446 | font-weight: bold; |
|
447 | color: #224455; |
|
447 | color: #224455; |
|
448 | padding-left: 10px; |
|
448 | padding-left: 10px; |
|
449 | line-height: 1.6em; |
|
449 | line-height: 1.6em; |
|
450 | } |
|
450 | } |
|
451 | } |
|
451 | } |
|
452 |
|
452 | ||
|
453 | .announcement { |
|
453 | .announcement { |
|
454 | margin: 2px; |
|
454 | margin: 2px; |
|
455 | background: white; |
|
455 | background: white; |
|
456 | padding: 1px; |
|
456 | padding: 1px; |
|
457 | padding-left: 10px; |
|
457 | padding-left: 10px; |
|
458 | padding-right: 10px; |
|
458 | padding-right: 10px; |
|
459 | padding-top: 5px; |
|
459 | padding-top: 5px; |
|
460 | padding-bottom: 5px; |
|
460 | padding-bottom: 5px; |
|
461 | } |
|
461 | } |
|
462 |
|
462 | ||
|
463 | .announcement p { |
|
463 | .announcement p { |
|
464 | font-size: 12px; |
|
464 | font-size: 12px; |
|
465 | margin: 2px; |
|
465 | margin: 2px; |
|
466 | } |
|
466 | } |
|
467 |
|
467 | ||
|
468 | .pub-info { |
|
468 | .pub-info { |
|
469 | text-align: right; |
|
469 | text-align: right; |
|
470 | font-style: italic; |
|
470 | font-style: italic; |
|
471 | font-size: 9px; |
|
471 | font-size: 9px; |
|
472 |
|
472 | ||
|
473 | p { |
|
473 | p { |
|
474 | text-align: right; |
|
474 | text-align: right; |
|
475 | font-style: italic; |
|
475 | font-style: italic; |
|
476 | font-size: 9px; |
|
476 | font-size: 9px; |
|
477 | } |
|
477 | } |
|
478 | } |
|
478 | } |
|
479 |
|
479 | ||
|
480 | .announcement { |
|
480 | .announcement { |
|
481 | .toggles { |
|
481 | .toggles { |
|
482 | font-weight: normal; |
|
482 | font-weight: normal; |
|
483 | float: right; |
|
483 | float: right; |
|
484 | font-size: 80%; |
|
484 | font-size: 80%; |
|
485 | } |
|
485 | } |
|
486 |
|
486 | ||
|
487 | .announcement-title { |
|
487 | .announcement-title { |
|
488 | font-weight: bold; |
|
488 | font-weight: bold; |
|
489 | } |
|
489 | } |
|
490 | } |
|
490 | } |
|
491 |
|
491 | ||
|
492 | div { |
|
492 | div { |
|
493 | &.message { |
|
493 | &.message { |
|
494 | margin: 10px 0 0; |
|
494 | margin: 10px 0 0; |
|
495 |
|
495 | ||
|
496 | div { |
|
496 | div { |
|
497 | &.message { |
|
497 | &.message { |
|
498 | margin: 0 0 0 30px; |
|
498 | margin: 0 0 0 30px; |
|
499 | } |
|
499 | } |
|
500 |
|
500 | ||
|
501 | &.body { |
|
501 | &.body { |
|
502 | border: 2px solid #dddddd; |
|
502 | border: 2px solid #dddddd; |
|
503 | background: #fff8f8; |
|
503 | background: #fff8f8; |
|
504 | padding-left: 5px; |
|
504 | padding-left: 5px; |
|
505 | } |
|
505 | } |
|
506 |
|
506 | ||
|
507 | &.reply-body { |
|
507 | &.reply-body { |
|
508 | border: 2px solid #bbbbbb; |
|
508 | border: 2px solid #bbbbbb; |
|
509 | background: #fffff8; |
|
509 | background: #fffff8; |
|
510 | padding-left: 5px; |
|
510 | padding-left: 5px; |
|
511 | } |
|
511 | } |
|
512 |
|
512 | ||
|
513 | &.stat { |
|
513 | &.stat { |
|
514 | font-size: 10px; |
|
514 | font-size: 10px; |
|
515 | line-height: 1.75em; |
|
515 | line-height: 1.75em; |
|
516 | padding: 0 5px; |
|
516 | padding: 0 5px; |
|
517 | color: #333333; |
|
517 | color: #333333; |
|
518 | background: #dddddd; |
|
518 | background: #dddddd; |
|
519 | font-weight: bold; |
|
519 | font-weight: bold; |
|
520 | } |
|
520 | } |
|
521 |
|
521 | ||
|
522 | &.message div.stat { |
|
522 | &.message div.stat { |
|
523 | font-size: 10px; |
|
523 | font-size: 10px; |
|
524 | line-height: 1.75em; |
|
524 | line-height: 1.75em; |
|
525 | padding: 0 5px; |
|
525 | padding: 0 5px; |
|
526 | color: #444444; |
|
526 | color: #444444; |
|
527 | background: #bbbbbb; |
|
527 | background: #bbbbbb; |
|
528 | font-weight: bold; |
|
528 | font-weight: bold; |
|
529 | } |
|
529 | } |
|
530 | } |
|
530 | } |
|
531 | } |
|
531 | } |
|
532 |
|
532 | ||
|
533 | &.contest-title { |
|
533 | &.contest-title { |
|
534 | color: white; |
|
534 | color: white; |
|
535 | text-align: center; |
|
535 | text-align: center; |
|
536 | line-height: 2em; |
|
536 | line-height: 2em; |
|
537 | } |
|
537 | } |
|
538 |
|
538 | ||
|
539 | &.registration-desc, &.test-desc { |
|
539 | &.registration-desc, &.test-desc { |
|
540 | border: 1px dotted gray; |
|
540 | border: 1px dotted gray; |
|
541 | background: #f5f5f5; |
|
541 | background: #f5f5f5; |
|
542 | padding: 5px; |
|
542 | padding: 5px; |
|
543 | margin: 10px 0; |
|
543 | margin: 10px 0; |
|
544 | font-size: 12px; |
|
544 | font-size: 12px; |
|
545 | line-height: 1.5em; |
|
545 | line-height: 1.5em; |
|
546 | } |
|
546 | } |
|
547 | } |
|
547 | } |
|
548 |
|
548 | ||
|
549 | h2.contest-title { |
|
549 | h2.contest-title { |
|
550 | margin-top: 5px; |
|
550 | margin-top: 5px; |
|
551 | margin-bottom: 5px; |
|
551 | margin-bottom: 5px; |
|
552 | } |
|
552 | } |
|
553 |
|
553 | ||
|
554 |
|
554 | ||
|
555 |
|
555 | ||
|
556 | .grader-comment { |
|
556 | .grader-comment { |
|
557 | word-wrap: break-word; |
|
557 | word-wrap: break-word; |
|
558 | } |
|
558 | } |
|
|
559 | + | ||
|
|
560 | + | ||
|
|
561 | + golden-btn + .golden-btn { margin-top: 1em; } | ||
|
|
562 | + | ||
|
|
563 | + .golden-btn { | ||
|
|
564 | + display: inline-block; | ||
|
|
565 | + outline: none; | ||
|
|
566 | + font-family: inherit; | ||
|
|
567 | + box-sizing: border-box; | ||
|
|
568 | + border: none; | ||
|
|
569 | + box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4), | ||
|
|
570 | + inset 0 -2px 5px 1px rgba(139,66,8,1), | ||
|
|
571 | + inset 0 -1px 1px 3px rgba(250,227,133,1); | ||
|
|
572 | + background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07) !important; | ||
|
|
573 | + border: 1px solid #a55d07; | ||
|
|
574 | + color: rgb(120,50,5); | ||
|
|
575 | + text-shadow: 0 2px 2px rgba(250, 227, 133, 1); | ||
|
|
576 | + cursor: pointer; | ||
|
|
577 | + transition: all .2s ease-in-out; | ||
|
|
578 | + background-size: 100% 100%; | ||
|
|
579 | + background-position:center; | ||
|
|
580 | + } | ||
|
|
581 | + .golden-btn:focus, | ||
|
|
582 | + .golden-btn:hover { | ||
|
|
583 | + background-size: 150% 150%; | ||
|
|
584 | + box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), | ||
|
|
585 | + inset 0 -2px 5px 1px #b17d10, | ||
|
|
586 | + inset 0 -1px 1px 3px rgba(250,227,133,1); | ||
|
|
587 | + border: 1px solid rgba(165,93,7,.6); | ||
|
|
588 | + color: rgba(120,50,5,.8); | ||
|
|
589 | + } | ||
|
|
590 | + .golden-btn:active { | ||
|
|
591 | + box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4), | ||
|
|
592 | + inset 0 -2px 5px 1px #b17d10, | ||
|
|
593 | + inset 0 -1px 1px 3px rgba(250,227,133,1); | ||
|
|
594 | + } |
@@ -1,88 +1,88 | |||||
|
1 | %textarea#text_sourcecode{style: "display:none"}~ @source |
|
1 | %textarea#text_sourcecode{style: "display:none"}~ @source |
|
2 | .container |
|
2 | .container |
|
3 | .row |
|
3 | .row |
|
4 | .col-md-12 |
|
4 | .col-md-12 |
|
5 | %h2 Live submit |
|
5 | %h2 Live submit |
|
6 |
|
6 | ||
|
7 | .row |
|
7 | .row |
|
8 | .col-md-12 |
|
8 | .col-md-12 |
|
9 | .alert.alert-info |
|
9 | .alert.alert-info |
|
10 | Write your code in the following box, choose language, and click submit button when finished |
|
10 | Write your code in the following box, choose language, and click submit button when finished |
|
11 | .row |
|
11 | .row |
|
12 | .col-md-8 |
|
12 | .col-md-8 |
|
13 | %div#editor{style: 'height: 500px; border-radius: 7px; font-size: 14px;'} |
|
13 | %div#editor{style: 'height: 500px; border-radius: 7px; font-size: 14px;'} |
|
14 | .col-md-4 |
|
14 | .col-md-4 |
|
15 | - # submission form |
|
15 | - # submission form |
|
16 | = form_tag({controller: :main, :action => 'submit'}, :multipart => true, class: 'form') do |
|
16 | = form_tag({controller: :main, :action => 'submit'}, :multipart => true, class: 'form') do |
|
17 |
|
17 | ||
|
18 | = hidden_field_tag 'editor_text', @source |
|
18 | = hidden_field_tag 'editor_text', @source |
|
19 | = hidden_field_tag 'submission[problem_id]', @problem.id |
|
19 | = hidden_field_tag 'submission[problem_id]', @problem.id |
|
20 | .form-group |
|
20 | .form-group |
|
21 | = label_tag "Task:" |
|
21 | = label_tag "Task:" |
|
22 | = text_field_tag 'asdf', "#{@problem.long_name}", class: 'form-control', disabled: true |
|
22 | = text_field_tag 'asdf', "#{@problem.long_name}", class: 'form-control', disabled: true |
|
23 | .form-group |
|
23 | .form-group |
|
24 | = label_tag "Description:" |
|
24 | = label_tag "Description:" |
|
25 | = link_to_description_if_any "[download] <span class='glyphicon glyphicon-file'></span>".html_safe, @problem |
|
25 | = link_to_description_if_any "[download] <span class='glyphicon glyphicon-file'></span>".html_safe, @problem |
|
26 |
|
26 | ||
|
27 | .form-group |
|
27 | .form-group |
|
28 | = label_tag 'Language:' |
|
28 | = label_tag 'Language:' |
|
29 | = select_tag 'language_id', options_from_collection_for_select(Language.all, 'id', 'pretty_name', @lang_id || @current_user.default_language || Language.find_by_pretty_name("Python").id || Language.first.id), class: 'form-control select', style: "width: 100px" |
|
29 | = select_tag 'language_id', options_from_collection_for_select(Language.all, 'id', 'pretty_name', @lang_id || @current_user.default_language || Language.find_by_pretty_name("Python").id || Language.first.id), class: 'form-control select', style: "width: 100px" |
|
30 | .form-group |
|
30 | .form-group |
|
31 | .input-group |
|
31 | .input-group |
|
32 | %span.input-group-btn |
|
32 | %span.input-group-btn |
|
33 | %span.btn.btn-default.btn-file |
|
33 | %span.btn.btn-default.btn-file |
|
34 | Browse |
|
34 | Browse |
|
35 | = file_field_tag 'load_file' |
|
35 | = file_field_tag 'load_file' |
|
36 | = text_field_tag '' , nil, {readonly: true, class: 'form-control'} |
|
36 | = text_field_tag '' , nil, {readonly: true, class: 'form-control'} |
|
37 | .form-group |
|
37 | .form-group |
|
38 | - = submit_tag 'Submit', class: 'btn btn-success', id: 'live_submit', |
|
38 | + = submit_tag 'Submit', class: 'btn ' + (@submission && @submission.number >= 100 ? 'golden-btn' : 'btn-success'), id: 'live_submit', |
|
39 | data: {confirm: "Submitting this source code for task #{@problem.long_name}?"} |
|
39 | data: {confirm: "Submitting this source code for task #{@problem.long_name}?"} |
|
40 | - # latest submission status |
|
40 | - # latest submission status |
|
41 | .panel{class: (@submission && @submission.graded_at) ? "panel-info" : "panel-warning"} |
|
41 | .panel{class: (@submission && @submission.graded_at) ? "panel-info" : "panel-warning"} |
|
42 | .panel-heading |
|
42 | .panel-heading |
|
43 | Latest Submission Status |
|
43 | Latest Submission Status |
|
44 | = link_to "Refresh",get_latest_submission_status_submissions_path(@submission.user,@problem), class: "btn btn-default btn-sm", remote: true if @submission |
|
44 | = link_to "Refresh",get_latest_submission_status_submissions_path(@submission.user,@problem), class: "btn btn-default btn-sm", remote: true if @submission |
|
45 | .panel-body |
|
45 | .panel-body |
|
46 | %div#latest_status |
|
46 | %div#latest_status |
|
47 | - if @submission |
|
47 | - if @submission |
|
48 | = render :partial => 'submission_short', |
|
48 | = render :partial => 'submission_short', |
|
49 | :locals => {submission: @submission, problem_name: @problem.name, problem_id: @problem.id } |
|
49 | :locals => {submission: @submission, problem_name: @problem.name, problem_id: @problem.id } |
|
50 |
|
50 | ||
|
51 | .modal.fade#compiler{tabindex: -1,role: 'dialog'} |
|
51 | .modal.fade#compiler{tabindex: -1,role: 'dialog'} |
|
52 | .modal-dialog.modal-lg{role:'document'} |
|
52 | .modal-dialog.modal-lg{role:'document'} |
|
53 | .modal-content |
|
53 | .modal-content |
|
54 | .modal-header |
|
54 | .modal-header |
|
55 | %button.close{type: 'button', data: {dismissed: :modal}, aria: {label: 'close'}} |
|
55 | %button.close{type: 'button', data: {dismissed: :modal}, aria: {label: 'close'}} |
|
56 | %span{aria: {hidden: 'true'}, data: {dismiss: 'modal'}} × |
|
56 | %span{aria: {hidden: 'true'}, data: {dismiss: 'modal'}} × |
|
57 | %h4 Compiler message |
|
57 | %h4 Compiler message |
|
58 | .modal-body |
|
58 | .modal-body |
|
59 | %pre#compiler_msg |
|
59 | %pre#compiler_msg |
|
60 | - if @submission |
|
60 | - if @submission |
|
61 | = @submission.compiler_message |
|
61 | = @submission.compiler_message |
|
62 | .modal-footer |
|
62 | .modal-footer |
|
63 | %button.btn.btn-default{type: 'button', data: {dismiss: 'modal'}} Close |
|
63 | %button.btn.btn-default{type: 'button', data: {dismiss: 'modal'}} Close |
|
64 |
|
64 | ||
|
65 | :javascript |
|
65 | :javascript |
|
66 | $(document).ready(function() { |
|
66 | $(document).ready(function() { |
|
67 | e = ace.edit("editor") |
|
67 | e = ace.edit("editor") |
|
68 | e.setValue($("#text_sourcecode").val()); |
|
68 | e.setValue($("#text_sourcecode").val()); |
|
69 | e.gotoLine(1); |
|
69 | e.gotoLine(1); |
|
70 | $("#language_id").trigger('change'); |
|
70 | $("#language_id").trigger('change'); |
|
71 |
|
71 | ||
|
72 | $("#load_file").on('change',function(evt) { |
|
72 | $("#load_file").on('change',function(evt) { |
|
73 | var file = evt.target.files[0]; |
|
73 | var file = evt.target.files[0]; |
|
74 | var reader = new FileReader(); |
|
74 | var reader = new FileReader(); |
|
75 | reader.onload = function(theFile) { |
|
75 | reader.onload = function(theFile) { |
|
76 | var e = ace.edit("editor") |
|
76 | var e = ace.edit("editor") |
|
77 | e.setValue(theFile.target.result); |
|
77 | e.setValue(theFile.target.result); |
|
78 | e.gotoLine(1); |
|
78 | e.gotoLine(1); |
|
79 | }; |
|
79 | }; |
|
80 | reader.readAsText(file) |
|
80 | reader.readAsText(file) |
|
81 | }); |
|
81 | }); |
|
82 |
|
82 | ||
|
83 | //brython(); |
|
83 | //brython(); |
|
84 | }); |
|
84 | }); |
|
85 |
|
85 | ||
|
86 |
|
86 | ||
|
87 |
|
87 | ||
|
88 |
|
88 |
You need to be logged in to leave comments.
Login now