interface typography
This commit is contained in:
merijn van moll
parent
b2626244a4
commit
81c2c5ec80
4 changed files with 125 additions and 44 deletions
BIN
www/worker_specs/fake_scan.jpg
Normal file
BIN
www/worker_specs/fake_scan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
|
|
@ -9,26 +9,32 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<!-- VUE kijken hoe dat werkt bv for loop -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class='hit' v-for="(hit, hitId) in hits"
|
||||
:class="[{'hugvey--on': hit.status != 'off'},'hugvey--' + hit.status]"
|
||||
>
|
||||
|
||||
<div class='transition'>
|
||||
<p v-if="hit.hit_id">Created HIT at {{hit.created_at}}</p>
|
||||
<p v-else>Creating HIT</p>
|
||||
<p>Created HIT based on analog drawing</p>
|
||||
<!-- <p>Created HIT at {{hit.created_at}}</p> -->
|
||||
<p v-else>Creating HIT based on analog drawing..</p>
|
||||
<!-- <p>⇩</p> -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class='state' v-if="hit.hit_id">
|
||||
<h2>Human intelligence task</h2>
|
||||
<h2>human intelligence task</h2>
|
||||
<p class="descriptor">task id</p>
|
||||
<p>{{hit.hit_id}}</p>
|
||||
<p>Description</p>
|
||||
<p class="descriptor">task description</p>
|
||||
<p>Use the mouse to draw a copy of the image above</p>
|
||||
</div>
|
||||
|
||||
<div class='transition' v-if="hit.hit_id">
|
||||
<p v-if="!hit.assignment">Wait for human</p>
|
||||
<p v-if="!hit.assignment">waiting for guest worker to accept HIT..</p>
|
||||
<template v-else>
|
||||
<p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">Asignment abandoned</p>
|
||||
<p v-else>Assignment accepted</p>
|
||||
|
|
@ -40,8 +46,15 @@
|
|||
|
||||
<div class='state' v-if="hit.assignment"
|
||||
:class="[{'assignment-hidden': hit.assignment.returned_at || hit.assignment.abandoned_at}]">
|
||||
<h2>Worker {{hit.assignment.worker_id}}</h2>
|
||||
<p>{{hit.assignment.turk_browser}} / {{hit.assignment.turk_ip}} / {{hit.assignment.turk_country}} / {{hit.assignment.turk_os}}</p>
|
||||
|
||||
<h2>guest worker</h2>
|
||||
<p class="descriptor">worker id</p>
|
||||
<p>test{{hit.assignment.worker_id}}</p>
|
||||
<p class="descriptor">visiting from</p>
|
||||
<!-- {{hit.assignment.turk_browser}} / / {{hit.assignment.turk_os}}-->
|
||||
|
||||
<p>{{hit.assignment.turk_country}} ({{hit.assignment.turk_ip}}) </p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -51,19 +64,27 @@
|
|||
</div>
|
||||
|
||||
<div class='state' v-if="hit.assignment.submit_page_at">
|
||||
result: (add duration)
|
||||
<h2>digital drawing</h2>
|
||||
<div class="statebox">
|
||||
<img :src="hit.svg_image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class='transition' v-if="hit.assignment.submit_page_at">
|
||||
<p v-if="!hit.scanned_at">Scanning</p>
|
||||
<p v-else>Scanned at {{hit.scanned_at}}</p>
|
||||
<p v-if="!hit.scanned_at">Scanning..</p>
|
||||
<p v-else>Scan completed</p>
|
||||
<!-- at {{hit.scanned_at}} -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class='state' v-if="hit.scanned_at">
|
||||
scan:
|
||||
<img :src="hit.scan_image">
|
||||
<h2>analog drawing</h2>
|
||||
<!-- <div class="statebox"> -->
|
||||
<img src="fake_scan.jpg">
|
||||
<!-- <img :src="hit.scan_image"> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@
|
|||
:root{
|
||||
|
||||
--base-font-size: 17px;
|
||||
--spec_name-font-size: 120%;
|
||||
--spec_value-font-size: 250%;
|
||||
--big-font-size: calc(var(--base-font-size)*1.5);
|
||||
--bigger-font-size: calc(var(--big-font-size)*1.5);
|
||||
/* --spec_name-font-size: 120%;
|
||||
--spec_value-font-size: 250%; */
|
||||
|
||||
--base-color: #271601; /* tekst */
|
||||
--alt-color: #FFF5DF; /* achtergrond */
|
||||
|
|
@ -63,33 +65,73 @@ html, body{
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.transition{
|
||||
overflow:hidden;
|
||||
display: block;
|
||||
position:relative;
|
||||
padding-left: calc(50%);
|
||||
font-size: 12px;
|
||||
padding-left: calc(50% + 20px);
|
||||
|
||||
font-size: var(--base-font-size);
|
||||
height: 40px;
|
||||
/* text-align: center; */
|
||||
animation-duration: 3s;
|
||||
animation-name: slidein;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.transition p{
|
||||
margin:2px;
|
||||
}
|
||||
|
||||
.transition::before{
|
||||
content:'⇩'; /*'⇓';*/
|
||||
display:block;
|
||||
position:absolute;
|
||||
font-family:monospace;
|
||||
font-size: 100px;
|
||||
top:0;
|
||||
font-family:'monospace';
|
||||
font-size: 80px;
|
||||
top:10px;
|
||||
left:calc(50% - 30px);
|
||||
line-height:0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.state{
|
||||
overflow:hidden;
|
||||
border:solid 1px black;
|
||||
animation-duration: 3s;
|
||||
animation-name: slidein;
|
||||
transition: max-height 1s;
|
||||
max-height: 200px;
|
||||
/* max-height: 200px; */
|
||||
margin: 2px;
|
||||
border:solid 2px black;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.state h2{
|
||||
font-family: 'bebas';
|
||||
font-size: var(--bigger-font-size);
|
||||
margin: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
.state p{
|
||||
margin: 0;
|
||||
font-family: 'bebas';
|
||||
font-size: var(--big-font-size);
|
||||
}
|
||||
|
||||
.state img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.state .descriptor{
|
||||
font-family: 'freesans';
|
||||
font-size: var(--base-font-size);
|
||||
margin-top: var(--base-font-size);
|
||||
}
|
||||
|
||||
.state.assignment-hidden {
|
||||
|
|
@ -97,13 +139,15 @@ html, body{
|
|||
max-height: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
max-height:0;
|
||||
}
|
||||
|
||||
to {
|
||||
max-height: 200px;
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
16
www/worker_specs/todo
Normal file
16
www/worker_specs/todo
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
server starten volgens readme
|
||||
|
||||
http://localhost:8888/draw?id=3&assignmentId=test
|
||||
|
||||
# id= moet overeenkomen met hit id in console
|
||||
|
||||
http://localhost:8888/worker_specs/index.html
|
||||
|
||||
|
||||
|
||||
TODO
|
||||
|
||||
worker_specs
|
||||
misschien svg croppen ivm veel lege ruimte
|
||||
misschien tussen digital drawing en analog drawing nog een stap? digital > glas > analog
|
||||
Loading…
Reference in a new issue