mirror/mobilizon
1
0
Fork 0
mirror of https://framagit.org/framasoft/mobilizon.git synced 2024-12-21 15:32:32 +00:00
Code Issues Releases Wiki Activity

Improve components

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

61
js/src/components/Event/EventCard.vue
View file

@ -39,34 +39,36 @@
/>
</div>
<div class="media-content">
<p class="event-title" :title="event.title">{{ event.title }}</p>
<div class="event-organizer">
<figure
class="image is-24x24"
v-if="organizer(event) && organizer(event).avatar"
<h3 class="event-title" :title="event.title">{{ event.title }}</h3>
<div class="content-end">
<div class="event-organizer">
<figure
class="image is-24x24"
v-if="organizer(event) && organizer(event).avatar"
>
<img
class="is-rounded"
:src="organizer(event).avatar.url"
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<inline-address
v-if="event.physicalAddress"
class="event-subtitle"
:physical-address="event.physicalAddress"
/>
<div
class="event-subtitle"
v-else-if="event.options && event.options.isOnline"
>
<img
class="is-rounded"
:src="organizer(event).avatar.url"
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<inline-address
v-if="event.physicalAddress"
class="event-subtitle"
:physical-address="event.physicalAddress"
/>
<div
class="event-subtitle"
v-else-if="event.options && event.options.isOnline"
>
<b-icon icon="video" />
<span>{{ $t("Online") }}</span>
<b-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
</div>
</div>
</div>
@ -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;
}
}

4
js/src/components/Event/MultiCard.vue
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;

12
js/src/components/Group/GroupCard.vue
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;
}
}
}
}