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

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

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

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

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