f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-19 16:22:41 +00:00
Code Wiki Activity

big changes to the UI

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-05-22 20:10:54 +02:00
parent 54efc18ad4
commit 133295c225
2 changed files with 199 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/homebrew/pages/archivePage/archivePage.jsx
View File

@@ -425,22 +425,12 @@ const ArchivePage = createClass({
{this.renderNavItems()}
<div className="content">
<div className="welcome">
<h1>Welcome to the Archive</h1>
</div>
<div className="flexGroup">
<div className="form dataGroup">
{this.renderForm()}
</div>
<div className="form dataGroup">{this.renderForm()}</div>
<div className="resultsContainer dataGroup">
<div className="title">
<h2>Your search returned these results</h2>
</div>
{this.renderFoundBrews()}
</div>
</div>
</div>
</div>
);
},
});

106
client/homebrew/pages/archivePage/archivePage.less
View File

@@ -6,17 +6,18 @@ body {
}
small {
font-size:10pt;
color:#555;
font-size: 10pt;
color: #555;
a {
color:#333;
color: #333;
}
}
code {
background:lightgrey;
border-radius:5px;
padding-inline:5px
background: lightgrey;
border-radius: 5px;
padding-inline: 5px
}
*:not(input) {
@@ -29,33 +30,15 @@ body {
height: 100%;
background-color: #2C3E50;
h1,h2,h3 {
h1,
h2,
h3 {
font-family: 'Open Sans';
color: white;
font-weight: 900;
}
.content {
display: grid;
grid-template-rows: 20vh 1fr;
.welcome {
display: grid;
place-items: center;
background: url('https://i.imgur.com/MJ4YHu7.jpg');
background-size: 100%;
background-position: center;
height: 20vh;
border-bottom: 5px solid #333;
h1 {
font-size: 40px;
filter:drop-shadow(0 0 5px black);
}
}
.flexGroup {
height: 100%;
display: grid;
grid-template-columns: 500px 2fr;
background: #2C3E50;
@@ -70,7 +53,7 @@ body {
padding: 50px;
.formTitle {
color:black;
color: black;
font-size: 30px;
border-bottom: 2px solid;
margin: 20px 0;
@@ -81,16 +64,19 @@ body {
display: flex;
flex-direction: column;
}
label {
margin: 10px 0;
}
input {
margin: 0 10px;
}
#searchButton {
position:absolute;
right:10px;
bottom:20px;
position: absolute;
right: 10px;
bottom: 20px;
i {
margin-left: 10px;
@@ -106,24 +92,15 @@ body {
font-family: "BookInsanityRemake";
font-size: .34cm;
.title {
height: 10vh;
background-color: #333;
display: grid;
place-items: center;
h2 {
font-size: 30px;
}
}
.foundBrews {
position: relative;
background-color: #2C3E50;
width: 100%;
max-height: 100%;
height: 66.8vh;
height: 100%;
padding: 50px;
overflow-y:scroll;
overflow-y: scroll;
h3 {
font-size: 25px;
@@ -140,7 +117,10 @@ body {
place-items: center;
color: white;
h3 { position: relative;}
h3 {
position: relative;
}
h3.searchAnim::after {
content: "";
width: max-content;
@@ -165,6 +145,7 @@ body {
z-index: 1000;
font-family: 'Open Sans';
}
.brewItem {
background-image: url('/assets/parchmentBackground.jpg');
width: 48%;
@@ -174,6 +155,7 @@ body {
&:nth-child(even of .brewItem) {
margin-right: 0;
}
h2 {
font-size: 0.75cm;
line-height: 0.988em;
@@ -208,7 +190,7 @@ body {
height: 100%;
width: 100%;
display: flex;
justify-content:space-evenly;
justify-content: space-evenly;
text-align: center;
padding: 5px 8px;
@@ -217,26 +199,28 @@ body {
font-family: Open Sans;
font-weight: 900;
text-underline-position: under;
margin-inline:10px;
margin-inline: 10px;
cursor: pointer;
&.currentPage {
color:gold;
text-decoration:underline;
pointer-events:none;
color: gold;
text-decoration: underline;
pointer-events: none;
}
&.firstPage {
margin-right:-5px;
margin-right: -5px;
}
&.lastPage {
margin-left:-5px;
margin-left: -5px;
}
}
}
button {
width:max-content;
border-radius:5px;
width: max-content;
border-radius: 5px;
&.previousPage {
grid-area: previousPage;
@@ -256,20 +240,22 @@ body {
}
}
}
}
}
@keyframes trailingDots {
0%,32% {
content:'.';
0%,
32% {
content: '.';
}
33%, 65% {
content:'..';
33%,
65% {
content: '..';
}
66%,100% {
content:'...';
66%,
100% {
content: '...';
}
}