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
2023-06-20 00:09:03 -04:00
committed by GitHub
parent 1e78a7b6a8
commit bd697a02f5
25 changed files with 985 additions and 491 deletions

View File

@@ -57,21 +57,22 @@
Folder
</Button>
</span>
<hr class="card-divider" />
<div class="pages-list">
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
<BoxIcon />
Mods
</RouterLink>
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
<FileIcon />
Logs
</RouterLink>
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
<SettingsIcon />
Options
</RouterLink>
</div>
</Card>
<div class="pages-list">
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
<BoxIcon />
Mods
</RouterLink>
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
<FileIcon />
Logs
</RouterLink>
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
<SettingsIcon />
Options
</RouterLink>
</div>
</div>
<div class="content">
<Promotion />
@@ -266,7 +267,6 @@ onUnmounted(() => {
<style scoped lang="scss">
.instance-card {
background: var(--color-bg);
display: flex;
flex-direction: column;
gap: 1rem;
@@ -288,7 +288,6 @@ Button {
display: flex;
flex-direction: column;
padding: 1rem;
background: var(--color-raised-bg);
min-height: calc(100% - 3.25rem);
overflow: hidden;
}
@@ -321,7 +320,7 @@ Button {
}
.content {
margin-left: 20rem;
margin-left: 19rem;
}
.instance-info {
@@ -341,7 +340,7 @@ Button {
.pages-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: var(--gap-xs);
a {
font-size: 100%;
@@ -350,7 +349,6 @@ Button {
transition: all ease-in-out 0.1s;
width: 100%;
color: var(--color-primary);
padding: var(--gap-md);
box-shadow: none;
&.router-link-exact-active {
@@ -373,28 +371,6 @@ Button {
}
}
.header-nav {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 0.5rem;
gap: 0.5rem;
background: var(--color-raised-bg);
}
.project-card {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1rem;
background: var(--color-raised-bg);
width: 20rem;
}
.instance-nav {
display: flex;
flex-direction: row;
@@ -402,7 +378,6 @@ Button {
justify-content: left;
padding: 1rem;
gap: 0.5rem;
background: var(--color-raised-bg);
height: min-content;
width: 100%;
}