Adds base UI for launcher. (#48)

* launcher base gui initial

* Bootstraps router, Omorphia, and prettier.

* Adds pages. Adds Vuex. SideBar nav contains user section and pages section.

* Adds Instance markup. Instances added to Home page.

* Adds News to home page.

* Adds settings to nav. Other touches.

* Polishing initial base GUI.

* Moves some styling to assets. Changes px values to rem.

* Removes pointless border-radius CSS.

* Implements Omorphia vars.

* Adds trending mods section.

* Updates home page.

* Swaps Vuex implementation for Pinia.

* Fixes invalid CSS on instance list item hover.

* Adds @ path resolve for imports.

* Fix some styling of row display

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Updates nav and settings button styling.

* Brings in Knossos style for trending mods. Polishes News CSS.

* Updates Omorphia. Starts addressing PR comments.

* Addresses some more PR comments.

* Changes side navigation styling. Active route class implemented.

* Combines trending and popular row.

* Makes images more realistic. Adds CTA to instances.

* Converts all instances to card style. Converts more styles to rem.

* Moves Navigation and UserSection into App.vue

* Adds Modrinth favicon.

* Removes unused styling.

* Adds transition to news card.

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
This commit is contained in:
Zach Baird
2023-03-17 15:46:55 -04:00
committed by GitHub
parent c204caa350
commit 744460bdc0
26 changed files with 2213 additions and 53 deletions

View File

@@ -0,0 +1,156 @@
import { defineStore } from 'pinia'
export const useTheming = defineStore('theme', {
state: () => ({ darkTheme: true }),
actions: {
toggleTheme() {
this.darkTheme = !this.darkTheme
},
},
})
export const useInstances = defineStore('instances', {
state: () => ({ instances: [] }),
actions: {
fetchInstances() {
// Fetch from backend.
const instances = [
{
id: 1,
name: 'Fabulously Optimized',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.18.1',
downloads: 10,
trending: true,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 2,
name: 'New Caves',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.18 ',
downloads: 8,
trending: true,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 3,
name: 'All the Mods 6',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.16.5',
downloads: 4,
trending: true,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 4,
name: 'Bees',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 5,
name: 'SkyFactory 4',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.12.2',
downloads: 1000,
trending: false,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 6,
name: 'RLCraft',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.12.2',
downloads: 10000,
trending: false,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 7,
name: 'Regrowth',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.7.10',
downloads: 1000,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 8,
name: 'Birds',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://avatars.githubusercontent.com/u/83074853?v=4',
},
{
id: 9,
name: 'Dogs',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 10,
name: 'Cats',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 11,
name: 'Rabbits',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
]
this.instances = [...instances]
},
},
})
export const useNews = defineStore('news', {
state: () => ({ news: [] }),
actions: {
fetchNews() {
// Fetch from backend.
const news = [
{
id: 1,
headline: 'Caves & Cliffs Update: Part II Dev Q&A',
blurb: 'Your questions, answered!',
source: 'From Minecraft.Net',
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 2,
headline: 'Project of the WeeK: Gobblygook',
blurb: 'Your questions, answered!',
source: 'Modrinth Blog',
img: 'https://avatars.githubusercontent.com/t/3923733?s=280&v=4',
},
{
id: 3,
headline: 'Oreo makes a launcher',
blurb: 'What did it take?',
source: 'Modrinth Blog',
img: 'https://avatars.githubusercontent.com/u/30800863?v=4',
},
]
this.news = [...news]
},
},
})