diff --git a/client/package.json b/client/package.json
index 4ccc219..e5e308a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
{
"name": "knowyt",
- "version": "2.7",
+ "version": "2.8",
"private": true,
"scripts": {
"lint": "tsc-strict",
diff --git a/client/src/assets/css/components.scss b/client/src/assets/css/components.scss
index 5350819..2ada391 100644
--- a/client/src/assets/css/components.scss
+++ b/client/src/assets/css/components.scss
@@ -1,4 +1,5 @@
@import './colors.scss';
+@import './media.scss';
$font-primary: 'Wendy One';
$font-secondary: 'Dosis';
diff --git a/client/src/assets/css/media.scss b/client/src/assets/css/media.scss
new file mode 100644
index 0000000..4c73005
--- /dev/null
+++ b/client/src/assets/css/media.scss
@@ -0,0 +1,4 @@
+$phone-width: 560px;
+$phone-max-width: 767px;
+$tablet-width: 768px;
+$desktop-min-width: 880px;
diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index a447c95..fa134c5 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -38,9 +38,15 @@ const editEnd = () => {
\ No newline at end of file
diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index fb953c0..56d004a 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -51,7 +51,7 @@ const showQuote = ref(false)
window.setTimeout(() => { showQuote.value = true }, 100)
const showSkipButton = computed(() => game.phase === 'select-quote')
const badgeMap = computed(() => {
- const badgeMap = {} as { [key: string]: number}
+ const badgeMap = {} as { [key: string]: number }
if (game.phase === 'reveal-show-count') {
for (const id in round.revelation.votes) {
badgeMap[id] = round.revelation.votes[id].length
@@ -61,7 +61,7 @@ const badgeMap = computed(() => {
})
const disabledMap = computed(() => {
- const disabledMap = {} as { [key: string]: boolean}
+ const disabledMap = {} as { [key: string]: boolean }
if (game.phase === 'reveal-source') {
for (const id in round.revelation.sources) {
disabledMap[id] = !round.revelation.sources[id]
@@ -71,7 +71,7 @@ const disabledMap = computed(() => {
return disabledMap
})
-const showMap = ref({} as { [key: string]: boolean})
+const showMap = ref({} as { [key: string]: boolean })
sources.forEach((source, index) => {
window.setTimeout(() => {
showMap.value[source.id] = true
@@ -80,6 +80,8 @@ sources.forEach((source, index) => {
diff --git a/client/src/components/TopBar.vue b/client/src/components/TopBar.vue
index 064a33b..2246570 100644
--- a/client/src/components/TopBar.vue
+++ b/client/src/components/TopBar.vue
@@ -76,7 +76,13 @@ const actionLogout = async () => {
padding: 0 16px;
text-align: center;
color: $text-primary-color;
+
}
+ &__username {
+ @media (max-width: $phone-width) {
+ display: none;
+ }
+}
&__actionbar {
flex-grow: 1;
@@ -86,6 +92,12 @@ const actionLogout = async () => {
color: $text-primary-color;
font-size: 24px;
text-align: center;
+
+ @media (max-width: $phone-width) {
+ margin-left: 24px;
+ text-align: left;
+ font-size: 20px;
+ }
}
}
@@ -94,6 +106,10 @@ const actionLogout = async () => {
height: calc(64px - 2 * 16px);
margin: 16px 0;
background-color: $topbar-separator-color;
+
+ @media (max-width: $phone-width) {
+ display: none;
+ }
}
&__logout-button {
@@ -104,6 +120,10 @@ const actionLogout = async () => {
&:hover {
color: $text-primary-hover-color;
}
+
+ @media (max-width: $phone-width) {
+ padding-right: 0;
+ }
}
}
\ No newline at end of file
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 9741c07..a0d2a31 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -57,18 +57,36 @@ body {
display: flex;
width: 100%;
height: 120px;
+
+ @media (max-width: $phone-max-width) {
+ margin: 32px 0 0 0;
+ }
}
&__login,
&__create-team {
width: 320px;
align-self: center;
+
+ @media (max-width: $phone-max-width) {
+ width: auto;
+ }
+ }
+
+ &__create-team {
+ @media (max-width: $phone-max-width) {
+ display: none;
+ }
}
&__separator {
width: 1px;
margin: 0 48px;
border-left: $box-primary-border;
+
+ @media (max-width: $phone-max-width) {
+ display: none;
+ }
}
&__space {
@@ -81,7 +99,7 @@ body {
bottom: 0;
color: #606060;
cursor: pointer;
-
+
&:hover {
color: #c0c0c0;
}