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

Create instance info component

Browse source
This commit is contained in:
silverpill 2022-07-30 11:09:46 +00:00
parent 96625d9c94
commit c8fecfe14f
2 changed files with 55 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/InstanceInfo.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div class="instance-info" v-if="instance">
<h1 class="instance-title">{{ instance.title }}</h1>
<div class="instance-description">{{ instance.short_description }}</div>
<router-link class="btn" :to="{ name: 'about-public' }">Learn more</router-link>
</div>
</template>
<script setup lang="ts">
import { $ } from "vue/macros"
import { useInstanceInfo } from "@/store/instance"
const { instance } = $(useInstanceInfo())
</script>
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/mixins";
@import "../styles/theme";
.instance-info {
@include block-btn;
background-color: $block-background-color;
border-radius: $block-border-radius;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-shrink: 1;
gap: $block-inner-padding;
padding: $block-inner-padding;
width: $wide-sidebar-width;
h1 {
font-size: 32px;
font-weight: bold;
}
.btn {
width: min-content;
}
}
@media screen and (max-width: $screen-breakpoint-small) {
.instance-info {
margin-bottom: $body-padding;
width: 100%;
}
}
</style>

42
src/components/Sidebar.vue
View file

@ -24,11 +24,7 @@
<span>Logout</span>
</a>
</div>
<div v-else-if="!isUserAuthenticated && instance" class="sidebar wide">
<h1 class="instance-title">{{ instance.title }}</h1>
<div class="instance-description">{{ instance.short_description }}</div>
<router-link class="btn" :to="{name: 'about-public'}">Learn more</router-link>
</div>
<instance-info v-else-if="!isUserAuthenticated"></instance-info>
</template>
<script setup lang="ts">
@ -36,12 +32,11 @@ import { onMounted } from "vue"
import { $, $computed } from "vue/macros"
import { useRouter } from "vue-router"
import { useInstanceInfo } from "@/store/instance"
import InstanceInfo from "@/components/InstanceInfo.vue"
import { useNotifications } from "@/store/notifications"
import { useCurrentUser } from "@/store/user"
const router = useRouter()
const { instance } = $(useInstanceInfo())
const { loadNotifications, getUnreadNotificationCount } = $(useNotifications())
const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = $(useCurrentUser())
@ -69,17 +64,13 @@ function logout() {
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/mixins";
@import "../styles/theme";
.sidebar {
background-color: $background-color;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.sidebar:not(.wide) {
background-color: $background-color;
flex-shrink: 0;
gap: $block-outer-padding * 1.5;
position: sticky;
@ -136,28 +127,8 @@ function logout() {
}
}
.sidebar.wide {
@include block-btn;
background-color: $block-background-color;
border-radius: $block-border-radius;
flex-shrink: 1;
gap: $block-inner-padding;
padding: $block-inner-padding;
width: $wide-sidebar-width;
h1 {
font-size: 32px;
font-weight: bold;
}
.btn {
width: min-content;
}
}
@media screen and (max-width: $screen-breakpoint-small) {
.sidebar:not(.wide) {
.sidebar {
flex-direction: row;
gap: 0;
justify-content: space-between;
@ -171,10 +142,5 @@ function logout() {
display: none;
}
}
.sidebar.wide {
margin-bottom: $body-padding;
width: 100%;
}
}
</style>