Skip to content

Commit

Permalink
#74 (style) - Adjust SpeakerCard
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinlopez @fcamblor
robinlopez authored and fcamblor committed Aug 27, 2024
1 parent 38e32ba commit eb2d5a9
Show file tree
Hide file tree
Showing 10 changed files with 344 additions and 511 deletions.
325 changes: 120 additions & 205 deletions mobile/src/components/speaker-card/SpeakerCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<!-- TODO Dev Card Speaker List -->
<ion-card class="speakerCard"
:class="{ '_is-highlighted': true, '_has-liked': true}">
<ion-card class="speakerCard">
<div class="speakerCard-head">
<div class="avatarContainer">
<ion-thumbnail class="avatar _large">
Expand All @@ -21,14 +20,15 @@
<div class="speakerCard-content">
<ion-list class="talkResumeList">
<SpeakerResumeTalk></SpeakerResumeTalk>
<SpeakerResumeTalk></SpeakerResumeTalk>
</ion-list>
</div>
<div class="speakerCard-footer">
<div class="speakerActions">
<ion-button class="btnActionCard" :aria-label="LL.View_Profil_Speaker()">
<ion-icon aria-hidden="true" src="/assets/icons/solid/info-circle.svg"></ion-icon>
</ion-button>
<SpeakerLikeButton></SpeakerLikeButton>
<div class="bulletTagList" role="list">
<div class="bulletTag" role="listitem">
<span class="bulletTag-nb">2</span>Conf.
</div>
<div class="bulletTag" role="listitem">
<span class="bulletTag-nb">1</span>TiA.
</div>
</div>
</div>
</ion-card>
Expand All @@ -46,6 +46,7 @@
import {businessSharp} from "ionicons/icons";
import SpeakerLikeButton from "@/components/speaker-card/SpeakerLikeButton.vue";
import SpeakerResumeTalk from "@/components/speaker-card/SpeakerResumeTalk.vue";
import SpeakerInfoButton from "@/components/speaker-card/SpeakerInfoButton.vue";
const { LL } = typesafeI18n()
Expand All @@ -57,244 +58,158 @@

