Various improvements to MyEvents & event cards

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-11 18:31:24 +02:00
parent 49df536b38
commit b53867181f
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
4 changed files with 274 additions and 230 deletions

View file

@ -13,7 +13,8 @@
:small="true"
/>
</div>
<div class="content">
<div class="content-and-actions">
<div class="list-card-content">
<div class="title-wrapper">
<router-link
:to="{
@ -215,6 +216,7 @@
</b-dropdown>
</div>
</div>
</div>
</article>
</template>
@ -351,17 +353,40 @@ article.box {
.list-card {
display: flex;
align-items: center;
padding: 0 6px;
position: relative;
flex-direction: column;
div.date-component {
align-self: flex-start;
padding: 5px;
position: absolute;
top: 0;
left: 0;
margin-top: 1px;
height: 0;
display: flex;
align-items: flex-end;
margin-bottom: 15px;
margin-left: 0rem;
}
.content-and-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-bottom: 1rem;
.actions {
padding-right: 7.5px;
cursor: pointer;
}
div.content {
div.list-card-content {
flex: 1;
padding: 5px;
min-width: 350px;
.participation-actor span,
.participant-stats span {
@ -376,35 +401,34 @@ article.box {
div.title-wrapper {
display: flex;
align-items: center;
div.date-component {
flex: 0;
margin-right: 16px;
}
padding-top: 5px;
a {
text-decoration: none;
padding-bottom: 5px;
}
.title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 400;
line-height: 1em;
font-size: 1.6em;
font-size: 1.4em;
padding-bottom: 5px;
margin: auto 0;
}
}
}
}
}
.identity-header {
background: $yellow-2;
display: flex;
padding: 5px;
padding-left: calc(48px + 15px);
figure {
padding-right: 3px;

View file

@ -97,6 +97,10 @@ export default class GroupMemberCard extends Vue {
& > div:last-child {
cursor: pointer;
}
.media-content {
overflow: hidden;
}
}
.identity-header {

View file

@ -67,7 +67,7 @@
</subtitle>
<transition-group name="list" tag="p">
<div v-for="month in monthlyPastParticipations" :key="month[0]">
<span>{{ month[0] }}</span>
<span class="past-month">{{ month[0] }}</span>
<EventListCard
v-for="participation in month[1]"
:key="participation.id"
@ -304,8 +304,24 @@ main > .container {
}
section {
.upcoming-month {
.upcoming-month,
.past-month {
text-transform: capitalize;
display: inline-block;
position: relative;
font-size: 1.3rem;
&::after {
background: $orange-3;
position: absolute;
left: 0;
right: 0;
top: 100%;
content: "";
width: calc(100% + 30px);
height: 3px;
max-width: 150px;
}
}
}

View file

@ -608,7 +608,7 @@ export default class Home extends Vue {
main > div > .container {
background: $white;
padding: 1rem 1.5rem 3rem;
padding: 1rem 0.5rem 3rem;
}
.search-autocomplete {