You've already forked AstralRinth
forked from didirus/AstralRinth
UI/UX improvements (#146)
* Some initial changes * New project cards * Version * Finalize improvements * Fixed styling issues on versions page * Removed light mode * Run linter * Added mixpanel stuff in context menus * Fix styling issues * Fix windows * homepage fixes * Finishing touches on mac styling * Fixed windows related styling * Update global.scss --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { handleError, onMounted, ref, watch } from 'vue'
|
||||
import { RouterView, RouterLink, useRouter } from 'vue-router'
|
||||
import {
|
||||
HomeIcon,
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
SettingsIcon,
|
||||
Button,
|
||||
Notifications,
|
||||
XIcon,
|
||||
} from 'omorphia'
|
||||
import { useLoading, useTheming } from '@/store/state'
|
||||
import AccountsCard from '@/components/ui/AccountsCard.vue'
|
||||
@@ -20,12 +21,35 @@ import SplashScreen from '@/components/ui/SplashScreen.vue'
|
||||
import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
|
||||
import { useNotifications } from '@/store/notifications.js'
|
||||
import { warning_listener } from '@/helpers/events.js'
|
||||
import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
|
||||
import { type } from '@tauri-apps/api/os'
|
||||
import { appWindow } from '@tauri-apps/api/window'
|
||||
import { isDev } from '@/helpers/utils.js'
|
||||
import mixpanel from 'mixpanel-browser'
|
||||
|
||||
const themeStore = useTheming()
|
||||
|
||||
const isLoading = ref(true)
|
||||
onMounted(async () => {
|
||||
const { settings, collapsed_navigation } = await get().catch(handleError)
|
||||
themeStore.setThemeState(settings)
|
||||
themeStore.collapsedNavigation = collapsed_navigation
|
||||
|
||||
await warning_listener((e) =>
|
||||
notificationsWrapper.value.addNotification({
|
||||
title: 'Warning',
|
||||
text: e.message,
|
||||
type: 'warn',
|
||||
})
|
||||
)
|
||||
|
||||
if ((await type()) === 'Darwin') {
|
||||
document.getElementsByTagName('html')[0].classList.add('mac')
|
||||
} else {
|
||||
document.getElementsByTagName('html')[0].classList.add('windows')
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
initialize: async () => {
|
||||
isLoading.value = false
|
||||
@@ -175,15 +199,26 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
</div>
|
||||
</div>
|
||||
<div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
|
||||
<div class="appbar">
|
||||
<div data-tauri-drag-region class="appbar">
|
||||
<section class="navigation-controls">
|
||||
<Breadcrumbs />
|
||||
<Breadcrumbs data-tauri-drag-region />
|
||||
</section>
|
||||
<section class="mod-stats">
|
||||
<Suspense>
|
||||
<RunningAppBar />
|
||||
<RunningAppBar data-tauri-drag-region />
|
||||
</Suspense>
|
||||
</section>
|
||||
<section class="window-controls">
|
||||
<Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
|
||||
<MinimizeIcon />
|
||||
</Button>
|
||||
<Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
|
||||
<MaximizeIcon />
|
||||
</Button>
|
||||
<Button class="titlebar-button close" icon-only @click="() => appWindow.close()">
|
||||
<XIcon />
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="router-view">
|
||||
<ModrinthLoadingIndicator
|
||||
@@ -191,7 +226,7 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
offset-width="var(--sidebar-width)"
|
||||
/>
|
||||
<Notifications ref="notificationsWrapper" />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<RouterView v-slot="{ Component }" class="main-view">
|
||||
<template v-if="Component">
|
||||
<Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
|
||||
<component :is="Component"></component>
|
||||
@@ -208,9 +243,46 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
background-color: var(--color-brand-highlight);
|
||||
transition: all ease-in-out 0.1s;
|
||||
}
|
||||
|
||||
.navigation-controls {
|
||||
flex-grow: 1;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
|
||||
.titlebar-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.1s;
|
||||
background-color: var(--color-raised-bg);
|
||||
color: var(--color-base);
|
||||
|
||||
&.close {
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-red);
|
||||
color: var(--color-accent-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-button-bg);
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
--appbar-height: 3.25rem;
|
||||
--sidebar-width: 5rem;
|
||||
--sidebar-width: 4.5rem;
|
||||
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
@@ -226,49 +298,16 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--color-super-raised-bg);
|
||||
background: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
text-align: center;
|
||||
padding: 0 0 0 1rem;
|
||||
padding: var(--gap-md);
|
||||
height: 3.25rem;
|
||||
|
||||
.navigation-controls {
|
||||
display: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: stretch;
|
||||
|
||||
svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
transition: all ease-in-out 0.1s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(150%);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: auto 0.1rem;
|
||||
transition: all ease-in-out 0.1s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mod-stats {
|
||||
height: 100%;
|
||||
display: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
gap: var(--gap-sm);
|
||||
//no select
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.router-view {
|
||||
@@ -276,37 +315,20 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
height: calc(100% - 3.125rem);
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.nav-container {
|
||||
background: var(--color-bg) !important;
|
||||
}
|
||||
.pages-list {
|
||||
a.router-link-active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
.nav-container {
|
||||
box-shadow: var(--shadow-floating), var(--shadow-floating), var(--shadow-floating),
|
||||
var(--shadow-floating) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
padding: 1rem;
|
||||
background: var(--color-raised-bg);
|
||||
padding: var(--gap-md);
|
||||
|
||||
&.expanded {
|
||||
--sidebar-width: 13rem;
|
||||
@@ -332,6 +354,7 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
background: inherit;
|
||||
transition: all ease-in-out 0.1s;
|
||||
color: var(--color-base);
|
||||
box-shadow: none;
|
||||
|
||||
&.router-link-active {
|
||||
color: var(--color-contrast);
|
||||
|
||||
Reference in New Issue
Block a user