kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

Introduce item-list CSS, move item colors to variables

Browse Source
This commit is contained in:
Basti
2020-07-09 22:41:11 +02:00
parent a96cca879d
commit fb267813fb
9 changed files with 47 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/contribution-list/template.hbs
+1 -1
View File
@@ -29,7 +29,7 @@
</div> </div>
{{/if}} {{/if}}
<ul class="contribution-list {{if @loading 'loading'}}"> <ul class="item-list contribution-list {{if @loading 'loading'}}">
{{#each this.contributionsFiltered as |contribution|}} {{#each this.contributionsFiltered as |contribution|}}
<li role="button" data-contribution-id={{contribution.id}} <li role="button" data-contribution-id={{contribution.id}}
{{action "openContributionDetails" contribution}} {{action "openContributionDetails" contribution}}
app/helpers/sats-to-btc.js
+2 -2
View File
@@ -1,5 +1,5 @@
import { helper } from '@ember/component/helper'; import { helper } from '@ember/component/helper';
export default helper(function satsToBtc(amount/*, hash*/) { export default helper(function satsToBtc(params/*, hash*/) {
return amount / 100000000; return params;
}); });
app/styles/_colors.scss
+4
View File
@@ -8,3 +8,7 @@ $red: #fb6868;
$primary-color: $blue; $primary-color: $blue;
$body-text-color: #fff; $body-text-color: #fff;
$item-background-color: rgba(255,255,255,0.1);
$item-highlighted-background-color: rgba(255,255,255,0.2);
$item-border-color: rgba(255,255,255,0.2);
app/styles/_item-list.scss
+27
View File
@@ -0,0 +1,27 @@
ul.item-list {
list-style: none;
li {
background-color: $item-background-color;
border-bottom: 1px solid $item-border-color;
font-size: 1.2rem;
&:first-of-type {
border-top: 1px solid $item-border-color;
}
&.selected {
background-color: $item-highlighted-background-color;
}
}
&.loading {
@include loading-border-top;
li {
&:first-of-type {
border-top: none;
}
}
}
}
app/styles/app.scss
+1
View File
@@ -89,6 +89,7 @@ section {
@import "buttons"; @import "buttons";
@import "forms"; @import "forms";
@import "sugar"; @import "sugar";
@import "item-list";
@import "components/contribution-list"; @import "components/contribution-list";
@import "components/contribution-details"; @import "components/contribution-details";
app/styles/components/_contribution-details.scss
+4 -4
View File
@@ -16,9 +16,9 @@ section#contribution-details {
margin: 0 0 1.5rem; margin: 0 0 1.5rem;
padding: 2rem 2rem; padding: 2rem 2rem;
border-top: 1px solid rgba(255,255,255,0.2); border-top: 1px solid $item-border-color;
border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid $item-border-color;
background-color: rgba(255,255,255,0.1); background-color: $item-background-color;
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
@@ -67,7 +67,7 @@ section#contribution-details {
overflow: auto; overflow: auto;
margin-top: 2rem; margin-top: 2rem;
padding-top: 2rem; padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.2); border-top: 1px solid $item-border-color;
font-size: 1.2rem; font-size: 1.2rem;
.icon { .icon {
app/styles/components/_contribution-list.scss
-21
View File
@@ -31,15 +31,8 @@ ul.contribution-list {
grid-template-columns: auto 5rem 5rem; grid-template-columns: auto 5rem 5rem;
grid-row-gap: 0.5rem; grid-row-gap: 0.5rem;
padding: 0.8rem 1.2rem; padding: 0.8rem 1.2rem;
background-color: rgba(255,255,255,0.1);
font-size: 1.2rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
cursor: pointer; cursor: pointer;
&:first-of-type {
border-top: 1px solid rgba(255,255,255,0.2);
}
&.confirmed { &.confirmed {
grid-template-columns: auto 5rem; grid-template-columns: auto 5rem;
} }
@@ -50,10 +43,6 @@ ul.contribution-list {
opacity: 0.6; opacity: 0.6;
} }
&.selected {
background-color: rgba(255,255,255,0.2);
}
p { p {
align-self: center; align-self: center;
margin: 0; margin: 0;
@@ -113,14 +102,4 @@ ul.contribution-list {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
&.loading {
@include loading-border-top;
li {
&:first-of-type {
border-top: none;
}
}
}
} }
app/styles/components/_contributor-list.scss
+4 -4
View File
@@ -5,16 +5,16 @@ table.contributor-list {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
tr { tr {
background-color: rgba(255,255,255,0.1); background-color: $item-background-color;
border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid $item-border-color;
cursor: pointer; cursor: pointer;
&:first-of-type { &:first-of-type {
border-top: 1px solid rgba(255,255,255,0.2); border-top: 1px solid $item-border-color;
} }
&.selected { &.selected {
background-color: rgba(255,255,255,0.2); background-color: $item-highlighted-background-color;
} }
&.current-user { &.current-user {
app/styles/components/_contributor-profile.scss
+4 -4
View File
@@ -8,7 +8,7 @@ section#contributor-profile {
img { img {
margin: 0 auto; margin: 0 auto;
border: 3px solid rgba(255,255,255,0.2); border: 3px solid $item-border-color;
} }
} }
@@ -18,9 +18,9 @@ section#contributor-profile {
margin: -7.2rem 0 1.5rem; margin: -7.2rem 0 1.5rem;
padding: 6rem 1.2rem 2rem; padding: 6rem 1.2rem 2rem;
border-top: 1px solid rgba(255,255,255,0.2); border-top: 1px solid $item-border-color;
border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid $item-border-color;
background-color: rgba(255,255,255,0.1); background-color: $item-background-color;
h2 { h2 {
text-align: center; text-align: center;