paddings
This commit is contained in:
parent
1bc8d09df6
commit
65edb5d6c9
2 changed files with 22 additions and 13 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue