Saving work time to localStorage for safe page refresh, some markup & style fixes

parent 3777f2c8
...@@ -192,5 +192,3 @@ var focusManager = { ...@@ -192,5 +192,3 @@ var focusManager = {
focusFirstInElement: focusFirstInElement, focusFirstInElement: focusFirstInElement,
focusLastInElement: focusLastInElement focusLastInElement: focusLastInElement
}; };
export.default = focusManager;
...@@ -145,7 +145,7 @@ fieldset { ...@@ -145,7 +145,7 @@ fieldset {
resize: none; resize: none;
} }
.workTime button[type="submit"], .workTime__button { .workTime button[type="submit"], .workTime__button, .workTime__button--save {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
border: none; border: none;
...@@ -155,7 +155,7 @@ fieldset { ...@@ -155,7 +155,7 @@ fieldset {
font-size: 15px; font-size: 15px;
} }
.workTime__button{ .workTime__button {
margin-left: 5px; margin-left: 5px;
} }
...@@ -176,45 +176,34 @@ fieldset { ...@@ -176,45 +176,34 @@ fieldset {
.workTime__input:focus, .workTime__input:focus,
.workTime__button:focus, .workTime__button:focus,
.workTime__button--save:focus,
.close:focus { .close:focus {
outline: 2px solid rgba(82, 157, 236, 0.8); outline: 2px solid rgba(82, 157, 236, 0.8);
box-sizing: border-box;
} }
.workTimeInner{ .workTimeInner {
display: flex; display: flex;
margin-top: 0.5rem;
} }
.close { .close {
position: absolute; position: absolute;
right: 10px; right: 5px;
top: 10px; top: 0;
width: 25px;
height: 25px;
opacity: 0.4; opacity: 0.4;
cursor: pointer; cursor: pointer;
font-size: 48px;
border: none;
box-sizing: border-box;
background: none;
text-decoration: none;
} }
.close:hover { .close:hover {
opacity: 1; opacity: 1;
} }
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 2px;
background-color: #000;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: #888; color: #888;
} }
......
...@@ -16,11 +16,10 @@ ...@@ -16,11 +16,10 @@
<div class="container"> <div class="container">
<div class="workTime"> <div class="workTime">
<h3>Укажите отработанное время</h3> <h3>Укажите отработанное время</h3>
<h4>Отслеживайте корректность оставшегося времени.</h4>
<fieldset> <fieldset>
Отработанное время: Отработанное время:
<div class="workTimeInner"> <div class="workTimeInner">
<input class="workTime__input" id="realworktime" name="realworktime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus> <input class="workTime__input" id="realworktime" name="realworktime" data-time="" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="2">1</button> <button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="2">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="3">5</button> <button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="3">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="4">15</button> <button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="4">15</button>
...@@ -30,7 +29,7 @@ ...@@ -30,7 +29,7 @@
<fieldset> <fieldset>
Продуктивное время: Продуктивное время:
<div class="workTimeInner"> <div class="workTimeInner">
<input id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="6" required> <input class="workTime__input" id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="6" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="7">1</button> <button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="7">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="8">5</button> <button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="8">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="9">15</button> <button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="9">15</button>
...@@ -38,12 +37,13 @@ ...@@ -38,12 +37,13 @@
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<button class="workTime__button" id="saveTime" tabindex="11">Сохранить</button> <button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset> </fieldset>
<a onclick="closeDiv();" class="close" tabindex="12"></a> <button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
</div> </div>
</div> </div>
</div> </div>
<script language="javascript" type="text/javascript" src="js/etersoft/focusManager.js"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script> <script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_11_2017"></script> <script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_11_2017"></script>
...@@ -16,34 +16,34 @@ ...@@ -16,34 +16,34 @@
<div class="container"> <div class="container">
<div class="workTime"> <div class="workTime">
<h3>Укажите отработанное время</h3> <h3>Укажите отработанное время</h3>
<h4>Отслеживайте корректность оставшегося времени.</h4>
<fieldset> <fieldset>
Отработанное время: Отработанное время:
<div class="workTimeInner"> <div class="workTimeInner">
<input class="workTime__input" id="realworktime" name="realworktime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus> <input class="workTime__input" id="realworktime" name="realworktime" data-time="" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']">1</button> <button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="2">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']">5</button> <button class="workTime__button" data-time="5" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="3">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']">15</button> <button class="workTime__button" data-time="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="4">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#realworktime').value=this.dataset['time']">30</button> <button class="workTime__button" data-time="30" onclick="document.querySelector('#realworktime').value=this.dataset['time']" tabindex="5">30</button>
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset>
Продуктивное время: Продуктивное время:
<div class="workTimeInner"> <div class="workTimeInner">
<input id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="2" required> <input class="workTime__input" id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="6" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">1</button> <button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="7">1</button>
<button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">5</button> <button class="workTime__button" data-time="5" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="8">5</button>
<button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">15</button> <button class="workTime__button" data-time="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="9">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">30</button> <button class="workTime__button" data-time="30" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="10">30</button>
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<button class="workTime__button" id="saveTime">Сохранить</button> <button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset> </fieldset>
<a onclick="closeDiv();" class="close"></a> <button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
</div> </div>
</div> </div>
</div> </div>
<script language="javascript" type="text/javascript" src="js/etersoft/focusManager.js"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script> <script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_11_2017"></script> <script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_11_2017"></script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment