h2/postnummer-app
h2/postnummer-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

review page template

Browse Source
This commit is contained in:
Mikkel 2023-02-10 11:09:48 +01:00
parent 6ca997dafb
commit d24f0ae010
5 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api.md
View File

@ -22,7 +22,7 @@
```ts ```ts
{ {
Review[] reviews: Review[]
} }
``` ```

2
frontend/index.html
View File

@ -8,6 +8,8 @@
<script src="bundle.js" defer></script> <script src="bundle.js" defer></script>
<title>Postnummer App</title> <title>Postnummer App</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

3
frontend/src/main.ts
View File

@ -3,6 +3,7 @@ import { setTopbarOffset, addToggleDropdownListener } from "./topbar";
import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates"; import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates";
import { Size } from "./size"; import { Size } from "./size";
import { Tooltip } from "./Tooltip"; import { Tooltip } from "./Tooltip";
import { loadReviews } from "./review";
const tooltip = new Tooltip(document.getElementById("tooltip")!); const tooltip = new Tooltip(document.getElementById("tooltip")!);
@ -201,7 +202,7 @@ function pageRedirects() {
reviewRedirect.addEventListener("click", () => { reviewRedirect.addEventListener("click", () => {
mainElement.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2> mainElement.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container"></div>` <div id="reviews-container">${loadReviews()}</div>`
const dropdown = document.getElementById("dropdown")!; const dropdown = document.getElementById("dropdown")!;
dropdown.classList.remove("enabled"); dropdown.classList.remove("enabled");

39
frontend/src/review.ts
View File

@ -1,21 +1,28 @@
const reviewContainer = document.getElementById("reviews-container")!
const reviewRedirect = document.getElementById("review-redirect")!
const main = document.getElementById("main")!
reviewRedirect.addEventListener("click", () => { export function loadReviews() {
main.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2> let result: string = ""
<div id="reviews-container"></div>`
}); result += `
<div class="review">
export function addReview(location: string, title: string, content: string, stars: number) { <h3>Hvor er min scooter?</h3>
const id = Math.random() * 1000000 <div class="location-and-stars">
reviewContainer.innerHTML += <p>Randers</p>
`<div id="review${id}"> <div>
<h3>${title}</h3> <span class="material-symbols-outlined">star</span>
<p>${location}</p> <span class="material-symbols-outlined">star</span>
<p>${content}</p> <span class="material-symbols-outlined">star</span>
<p>${stars} stjerner</p> <span class="material-symbols-outlined">star</span>
<span class="material-symbols-outlined">star</span>
</div>
</div>
<p class="review-content">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</p>
</div>` </div>`
// const body = (await (await fetch("/api/review")).json()).body()
// if (!body.reviews) return;
return result
} }

15
frontend/style.css
View File

@ -227,3 +227,18 @@ code {
justify-content: center; justify-content: center;
} }
.review h3, p {
margin: 0;
}
.location-and-stars {
display: flex;
justify-content: center;
padding: 0;
gap: 0.4em;
flex-direction: row;
}
.material-symbols-outlined {
color: yellow;
fill: yellow;
}