imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Radio design done.

Browse Source
This commit is contained in:
chiayin
2023-06-13 17:54:48 +08:00
parent 115626da65
commit 490a2442d8
3 changed files with 46 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/vendors.css
View File

@@ -59,3 +59,20 @@
.p-slider.p-slider-horizontal { .p-slider.p-slider-horizontal {
@apply !h-1 @apply !h-1
} }
/* radio */
/* inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary */
/* p-radiobutton
p-radiobutton-box
p-radiobutton-icon */
.p-radiobutton {
@apply !align-text-top
}
.p-radiobutton-box {
@apply !bg-neutral-10
}
.p-radiobutton-box .p-highlight:not(.p-disabled):hover {
@apply !bg-neutral-10
}
.p-radiobutton-icon {
@apply !bg-primary
}

42
src/components/Discover/SidebarFilter.vue
View File

@@ -12,51 +12,51 @@
<div class="space-y-2 mr-4 w-48 text-sm"> <div class="space-y-2 mr-4 w-48 text-sm">
<div> <div>
<p class="h2">Filter Type</p> <p class="h2">Filter Type</p>
<div v-for="(item, index) in selectFilter['Filter Type']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Filter Type']" :key="index">
<RadioButton v-model="selectValue[0]" :inputId="item + index" name="Filter Type" :value="item" /> <RadioButton v-model="selectValue[0]" :inputId="item + index" name="Filter Type" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
<div v-show="selectValue[0] === 'Sequence'"> <div v-show="selectValue[0] === 'Sequence'">
<p class="h2">Activity Sequence</p> <p class="h2">Activity Sequence</p>
<div v-for="(item, index) in selectFilter['Activity Sequence']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Activity Sequence']" :key="index">
<RadioButton v-model="selectValue[1]" :inputId="item + index" name="Activity Sequence" :value="item" /> <RadioButton v-model="selectValue[1]" :inputId="item + index" name="Activity Sequence" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
<div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / End activity'"> <div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / End activity'">
<p class="h2">Start & End</p> <p class="h2">Start & End</p>
<div v-for="(item, index) in selectFilter['Start & End']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Start & End']" :key="index">
<RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" /> <RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
<div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'"> <div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'">
<p class="h2">Mode</p> <p class="h2">Mode</p>
<div v-for="(item, index) in selectFilter['Mode']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Mode']" :key="index">
<RadioButton v-model="selectValue[3]" :inputId="item + index" name="Mode" :value="item" /> <RadioButton v-model="selectValue[3]" :inputId="item + index" name="Mode" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
<div v-show="selectValue[0] === 'Attributes'"> <div v-show="selectValue[0] === 'Attributes'">
<p class="h2">Mode</p> <p class="h2">Mode</p>
<div v-for="(item, index) in selectFilter['ModeAtt']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['ModeAtt']" :key="index">
<RadioButton v-model="selectValue[4]" :inputId="item + index" name="ModeAtt" :value="item" /> <RadioButton v-model="selectValue[4]" :inputId="item + index" name="ModeAtt" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
<div> <div>
<p class="h2">Refine</p> <p class="h2">Refine</p>
<div v-for="(item, index) in selectFilter['Refine']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Refine']" :key="index">
<RadioButton v-model="selectValue[5]" :inputId="item + index" name="Refinee" :value="item" /> <RadioButton v-model="selectValue[5]" :inputId="item + index" name="Refinee" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
<div v-show="selectValue[0] === 'Timeframes'"> <div v-show="selectValue[0] === 'Timeframes'">
<p class="h2">Containment</p> <p class="h2">Containment</p>
<div v-for="(item, index) in selectFilter['Containment']" :key="index" class="flex align-items-center"> <div v-for="(item, index) in selectFilter['Containment']" :key="index">
<RadioButton v-model="selectValue[6]" :inputId="item + index" name="Containment" :value="item" /> <RadioButton v-model="selectValue[6]" :inputId="item + index" name="Containment" :value="item" class="mb-1 mr-2"/>
<label :for="item + index" class="ml-2">{{ item }}</label> <label :for="item + index">{{ item }}</label>
</div> </div>
</div> </div>
</div> </div>

12
src/components/Discover/SidebarView.vue
View File

@@ -43,10 +43,12 @@
<ul class="space-y-2"> <ul class="space-y-2">
<li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')"> <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
<div class="flex items-center w-1/2"> <div class="flex items-center w-1/2">
<input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/> <!-- <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
<label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"> <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
</label> </label>
<span class="inline-block ml-2">Frequency</span> <span class="inline-block ml-2">Frequency</span> -->
<RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2"/>
<label>Frequency</label>
</div> </div>
<div class="w-1/2"> <div class="w-1/2">
<select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'"> <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
@@ -56,9 +58,11 @@
</li> </li>
<li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')"> <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
<div class="flex items-center w-1/2"> <div class="flex items-center w-1/2">
<input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" /> <!-- <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
<label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label> <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
<span class="inline-block ml-2">Duration</span> <span class="inline-block ml-2">Duration</span> -->
<RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2"/>
<label>Duration</label>
</div> </div>
<div class="w-1/2"> <div class="w-1/2">
<select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'"> <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">