Skip to content

Commit

Permalink
Move all styling to theme.scss
Browse files Browse the repository at this point in the history
  • Loading branch information
@sadiqkhoja
sadiqkhoja committed Mar 15, 2024
1 parent 97d6173 commit 6778e4b
Show file tree
Hide file tree
Showing 7 changed files with 271 additions and 287 deletions.
60 changes: 0 additions & 60 deletions packages/ui-vue/src/components/FormMenuBar.vue
View file

This file was deleted.

178 changes: 50 additions & 128 deletions packages/ui-vue/src/components/OdkForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,53 @@
<div class="odk-form">
<div class="form-wrapper">
<FormMenuBar />
<Card class="form-title">
<template #content>
<h1>Health Survey</h1>
</template>
</Card>
<OdkFormHeader title="Health Survey" />

<!-- use card for no title and no collapsing -->
<Card>
<template #content>
<div class="flex flex-column gap-5">
<div class="flex flex-column gap-2">
<label for="username">1. What's your first name? <span>*</span></label>
<InputText id="username" aria-describedby="username-help" variant="filled" />
<OdkPanel :level="0">
<div class="flex flex-column gap-2">
<label for="username">1. What's your first name? <span>*</span></label>
<InputText id="username" aria-describedby="username-help" variant="filled" />
</div>

<div class="flex flex-column gap-2">
<label for="username">2. What's your last name? <span>*</span></label>
<InputText id="username" aria-describedby="username-help" variant="filled" />
</div>
</OdkPanel>

<OdkPanel :level="0" title="Background">
<div class="flex flex-column gap-3">
<label for="username">1. Which country are you currently residing in? <span>*</span></label>
<Dropdown v-model="selectedCountry" :options="countries" option-label="name" placeholder="Select country" class="w-20rem" />
</div>
</OdkPanel>

<OdkPanel :level="0" title="Repeats">
<OdkPanel :level="1" title="Date 1" :more="true">
<div class="flex flex-column gap-2">
<label for="username">1. Enter the date?</label>
<div>
<Calendar v-model="someDate" show-icon icon-display="input" />
</div>

</div>
<OdkPanel :level="2" title="Nested repeat" :more="true">
<div class="flex flex-column gap-2">
<label for="username">2. What's your last name? <span>*</span></label>
<InputText id="username" aria-describedby="username-help" variant="filled" />
<label for="username">1. Enter the date?</label>
<div>
<Calendar v-model="someDate" show-icon icon-display="input" />
</div>
</div>
</div>
</template>
</Card>

<!-- use panel for groups/repeats with title -->
<Panel header="Header" toggleable :collapsed="panelState" :pt="panelPt">
<template #header>
<div class="group-title" role="button" @click="toggle()">
<h2 class="inline">
<span :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" /> Background
</h2>
</div>
</template>
<template #default>
<div class="flex flex-column gap-5 group-content">
<div class="flex flex-column gap-3">
<label for="username">1. Which country are you currently residing in? <span>*</span></label>
<Dropdown v-model="selectedCountry" :options="countries" option-label="name" placeholder="Select country" class="w-20rem" />
</OdkPanel>
</OdkPanel>
<OdkPanel :level="1" title="Date 2" :more="true">
<div class="flex flex-column gap-2">
<label for="username">1. Enter the date?</label>
<div>
<Calendar v-model="someDate" show-icon icon-display="input" />
</div>
</div>
</template>
</Panel>

<Panel header="Header" toggleable :collapsed="panelState2" :pt="panelPt">
<template #header>
<div class="group-title" role="button" @click="toggle2()">
<h2 class="inline">
<span :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" /> Repeats
</h2>
</div>
</template>
<template #default>
<div class="flex flex-column gap-5 group-content">
<OdkGroup :level="1" title="Date 1" />
<OdkGroup :level="0" title="Date 2" />
</div>
</template>
</Panel>
</OdkPanel>
</OdkPanel>

<div class="footer flex justify-content-end flex-wrap gap-3">
<Button label="Save as draft" severity="secondary" rounded raised />
Expand All @@ -69,91 +59,23 @@
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Card from 'primevue/card';
import InputText from 'primevue/inputtext'
import Panel from 'primevue/panel';
import Button from 'primevue/button';
import Calendar from 'primevue/calendar';
import Dropdown from 'primevue/dropdown';
import Menu from 'primevue/menu';
import FormMenuBar from './FormMenuBar.vue';
import OdkGroup from './OdkGroup.vue';
defineProps<{ xform: string }>();
const panelState = ref(false);
const toggle = () => {
panelState.value = !panelState.value;
}
const panelPt = {
toggler: {
style: 'display:none;'
}
};
import InputText from 'primevue/inputtext';
import { ref } from 'vue';
import OdkFormHeader from './OdkFormHeader.vue';
import FormMenuBar from './OdkMenuBar.vue';
import OdkPanel from './OdkPanel.vue';
const panelState2 = ref(false);
const toggle2 = () => {
panelState2.value = !panelState2.value;
}
defineProps<{ xform: string }>();
const selectedCountry = ref('');
const countries = [
{ name: 'Canada', code: 'ca' },
{ name: 'Pakistan', code: 'pk' },
{ name: 'US', code: 'us' }
]
</script>

<style lang="scss" scoped>
.odk-form {
width: 100%;
.form-wrapper {
max-width: 800px;
margin: 10px auto;
.form-title{
border-top: none;
:deep(.p-card-content){
padding: 0 10px;
h1 {
margin: 10px 0;
}
}
}
label span {
color: var(--red-500); // TODO maybe theme should export color of danger / error
}
.footer {
margin-top: 20px;
button{
min-width: 160px;
}
}
}
}
.p-card {
margin-top: 20px;
padding: 10px 15px;
}
.p-panel {
margin-top: 20px;
padding: 10px 15px;
}
.group-title {
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.group-content {
padding-top: 10px;
}
</style>
const someDate = ref('');
</script>
13 changes: 13 additions & 0 deletions packages/ui-vue/src/components/OdkFormHeader.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<Card class="form-title">
<template #content>
<h1>{{ title }}</h1>
<!-- last saved timestamp -->
</template>
</Card>
</template>

<script setup lang="ts">
import Card from 'primevue/card';
defineProps<{title: string}>();
</script>
96 changes: 0 additions & 96 deletions packages/ui-vue/src/components/OdkGroup.vue
View file

This file was deleted.

Loading

0 comments on commit 6778e4b

Please sign in to comment.