vt3e.cat
wip bsky client for the web & android
bbell.vt3e.cat
feat(profile): ok google make it responsive thanks google (me)
+54
-33
+54
-33
src/views/Profile/ProfileView.vue
+54
-33
src/views/Profile/ProfileView.vue
···
17
17
import { useAuthStore } from '@/stores/auth'
18
18
import { usePostStore } from '@/stores/posts'
19
19
import { useToastStore } from '@/stores/toast'
20
+
import { useEnvironmentStore } from '@/stores/environment'
20
21
21
22
import BackButton from '@/components/Navigation/BackButton.vue'
22
23
import PageLayout from '@/components/Navigation/PageLayout.vue'
···
35
36
const auth = useAuthStore()
36
37
const postStore = usePostStore()
37
38
const toast = useToastStore()
39
+
const env = useEnvironmentStore()
38
40
39
41
const profile = ref<AppBskyActorDefs.ProfileViewDetailed | null>(null)
40
42
const feed = ref<AppBskyFeedDefs.FeedViewPost[]>([])
···
380
382
</div>
381
383
</template>
382
384
383
-
<div class="profile-container" v-if="profile">
385
+
<div :class="{ mobile: env.isMobile, 'profile-container': true }" v-if="profile">
384
386
<div class="banner">
385
387
<img
386
388
v-if="profile?.banner"
···
407
409
/>
408
410
</div>
409
411
<div class="identity-row">
410
-
<div class="identity-row__names">
412
+
<div class="identity-row__names" v-if="!env.isMobile">
411
413
<span class="header-name">{{ profile?.displayName || profile.handle }}</span>
412
414
<a v-if="handleLink" :href="handleLink" target="_blank" class="header-handle"
413
415
>@{{ formatUrl(profile.handle) }}</a
414
416
>
415
417
<span class="header-handle" v-else>@{{ profile?.handle }}</span>
416
418
</div>
419
+
<div v-else></div>
420
+
417
421
<div class="identity-row__actions">
418
422
<Button v-if="isSelf" variant="secondary" size="md" pill>Edit</Button>
419
423
<Button
···
473
477
</div>
474
478
</div>
475
479
<div class="profile">
480
+
<div class="identity-row__names mobile" v-if="env.isMobile">
481
+
<span class="header-name">{{ profile?.displayName || profile.handle }}</span>
482
+
<a v-if="handleLink" :href="handleLink" target="_blank" class="header-handle"
483
+
>@{{ formatUrl(profile.handle) }}</a
484
+
>
485
+
<span class="header-handle" v-else>@{{ profile?.handle }}</span>
486
+
</div>
487
+
476
488
<div class="stats">
477
489
<div class="stat alt" v-if="profile.pronouns">
478
490
<span class="stat-count">{{ profile.pronouns }}</span>
···
638
650
padding-bottom: 0;
639
651
display: flex;
640
652
flex-direction: row;
641
-
gap: 1rem;
653
+
gap: 0.75rem;
642
654
643
655
margin-top: calc((var(--avatar-size) / 2 + 0.75rem) * -1);
644
656
···
671
683
gap: 0.5rem;
672
684
min-width: 0;
673
685
674
-
&__names {
675
-
flex: 1 1 0%;
676
-
min-width: 0;
677
-
686
+
&__actions {
687
+
flex: 0 0 auto;
678
688
display: flex;
679
-
flex-direction: column;
689
+
gap: 0.25rem;
690
+
}
691
+
}
692
+
}
680
693
681
-
span {
682
-
display: block;
683
-
white-space: nowrap;
684
-
overflow: hidden;
685
-
text-overflow: ellipsis;
686
-
min-width: 0;
687
-
}
694
+
.identity-row__names {
695
+
flex: 1 1 0%;
696
+
min-width: 0;
697
+
698
+
display: flex;
699
+
flex-direction: column;
700
+
701
+
span {
702
+
display: block;
703
+
white-space: nowrap;
704
+
overflow: hidden;
705
+
text-overflow: ellipsis;
706
+
min-width: 0;
707
+
}
688
708
689
-
.header-name {
690
-
font-weight: 700;
691
-
font-size: 1.25rem;
692
-
}
693
-
.header-handle {
694
-
font-size: 0.9rem;
695
-
color: hsl(var(--subtext0));
696
-
text-decoration: none;
709
+
.header-name {
710
+
font-weight: 900;
711
+
font-size: 1.25rem;
712
+
}
713
+
.header-handle {
714
+
font-size: 0.9rem;
715
+
color: hsl(var(--subtext0));
716
+
text-decoration: none;
697
717
698
-
display: flex;
699
-
align-items: center;
700
-
gap: 0.25rem;
701
-
}
702
-
}
718
+
display: flex;
719
+
align-items: center;
720
+
gap: 0.25rem;
721
+
}
703
722
704
-
&__actions {
705
-
flex: 0 0 auto;
706
-
display: flex;
707
-
gap: 0.5rem;
708
-
}
723
+
&:not(.mobile) {
709
724
}
710
725
}
711
726
···
720
735
flex-direction: row;
721
736
gap: 0.25rem;
722
737
margin-top: 0.75rem;
738
+
overflow-x: auto;
739
+
border-radius: 1rem;
723
740
724
741
.stat {
725
742
display: flex;
···
729
746
padding: 0 0.5rem;
730
747
border-radius: 1rem;
731
748
color: hsl(var(--subtext1));
749
+
750
+
span {
751
+
white-space: nowrap;
752
+
}
732
753
733
754
.stat-count {
734
755
font-weight: 900;