f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 18:42:40 +00:00
Code Wiki Activity

basic styles

Browse Source
This commit is contained in:
Víctor Losada Hernández
2025-11-09 00:48:37 +01:00
parent a65d4b8ac1
commit 142fb8376f
2 changed files with 109 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/newDocumentForm.jsx
View File

@@ -1,11 +1,35 @@
import React from "react"; import React from "react";
import './newDocumentForm.less';
export function NewDocumentForm() { export function NewDocumentForm() {
return ( return <>
<div> <nav>
Hello <button>templates</button>
<button>import</button>
<button>clone</button>
</nav>
<div className="content">
<div className="templates">
<div className="template a4"><div className="image"></div><span>A4</span></div>
<div className="template a5"><div className="image"></div><span>A5</span></div>
<div className="template a4"><div className="image"></div><span>A4</span></div>
<div className="template a5"><div className="image"></div><span>A5</span></div>
<div className="template a4"><div className="image"></div><span>A4</span></div>
<div className="template a5"><div className="image"></div><span>A5</span></div>
</div> </div>
); <div className="metadataPanel">
<div className="fieldGroup">
<label>title</label>
<input type='text'
defaultValue=''
placeholder='title'
className='title'
onChange={(e)=>{}} />
</div>
</div>
</div>
</>
} }

80
client/components/newDocumentForm.less Normal file
View File

@@ -0,0 +1,80 @@
.newBrewPopup {
position: relative;
background: #282828;
border: unset;
display: grid;
grid-template-rows: 50px 1fr;
padding: 0;
color: #ddd;
border-radius: 10px;
box-shadow: 1px 0 14px black;
nav {
padding: 10px;
padding-right:100px;
padding-left:50px;
background: #333;
}
.content {
display: grid;
grid-template-columns: 1fr 200px;
height:100% !important;
.templates {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 50px;
gap:10px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.62);
.template {
width: 100px;
height: 150px;
display: flex;
flex-direction: column;
text-align:center;
gap:10px;
.image {
width: 100px;
height: 100px;
background-color:#444;
}
}
}
.metadataPanel {
height:100%;
background-color: #555;
padding:25px;
.fieldGroup {
display:grid;
grid-template-columns:50px 1fr;
}
}
}
.dismiss {
position: absolute;
top: 0px;
right: 0px;
width:50px;
height:50px;
z-index:10;
display:grid;
place-items:center;
}
input {
color:white;
background-color:#333;
border-radius:5px;
outline:1px solid #777;
border:unset;
box-shadow: inset 0 0 5px rgba(0,0,0,0.62);
width:100%;
}
}