Skip to content

Commit

Permalink
fix formatting and add border for selected tile
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurenpudz
laurenpudz committed Jan 12, 2025
1 parent acdd84a commit 8a9145c
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 61 deletions.
112 changes: 59 additions & 53 deletions client/src/components/BingoTile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,90 +2,96 @@
import { computed } from 'vue'
const props = defineProps<{
type: "connect" | "understand" | "act"
text: string
status: "not started" | "started" | "completed"
selected: boolean
type: 'connect' | 'understand' | 'act'
text: string
status: 'not started' | 'started' | 'completed'
selected: boolean
}>()
const icon = computed(() => {
switch (props.type) {
case "act":
return "walking.svg"
case "understand":
return "brain.svg"
default:
return "link.svg"
}
switch (props.type) {
case 'act':
return 'walking.svg'
case 'understand':
return 'brain.svg'
default:
return 'link.svg'
}
})
const backgroundColour = computed(() => {
switch (props.status) {
case "started":
return "bg-primaryPink"
case "completed":
return "bg-lightBlue"
default:
return "bg-creamWhite"
}
switch (props.status) {
case 'started':
return 'bg-primaryPink'
case 'completed':
return 'bg-lightBlue'
default:
return 'bg-creamWhite'
}
})
const textColour = computed(() => {
switch (props.status) {
case "started":
case "completed":
return "text-primaryWhite"
default:
return "text-primaryBlack"
}
switch (props.status) {
case 'completed':
return 'text-primaryWhite'
default:
return 'text-primaryBlack'
}
})
const iconBackground = computed(() => {
switch (backgroundColour.value) {
case "bg-creamWhite":
return "dark"
default:
return "light"
}
switch (backgroundColour.value) {
case 'bg-creamWhite':
return 'dark'
default:
return 'light'
}
})
</script>

<template>
<div :class="[backgroundColour, textColour]" class="outer-tile rounded-lg d-flex flex-column align-center ">
<v-img class="icon" :class="iconBackground" :src="icon" />
<p class="tile-text text-center font-weight-bold">
{{ text }}
</p>

</div>
<div
:class="[backgroundColour, textColour, selected ? 'border-selected' : 'border-subtle']"
class="outer-tile rounded-lg d-flex flex-column align-center"
>
<v-img class="icon" :class="iconBackground" :src="icon" />
<p class="w-100 tile-text text-center font-weight-bold overflow-x-hidden overflow-hidden">
{{ text }}
</p>
</div>
</template>

<style scoped>
.outer-tile {
height: 5rem;
width: 5rem;
border: #4F4F4F 0.1rem solid;
padding: 0.5rem;
height: 5rem;
width: 5rem;
padding-bottom: 0.2rem;
}
.border-subtle {
border: #4f4f4f 0.05rem solid;
}
.border-selected {
border: #4f4f4f 0.15rem solid;
box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem #4f4f4f;
}
.tile-text {
font-size: 0.6rem;
line-height: 1.2
font-size: 0.6rem;
line-height: 1.2;
}
.icon {
width: 40%;
height: 70%;
width: 40%;
height: 70%;
}
.icon.light {
filter: invert();
filter: invert();
}
.icon.dark {
filter: contrast(100%) brightness(0%);
filter: contrast(100%) brightness(0%);
}
</style>
55 changes: 47 additions & 8 deletions client/src/views/BlingoView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,57 @@ import BlingoTile from '@/components/BingoTile.vue'
</script>

<template>
<div class="d-flex flex-column align-center mt-5">
<div class="d-flex ga-1">
<BlingoTile type="connect" text="placeholder text" status="started" selected=True />
<BlingoTile type="act" text="placeholder text" status="not started" selected="false" />
<BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
<BlingoTile type="connect" text="placeholder text" status="completed" selected="true" />
<BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
<BlingoTile type="act" text="placeholder text" status="started" :selected="false" />
<BlingoTile
type="understand"
text="placeholder text"
status="not started"
:selected="false"
/>
<BlingoTile type="connect" text="placeholder text" status="completed" :selected="false" />
</div>
<div class="d-flex ga-1 mt-1">
<BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
<BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
<BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
<BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
<BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
<BlingoTile
type="understand"
text="placeholder text"
status="not started"
:selected="false"
/>
<BlingoTile type="act" text="placeholder text" status="completed" :selected="false" />
<BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
</div>
<div class="d-flex ga-1 mt-1">
<BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
<BlingoTile type="connect" text="placeholder text" status="not started" :selected="true" />
<BlingoTile
type="understand"
text="placeholder text"
status="not started"
:selected="false"
/>
<BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
</div>
<div class="d-flex ga-1 mt-1">
<BlingoTile
type="understand"
text="placeholder text"
status="not started"
:selected="false"
/>
<BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
<BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
<BlingoTile
type="understand"
text="placeholder text"
status="not started"
:selected="false"
/>
</div>
</div>
</template>

<style scoped></style>

0 comments on commit 8a9145c

Please sign in to comment.