0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 21:02:43 +00:00

change to splitPane component

This commit is contained in:
Víctor Losada Hernández
2024-07-25 16:57:33 +02:00
parent e562ebef48
commit cc08579583
2 changed files with 9 additions and 11 deletions

View File

@@ -12,6 +12,8 @@ const NewBrew = require('../../navbar/newbrew.navitem.jsx');
const HelpNavItem = require('../../navbar/help.navitem.jsx'); const HelpNavItem = require('../../navbar/help.navitem.jsx');
const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx'); const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
const SplitPane = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
const request = require('../../utils/request-middleware.js'); const request = require('../../utils/request-middleware.js');
const VaultPage = (props) => { const VaultPage = (props) => {
@@ -377,11 +379,13 @@ const VaultPage = (props) => {
<link href="/themes/V3/5ePHB/style.css" rel="stylesheet" /> <link href="/themes/V3/5ePHB/style.css" rel="stylesheet" />
{renderNavItems()} {renderNavItems()}
<div className="content"> <div className="content">
<SplitPane>
<div className="form dataGroup">{renderForm()}</div> <div className="form dataGroup">{renderForm()}</div>
<div className="resultsContainer dataGroup"> <div className="resultsContainer dataGroup">
{renderFoundBrews()} {renderFoundBrews()}
</div> </div>
</SplitPane>
</div> </div>
</div> </div>
); );

View File

@@ -33,9 +33,7 @@ body {
} }
.content { .content {
display : grid; background: #2C3E50;
grid-template-columns : clamp(310px,25vw, 600px) 2fr;
background : #2C3E50;
.dataGroup { .dataGroup {
width : 100%; width : 100%;
@@ -79,7 +77,6 @@ body {
overflow-y : auto; overflow-y : auto;
font-family : 'BookInsanityRemake'; font-family : 'BookInsanityRemake';
font-size : 0.34cm; font-size : 0.34cm;
border-left : 2px solid;
.foundBrews { .foundBrews {
@@ -248,17 +245,14 @@ body {
// media query for when the page is smaller than 1079 px in width // media query for when the page is smaller than 1079 px in width
@media screen and (max-width: 1079px) { @media screen and (max-width: 1079px) {
.vaultPage .content { .vaultPage .content {
grid-template-columns: none;
grid-template-rows: 325px 1fr;
.brewLookup { .brewLookup {
padding-block:10px 20px; padding:0 20px 20px 10px;
} }
.dataGroup.resultsContainer .foundBrews .brewItem { .dataGroup.resultsContainer .foundBrews .brewItem {
width: 100%; width : 100%;
color: black; margin-inline : auto;
background-image: url('/assets/parchmentBackground.jpg');
} }
} }
} }