diff --git a/src/components/AllWinesPage.vue b/src/components/AllWinesPage.vue index beb26ac..f042fbd 100644 --- a/src/components/AllWinesPage.vue +++ b/src/components/AllWinesPage.vue @@ -5,11 +5,6 @@
-
- Vunnet av: - - {{ winner }} - -
Vinnende lodd: @@ -18,6 +13,11 @@ {{wine.green == undefined ? 0 : wine.green}} {{wine.yellow == undefined ? 0 : wine.yellow}}
+
+ Vunnet av: + - {{ winner }} + +
@@ -62,26 +62,32 @@ h1 { display: flex; flex-wrap: wrap; justify-content: space-evenly; - margin: 0 2rem; + align-items: center; + width: 100%; + margin: 0 auto; - @media(min-width: 1500px) { - max-width: 1500px; - margin: 0 auto; - } + @include desktop { + margin: 0 2rem; - @include mobile { - flex-direction: column; + > div { + max-width: max-content; + } } } .winners-container { display: flex; - flex-direction: column; + flex-direction: row; + margin-top: 2rem; @include mobile { flex-direction: row; - width: 100%; - justify-content: space-between; + width: max-content; + margin: 0.75rem; + + &:not(&:first-child) { + margin-top: 0.5rem; + } } } @@ -94,7 +100,7 @@ h1 { .name-wins { display: flex; flex-direction: column; - + width: max-content; .names { margin-left: 0.5rem; @@ -114,7 +120,7 @@ h1 { margin-left: -2px; // offset span.color-win margin } @include desktop { - margin-top: 1rem; + width: 30%; } } diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue index e1a051d..6171ac3 100644 --- a/src/components/RegisterPage.vue +++ b/src/components/RegisterPage.vue @@ -393,6 +393,8 @@ hr { } .edit-container { margin-top: 2rem; + display: flex; + justify-content: center; } .edit { width: 100%; @@ -405,10 +407,13 @@ hr { margin-bottom: 2rem; } .winner-element { - padding-top: 1.2rem; display: flex; flex-direction: row; + @include desktop { + margin-top: 1.5rem; + } + @include mobile { width: 100%; } diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue index 19c1305..e85d578 100644 --- a/src/ui/Wine.vue +++ b/src/ui/Wine.vue @@ -1,23 +1,23 @@ @@ -37,6 +37,15 @@ export default { required: false, default: false } + }, + methods: { + shouldUseInlineSlot() { + return this.inlineSlot && window.innerWidth > 768 + }, + hostname(url) { + const urlHostname = new URL(url).hostname + return urlHostname.split(".")[(urlHostname.match(/\./g) || []).length - 1] + } } }; @@ -76,13 +85,11 @@ h2 { } } -.container { +.wine-container { margin-bottom: 30px; - display: flex; - flex-direction: row; - flex-wrap: wrap; font-family: Arial; width: 100%; + max-width: max-content; &.big { align-items: center; @@ -93,17 +100,6 @@ h2 { } } -.wine-container { - width: 100%; - // display: flex; - // flex-direction: row; - // flex-wrap: wrap; - - >* { - // flex: 1 1 auto; - } -} - .left { float: left; margin-right: 3rem; @@ -114,10 +110,15 @@ h2 { } .right { + margin-bottom: 2rem; display: flex; flex-direction: column; height: max-content; - margin-bottom: 2rem; + + > div:first-of-type { + display: flex; + flex-direction: column; + } } a, diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue index 27e1687..78f6e7c 100644 --- a/src/ui/Wines.vue +++ b/src/ui/Wines.vue @@ -25,8 +25,8 @@
-
X
+
X
@@ -178,7 +178,11 @@ export default { justify-content: center; align-items: center; @include desktop { - width: 60vw; + width: 80vw; + } + + > *:first-child { + display: flex; } } @@ -212,12 +216,6 @@ h3 { } } } -div { - margin: 0; - font-family: arial; - display: inline-flex; - flex-direction: column; -} ol { padding-left: 1.375rem !important;