ALHP/alhp-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed packages for mobile

Browse Source
This commit is contained in:
vikingowl
2024-01-25 22:54:44 +01:00
parent 4994f6aa4f
commit 27218d6841
1 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/Packages.vue
View File

@@ -2,16 +2,17 @@
<v-sheet class="mt-6" color="transparent" width="100%">
<h5 class="text-h5 mb-4">Packages</h5>
<v-sheet class="d-flex justify-space-between" color="transparent" width="100%">
<v-sheet class="d-flex align-center w-50" color="transparent" style="gap: 15px">
<v-row :style="mobile ? '' : 'height: 60px'" width="100%">
<v-col class="v-col-12 v-col-sm-2">
<v-text-field
v-model="inputPkgBase"
clearable
color="primary"
placeholder="Search Pkgbase"
style="width: 30%; height: 60px"
variant="outlined"></v-text-field>
</v-col>
<v-col class="v-col-12 v-col-sm-2 mt-n6 mt-sm-0">
<v-select
v-model="selectRepo"
:items="selectRepoItems"
@@ -20,9 +21,10 @@
item-value="value"
return-object
single-line
style="width: 30%; height: 60px"
variant="outlined"></v-select>
</v-col>
<v-col class="v-col-12 v-col-sm-2 mt-n6 mt-sm-0">
<v-select
v-model="selectStatus"
:items="selectStatusItems"
@@ -31,38 +33,42 @@
item-value="value"
return-object
single-line
style="width: 30%; height: 60px"
variant="outlined"></v-select>
</v-sheet>
</v-col>
<v-sheet
class="d-flex align-center justify-end w-50"
color="transparent"
style="height: 60px">
<v-col class="ms-auto v-col-auto mt-n6 mt-sm-0">
<v-pagination
v-model="page"
:length="pagesMax"
:total-visible="mobile ? 5 : 7"
active-color="primary"
density="comfortable"
start="1"
total-visible="7"
variant="text"></v-pagination>
</v-sheet>
</v-sheet>
</v-col>
</v-row>
<v-table class="mt-6" style="width: 100%; background: transparent; font-size: 1rem">
<v-table class="mt-2 mt-sm-6" style="width: 100%; background: transparent; font-size: 1rem">
<thead>
<tr>
<th scope="col">Repository</th>
<th scope="col">Pkgbase</th>
<th scope="col">Status</th>
<th scope="col">Reason</th>
<th
scope="col"
title="link time optimization&#10;does not guarantee that package is actually built with LTO">
<th scope="col">
LTO
<v-tooltip activator="parent" location="bottom">
Link time optimization;
<br />
Does not guarantee that package is actually built with LTO
</v-tooltip>
</th>
<th scope="col">
DS
<v-tooltip activator="parent" location="bottom">
Debug-symbols available via debuginfod
</v-tooltip>
</th>
<th scope="col" title="Debug-symbols available via debuginfod">DS</th>
<th scope="col">Archlinux Version</th>
<th scope="col">ALHP Version</th>
<th class="text-end" scope="col" style="width: 30px">Info</th>
@@ -78,7 +84,7 @@
v-for="(pkg, index) in packages"
:key="index"
:style="`background-color: ${getStatus(pkg.status)};`">
<td class="font-weight-bold">
<td class="font-weight-bold text-no-wrap">
{{ pkg.repo.split('-')[0] }}
<v-chip
:color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])"
@@ -89,7 +95,7 @@
{{ pkg.repo.split('-')[pkg.repo.split('-').length - 1] }}
</v-chip>
</td>
<td>{{ pkg.pkgbase }}</td>
<td class="text-no-wrap">{{ pkg.pkgbase }}</td>
<td>{{ pkg.status.toLocaleUpperCase() }}</td>
<td>{{ pkg.skip_reason || '' }}</td>
<td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
@@ -107,7 +113,7 @@
class="text-decoration-none"
style="
color: darkgrey;
transform: translateY(-3px) translateX(-15px);
transform: translateY(-3px) translateX(-22px);
max-width: 15px;
"
target="_blank">
@@ -152,6 +158,9 @@
import { onMounted, ref, UnwrapRef, watch } from 'vue'
import { type Package } from '@/types/Package'
import { type Packages } from '@/types/Packages'
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
const inputPkgBase = ref('')
const selectRepo = ref({ title: 'Repository (any)', value: 'any' })