Design improvements
This commit is contained in:
parent
bac46e47ac
commit
d99316aec7
4 changed files with 48 additions and 26 deletions
|
@ -8,6 +8,7 @@
|
||||||
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
|
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
|
||||||
<link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" />
|
<link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" />
|
||||||
<link rel="image_src" href="./res/img/favicon.png" />
|
<link rel="image_src" href="./res/img/favicon.png" />
|
||||||
|
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<script src="js/web/web.js"></script>
|
<script src="js/web/web.js"></script>
|
||||||
<script src="js/engine/DecodeWrittenMorse.js"></script>
|
<script src="js/engine/DecodeWrittenMorse.js"></script>
|
||||||
|
@ -20,10 +21,10 @@
|
||||||
</span>
|
</span>
|
||||||
<div class="drawer">
|
<div class="drawer">
|
||||||
<img src="res/img/drawergraphic.png" class="drawerimg"/>
|
<img src="res/img/drawergraphic.png" class="drawerimg"/>
|
||||||
<div class="draweritem" onclick="writtenMorse()">writtenMorse</div>
|
<div class="draweritem" onclick="writtenMorse()" id="writtenMorse">writtenMorse</div>
|
||||||
<div class="draweritem" onclick="normalMorse()">Normal Morse</div>
|
<div class="draweritem" onclick="normalMorse()" id="normalMorse">Normal Morse</div>
|
||||||
<div class="drawerdivider"></div>
|
<div class="drawerdividerbottom"></div>
|
||||||
<div class="draweritem" onclick="about()">About</div>
|
<div class="draweritembottom" onclick="about()">About</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
var dur = 150
|
var dur = 150
|
||||||
var drawerStatus = true
|
var drawerStatus = true
|
||||||
var writtenMorse = true
|
var wm = true
|
||||||
function drawer(){
|
function drawer(){
|
||||||
if(window.innerWidth <= 1400){
|
if(window.innerWidth <= 1400){
|
||||||
if(drawerStatus){
|
if(drawerStatus){
|
||||||
|
@ -20,7 +20,7 @@ function drawer(){
|
||||||
|
|
||||||
function encode(){
|
function encode(){
|
||||||
var input = $('#textarea').val()
|
var input = $('#textarea').val()
|
||||||
if(writtenMorse){
|
if(wm){
|
||||||
$("#output").text("The normal morse engine is not ported jet.")
|
$("#output").text("The normal morse engine is not ported jet.")
|
||||||
} else {
|
} else {
|
||||||
//TODO port the normal morse decode engine
|
//TODO port the normal morse decode engine
|
||||||
|
@ -31,7 +31,7 @@ function encode(){
|
||||||
|
|
||||||
function decode(){
|
function decode(){
|
||||||
var input = $('#textarea').val()
|
var input = $('#textarea').val()
|
||||||
if(writtenMorse){
|
if(wm){
|
||||||
$('#output').text(decodeWrittenMorseManager(input))
|
$('#output').text(decodeWrittenMorseManager(input))
|
||||||
} else {
|
} else {
|
||||||
//TODO port the normal morse decode engine
|
//TODO port the normal morse decode engine
|
||||||
|
@ -41,12 +41,16 @@ function decode(){
|
||||||
}
|
}
|
||||||
|
|
||||||
function writtenMorse(){
|
function writtenMorse(){
|
||||||
writtenMorse = true
|
wm = true
|
||||||
|
$("#normalMorse").css({"color":"#000000"})
|
||||||
|
$("#writtenMorse").css({"color":"#03a9f4"})
|
||||||
drawer()
|
drawer()
|
||||||
}
|
}
|
||||||
|
|
||||||
function normalMorse(){
|
function normalMorse(){
|
||||||
writtenMorse = false
|
wm = false
|
||||||
|
$("#normalMorse").css({"color":"#03a9f4"})
|
||||||
|
$("#writtenMorse").css({"color":"#000000"})
|
||||||
drawer()
|
drawer()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -37,26 +37,34 @@ body {
|
||||||
border-right-width: 1px;
|
border-right-width: 1px;
|
||||||
border-right-color: #cecece;
|
border-right-color: #cecece;
|
||||||
border-right-style: solid;
|
border-right-style: solid;
|
||||||
z-index: 50; }
|
z-index: 50;
|
||||||
|
font-weight: 500; }
|
||||||
|
|
||||||
.drawerimg {
|
.drawerimg {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
|
|
||||||
.draweritem {
|
.draweritem, .draweritembottom {
|
||||||
height: 72px;
|
height: 58px;
|
||||||
line-height: 72px;
|
line-height: 58px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
|
||||||
.draweritem:hover {
|
.draweritembottom {
|
||||||
background: #e0e0e0; }
|
bottom: 0px;
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 16px); }
|
||||||
|
|
||||||
.drawerdivider, .carddivider {
|
.drawerdivider, .drawerdividerbottom, .carddivider {
|
||||||
border-top-color: #cecece;
|
border-top-color: #cecece;
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
border-top-style: solid; }
|
border-top-style: solid; }
|
||||||
|
|
||||||
|
.drawerdividerbottom {
|
||||||
|
bottom: 60px;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
width: calc(100% - 300px);
|
width: calc(100% - 300px);
|
||||||
height: calc(100%-60px);
|
height: calc(100%-60px);
|
||||||
|
@ -104,9 +112,6 @@ body {
|
||||||
color: #03a9f4;
|
color: #03a9f4;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
|
||||||
.cardbutton:hover {
|
|
||||||
background: #e0e0e0; }
|
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
background: #000;
|
background: #000;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -127,6 +132,9 @@ body {
|
||||||
#outputcard {
|
#outputcard {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
|
#writtenmorse {
|
||||||
|
color: #03a9f4; }
|
||||||
|
|
||||||
@media screen and (max-width: 1400px) {
|
@media screen and (max-width: 1400px) {
|
||||||
.drawer {
|
.drawer {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -5,9 +5,8 @@ $drawer-width: 300px
|
||||||
$actionbar-height: 60px
|
$actionbar-height: 60px
|
||||||
$actionbar-shadow: #999
|
$actionbar-shadow: #999
|
||||||
$divider-color: #cecece
|
$divider-color: #cecece
|
||||||
$drawer-item-height: 72px
|
$drawer-item-height: 58px
|
||||||
$drawer-item-font-size: 18px
|
$drawer-item-font-size: 18px
|
||||||
$hovered-element-color: #e0e0e0
|
|
||||||
$card-padding: 20px
|
$card-padding: 20px
|
||||||
|
|
||||||
=border-radius($radius)
|
=border-radius($radius)
|
||||||
|
@ -59,6 +58,7 @@ body
|
||||||
border-right-color: $divider-color
|
border-right-color: $divider-color
|
||||||
border-right-style: solid
|
border-right-style: solid
|
||||||
z-index: 50
|
z-index: 50
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
.drawerimg
|
.drawerimg
|
||||||
width: 100%
|
width: 100%
|
||||||
|
@ -70,14 +70,23 @@ body
|
||||||
padding-left: 16px
|
padding-left: 16px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.draweritem:hover
|
.draweritembottom
|
||||||
background: $hovered-element-color
|
@extend .draweritem
|
||||||
|
bottom: 0px
|
||||||
|
position: absolute
|
||||||
|
width: calc(100% - 16px)
|
||||||
|
|
||||||
.drawerdivider
|
.drawerdivider
|
||||||
border-top-color: $divider-color
|
border-top-color: $divider-color
|
||||||
border-top-width: 1px
|
border-top-width: 1px
|
||||||
border-top-style: solid
|
border-top-style: solid
|
||||||
|
|
||||||
|
.drawerdividerbottom
|
||||||
|
@extend .drawerdivider
|
||||||
|
bottom: 60px
|
||||||
|
position: absolute
|
||||||
|
width: 100%
|
||||||
|
|
||||||
.main
|
.main
|
||||||
width: calc(100% - 300px)
|
width: calc(100% - 300px)
|
||||||
height: calc(100%-60px)
|
height: calc(100%-60px)
|
||||||
|
@ -120,9 +129,6 @@ body
|
||||||
color: $primary-color
|
color: $primary-color
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.cardbutton:hover
|
|
||||||
background: $hovered-element-color
|
|
||||||
|
|
||||||
.overlay
|
.overlay
|
||||||
background: #000
|
background: #000
|
||||||
opacity: 0
|
opacity: 0
|
||||||
|
@ -144,6 +150,9 @@ body
|
||||||
#outputcard
|
#outputcard
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
#writtenmorse
|
||||||
|
color: $primary-color
|
||||||
|
|
||||||
@media screen and (max-width: 1400px)
|
@media screen and (max-width: 1400px)
|
||||||
.drawer
|
.drawer
|
||||||
display: none
|
display: none
|
||||||
|
|
Reference in a new issue