FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Simplify paddings in profile block

Browse source
This commit is contained in:
silverpill 2022-12-29 18:07:19 +00:00
parent fa7c267f26
commit 2d262009e1
1 changed files with 180 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/views/Profile.vue
View file

@ -8,6 +8,7 @@
<div class="profile-header"> <div class="profile-header">
<img v-if="profile.header" :src="profile.header"> <img v-if="profile.header" :src="profile.header">
</div> </div>
<div class="profile-info-group">
<div class="avatar-menu-group"> <div class="avatar-menu-group">
<div class="avatar-group"> <div class="avatar-group">
<avatar :profile="profile"></avatar> <avatar :profile="profile"></avatar>
@ -192,6 +193,7 @@
</component> </component>
</div> </div>
</div> </div>
</div>
<div class="tab-bar" v-if="profile"> <div class="tab-bar" v-if="profile">
<template v-if="tabName === 'posts' || tabName === 'posts-with-replies'"> <template v-if="tabName === 'posts' || tabName === 'posts-with-replies'">
<a <a
@ -615,11 +617,17 @@ $avatar-size: 170px;
} }
} }
.profile-info-group {
display: flex;
flex-direction: column;
gap: $block-inner-padding;
padding: $block-inner-padding;
}
.avatar-menu-group { .avatar-menu-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $block-inner-padding; gap: $block-inner-padding;
padding: $block-inner-padding;
.avatar-group { .avatar-group {
align-items: flex-start; align-items: flex-start;
@ -676,7 +684,6 @@ $avatar-size: 170px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: $block-inner-padding; gap: $block-inner-padding;
padding: 0 $block-inner-padding $block-inner-padding;
.name-group { .name-group {
flex-grow: 1; flex-grow: 1;
@ -724,7 +731,6 @@ $avatar-size: 170px;
} }
.bio { .bio {
padding: 0 $block-inner-padding $block-inner-padding;
white-space: pre-line; white-space: pre-line;
word-wrap: break-word; word-wrap: break-word;
@ -735,13 +741,12 @@ $avatar-size: 170px;
.extra-fields { .extra-fields {
border-bottom: 1px solid $separator-color; border-bottom: 1px solid $separator-color;
margin-bottom: $block-inner-padding;
.field { .field {
border-top: 1px solid $separator-color; border-top: 1px solid $separator-color;
display: flex; display: flex;
gap: calc($block-inner-padding / 2); gap: calc($block-inner-padding / 2);
padding: calc($block-inner-padding / 2) $block-inner-padding; padding: calc($block-inner-padding / 2) 0;
.name { .name {
font-weight: bold; font-weight: bold;
@ -777,7 +782,6 @@ $avatar-size: 170px;
flex-wrap: wrap; flex-wrap: wrap;
font-weight: bold; font-weight: bold;
gap: $block-inner-padding 30px; gap: $block-inner-padding 30px;
padding: 0 $block-inner-padding $block-inner-padding;
text-align: center; text-align: center;
.stats-item { .stats-item {