PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve card design

Browse source
This commit is contained in:
grandeljay 2022-04-10 18:19:59 +02:00
parent f36a93a0b4
commit b7bb658236
7 changed files with 81 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
semantic/dist/components/label.css vendored
View file

@ -417,7 +417,7 @@ a.ui.label {
} }
.ui[class*="right ribbon"].label:after { .ui[class*="right ribbon"].label:after {
left: auto; left: auto;
right: 0; right: -1px;
border-style: solid; border-style: solid;
border-width: 1.2em 1.2em 0 0; border-width: 1.2em 1.2em 0 0;
border-color: transparent; border-color: transparent;

2
semantic/dist/components/label.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
semantic/dist/semantic.css vendored
View file

@ -26796,7 +26796,7 @@ a.ui.label {
.ui[class*="right ribbon"].label:after { .ui[class*="right ribbon"].label:after {
left: auto; left: auto;
right: 0; right: -1px;
border-style: solid; border-style: solid;
border-width: 1.2em 1.2em 0 0; border-width: 1.2em 1.2em 0 0;
border-color: transparent; border-color: transparent;

2
semantic/dist/semantic.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
semantic/src/definitions/elements/label.less
View file

@ -455,7 +455,7 @@ a.ui.label {
} }
.ui[class*="right ribbon"].label:after { .ui[class*="right ribbon"].label:after {
left: auto; left: auto;
right: 0; right: -1px;
border-style: solid; border-style: solid;
border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0; border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0;

123
src/assets/css/default.css
View file

@ -40,84 +40,116 @@ img {
/** /**
* Card * Card
*/ */
.ui.fluid.card.stretch { .ui.card {
height: 100%; --padding: 0.91666667em;
} }
/** Overlay */ .ui.fluid.card.stretch {
@media (hover: hover) { height: 100%;
.ui.card:hover {
z-index: 102;
}
} }
/** Image */ /** Image */
.ui.card > .image > img.preview { .ui.card > .image > img.preview {
height: var(--wishPreviewHeight); height: var(--wishPreviewHeight);
object-fit: cover; object-fit: cover;
object-position: 50%; object-position: 50%;
background-color: #fff; background-color: #fff;
} }
@media (hover: hover) {
.ui.card > .image > img.preview {
transition: height 0.2s linear;
}
.ui.card:hover > .image > img.preview {
height: calc(1em + 3 * var(--padding));
}
}
/** Provider */
.ui.card > .image,
.ui.card > .image > span.provider {
border-radius: .33333333rem .33333333rem 0 0;
}
.ui.card > .image > img.favicon,
.ui.card > .image > span.provider {
position: absolute;
top: 0;
}
/** Favicon */ /** Favicon */
.ui.card > .image > img.favicon { .ui.card > .image > img.favicon {
position: absolute; padding: calc(var(--padding) * 1.5) var(--padding);
top: calc(0.91666667em * 1.25);
left: 1em;
height: 1.25em; height: 1.25em;
width: auto; width: auto;
z-index: 2; box-sizing: content-box;
z-index: 1;
} }
.ui.card > .image > img.favicon + span.provider { .ui.card > .image > img.favicon + span.provider {
padding-left: 3em; padding-left: 3em;
} }
@media (hover: hover) {
.ui.card > .image > img.favicon + span.provider {
z-index: 2;
}
}
/** Provider name */ /** Provider name */
.ui.card > .image > span.provider { .ui.card > .image > span.provider {
transition: 0.4s ease opacity; display: block;
width: 100%;
position: absolute; padding: calc(var(--padding) * 1.5) var(--padding);
top: 0;
right: 0;
left: 0;
padding: calc(0.91666667em * 1.5) 0.91666667em;
line-height: 1; line-height: 1;
user-select: none; user-select: none;
opacity: 0;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 4px rgba(200, 200, 200, 0.4);
backdrop-filter: blur(4px);
} }
.ui.card:hover > .image > span.provider { @supports (backdrop-filter: blur(4px)) {
opacity: 1; .ui.card > .image > span.provider {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
}
}
@media (hover: hover) {
.ui.card > .image > span.provider {
transition: background-color 0.2s ease;
position: absolute;
}
.ui.card:hover > .image > span.provider {
animation: positionDelay 0.8s linear;
display: block;
}
} }
/** Content */ /** Content */
.ui.card > .content > .header { .ui.card > .content:not(.extra) {
max-height: calc(2 * 1.28571429em); height: calc(0.75 * var(--wishPreviewHeight));
overflow: hidden;
} overflow: auto;
.ui.card > .content > .description {
max-height: calc(6em * var(--lineHeight));
overflow: hidden;
} }
@media (hover: hover) { @media (hover: hover) {
.ui.card > .content:not(.extra) { .ui.card > .content:not(.extra) {
margin-bottom: calc(3em * var(--lineHeight)); transition: height 0.2s linear;
overflow: hidden;
} }
.ui.card > .content > .description { .ui.card:hover > .content:not(.extra) {
position: absolute; height: calc(1.5 * var(--wishPreviewHeight));
left: 1em;
right: 1em; overflow: auto;
} }
} }
.ui.card > .content > .header {
max-height: calc(2 * 1.28571429em);
overflow: hidden;
}
.ui.card > .content > .description-fade { .ui.card > .content > .description-fade {
position: absolute; position: absolute;
right: 0; right: 0;
@ -131,8 +163,7 @@ img {
} }
/** Buttons */ /** Buttons */
.ui.card > .extra.buttons, .ui.card > .extra.buttons {
.ui.cards > .card > .extra.buttons {
transition: 0.4s ease opacity; transition: 0.4s ease opacity;
display: flex; display: flex;
@ -141,24 +172,20 @@ img {
z-index: 2; z-index: 2;
} }
@media (hover: hover) { @media (hover: hover) {
.ui.card > .extra.buttons, .ui.card > .extra.buttons {
.ui.cards > .card > .extra.buttons {
opacity: 0; opacity: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.ui.card:hover > .extra.buttons, .ui.card:hover > .extra.buttons {
.ui.cards > .card:hover > .extra.buttons {
opacity: 1; opacity: 1;
} }
} }
.ui.card > .extra.buttons > .button, .ui.card > .extra.buttons > .button {
.ui.cards > .card > .extra.buttons > .button {
flex: 1 1 auto; flex: 1 1 auto;
} }
.ui.card > .extra.buttons > :last-child, .ui.card > .extra.buttons > :last-child {
.ui.cards > .card > .extra.buttons > :last-child {
margin-right: 0; margin-right: 0;
} }

2
src/assets/js/wishlist.js
View file

@ -71,7 +71,7 @@ $(function() {
}, },
on : 'now', on : 'now',
onSuccess : function(response, element, xhr) { onSuccess : function(response, element, xhr) {
card.fadeOut(); card.closest('.column').fadeOut();
}, },
}); });
}); });