Fix homepage (#364)
* Fix collapsed things not working properly * Fix spacing problem * lint
This commit is contained in:
parent
21ae310f63
commit
ce01ee6a2d
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user