frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🗾 Beuatifying card view for import results

Browse Source
This commit is contained in:
Rishi Ghan
2021-06-03 14:51:49 -07:00
parent 20808b585c
commit db94ab29eb
7 changed files with 16443 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16361
src/client/assets/scss/App.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/client/assets/scss/App.css.map Normal file
View File

File diff suppressed because one or more lines are too long

64
src/client/assets/scss/App.scss
View File

@@ -24,22 +24,58 @@ $border-color: red;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 0.5em;
row-gap: 1.2em;
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// column-gap: 0.5em;
// row-gap: 1.2em;
// .card {
// max-width: 200px;
//
// .truncate {
// width: 100px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
//
// img {
// max-width: 200px;
// }
// }
.card {
max-width: 200px;
max-width: 500px;
margin: 0 0 15px 0;
.is-horizontal {
flex-direction: row;
display: flex;
flex-basis: 50ex;
flex-grow: 0;
flex-shrink: 1;
box-shadow: none;
.truncate {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
max-width: 200px;
.card-image {
align-self: center;
.image {
max-width: 60px;
img {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em;
}
}
}
.card-content {
flex: 1;
padding-left: 1em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.8em;
}
.is-divider {
margin-top: 1.5rem;
margin-bottom: 1rem;
}
}
}
}