[web] Fix spacing of pages with tabs

This commit is contained in:
Alain Nussbaumer 2025-02-15 22:00:31 +01:00
parent ed81d32ab3
commit 6b0e57c221
5 changed files with 13 additions and 10 deletions

View File

@ -1,8 +1,8 @@
<template> <template>
<section class="section tabs-section"> <section class="section tabs-section">
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered my-0">
<div class="column is-four-fifths"> <div class="column is-four-fifths py-0">
<div class="tabs is-centered is-small"> <div class="tabs is-centered is-small">
<ul> <ul>
<router-link <router-link

View File

@ -1,8 +1,8 @@
<template> <template>
<section class="section tabs-section"> <section class="section tabs-section">
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered my-0">
<div class="column is-four-fifths"> <div class="column is-four-fifths py-0">
<div class="tabs is-centered is-small"> <div class="tabs is-centered is-small">
<ul> <ul>
<router-link <router-link

View File

@ -1,8 +1,8 @@
<template> <template>
<section class="section tabs-section"> <section class="section tabs-section">
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered my-0">
<div class="column is-four-fifths"> <div class="column is-four-fifths py-0">
<div class="tabs is-centered is-small"> <div class="tabs is-centered is-small">
<ul> <ul>
<router-link <router-link

View File

@ -4,9 +4,12 @@
@use 'bulma/sass/utilities/mixins'; @use 'bulma/sass/utilities/mixins';
.tabs-section { .tabs-section {
background: var(--bulma-body-background-color);
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
background: var(--bulma-body-background-color); position: sticky;
top: var(--bulma-navbar-height);
width: 100%;
z-index: 20; z-index: 20;
} }

View File

@ -3,8 +3,8 @@
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<div v-if="$slots.options" class="mb-2"> <div v-if="$slots.options" class="my-2">
<div :class="{ 'is-hidden': hidden }" class="mb-2"> <div :class="{ 'is-hidden': hidden }" class="mt-4">
<slot name="options" /> <slot name="options" />
</div> </div>
<div class="buttons is-centered"> <div class="buttons is-centered">
@ -56,7 +56,7 @@ export default {
</script> </script>
<style scope> <style scope>
section:not(.is-tabs) + section { section:not(.tabs-section) + section {
padding-top: 0; padding-top: 0;
} }
</style> </style>