Skip to content

Commit

Permalink
fixabunchastuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@Owen3H
Owen3H committed Nov 5, 2024
1 parent 43f536a commit 79a6eaa
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 52 deletions.
8 changes: 8 additions & 0 deletions frontend/src/assets/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,12 @@ a {

.p-tooltip-arrow {
border-left-color: transparent !important;
}

.border-faint {
border: 1px solid rgba(190, 190, 190, 0.2);
}

.border-top-faint {
border-top: 1px solid rgba(190, 190, 190, 0.2);
}
64 changes: 28 additions & 36 deletions frontend/src/views/GameSelection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ onMounted(async () => {

<template>
<div class="game-selection flex-span column">
<h2 class="header no-select">{{ $t('game-selection.header') }}</h2>
<h2 class="header no-select">{{ t('game-selection.header') }}</h2>

<div class="card game-container no-drag">
<!-- While loading, show a skeleton of a grid. -->
Expand Down Expand Up @@ -231,7 +231,7 @@ onMounted(async () => {
<p>No games installed!</p>
</div>
<div v-else-if="searchInput && searchInput.length > 0" class="dataview-empty flex flex-column">
<p>{{ `${$t('game-selection.empty-results')}.` }}</p>
<p>{{ `${t('game-selection.empty-results')}.` }}</p>

<!-- Sadge -->
<!-- <img class="pt-3" src="https://cdn.7tv.app/emote/603cac391cd55c0014d989be/2x.png"> -->
Expand All @@ -247,7 +247,14 @@ onMounted(async () => {
<!-- Header (filter, search, layout) -->
<template #header>
<div class="flex flex-row justify-content-between align-items-center">
<div>
<div class="flex row gap-2">
<div class="searchbar">
<IconField iconPosition="left">
<InputIcon class="pi pi-search"/>
<InputText type="text" :placeholder="t('game-selection.search-placeholder')" v-model="searchInput"/>
</IconField>
</div>

<Dropdown checkmark
class="no-drag filter-dropdown"
:options="filters"
Expand All @@ -266,13 +273,6 @@ onMounted(async () => {
</template>
</Dropdown>
</div>

<div class="searchbar">
<IconField iconPosition="left">
<InputIcon class="pi pi-search"></InputIcon>
<InputText type="text" :placeholder="$t('game-selection.search-placeholder')" v-model="searchInput"/>
</IconField>
</div>

<div class="flex flex-row">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
Expand All @@ -287,7 +287,7 @@ onMounted(async () => {
<!-- Grid layout -->
<template #grid>
<div class="scrollable-grid grid grid-nogutter">
<div v-for="(game, index) in getGames()" :key="index" class="grid-item col-2 sm:col-6 md:col-5 lg:col-2 xl:col-2">
<div v-for="(game, index) in getGames()" :key="index" class="grid-item border-faint col-2 sm:col-6 md:col-5 lg:col-2 xl:col-2">
<div class="flex column game-card gap-2">
<div class="flex column align-items-center">
<div class="game-grid-title">{{ game.title }}</div>
Expand Down Expand Up @@ -323,7 +323,7 @@ onMounted(async () => {
<div class="grid-item-bottom-row justify-content-center">
<Button severity="primary"
class="grid-select-game-btn"
:label="$t('game-selection.select-button')"
:label="t('game-selection.select-button')"
@click="selectGame(game)"
/>
</div>
Expand All @@ -339,15 +339,15 @@ onMounted(async () => {
v-for="(game, index) in getGames()" class="snap-top col-12"
:key="index" :ref="el => gameElements[index] = el"
>
<div class="flex flex-column sm:flex-row sm:align-items-center p-2 gap-5" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="flex flex-column sm:flex-row sm:align-items-center p-2 gap-4" :class="{ 'border-top-faint': index !== 0 }">
<img class="game-list-thumbnail fadeinleft fadeinleft-thumbnail block xl:block mx-auto w-full" :src="getThumbnail(game)"/>

<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
<div class="fadeinleft fadeinleft-title flex flex-row md:flex-column justify-content-between align-items-start gap-2">
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1">
<div class="fadeinleft fadeinleft-title flex flex-row md:flex-column justify-content-between align-items-start gap-1">
<div class="game-list-title">{{ game.title }}</div>

<div class="flex gap-2 justify-content-center align-items-baseline">
<p class="m-0" style="font-size: 16.5px">{{ t('game-selection.bepinex-setup') }}</p>
<p class="m-0" style="font-size: 16px">{{ t('game-selection.bepinex-setup') }}</p>
<i
:class="['pi', game.installed ? 'pi-check' : 'pi-times']"
:style="{ color: game.installed ? 'lime' : 'red' }"
Expand All @@ -373,7 +373,7 @@ onMounted(async () => {
/>

<Button
:label="$t('game-selection.select-button')"
:label="t('game-selection.select-button')"
class="list-select-game-btn flex-auto md:flex-initial"
@click="selectGame(game)"
/>
Expand All @@ -397,11 +397,10 @@ onMounted(async () => {
.game-selection .header {
text-wrap: wrap;
text-align: center;
font-size: 36px;
text-align: left;
font-size: 38px;
font-weight: 450;
margin: 30px 0px 10px 0px;
padding: 0px 20px 0px 20px; /* Make the text get wrap earlier */
margin: 30px 0px 10px 35px;
}
.game-container {
Expand All @@ -418,28 +417,27 @@ onMounted(async () => {
}
.scrollable-list {
max-height: calc(160px * 5);
overflow-y: scroll; /* Enable vertical scrolling */
scrollbar-width: none;
max-height: calc(160px * 5); /* Height of single item * amount of items */
}
.scrollable-grid {
overflow-y: scroll;
scrollbar-width: none;
height: calc(100vh - 145px); /* TODO: Investigate why 100vh alone prevents scrolling to bottom. */
max-height: calc(100vh - 145px); /* TODO: Investigate why 100vh alone prevents scrolling to bottom. */
}
.grid-item {
flex: 1 0 auto;
min-width: fit-content;
border: 1px solid rgba(182, 182, 182, 0.2);
border-radius: 3px;
margin: 5px;
}
.game-grid-thumbnail {
user-select: none;
width: 190px;
width: 180px;
border-radius: 4px;
}
Expand All @@ -448,17 +446,17 @@ onMounted(async () => {
max-width: 105px;
min-width: 35px;
opacity: 0;
border-radius: 2px;
border-radius: 1px;
}
.game-list-title {
font-size: 26px;
font-weight: 380;
font-weight: 360;
}
.game-grid-title {
font-size: 25px;
font-weight: 380;
font-size: 24px;
font-weight: 360;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.45);
text-wrap: nowrap;
}
Expand Down Expand Up @@ -490,21 +488,15 @@ onMounted(async () => {
margin-left: auto;
margin-right: auto;
width: 350px;
min-width: 200px;
}
:deep(.p-dataview-header) {
background: transparent !important;
padding: 10px 0px 10px 0px;
padding: 5px 0px 5px 0px;
margin: 0px 5px 0px 5px;
border: none;
}
:deep(.p-dataview-layout-options .p-button) {
background: none !important;
border: none;
}
:deep(.p-dataview-content) {
background: none !important;
}
Expand Down
39 changes: 24 additions & 15 deletions frontend/src/views/SelectedGame.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,19 +229,19 @@ const handleScroll = (e: WheelEvent) => {
<div class="flex column ml-3 no-drag">
<p class="selected-game-title mt-0 mb-0">{{ selectedGame.title }}</p>
<div class="flex column gap-2 mt-3">
<Button plain class="btn"
<Button plain class="btn justify-left"
icon="pi pi-caret-right"
:label="$t('selected-game.start-modded-button')"
@click="startModded"
/>

<Button plain class="btn" severity="secondary"
<Button plain class="btn justify-left" severity="secondary"
icon="pi pi-caret-right"
:label="$t('selected-game.start-vanilla-button')"
@click="startVanilla"
/>

<Button plain class="btn mt-4"
<Button plain class="btn justify-left mt-4"
icon="pi pi-file-edit"
:label="$t('selected-game.config-button')"
@click="configEditorDialog.setVisible(true)"
Expand All @@ -261,7 +261,7 @@ const handleScroll = (e: WheelEvent) => {
<template #empty>
<div class="list-nogutter pt-4">
<div v-for="i in 6" :key="i" class="loading-list-item">
<div style="width: 1280px;" class="flex flex-row ml-1 p-3 border-1 surface-border border-round">
<div style="width: 1280px;" class="flex flex-row ml-1 p-3 border-faint border-round">
<Skeleton size="6.5rem"/> <!-- Thumbnail -->

<div class="flex column gap-1 ml-2">
Expand Down Expand Up @@ -324,9 +324,7 @@ const handleScroll = (e: WheelEvent) => {
</IconField>
</div>

<div class="justify-self-end">
<TabMenu :model="tabs" @tab-change="onTabChange"/>
</div>
<TabMenu :model="tabs" @tab-change="onTabChange"/>
<!-- <div class="flex row">
<ModListDropdown>
Expand All @@ -341,7 +339,7 @@ const handleScroll = (e: WheelEvent) => {
v-for="(mod, index) in currentPageMods" class="list-item col-12"
:key="index" :ref="el => modElements[index] = el"
>
<div class="flex-grow-1 flex column sm:flex-row align-items-center pt-2 gap-3" :class="{ 'border-top-1 surface-border': index != 0 }">
<div class="flex-grow-1 flex column sm:flex-row align-items-center pt-2 gap-3" :class="{ 'border-top-faint': index != 0 }">
<img class="mod-list-thumbnail block xl:block" :src="mod.latestVersion?.icon || ''"/>

<div class="flex-grow-1 flex column md:flex-row md:align-items-center">
Expand Down Expand Up @@ -425,13 +423,13 @@ const handleScroll = (e: WheelEvent) => {
}
.selected-game-card-header {
font-size: 30px;
font-size: 34px;
font-weight: 540;
user-select: none;
}
.selected-game-card :deep(.p-card-body) {
margin: 0px 15px 0px 30px;
margin: 0px 20px 0px 30px;
padding: 0px;
}
Expand All @@ -458,7 +456,7 @@ const handleScroll = (e: WheelEvent) => {
}
.selected-game-title {
font-size: 25px;
font-size: 26px;
font-weight: 330;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.45);
}
Expand All @@ -468,6 +466,10 @@ const handleScroll = (e: WheelEvent) => {
text-align: left;
}
.justify-left {
justify-content: left !important;
}
.mod-list-container {
max-width: 100vw;
width: 100vw;
Expand Down Expand Up @@ -515,13 +517,16 @@ const handleScroll = (e: WheelEvent) => {
.scrollable-list {
overflow-y: scroll;
scrollbar-width: none;
height: calc(100vh - 150px);
margin-bottom: 0.25rem;
max-height: calc(100vh - 150px);
}
:deep(.p-dataview-layout-options .p-button) {
/*:deep(.p-dataview-layout-options .p-button) {
background: none !important;
border: none;
}*/
:deep(.p-tabmenu-tablist) {
background: none !important;
}
:deep(.p-dataview-header) {
Expand All @@ -545,8 +550,12 @@ const handleScroll = (e: WheelEvent) => {
:deep(.p-paginator) {
background: none !important;
padding: 0 0 0 0;
justify-content: start;
padding: 0;
}
:deep(.p-dataview-paginator-bottom) {
border: none;
}
.list-item {
Expand Down
2 changes: 1 addition & 1 deletion main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,6 @@ func main() {
})

if err != nil {
println("Error:", err.Error())
println("Error: ", err.Error())
}
}

0 comments on commit 79a6eaa

Please sign in to comment.