Fix homepage (#364)

* Fix collapsed things not working properly

* Fix spacing problem

* lint
This commit is contained in:
Adrian O.V 2023-07-27 03:08:05 -04:00 committed by GitHub
parent 21ae310f63
commit ce01ee6a2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -161,32 +161,18 @@ const accounts = ref(null)
<div class="pages-list">
<RouterLink to="/" class="btn icon-only collapsed-button">
<HomeIcon />
<span v-if="!themeStore.collapsedNavigation">Home</span>
</RouterLink>
<RouterLink
to="/browse/modpack"
class="btn"
class="btn icon-only collapsed-button"
:class="{
'icon-only': themeStore.collapsedNavigation,
'collapsed-button': themeStore.collapsedNavigation,
'expanded-button': !themeStore.collapsedNavigation,
'router-link-active': isOnBrowse,
}"
>
<SearchIcon />
<span v-if="!themeStore.collapsedNavigation">Browse</span>
</RouterLink>
<RouterLink
to="/library"
class="btn"
:class="{
'icon-only': themeStore.collapsedNavigation,
'collapsed-button': themeStore.collapsedNavigation,
'expanded-button': !themeStore.collapsedNavigation,
}"
>
<RouterLink to="/library" class="btn icon-only collapsed-button">
<LibraryIcon />
<span v-if="!themeStore.collapsedNavigation">Library</span>
</RouterLink>
<Suspense>
<InstanceCreationModal ref="installationModal" />
@ -195,32 +181,17 @@ const accounts = ref(null)
</div>
<div class="settings pages-list">
<Button
class="sleek-primary"
:class="{
'icon-only': themeStore.collapsedNavigation,
'collapsed-button': themeStore.collapsedNavigation,
'expanded-button': !themeStore.collapsedNavigation,
}"
class="sleek-primary icon-only collapsed-button"
@click="() => $refs.installationModal.show()"
>
<PlusIcon />
<span v-if="!themeStore.collapsedNavigation" class="no-wrap">New instance</span>
</Button>
<RouterLink
to="/settings"
class="btn"
:class="{
'icon-only': themeStore.collapsedNavigation,
'collapsed-button': themeStore.collapsedNavigation,
'expanded-button': !themeStore.collapsedNavigation,
}"
>
<RouterLink to="/settings" class="btn icon-only collapsed-button">
<SettingsIcon />
<span v-if="!themeStore.collapsedNavigation">Settings</span>
</RouterLink>
</div>
</div>
<div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
<div class="view">
<div class="appbar-row">
<div data-tauri-drag-region class="appbar">
<section class="navigation-controls">
@ -330,10 +301,6 @@ const accounts = ref(null)
overflow: hidden;
.view {
&.expanded {
--sidebar-width: 13rem;
}
width: calc(100% - var(--sidebar-width));
.appbar {
@ -370,14 +337,6 @@ const accounts = ref(null)
background-color: var(--color-raised-bg);
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
padding: var(--gap-md);
&.expanded {
--sidebar-width: 13rem;
width: var(--sidebar-width);
max-width: var(--sidebar-width);
min-width: var(--sidebar-width);
}
}
.pages-list {
@ -432,11 +391,6 @@ const accounts = ref(null)
}
}
.expanded-button {
width: 100%;
padding: var(--gap-md) var(--gap-lg);
}
.instance-list {
display: flex;
flex-direction: column;