<style lang="scss">
.speakerCard {
display: flex;
flex-direction: column;
flex: 1;
margin: 8px;
border-radius: var(--app-card-radius);
border: {
top: 1px solid var(--app-grey-line);
right: 1px solid var(--app-grey-line);
}
box-shadow: var(--app-shadow-default);
transition: 80ms ease-in-out;
@media (prefers-color-scheme: dark) {
background: var(--app-light-contrast);
border : {
top: 1px solid var(--app-line-contrast);
right: 1px solid var(--app-line-contrast);
}
}
//* States card talk *//
&:active {
transition: 80ms ease-in-out;
transform: scale(0.99);
box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}
&:before, &:after {
position: absolute;
content: '';
z-index: -1;
}
&._is-highlighted {
border : {
top: 2px solid var(--app-primary);
bottom: 2px solid var(--app-primary);
right: 2px solid var(--app-primary);
left: 2px solid var(--app-primary);
}
@media (prefers-color-scheme: dark) {
border : {
top: 2px solid var(--app-white) !important;
bottom: 2px solid var(--app-white) !important;
right: 2px solid var(--app-white) !important;
left: 2px solid var(--app-white) !important;
display: flex;
flex-direction: column;
flex: 1;
margin: var(--app-gutters-medium) var(--app-gutters-small);
border-radius: var(--app-card-radius);
border: {
top: 1px solid var(--app-grey-line);
right: 1px solid var(--app-grey-line);
}
}
ion-thumbnail {
background-color: var(--app-background);
border: 2px solid var(--app-primary);
box-shadow: var(--app-shadow-default);
transition: 80ms ease-in-out;
@media (prefers-color-scheme: dark) {
border: 2px solid var(--app-white) !important;
background: var(--app-light-contrast);
border : {
top: 1px solid var(--app-line-contrast);
right: 1px solid var(--app-line-contrast);
}
}
}
.speakerCard-footer {
border-width: 2px;
border-color: var(--app-primary);
border-bottom: none;
//* States card talk *//
&:active {
transition: 80ms ease-in-out;
transform: scale(0.99);
box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}
@media (prefers-color-scheme: dark) {
border-color: var(--app-white) !important;
}
&:before, &:after {
position: absolute;
content: '';
z-index: -1;
}
&._has-liked {
&._is-highlighted {
border : {
top: 2px solid var(--app-primary-shade);
bottom: 2px solid var(--app-primary-shade);
right: 2px solid var(--app-primary-shade);
top: 2px solid var(--app-primary);
bottom: 2px solid var(--app-primary);
right: 2px solid var(--app-primary);
left: 2px solid var(--app-primary);
}
@media (prefers-color-scheme: dark) {
--border : {
top: 2px solid var(--app-white);
bottom: 2px solid var(--app-white);
right: 2px solid var(--app-white);
border : {
top: 2px solid var(--app-white) !important;
bottom: 2px solid var(--app-white) !important;
right: 2px solid var(--app-white) !important;
left: 2px solid var(--app-white) !important;
}
}
.btnActionCard {
border-color: var(--app-primary-shade);
border-width: 2px;
ion-thumbnail {
background-color: var(--app-background);
border: 2px solid var(--app-primary);
@media (prefers-color-scheme: dark) {
border-color: var(--app-white);
border: 2px solid var(--app-white) !important;
}
}
&:before { background: rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6);}
&._has-liked {
border : {
top: 2px solid var(--app-primary-shade);
bottom: 2px solid var(--app-primary-shade);
right: 2px solid var(--app-primary-shade);
}
ion-thumbnail { border: 2px solid var(--app-primary-shade);}
@media (prefers-color-scheme: dark) {
--border : {
top: 2px solid var(--app-white);
bottom: 2px solid var(--app-white);
right: 2px solid var(--app-white);
}
}
.talkCard-footer {
border-color: var(--app-primary-shade);
}
}
}
.btnActionCard {
border-color: var(--app-primary-shade);
border-width: 2px;
&._has-liked {
&:before {
width: 40%;
height: 50%;
right: 0;
bottom: 0;
transform: scale(1);
background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 80%);
opacity: 1;
filter: blur(32px);
animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@media (prefers-color-scheme: dark) {
border-color: var(--app-white);
}
}
&:after {
width: 50%;
height: 100%;
right: 0;
bottom: 0;
background-image: url('/assets/images/png/texture-favorited.png');
background-repeat: no-repeat;
background-position: right;
background-size: cover;
transform: scale(1);
opacity: 1;
mix-blend-mode: overlay;
animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
&:before { background: rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6);}
@media (prefers-color-scheme: dark) {
mix-blend-mode: difference;
ion-thumbnail { border: 2px solid var(--app-primary-shade);}
}
}
}
&-head {
display: flex;
align-items: center;
gap: var(--app-gutters-medium);
padding: var(--app-gutters) var(--app-gutters) var(--app-gutters-small) var(--app-gutters);
}
&-content {
display: flex;
column-gap: var(--app-gutters);
justify-content: space-between;
padding: 0 var(--app-gutters) var(--app-gutters-small) var(--app-gutters);
.talkResumeList {
background: transparent;
width: 100%;
}
.talkResumeCard {
--padding-start: 0;
--inner-padding-top: var(--app-gutters-medium);
--inner-padding-bottom: var(--app-gutters-medium);
--background: transparent;
padding: 0;
&:last-child {
--border-style: none;
--inner-padding-bottom: 0;
&._has-liked {
&:before {
width: 40%;
height: 50%;
right: 0;
bottom: 0;
transform: scale(1);
background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 80%);
opacity: 1;
filter: blur(32px);
animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
&-line {
&:after {
width: 50%;
height: 100%;
min-width: 2px;
margin-right: var(--app-gutters-medium);
border-radius: 4px;
background: var(--app-primary);
right: 0;
bottom: 0;
background-image: url('/assets/images/png/texture-favorited.png');
background-repeat: no-repeat;
background-position: right;
background-size: cover;
transform: scale(1);
opacity: 1;
mix-blend-mode: overlay;
animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@media (prefers-color-scheme: dark) {
background: var(--app-white-90);
}
}
&-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--app-gutters-medium);
&-description {
width: 100%;
font-size: 14px;
line-height: 1.2;
color: var(--app-primary);
@media (prefers-color-scheme: dark) {
color: var(--app-white);
}
mix-blend-mode: difference;
}
}
}
&-footer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.avatarContainer {
gap: var(--app-gutters);
}
.avatarInfos {
justify-content: end;
}
&-head {
display: flex;
align-items: center;
gap: var(--app-gutters-medium);
padding: var(--app-gutters-medium) var(--app-gutters-medium) var(--app-gutters-medium) 72px;
.avatar {
position: absolute;
left: -18px;
top: -8px;
--size: 74px;
}
}
}
&-footer {
display: flex;
column-gap: 16px;
justify-content: end;
border-radius: 0 0 12px 0;
border : {
top: 1px solid var(--app-grey-line);
bottom: 1px solid var(--app-grey-line);
}
background-color: rgba(white, 0.6);
&-content {
display: flex;
flex-direction: column;
gap: var(--app-gutters);
justify-content: space-between;
padding-bottom: var(--app-gutters-medium);
@media (prefers-color-scheme: dark) {
background-color: rgba(white, 0.05);
border : {
top: 1px solid var(--app-line-contrast);
bottom: 1px solid var(--app-line-contrast);
.talkResumeList {
background: transparent;
width: 100%;
overflow: visible;
}
}
.speakerActions {
display: flex;
flex-direction: row;
.bulletTagList {
padding-left: 54px;
}
}
}
}
</style>
Loading

0 comments on commit eb2d5a9

Please sign in to comment.