added linked materials in modalCard

This commit is contained in:
2021-01-20 12:09:22 +01:00
parent a3dd424289
commit 37f199416f
14 changed files with 382 additions and 46 deletions

View File

@@ -1839,7 +1839,43 @@ article.card {
width: 423px;
height: 295px; }
article.card.minicard {
height: 100px; }
height: 100px;
width: 170px;
height: 100px;
margin: auto; }
article.card.minicard > header {
padding: 0.3em 0.3em 0.1em; }
article.card.minicard > header h1 {
margin: 0; }
article.card.minicard > nav.tools {
top: auto;
bottom: 0;
padding: 0 0.2em;
background: transparent; }
article.card.minicard > nav.tools .mdi.unflag {
cursor: pointer; }
article.card.linkedmaterialcard {
width: 200px;
height: 110px; }
article.card.linkedmaterialcard > header {
padding: 0.3em 0.3em 0.1em;
cursor: pointer; }
article.card.linkedmaterialcard > header h1 {
margin: 0;
font-size: 1em; }
article.card.linkedmaterialcard > header h4 {
margin: 0;
line-height: 1.1;
margin-bottom: -0.4em; }
article.card.linkedmaterialcard > header span.ref {
line-height: 0.5; }
article.card.linkedmaterialcard > nav.tools {
top: auto;
bottom: 0;
padding: 0 0.2em;
background: transparent; }
article.card.linkedmaterialcard > nav.tools .mdi.unflag {
cursor: pointer; }
article.card header {
position: absolute;
bottom: 0;
@@ -1860,7 +1896,8 @@ article.card {
article.card header h4 {
font-size: 0.882em;
font-weight: 300;
line-height: 1; }
line-height: 1.1;
margin-bottom: -0.2em; }
article.card header span.ref {
font-size: 0.693em;
font-weight: 300;
@@ -1952,24 +1989,22 @@ article.card {
flex-basis: 50%; }
article.card.modal-card section.col-right > *:not(nav.tools) {
position: relative;
padding: 0.5em;
padding: 0.5em 0.5em 0;
box-sizing: border-box;
width: 100%; }
article.card.modal-card section.col-right header {
article.card.modal-card section.col-right > header {
bottom: auto; }
article.card.modal-card section.col-right section.samples ul {
display: flex;
flex-flow: row wrap;
font-size: 0.882em;
font-weight: 300; }
article.card.modal-card section.col-right section.samples ul li {
padding-right: 0.5em; }
article.card.modal-card section.col-right section.samples ul li span.showroom {
font-weight: 500; }
article.card.modal-card section.col-right section.body p {
font-size: 0.882em;
font-weight: 300;
line-height: 1.35; }
line-height: 1.35;
margin: 0 0 0.5em; }
article.card.modal-card section.col-right section.linked-materials {
display: flex;
flex-flow: row;
justify-content: space-between; }
article.card.modal-card section.col-right section.linked-materials > article.linkedmaterialcard {
flex-basis: 0 0 50%; }
article.card.modal-card section.col-right nav.tools {
opacity: 1; }
article.card.modal-card section.col-right nav.tools section.close span.btn.mdi-close {

File diff suppressed because one or more lines are too long

View File

@@ -13,5 +13,8 @@ $card_height: 295px;
$minicard_width: 170px;
$minicard_height: 100px;
$linkedmaterialcard_width: 200px;
$linkedmaterialcard_height: 110px;
$modalcard_width: 850px;
$modalcard_height: 610px;

View File

@@ -947,6 +947,53 @@ article.card{
}
&.minicard{
height:100px;
width:$minicard_width;
height:$minicard_height;
margin:auto;
>header{
padding: 0.3em 0.3em 0.1em;
h1{
margin:0;
}
}
>nav.tools{
top: auto;
bottom: 0;
padding:0 0.2em;
background:transparent;
.mdi.unflag{
cursor: pointer;
}
}
}
&.linkedmaterialcard{
width:$linkedmaterialcard_width;
height:$linkedmaterialcard_height;
>header{
padding: 0.3em 0.3em 0.1em;
cursor: pointer;
h1{
margin:0;
font-size: 1em;
}
h4{
margin:0;
line-height: 1.1;
margin-bottom: -0.4em;
}
span.ref{
line-height: 0.5;
}
}
>nav.tools{
top: auto;
bottom: 0;
padding:0 0.2em;
background:transparent;
.mdi.unflag{
cursor: pointer;
}
}
}
// &.card-small{
// width:100px; height:140px;
@@ -976,8 +1023,8 @@ article.card{
h4{
font-size: 0.882em;
font-weight: 300;
line-height: 1;
// margin-bottom: 0.1em;
line-height: 1.1;
margin-bottom: -0.2em;
}
span.ref{
font-size: 0.693em;
@@ -1101,34 +1148,43 @@ article.card{
section.col-right{
>*:not(nav.tools){
position: relative;
padding: 0.5em;
padding: 0.5em 0.5em 0;
box-sizing: border-box;
width: 100%;
}
header{
>header{
bottom: auto;
}
section.samples{
ul{
display: flex;
flex-flow: row wrap;
font-size: 0.882em;
font-weight: 300;
// line-height: 1.35;
li{
padding-right: 0.5em;
span.showroom{ font-weight: 500; }
}
}
}
// section.samples{
// ul{
// display: flex;
// flex-flow: row wrap;
// font-size: 0.882em;
// font-weight: 300;
// // line-height: 1.35;
// li{
// padding-right: 0.5em;
// span.showroom{ font-weight: 500; }
// }
// }
// }
section.body{
p{
font-size: 0.882em;
font-weight: 300;
line-height: 1.35;
margin:0 0 0.5em;
}
}
section.linked-materials{
display: flex;
flex-flow: row;
justify-content: space-between;
>article.linkedmaterialcard{
flex-basis: 0 0 50%;
}
}
nav.tools{
opacity: 1;
section.close{