localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Update CSS, fix fragements and home.

Browse Source
This commit is contained in:
CodeSteak 2020-01-12 15:52:45 +01:00
parent 213c5a2c94
commit a70dca56f7
4 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
prototype/src/main/resources/static/css/ecom.css
View File

@ -96,6 +96,10 @@ html, body {
color: var(--c-black) color: var(--c-black)
} }
main {
min-height: 100%;
}
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: "Fira Mono"; font-family: "Fira Mono";
@ -104,6 +108,11 @@ h1, h2, h3, h4, h5 {
text-transform: uppercase; text-transform: uppercase;
} }
p {
padding-top: 1em;
padding-bottom: 1em;
}
h1 { h1 {
font-size: var(--u2); font-size: var(--u2);
} }
@ -125,16 +134,59 @@ li {
list-style-type: none; list-style-type: none;
} }
table {
width: 100%;
border-collapse: collapse;
}
table td,
table th {
padding: var(--u0);
text-align: center;
}
table th {
background-color: var(--c-primary);
color: var(--c-base);
}
table tr:nth-child(2n+1) {
background-color: var(--c-base-highlight);
}
/* /*
* NAV * NAV
*/ */
nav {
}
nav h1 { nav h1 {
font-size: var(--u0); font-size: var(--u0);
margin: 0rem; margin: 0rem;
} }
nav li {
display: flex;
flex-direction: column;
}
nav li li {
margin-left: var(--u0);
}
nav li a {
padding: var(--u0);
transition: all 0.1s ease-out;
}
nav li a:hover,
nav li a.selected {
padding: var(--u0);
background-color: var(--c-primary);
color: var(--c-base);
}
/* /*
* FOOTER * FOOTER
*/ */
@ -172,8 +224,9 @@ input[type="password"]::placeholder {
opacity: 50%; opacity: 50%;
} }
button, .botton { button, .button {
font-family: "Fira Mono"; font-family: "Fira Mono";
font-weight: bold;
background-color: var(--c-primary); background-color: var(--c-primary);
color: var(--c-base); color: var(--c-base);
@ -195,7 +248,7 @@ button, .botton {
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
} }
button:active, .botton:active { button:active, .button:active {
background-color: var(--c-primary-highlight); background-color: var(--c-primary-highlight);
} }
@ -209,6 +262,7 @@ button,
label { label {
display: block; display: block;
min-width: 10em; min-width: 10em;
font-weight: bold;
} }
/* /*
@ -238,18 +292,29 @@ label {
padding-right: var(--u0); padding-right: var(--u0);
} }
.flex { .bar-flex {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex > * { .bar-flex > * {
margin: var(--u0); margin: var(--u0);
} }
.flex > .spacer { .bar-flex > .spacer {
flex: 1;
}
.sidebar-layout {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
}
.sidebar-layout > *:nth-child(2) {
flex: 1; flex: 1;
} }
@ -259,6 +324,15 @@ label {
flex-wrap: wrap; flex-wrap: wrap;
} }
.grid.vertical-center {
align-items: center;
height: 100%;
}
.grid.center {
justify-content: space-around;
}
.grid > * { .grid > * {
flex: 1; flex: 1;
margin: var(--u0); margin: var(--u0);
@ -294,7 +368,6 @@ label {
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
} }
.grid.s > .spacer { .grid.s > .spacer {
box-shadow: none; box-shadow: none;
@ -308,7 +381,6 @@ label {
} }
.grid.s > * { .grid.s > * {
width: 10rem;
max-width: 10rem; max-width: 10rem;
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -384,7 +456,7 @@ label {
box-shadow: none; box-shadow: none;
} }
.input-icon > form > button { .input-icon > button {
margin: 0px; margin: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
@ -393,8 +465,6 @@ label {
} }
/* /*
* CONTENT * CONTENT
*/ */
@ -404,28 +474,3 @@ label {
font-size: var(--u1); font-size: var(--u1);
text-align: right; text-align: right;
} }
/*
* Prototype stuff
*/
.dialog {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
.dialog-content {
background-color: var(--c-black);
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
}

2
prototype/src/main/resources/templates/fragments/footer.html
View File

@ -6,7 +6,7 @@
</head> </head>
<body> <body>
<footer class="hero-black" th:fragment="footer"> <footer class="hero-black" th:fragment="footer">
<div class='content-width flex'> <div class='content-width bar-flex'>
<h3>Project eCommerce</h3> <h3>Project eCommerce</h3>
<div class="spacer"></div> <div class="spacer"></div>
<div> <div>

14
prototype/src/main/resources/templates/fragments/header.html
View File

@ -6,18 +6,16 @@
</head> </head>
<body> <body>
<nav class='hero' th:fragment="header"> <nav class='hero' th:fragment="header">
<div class='content-width flex'> <div class='content-width bar-flex'>
<h1>Project eCommerce</h1> <h1>Project eCommerce</h1>
<button>Angebote</button> <button>Angebote</button>
<div class='spacer input-icon secondary'> <form class='spacer input-icon secondary' th:action="@{/login}" method="GET">
<input type="text" placeholder="Nach Produkten suchen..."/> <input type="text" placeholder="Nach Produkten suchen..."/>
<form class="button" th:action="@{/searchresults}" method="GET"> <button>Finden</button>
<button type="submit">Finden</button> </form>
</form> <!-- TODO: Do not use get for passwords -->
</div>
<form class="button" th:action="@{/login}" method="GET"> <form class="button" th:action="@{/login}" method="GET">
<button type="submit">Login</button> <button>Login</button>
</form> </form>
</div> </div>
</nav> </nav>

6
prototype/src/main/resources/templates/home.html
View File

@ -78,9 +78,9 @@
<h2>Werde jetzt Kunde</h2> <h2>Werde jetzt Kunde</h2>
<p> Jetzt Kunde werden und viele Vorteile sichern, <p> Jetzt Kunde werden und viele Vorteile sichern,
wie z.B. personalisierte Empfehlungen. </p> wie z.B. personalisierte Empfehlungen. </p>
<form class="button" th:action="@{/register}"> <p>
<button type="submit" name="action" value="register">Registieren</button> <a class="button" th:href="@{/register}">Registieren</a>
</form> </p>
</div> </div>
</div> </div>
</div> </div>