ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set default border color to border-color-gray500

This commit is contained in:
Daniel Egger 2022-10-12 14:16:28 +02:00
parent aeae8318d1
commit c21f347325
18 changed files with 35 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/AppFooter.vue
View File

@ -5,9 +5,7 @@ log.debug("AppFooter created");
</script>
<template>
<footer
class="px-8 py-4 bg-gray-200 border-t border-gray-500 flex flex-col lg:flex-row"
>
<footer class="px-8 py-4 bg-gray-200 border-t flex flex-col lg:flex-row">
<div>@2022 VBV</div>
<div class="lg:ml-8">FAQ</div>
<div class="lg:ml-8">Datenschutzbestimmungen</div>

6
client/src/components/MobileMenu.vue
View File

@ -25,7 +25,7 @@ const clickLink = (to: string) => {
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
<div>
<div>
<div v-if="userStore.loggedIn" class="border-b border-gray-500 -mx-4 px-8 pb-4">
<div v-if="userStore.loggedIn" class="border-b -mx-4 px-8 pb-4">
<div class="-ml-4 flex">
<div v-if="userStore.avatar_url">
<img
@ -47,7 +47,7 @@ const clickLink = (to: string) => {
</div>
</div>
<div>
<div v-if="true" class="mt-6 pb-6 border-b border-gray-500">
<div v-if="true" class="mt-6 pb-6 border-b">
<h4 class="text-gray-900 text-sm">Kurs: Versicherungsvermittler/in</h4>
<ul class="mt-6">
<li>
@ -64,7 +64,7 @@ const clickLink = (to: string) => {
</li>
</ul>
</div>
<div class="mt-6 pb-6 border-b border-gray-500">
<div class="mt-6 pb-6 border-b">
<ul>
<li>Shop</li>
<li class="mt-6">

4
client/src/components/competences/CompetenceDetail.vue
View File

@ -20,7 +20,7 @@ const togglePerformanceCriteria = () => {
<template>
<div>
<div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
<div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
<div class="mb-4 flex flex-row justify-between items-center">
<h2 class="text-large">
{{ competence.competence_id }} {{ competence.title }}
@ -45,7 +45,7 @@ const togglePerformanceCriteria = () => {
<li
v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
:key="performanceCriteria.id"
class="mb-4 pb-4 border-b border-gray-500"
class="mb-4 pb-4 border-b"
>
<PerformanceCriteriaRow
:criteria="performanceCriteria"

4
client/src/components/learningPath/CircleOverview.vue
View File

@ -19,7 +19,7 @@ const props = defineProps<{
Hier zeigen wir dir, was du in diesem Circle lernen wirst.
</p>
<div class="mt-8 p-4 border border-gray-500">
<div class="mt-8 p-4 border">
<h3>Du wirst in der Lage sein, ...</h3>
<ul class="mt-4">
@ -45,7 +45,7 @@ const props = defineProps<{
<li
v-for="jobSituation in circle.job_situations"
:key="jobSituation.id"
class="job-situation border border-gray-500 p-4 text-large flex items-center"
class="job-situation border p-4 text-large flex items-center"
>
{{ jobSituation.value }}
</li>

4
client/src/components/learningPath/LearningContent.vue
View File

@ -26,9 +26,7 @@ const block = computed(() => {
<template>
<div v-if="block">
<nav
class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500"
>
<nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
<button
type="button"
class="btn-text inline-flex items-center px-3 py-2"

5
client/src/components/learningPath/LearningSequence.vue
View File

@ -93,10 +93,7 @@ const learningSequenceBorderClass = computed(() => {
<div>{{ humanizeDuration(learningSequence.minutes) }}</div>
</div>
<div
class="bg-white px-4 lg:px-6 border border-gray-500"
:class="learningSequenceBorderClass"
>
<div class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
<div
v-for="learningUnit in learningSequence.learningUnits"
:id="learningUnit.slug"

8
client/src/components/learningPath/SelfEvaluation.vue
View File

@ -33,9 +33,7 @@ function handleContinue() {
<template>
<div v-if="learningUnit">
<nav
class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500"
>
<nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
<button
type="button"
class="btn-text inline-flex items-center px-3 py-2"
@ -71,7 +69,7 @@ function handleContinue() {
Lies die folgende Aussage und bewerte sie:
</p>
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
<h2 class="heading-2">
{{ currentQuestion.competence_id }} {{ currentQuestion.title }}
</h2>
@ -82,7 +80,6 @@ function handleContinue() {
:class="{
'border-green-500': currentQuestion.completion_status === 'success',
'border-2': currentQuestion.completion_status === 'success',
'border-gray-500': currentQuestion.completion_status !== 'success',
}"
data-cy="success"
@click="circleStore.markCompletion(currentQuestion, 'success')"
@ -95,7 +92,6 @@ function handleContinue() {
:class="{
'border-orange-500': currentQuestion.completion_status === 'fail',
'border-2': currentQuestion.completion_status === 'fail',
'border-gray-500': currentQuestion.completion_status !== 'fail',
}"
data-cy="fail"
@click="circleStore.markCompletion(currentQuestion, 'fail')"

2
client/src/components/mediaLibrary/LinkCard.vue
View File

@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
</script>
<template>
<div class="border-gray-500 border flex flex-col lg:flex-row p-4 items-center">
<div class="border flex flex-col lg:flex-row p-4 items-center">
<img class="mr-6" :src="icon" />
<div>
<h4 class="mb-2 text-bold">{{ title }}</h4>

2
client/src/components/ui/ItDropdownSelect.vue
View File

@ -40,7 +40,7 @@ const dropdownSelected = computed({
<Listbox v-model="dropdownSelected" as="div">
<div class="mt-1 relative w-full">
<ListboxButton
class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold"
class="bg-white relative w-full border pl-5 pr-10 py-3 text-left cursor-default font-bold"
>
<span class="block truncate">{{ dropdownSelected.name }}</span>
<span

4
client/src/pages/LoginPage.vue
View File

@ -35,7 +35,7 @@ const userStore = useUserStore();
v-model="state.username"
type="text"
name="username"
class="py-2 px-3 border border-gray-500 mt-1 block w-96 max-w-full"
class="py-2 px-3 border mt-1 block w-96 max-w-full"
/>
</div>
<div class="mb-4">
@ -45,7 +45,7 @@ const userStore = useUserStore();
v-model="state.password"
type="password"
name="password"
class="py-2 px-3 border border-gray-500 mt-1 block w-96 max-w-full"
class="py-2 px-3 border mt-1 block w-96 max-w-full"
/>
</div>

12
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -62,12 +62,12 @@ const countStatus = computed(() => {
</div>
<div class="bg-white p-8 mb-8">
<div>
<h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
<h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
<ul>
<li
v-for="competence in lastUpdatedCompetences"
:key="competence.id"
class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
class="py-4 flex flex-col lg:flex-row lg:items-center border-b last:mb-8"
>
<p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
{{ competence.competence_id }} {{ competence.title }}
@ -95,14 +95,14 @@ const countStatus = computed(() => {
<ul
class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
>
<li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
<li class="inline-block mb-4 lg:mb-0 lg:border-r lg: flex-1">
<h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
<div class="flex flex-row items-center">
<it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
<p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
</div>
</li>
<li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
<li class="inline-block mb-4 lg:mb-0 lg:border-r lg: flex-1">
<h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
<div class="flex flex-row items-center">
<it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
@ -130,7 +130,7 @@ const countStatus = computed(() => {
</router-link>
</div>
<div class="bg-white p-8">
<div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
<div class="border-b flex flex-row items-center pb-4 mb-4">
<it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
<h3>«Das muss ich nochmals anschauen»</h3>
</div>
@ -138,7 +138,7 @@ const countStatus = computed(() => {
<li
v-for="criteria in failedCriteria"
:key="criteria.id"
class="mb-4 pb-4 border-b border-gray-500"
class="mb-4 pb-4 border-b"
>
<PerformanceCriteriaRow :criteria="criteria"></PerformanceCriteriaRow>
</li>

6
client/src/pages/competence/PerformanceCriteriaPage.vue
View File

@ -39,9 +39,7 @@ const shownCriteria = computed(() => {
></ItDropdownSelect>
</div>
<div class="bg-white p-8">
<div
class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"
>
<div class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4">
<button
:class="{ 'bg-gray-200': activeState === 'fail' }"
class="flex flex-row items-center py-4 px-2 mr-6"
@ -71,7 +69,7 @@ const shownCriteria = computed(() => {
<li
v-for="criteria in shownCriteria"
:key="criteria.id"
class="mb-4 pb-4 border-b border-gray-500"
class="mb-4 pb-4 border-b"
>
<PerformanceCriteriaRow
:criteria="criteria"

6
client/src/pages/learningPath/CirclePage.vue
View File

@ -102,7 +102,7 @@ onMounted(async () => {
<CircleDiagram></CircleDiagram>
</div>
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">
<div class="border-t-2 mt-4 lg:hidden">
<div
class="mt-4 inline-flex items-center"
@click="circleStore.page = 'OVERVIEW'"
@ -117,7 +117,7 @@ onMounted(async () => {
</div>
<div class="hidden lg:block">
<div class="block border border-gray-500 mt-8 p-6">
<div class="block border mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
<div class="leading-relaxed mt-4">
{{ circleStore.circle?.description }}
@ -131,7 +131,7 @@ onMounted(async () => {
</button>
</div>
<div class="expert border border-gray-500 mt-8 p-6">
<div class="expert border mt-8 p-6">
<h3 class="text-blue-dark">Hast du Fragen?</h3>
<div class="leading-relaxed mt-4">
Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.

18
client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
View File

@ -116,9 +116,6 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
content_collection.value.contents[0].type
),
'border-t': !displayAsCard(content_collection.value.contents[0].type),
'border-gray-500': !displayAsCard(
content_collection.value.contents[0].type
),
'mb-6': hasMoreItemsForType(
content_collection.value.contents[0].type,
content_collection.value.contents
@ -141,10 +138,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
:link-text="mediaItem.value.link_display_text"
:open-window="mediaItem.value.open_window"
/>
<div
v-else
class="flex items-center justify-between border-b border-gray-500 py-4"
>
<div v-else class="flex items-center justify-between border-b py-4">
<h4 class="text-bold">{{ mediaItem.value.title }}</h4>
<media-link
:blank="mediaItem.value.open_window"
@ -175,12 +169,4 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
</div>
</template>
<style scoped>
.it-icon-hf {
color: blue;
}
.it-icon-hf > * {
@apply m-auto;
}
</style>
<style scoped></style>

6
client/src/pages/mediaLibrary/MLCategoryIndexPage.vue
View File

@ -43,8 +43,4 @@ watch(dropdownSelected, (newValue) =>
</div>
</template>
<style scoped>
.it-icon-hf > * {
@apply m-auto;
}
</style>
<style scoped></style>

10
client/src/pages/mediaLibrary/MLMediaListPage.vue
View File

@ -86,12 +86,4 @@ const mediaList = computed(() => {
</div>
</template>
<style scoped>
.it-icon-hf {
color: blue;
}
.it-icon-hf > * {
@apply m-auto;
}
</style>
<style scoped></style>

2
client/src/pages/mediaLibrary/MLParentPage.vue
View File

@ -24,7 +24,7 @@ onMounted(async () => {
<template>
<div class="bg-gray-200">
<nav class="px-6 py-4 border-b border-gray-500 bg-white">
<nav class="px-6 py-4 border-b bg-white">
<ul v-if="mediaLibraryStore.mediaLibraryPage" class="flex flex-col lg:flex-row">
<li>
<router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">

3
client/tailwind.config.js
View File

@ -24,6 +24,9 @@ module.exports = {
"url('/static/icons/icon-handlungsfelder-overview.svg')",
"lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
},
borderColor: (theme) => ({
DEFAULT: theme("colors.gray.500"),
}),
},
colors: colors,
},