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

parent 3777f2c8
......@@ -192,5 +192,3 @@ var focusManager = {
focusFirstInElement: focusFirstInElement,
focusLastInElement: focusLastInElement
};
export.default = focusManager;
......@@ -145,7 +145,7 @@ fieldset {
resize: none;
}
.workTime button[type="submit"], .workTime__button {
.workTime button[type="submit"], .workTime__button, .workTime__button--save {
cursor: pointer;
width: 100%;
border: none;
......@@ -155,7 +155,7 @@ fieldset {
font-size: 15px;
}
.workTime__button{
.workTime__button {
margin-left: 5px;
}
......@@ -176,45 +176,34 @@ fieldset {
.workTime__input:focus,
.workTime__button:focus,
.workTime__button--save:focus,
.close:focus {
outline: 2px solid rgba(82, 157, 236, 0.8);
box-sizing: border-box;
}
.workTimeInner{
.workTimeInner {
display: flex;
margin-top: 0.5rem;
}
.close {
position: absolute;
right: 10px;
top: 10px;
width: 25px;
height: 25px;
right: 5px;
top: 0;
opacity: 0.4;
cursor: pointer;
font-size: 48px;
border: none;
box-sizing: border-box;
background: none;
text-decoration: none;
}
.close:hover {
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 {
color: #888;
}
......
......@@ -16,11 +16,10 @@
<div class="container">
<div class="workTime">
<h3>Укажите отработанное время</h3>
<h4>Отслеживайте корректность оставшегося времени.</h4>
<fieldset>
Отработанное время:
<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="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>
......@@ -30,7 +29,7 @@
<fieldset>
Продуктивное время:
<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="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>
......@@ -38,12 +37,13 @@
</div>
</fieldset>
<fieldset>
<button class="workTime__button" id="saveTime" tabindex="11">Сохранить</button>
<button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset>
<a onclick="closeDiv();" class="close" tabindex="12"></a>
<button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
</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.js?22_11_2017"></script>
......@@ -16,34 +16,34 @@
<div class="container">
<div class="workTime">
<h3>Укажите отработанное время</h3>
<h4>Отслеживайте корректность оставшегося времени.</h4>
<fieldset>
Отработанное время:
<div class="workTimeInner">
<input class="workTime__input" id="realworktime" name="realworktime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="1" required autofocus>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#realworktime').value=this.dataset['time']">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="15" onclick="document.querySelector('#realworktime').value=this.dataset['time']">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#realworktime').value=this.dataset['time']">30</button>
<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']" 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="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']" tabindex="5">30</button>
</div>
</fieldset>
<fieldset>
Продуктивное время:
<div class="workTimeInner">
<input id="ProductTime" placeholder="в минутах" title="Время в минутах" type="text" tabindex="2" required>
<button class="workTime__button" data-time="1" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">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="15" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">15</button>
<button class="workTime__button" data-time="30" onclick="document.querySelector('#ProductTime').value=this.dataset['time']">30</button>
<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="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="30" onclick="document.querySelector('#ProductTime').value=this.dataset['time']" tabindex="10">30</button>
</div>
</fieldset>
<fieldset>
<button class="workTime__button" id="saveTime">Сохранить</button>
<button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset>
<a onclick="closeDiv();" class="close"></a>
<button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
</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.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