cafe-grader-web

Commit r830:534e06ae3cce public

parent | child
Description:
Merge pull request #30 from noppakorn/golden-submit-button add golden submit button
Commit status:
[Not Reviewed]
References:
merge default
Diff options:
Raw Diff | Patch Diff | Download Diff | Ignore whitespace | Increase context
Comments:
0 Commit comments 0 Inline Comments
Unresolved TODOs:
There are no unresolved TODOs
Side by Side Unified
Expand All Files Collapse All Files Wide Mode Diff
Add another comment
Browse Files

r830:534e06ae3cce - - 2 files changed: 37 inserted, 1 deleted

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