Justin DiRose
ab9b81471b
Suggested here: https://meta.discourse.org/t/subscriptions-suggestions-for-interface-improvements/177970 Changes order and alignment so it makes a bit more sense in the UX of the /s route. Otherwise it looks too cluttered. This specifically impacted products that can be repurchased.
71 lines
1.2 KiB
SCSS
71 lines
1.2 KiB
SCSS
.discourse-subscriptions-section-columns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
margin: 20px;
|
|
padding: 20px;
|
|
|
|
@include breakpoint(medium) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-column {
|
|
min-width: calc(50% - 0.5em);
|
|
max-width: 100%;
|
|
|
|
&:last-child {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
min-width: 100%;
|
|
|
|
&:last-child {
|
|
order: 2;
|
|
}
|
|
|
|
&:first-child {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-list {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
|
|
.product {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
border: 1px solid $primary-low;
|
|
padding: 1.5rem;
|
|
margin: 1rem;
|
|
width: calc(50% - 240px);
|
|
|
|
.product-description {
|
|
flex-grow: 1;
|
|
}
|
|
.product-purchase {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
.purchased {
|
|
color: $success;
|
|
}
|
|
.billing-link {
|
|
align-self: flex-end;
|
|
@include breakpoint(large) {
|
|
margin-top: 1em;
|
|
}
|
|
font-size: $font-down-1;
|
|
}
|
|
}
|
|
}
|
|
}
|