mirror/mobilizon
1
0
Fork 0
mirror of https://framagit.org/framasoft/mobilizon.git synced 2024-12-22 07:52:43 +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

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

@ -39,7 +39,8 @@
/> />
</div> </div>
<div class="media-content"> <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"> <div class="event-organizer">
<figure <figure
class="image is-24x24" class="image is-24x24"
@ -71,6 +72,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</router-link> </router-link>
</template> </template>
@ -201,12 +203,14 @@ a.card {
} }
.card-content { .card-content {
height: 100%;
padding: 0.5rem; padding: 0.5rem;
& > .media { & > .media {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
& > .media-left { & > .media-left {
margin-top: -15px; margin-top: -15px;
@ -222,6 +226,9 @@ a.card {
flex: 1; flex: 1;
width: 100%; width: 100%;
overflow-x: inherit; 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 { .multi-card-event {
display: grid; display: grid;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-column-gap: 30px; grid-column-gap: 20px;
grid-row-gap: 30px; grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.event-card { .event-card {
height: 100%; height: 100%;
display: flex; display: flex;

12
js/src/components/Group/GroupCard.vue
View file

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