jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Code cleanup per Adam comments.

Browse source
This commit is contained in:
Bryan Mauger 2022-10-13 09:09:42 -04:00
parent d0ba0aa8ee
commit 204807bf79
1 changed files with 43 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/common-components/date-picker/date-picker.vue
View file

@ -16,175 +16,175 @@
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div> <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div> <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-25" /> <input disabled type="radio" name="day-of-month" id="sep-25" />
<label class="past-day" for="sep-25"><span>25</span></label> <label class="past-day" for="sep-25"><span>25</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-26" /> <input disabled type="radio" name="day-of-month" id="sep-26" />
<label class="past-day" for="sep-26"><span>26</span></label> <label class="past-day" for="sep-26"><span>26</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-27" /> <input disabled type="radio" name="day-of-month" id="sep-27" />
<label class="past-day" for="sep-27"><span>27</span></label> <label class="past-day" for="sep-27"><span>27</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-28" /> <input disabled type="radio" name="day-of-month" id="sep-28" />
<label class="past-day" for="sep-28"><span>28</span></label> <label class="past-day" for="sep-28"><span>28</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-29" /> <input disabled type="radio" name="day-of-month" id="sep-29" />
<label class="past-day" for="sep-29"><span>29</span></label> <label class="past-day" for="sep-29"><span>29</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-30" /> <input disabled type="radio" name="day-of-month" id="sep-30" />
<label class="past-day" for="sep-30"><span>30</span></label> <label class="past-day" for="sep-30"><span>30</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-1" /> <input type="radio" name="day-of-month" id="oct-1" />
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span> <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span>
<span class="sr-only">October 1st</span> <span class="sr-only">October 1st</span>
</label> </label>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div> <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-2" /> <input type="radio" name="day-of-month" id="oct-2" />
<label class="selectable-day" for="oct-2"><span>2</span></label> <label class="selectable-day" for="oct-2"><span>2</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-3" /> <input type="radio" name="day-of-month" id="oct-3" />
<label class="selectable-day" for="oct-3"><span>3</span></label> <label class="selectable-day" for="oct-3"><span>3</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-4" /> <input type="radio" name="day-of-month" id="oct-4" />
<label class="selectable-day" for="oct-4"><span>4</span></label> <label class="selectable-day" for="oct-4"><span>4</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-5" /> <input type="radio" name="day-of-month" id="oct-5" />
<label class="selectable-day" for="oct-5"><span>5</span></label> <label class="selectable-day" for="oct-5"><span>5</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-6" /> <input type="radio" name="day-of-month" id="oct-6" />
<label class="selectable-day" for="oct-6"><span>6</span></label> <label class="selectable-day" for="oct-6"><span>6</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-7" /> <input type="radio" name="day-of-month" id="oct-7" />
<label class="selectable-day" for="oct-7"><span>7</span></label> <label class="selectable-day" for="oct-7"><span>7</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-8" /> <input type="radio" name="day-of-month" id="oct-8" />
<label class="selectable-day" for="oct-8"><span>8</span></label> <label class="selectable-day" for="oct-8"><span>8</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-9" /> <input type="radio" name="day-of-month" id="oct-9" />
<label class="selectable-day" for="oct-9"><span>9</span></label> <label class="selectable-day" for="oct-9"><span>9</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-10" /> <input type="radio" name="day-of-month" id="oct-10" />
<label class="selectable-day" for="oct-10"><span>10</span></label> <label class="selectable-day" for="oct-10"><span>10</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-11" /> <input type="radio" name="day-of-month" id="oct-11" />
<label class="selectable-day" for="oct-11"><span>11</span></label> <label class="selectable-day" for="oct-11"><span>11</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-12" /> <input type="radio" name="day-of-month" id="oct-12" />
<label class="selectable-day" for="oct-12"><span>12</span></label> <label class="selectable-day" for="oct-12"><span>12</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-13" /> <input type="radio" name="day-of-month" id="oct-13" />
<label class="selectable-day" for="oct-13"><span>13</span></label> <label class="selectable-day" for="oct-13"><span>13</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-14" /> <input type="radio" name="day-of-month" id="oct-14" />
<label class="selectable-day" for="oct-14"><span>14</span></label> <label class="selectable-day" for="oct-14"><span>14</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-15" /> <input type="radio" name="day-of-month" id="oct-15" />
<label class="selectable-day" for="oct-15"><span>15</span></label> <label class="selectable-day" for="oct-15"><span>15</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-16" /> <input type="radio" name="day-of-month" id="oct-16" />
<label class="selectable-day" for="oct-16"><span>16</span></label> <label class="selectable-day" for="oct-16"><span>16</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-17" /> <input type="radio" name="day-of-month" id="oct-17" />
<label class="selectable-day" for="oct-17"><span>17</span></label> <label class="selectable-day" for="oct-17"><span>17</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-18" /> <input type="radio" name="day-of-month" id="oct-18" />
<label class="selectable-day" for="oct-18"><span>18</span></label> <label class="selectable-day" for="oct-18"><span>18</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-19" /> <input type="radio" name="day-of-month" id="oct-19" />
<label class="selectable-day" for="oct-19"><span>19</span></label> <label class="selectable-day" for="oct-19"><span>19</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-20" /> <input type="radio" name="day-of-month" id="oct-20" />
<label class="selectable-day" for="oct-20"><span>20</span></label> <label class="selectable-day" for="oct-20"><span>20</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-21" /> <input type="radio" name="day-of-month" id="oct-21" />
<label class="selectable-day" for="oct-21"><span>21</span></label> <label class="selectable-day" for="oct-21"><span>21</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-22" /> <input type="radio" name="day-of-month" id="oct-22" />
<label class="selectable-day" for="oct-22"><span>22</span></label> <label class="selectable-day" for="oct-22"><span>22</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-23" /> <input type="radio" name="day-of-month" id="oct-23" />
<label class="selectable-day" for="oct-23"><span>23</span></label> <label class="selectable-day" for="oct-23"><span>23</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-24" /> <input type="radio" name="day-of-month" id="oct-24" />
<label class="selectable-day" for="oct-24"><span>24</span></label> <label class="selectable-day" for="oct-24"><span>24</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-25" /> <input type="radio" name="day-of-month" id="oct-25" />
<label class="selectable-day" for="oct-25"><span>25</span></label> <label class="selectable-day" for="oct-25"><span>25</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-26" /> <input type="radio" name="day-of-month" id="oct-26" />
<label class="selectable-day" for="oct-26"><span>26</span></label> <label class="selectable-day" for="oct-26"><span>26</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-27" /> <input type="radio" name="day-of-month" id="oct-27" />
<label class="selectable-day" for="oct-27"><span>27</span></label> <label class="selectable-day" for="oct-27"><span>27</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-28" /> <input type="radio" name="day-of-month" id="oct-28" />
<label class="selectable-day" for="oct-28"><span>28</span></label> <label class="selectable-day" for="oct-28"><span>28</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-29" /> <input type="radio" name="day-of-month" id="oct-29" />
<label class="selectable-day" for="oct-29"><span>29</span></label> <label class="selectable-day" for="oct-29"><span>29</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="nov-30" /> <input type="radio" name="day-of-month" id="nov-30" />
<label class="selectable-day" for="nov-30"><span>30</span></label> <label class="selectable-day" for="nov-30"><span>30</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-31" /> <input type="radio" name="day-of-month" id="oct-31" />
<label class="selectable-day" for="oct-31"><span>31</span></label> <label class="selectable-day" for="oct-31"><span>31</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="nov-1" /> <input type="radio" name="day-of-month" id="nov-1" />
<label class="future-day selectable-day" for="nov-1"><span>1</span></label> <label class="future-day selectable-day" for="nov-1"><span>1</span></label>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div> <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="nov-2" /> <input type="radio" name="day-of-month" id="nov-2" />
<label class="future-day selectable-day" for="nov-2"><span>2</span></label> <label class="future-day selectable-day" for="nov-2"><span>2</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="nov-3" /> <input type="radio" name="day-of-month" id="nov-3" />
<label class="future-day selectable-day" for="nov-3"><span>3</span></label> <label class="future-day selectable-day" for="nov-3"><span>3</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="nov-4" /> <input type="radio" name="day-of-month" id="nov-4" />
<label class="future-day selectable-day" for="nov-4"><span>4</span></label> <label class="future-day selectable-day" for="nov-4"><span>4</span></label>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="nov-5" /> <input type="radio" name="day-of-month" id="nov-5" />
<label class="future-day selectable-day" for="nov-5"><span>5</span></label> <label class="future-day selectable-day" for="nov-5"><span>5</span></label>
</div> </div>
</div> </div>
@ -295,7 +295,7 @@ export default {
outline: none; outline: none;
input[type="radio"] { input[type="radio"] {
position: absolute;; //override bootstrap position: absolute; //override bootstrap
height: 0; height: 0;
opacity: 0; opacity: 0;