This commit is contained in:
merijn van moll 2020-01-22 17:31:58 +01:00
parent 1bc8d09df6
commit 65edb5d6c9
2 changed files with 22 additions and 13 deletions

View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<!-- VUE kijken hoe dat werkt bv for loop -->
<div id="wrapper"> <div id="wrapper">
<div class='hit' v-for="(hit, hitId) in hits" <div class='hit' v-for="(hit, hitId) in hits"
@ -40,12 +40,12 @@
<p>$ {{formatPrice(hit.fee*.2)}}</p> <p>$ {{formatPrice(hit.fee*.2)}}</p>
</div> </div>
</div> </div>
<!-- TASK FEE en FEE voor amazon (task fee * .2) -->
</div> </div>
<div class='transition' v-if="hit.hit_id"> <div class='transition' v-if="hit.hit_id" :class="[{'no_arrow': !hit.assignment}]">
<p v-if="!hit.assignment">waiting for worker</p> <p v-if="!hit.assignment">waiting for worker</p>
<template v-else> <template v-else>
<p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">task abandoned</p> <p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">task abandoned</p>
@ -81,9 +81,9 @@
<div class='state' v-if="hit.assignment.submit_page_at"> <div class='state' v-if="hit.assignment.submit_page_at">
<h2>worker input</h2> <h2>worker input</h2>
<div class="svgcrop" style="height: 110px; overflow: hidden"> <div class="svgcrop" style="height: 110px; overflow: hidden">
<img :src="hit.svg_image" style="margin-top: -60px"> <img :src="hit.svg_image" style="margin-top: 0px">
</div> </div>
<div class='columns'> <div class='columns'>
<div class='column'> <div class='column'>
<p class="descriptor">duration</p> <p class="descriptor">duration</p>

View file

@ -78,14 +78,21 @@ html, body{
/* text-align: center; */ /* text-align: center; */
animation-duration: 3s; animation-duration: 3s;
animation-name: slidein; animation-name: slidein;
margin: 20px 0px; margin: 10px 0px;
} }
.transition p{ .transition p{
margin:2px; /* height: 100%; */
margin: 12px 2px 2px 2px;
} }
.transition::before{ .transition.no_arrow{
padding: 0;
text-align: center;
}
.transition:not(.no_arrow)::before{
content:'⇩'; /*'⇓';*/ content:'⇩'; /*'⇓';*/
display:block; display:block;
position:absolute; position:absolute;
@ -107,7 +114,7 @@ html, body{
/* max-height: 200px; */ /* max-height: 200px; */
margin: 2px; margin: 2px;
border:solid 2px black; border:solid 2px black;
padding: 4px; padding: 12px;
} }
.state h2{ .state h2{
@ -131,7 +138,7 @@ html, body{
.state .descriptor{ .state .descriptor{
font-family: 'freesans'; font-family: 'freesans';
font-size: var(--base-font-size); font-size: var(--base-font-size);
margin-top: var(--base-font-size); margin-top: calc(var(--base-font-size)/2);
} }
.state.assignment-hidden { .state.assignment-hidden {
@ -197,13 +204,15 @@ html, body{
.columns{ .columns{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.columns .column{ .columns .column{
flex-grow: 1; flex-grow: 1;
width: 50%;
} }
.scan img{ .scan img{
vertical-align:bottom; vertical-align:bottom;
} }