forked from verdnatura/hedera-web
refs #3971 Order confirm style fixes
This commit is contained in:
parent
59ed61ae9b
commit
be43a38b38
|
@ -1,4 +1,4 @@
|
|||
hedera-web (22.48.6) stable; urgency=low
|
||||
hedera-web (22.48.7) stable; urgency=low
|
||||
|
||||
* Initial Release.
|
||||
|
||||
|
|
|
@ -1,76 +1,77 @@
|
|||
|
||||
.basket .head {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
.basket .head p {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.4rem;
|
||||
text-align: right;
|
||||
}
|
||||
.basket .form > p {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
text-align: right;
|
||||
}
|
||||
.hedera-basket {
|
||||
.head {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
.head p {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.4rem;
|
||||
text-align: right;
|
||||
}
|
||||
.form > p {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Lines */
|
||||
/* Lines */
|
||||
|
||||
.basket .line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 10px 0;
|
||||
height: 80px;
|
||||
}
|
||||
.basket .line:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.basket .line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.basket .line > .delete {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
.basket .line > .photo {
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
gap: 0;
|
||||
}
|
||||
.basket .line > .info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.basket .line > .info > * {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.basket .line > .info > h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
.basket .line > .info > p {
|
||||
margin: 0;
|
||||
}
|
||||
.basket .line > .info > .tags {
|
||||
color: #777;
|
||||
}
|
||||
.basket .line .subtotal {
|
||||
float: right;
|
||||
}
|
||||
.line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 10px 0;
|
||||
height: 80px;
|
||||
}
|
||||
.line:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.line > .delete {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
.line > .photo {
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
gap: 0;
|
||||
}
|
||||
.line > .info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line > .info > * {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line > .info > h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
.line > .info > p {
|
||||
margin: 0;
|
||||
}
|
||||
.line > .info > .tags {
|
||||
color: #777;
|
||||
}
|
||||
.line .subtotal {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Fields */
|
||||
/* Fields */
|
||||
|
||||
.basket td.available-exceeded input {
|
||||
background-color: #FCC;
|
||||
td.available-exceeded input {
|
||||
background-color: #FCC;
|
||||
}
|
||||
.icon > img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.basket .icon > img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
tip="_Checkout"
|
||||
on-click="this.hash.setAll({form: 'ecomerce/confirm'})"/>
|
||||
</div>
|
||||
<div id="form" class="basket">
|
||||
<div id="form" class="hedera-basket">
|
||||
<div class="box vn-w-sm vn-pa-lg">
|
||||
<div class="head vn-pb-lg">
|
||||
<p>
|
||||
|
|
|
@ -1,54 +1,55 @@
|
|||
|
||||
.checkout .bar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hedera-checkout {
|
||||
.bar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Step */
|
||||
/* Step */
|
||||
|
||||
.answers button,
|
||||
.answers p,
|
||||
.radio > div {
|
||||
font-size: 1.2rem;
|
||||
.answers button,
|
||||
.answers p,
|
||||
.radio > div {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.answers .htk-select {
|
||||
max-width: 15em;
|
||||
margin: 0 auto;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.answers p {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
.target {
|
||||
max-width: 28em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.address {
|
||||
border-radius: 0.1em;
|
||||
padding: 0.6em 1.4em;
|
||||
}
|
||||
.address.selected {
|
||||
background-color: rgba(1, 1, 1, .1);
|
||||
}
|
||||
.address:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(1, 1, 1, .05);
|
||||
}
|
||||
.address p.consignee {
|
||||
font-weight: bold;
|
||||
}
|
||||
.radio {
|
||||
max-width: 20em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.radio > div {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.thin-calendar {
|
||||
max-width: 24em;
|
||||
margin: 0 auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
.htk-assistant .thin {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.answers .htk-select {
|
||||
max-width: 15em;
|
||||
margin: 0 auto;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.answers p {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
.target {
|
||||
max-width: 28em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.address {
|
||||
border-radius: 0.1em;
|
||||
padding: 0.6em 1.4em;
|
||||
}
|
||||
.address.selected {
|
||||
background-color: rgba(1, 1, 1, .1);
|
||||
}
|
||||
.address:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(1, 1, 1, .05);
|
||||
}
|
||||
.address p.consignee {
|
||||
font-weight: bold;
|
||||
}
|
||||
.radio {
|
||||
max-width: 20em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.radio > div {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.thin-calendar {
|
||||
max-width: 24em;
|
||||
margin: 0 auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
.htk-assistant .thin {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
tip="_Cancel"
|
||||
on-click="onCancelClick"/>
|
||||
</div>
|
||||
<div id="form" class="checkout">
|
||||
<div id="form" class="hedera-checkout">
|
||||
<div class="vn-w-sm">
|
||||
<div class="box bar">
|
||||
<htk-assistant-bar
|
||||
|
|
|
@ -1,93 +1,95 @@
|
|||
|
||||
.confirm .summary {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.confirm p {
|
||||
margin: .2em 0;
|
||||
}
|
||||
.hedera-confirm {
|
||||
.summary {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
margin: .2em 0;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
/* Table */
|
||||
|
||||
.confirm .debt-info {
|
||||
padding: 0;
|
||||
}
|
||||
.confirm .debt-info > table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.confirm td {
|
||||
padding: .15em 0;
|
||||
}
|
||||
.confirm .sum-total > td {
|
||||
border-top: solid 1px #DDD;
|
||||
font-weight: bold;
|
||||
}
|
||||
.confirm .currency {
|
||||
text-align: right;
|
||||
}
|
||||
.confirm .credit-info {
|
||||
display: none;
|
||||
}
|
||||
.confirm .exceeded-info {
|
||||
display: none;
|
||||
color: #E53935;
|
||||
}
|
||||
.debt-info {
|
||||
padding: 0;
|
||||
}
|
||||
.debt-info > table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
padding: .15em 0;
|
||||
}
|
||||
.sum-total > td {
|
||||
border-top: solid 1px #DDD;
|
||||
font-weight: bold;
|
||||
}
|
||||
.currency {
|
||||
text-align: right;
|
||||
}
|
||||
.credit-info {
|
||||
display: none;
|
||||
}
|
||||
.exceeded-info {
|
||||
display: none;
|
||||
color: #E53935;
|
||||
}
|
||||
|
||||
/* Pay */
|
||||
/* Pay */
|
||||
|
||||
.confirm .amount-selector,
|
||||
.confirm .pay-methods > div {
|
||||
display: none;
|
||||
}
|
||||
.confirm .pay-methods > div {
|
||||
margin: .3em 0;
|
||||
}
|
||||
.confirm .pay-methods > div > label > input[type=radio] {
|
||||
margin: 0;
|
||||
margin-right: .5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.confirm .pay-methods > div > div {
|
||||
padding: .5em 1.5em;
|
||||
display: none;
|
||||
}
|
||||
.confirm .pay-methods > div.selected > div {
|
||||
display: block;
|
||||
}
|
||||
.confirm .transfer-account {
|
||||
margin-top: .5em;
|
||||
}
|
||||
.confirm .transfer-account > p {
|
||||
margin: .1em 0;
|
||||
}
|
||||
.amount-selector,
|
||||
.pay-methods > div {
|
||||
display: none;
|
||||
}
|
||||
.pay-methods > div {
|
||||
margin: .3em 0;
|
||||
}
|
||||
.pay-methods > div > label > input[type=radio] {
|
||||
margin: 0;
|
||||
margin-right: .5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pay-methods > div > div {
|
||||
padding: .5em 1.5em;
|
||||
display: none;
|
||||
}
|
||||
.pay-methods > div.selected > div {
|
||||
display: block;
|
||||
}
|
||||
.transfer-account {
|
||||
margin-top: .5em;
|
||||
}
|
||||
.transfer-account > p {
|
||||
margin: .1em 0;
|
||||
}
|
||||
|
||||
.confirm .payment > div {
|
||||
margin-bottom: 1.4em;
|
||||
.payment > div {
|
||||
margin-bottom: 1.4em;
|
||||
}
|
||||
.payment > .button-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.payment > .button-bar button{
|
||||
font-size: 1.2rem;
|
||||
border-radius: 2rem;
|
||||
padding: .5rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.modify-order {
|
||||
border: 1px solid #1a1a1a;
|
||||
}
|
||||
.modify-order:hover {
|
||||
color: white;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
.confirm-order {
|
||||
border: 1px solid #8cc63f;
|
||||
background-color: #8cc63f;
|
||||
color: white;
|
||||
}
|
||||
.confirm-order:hover {
|
||||
background-color: transparent;
|
||||
color: #6b5;
|
||||
}
|
||||
}
|
||||
.confirm .payment > .button-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.confirm .payment > .button-bar button{
|
||||
font-size: 1.2rem;
|
||||
border-radius: 2rem;
|
||||
padding: .5rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.confirm .modify-order {
|
||||
border: 1px solid #1a1a1a;
|
||||
}
|
||||
.confirm .modify-order:hover {
|
||||
color: white;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
.confirm .confirm-order {
|
||||
border: 1px solid #8cc63f;
|
||||
background-color: #8cc63f;
|
||||
color: white;
|
||||
}
|
||||
.confirm .confirm-order:hover {
|
||||
background-color: transparent;
|
||||
color: #6b5;
|
||||
}
|
|
@ -27,7 +27,7 @@
|
|||
<div id="title">
|
||||
<h1><t>Order summary</t></h1>
|
||||
</div>
|
||||
<div id="form" class="confirm">
|
||||
<div id="form" class="hedera-confirm">
|
||||
<div class="vn-w-sm">
|
||||
<div class="box vn-pa-lg summary">
|
||||
<div>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div id="title">
|
||||
<h1><t>Invoices</t></h1>
|
||||
</div>
|
||||
<div id="form" class="invoices">
|
||||
<div id="form" class="hedera-invoices">
|
||||
<htk-grid
|
||||
class="box vn-w-sm"
|
||||
show-header="false">
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
tip="_ShoppingBasket"
|
||||
on-click="onBasketClick"/>
|
||||
</div>
|
||||
<div id="form" class="orders">
|
||||
<div id="form" class="hedera-orders">
|
||||
<htk-repeater
|
||||
class="htk-list box confirmed vn-w-sm"
|
||||
form-id="iter"
|
||||
|
|
|
@ -1,78 +1,79 @@
|
|||
|
||||
/* Header */
|
||||
.hedera-ticket {
|
||||
/* Header */
|
||||
|
||||
.ticket .head {
|
||||
padding: 0;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.ticket .head > div > div {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.ticket .head > div > div:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
.ticket .head p {
|
||||
margin: 3px 0;
|
||||
}
|
||||
.ticket .head p.important {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ticket .total {
|
||||
text-align: right;
|
||||
}
|
||||
.ticket .packages {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #DDD;
|
||||
display: block;
|
||||
}
|
||||
.head {
|
||||
padding: 0;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.head > div > div {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.head > div > div:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
.head p {
|
||||
margin: 3px 0;
|
||||
}
|
||||
.head p.important {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total {
|
||||
text-align: right;
|
||||
}
|
||||
.packages {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #DDD;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Lines */
|
||||
/* Lines */
|
||||
|
||||
.ticket .line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 10px 0;
|
||||
height: 80px;
|
||||
.line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 10px 0;
|
||||
height: 80px;
|
||||
}
|
||||
.line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.line > .photo {
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
gap: 0;
|
||||
}
|
||||
.line > .info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line > .info > * {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line > .info > h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.line > .info > p {
|
||||
margin: 0;
|
||||
}
|
||||
.line > .info > .tags {
|
||||
color: #777;
|
||||
}
|
||||
.line > .info .discount {
|
||||
color: green;
|
||||
}
|
||||
.line > .info > .subtotal {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.ticket .line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ticket .line > .photo {
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
gap: 0;
|
||||
}
|
||||
.ticket .line > .info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ticket .line > .info > * {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ticket .line > .info > h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.ticket .line > .info > p {
|
||||
margin: 0;
|
||||
}
|
||||
.ticket .line > .info > .tags {
|
||||
color: #777;
|
||||
}
|
||||
.ticket .line > .info .discount {
|
||||
color: green;
|
||||
}
|
||||
.ticket .line > .info > .subtotal {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
tip="_Print delivery note"
|
||||
on-click="this.onPrintClick()"/>
|
||||
</div>
|
||||
<div id="form" class="ticket">
|
||||
<div id="form" class="hedera-ticket">
|
||||
<div class="box vn-w-sm vn-pa-lg">
|
||||
<htk-loader class="head" form="ticket-form">
|
||||
<h5>#{{ticket.id}}</h5>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hedera-web",
|
||||
"version": "22.48.6",
|
||||
"version": "22.48.7",
|
||||
"description": "Verdnatura web page",
|
||||
"license": "GPL-3.0",
|
||||
"repository": {
|
||||
|
|
Loading…
Reference in New Issue