diff --git a/api/wineinfo.js b/api/wineinfo.js index 1b4c7ff..37afbf2 100644 --- a/api/wineinfo.js +++ b/api/wineinfo.js @@ -15,10 +15,10 @@ const convertToOurWineObject = wine => { return { name: wine.basic.productShortName, image: `https://bilder.vinmonopolet.no/cache/300x300-0/${wine.basic.productId}-1.jpg`, - rating: undefined, + rating: wine.basic.alcoholContent, price: wine.prices[0].salesPrice, country: wine.origins.origin.country, - vivinoLink: undefined + vivinoLink: "https://www.vinmonopolet.no/p/" + wine.basic.productId } } } diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue index d02c6f0..75a189a 100644 --- a/src/components/RequestWine.vue +++ b/src/components/RequestWine.vue @@ -4,8 +4,10 @@ Foreslå en vin!
- - +
+ + +

{{ wine.name }}

(no name)

- {{ wine.price }} NOK - {{ wine.country }} +
+ {{ wine.rating }}% + {{ wine.price }} NOK + {{ wine.country }} +
- + Les mer på polet
+

+ Fant ingen viner med det navnet! +

@@ -40,14 +52,15 @@ export default { data() { return { searchString: undefined, - res: undefined, wines: undefined, } }, methods: { fetchWineFromVin(){ - searchForWine(this.searchString) - .then(res => this.wines = res) + if(this.searchString){ + searchForWine(this.searchString) + .then(res => this.wines = res) + } }, }, } @@ -61,6 +74,7 @@ export default { main{ margin: auto; width: 80%; + text-align: center; } input[type="text"] { @@ -69,32 +83,61 @@ input[type="text"] { border-radius: 4px; padding: 0.5rem 1rem; border: 1px solid black; - max-width: 200px; + max-width: 80%; +} + +.search-section{ + display: flex; + justify-content: space-around; + flex-flow: row; } .search-results-container{ display: flex; - border: 1px solid black; + padding: 3px; + border-radius: 1px; + box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); + margin: 1rem 0; + justify-content: space-around; + flex-flow: row wrap; + align-items: stretch; + + + .wine-image { + height: 100px; + } + + .wine-placeholder { + height: 100px; + width: 70px; + } + + .wine-info{ + display: flex; + flex-direction: column; + .__details{ + display: flex; + flex-direction: column; + } + } + .wine-link { + color: #333333; + font-family: Arial; + text-decoration: none; + font-weight: bold; + border-bottom: 1px solid #ff5fff; + width: fit-content; + } .buttons{ - margin-left: auto; + display: flex; + align-items: center; order: 2; + justify-content: space-between; + width: 40%; + margin-right: 1rem; } } -.wine-image { - height: 100px; -} - -.wine-placeholder { - height: 100px; - width: 70px; -} - -.wine-info{ - display: flex; - flex-direction: column; -} - \ No newline at end of file diff --git a/src/styles/global.scss b/src/styles/global.scss index 57e3251..cc89a83 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -133,13 +133,17 @@ textarea { 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07); } - &:hover { + &:hover:not(:disabled) { transform: scale(1.02) translateZ(0); &::after { opacity: 1; } } + &:disabled{ + opacity: 0.25; + cursor: not-allowed; + } } .no-margin {