parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Further adjust spacing to be perfect

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-02 16:52:52 -05:00
parent 0200df7b16
commit 4ca93fcc9a
3 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pvc-vue/src/components/general/NodeSelectBar.vue
View File

@ -44,7 +44,7 @@ const selectNode = (node) => {
gap: 0.5rem;
background-color: white;
border-radius: 0.25rem;
padding: 1rem;
padding-top: 0.5rem;
margin-top: -1.25rem !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
@ -57,7 +57,7 @@ const selectNode = (node) => {
}
.node-tab {
padding: 0.375rem 0.75rem;
padding: 0.45rem 0.75rem;
border: none;
background: none;
color: #495057;

16
pvc-vue/src/components/general/VMSearchBar.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="controls-bar" ref="controlsBar">
<div class="controls-row">
<div class="vm-selector-bar" ref="controlsBar">
<div class="vm-selector-row">
<button
class="btn btn-outline-secondary list-toggle-btn"
@click="toggleList"
@ -612,18 +612,18 @@ const loadFiltersFromLocalStorage = () => {
</script>
<style scoped>
.controls-bar {
.vm-selector-bar {
display: flex;
flex-direction: column;
gap: 0.5rem;
background-color: white;
border-radius: 0.25rem;
padding: 1rem;
padding-top: 0.5rem;
margin-top: -1.25rem !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.controls-row {
.vm-selector-row {
display: flex;
align-items: center;
gap: 0.5rem;
@ -702,7 +702,7 @@ const loadFiltersFromLocalStorage = () => {
background-color: white;
border-radius: 0.25rem;
overflow: hidden;
margin-top: 0.5rem;
margin-top: -0.5rem;
padding-bottom: 0.25rem;
}
@ -753,12 +753,12 @@ const loadFiltersFromLocalStorage = () => {
z-index: 2 !important;
}
.controls-bar .vm-list-container .vm-list .vm-list-item.active {
.vm-selector-bar .vm-list-container .vm-list .vm-list-item.active {
background-color: rgba(13, 110, 253, 0.15) !important;
position: relative !important;
}
.controls-bar .vm-list-container .vm-list .vm-list-item.active::before {
.vm-selector-bar .vm-list-container .vm-list .vm-list-item.active::before {
content: '';
position: absolute !important;
left: 0 !important;

19
pvc-vue/src/components/pages/vms/VMOverview.vue
View File

@ -344,36 +344,33 @@ const formatStorage = (sizeGB) => {
padding: 2rem;
}
.info-grid {
.info-grid-general {
display: grid;
gap: 1rem;
gap: 0.5rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.info-grid-2 {
.info-grid-resources {
display: grid;
gap: 1rem;
gap: 0.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cards-stack {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.5rem;
}
.detail-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 0.25rem;
gap: 0.5rem;
}
@media (max-width: 768px) {
.info-grid,
.info-grid-2 {
.info-grid-general,
.info-grid-resources {
grid-template-columns: 1fr;
}