Improve components

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-11-06 14:37:02 +01:00
parent 1cc776622a
commit 9ac3da618d
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 44 additions and 33 deletions

View File

@ -39,7 +39,8 @@
/>
</div>
<div class="media-content">
<p class="event-title" :title="event.title">{{ event.title }}</p>
<h3 class="event-title" :title="event.title">{{ event.title }}</h3>
<div class="content-end">
<div class="event-organizer">
<figure
class="image is-24x24"
@ -71,6 +72,7 @@
</div>
</div>
</div>
</div>
</router-link>
</template>
@ -201,12 +203,14 @@ a.card {
}
.card-content {
height: 100%;
padding: 0.5rem;
& > .media {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
& > .media-left {
margin-top: -15px;
@ -222,6 +226,9 @@ a.card {
flex: 1;
width: 100%;
overflow-x: inherit;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

View File

@ -27,9 +27,9 @@ export default class MultiCard extends Vue {
.multi-card-event {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-column-gap: 20px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.event-card {
height: 100%;
display: flex;

View File

@ -15,7 +15,7 @@
</figure>
</div>
<div class="card-content">
<div class="media mb-3">
<div class="media mb-2">
<div class="media-left">
<figure class="image is-48x48" v-if="group.avatar">
<img class="is-rounded" :src="group.avatar.url" alt="" />
@ -24,12 +24,12 @@
</div>
<div class="media-content">
<h3 class="is-size-5 group-title">{{ displayName(group) }}</h3>
<span class="is-6 has-text-grey-dark">
<span class="is-6 has-text-grey-dark group-federated-username">
{{ `@${usernameWithDomain(group)}` }}
</span>
</div>
</div>
<div class="content" v-html="group.summary" />
<div class="content mb-2" v-html="group.summary" />
<div class="card-custom-footer">
<inline-address
class="has-text-grey-dark"
@ -37,6 +37,7 @@
:physicalAddress="group.physicalAddress"
/>
<p class="has-text-grey-dark">
<b-icon icon="account" />
{{
$tc(
"{count} members or followers",
@ -117,13 +118,16 @@ export default class GroupCard extends Vue {
text-overflow: ellipsis;
.group-title {
line-height: 1.75rem;
line-height: 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: bold;
}
.group-federated-username {
font-size: 14px;
}
}
}
}