Design improvements

This commit is contained in:
mmk2410 2015-04-08 02:34:44 +02:00
parent bac46e47ac
commit d99316aec7
4 changed files with 48 additions and 26 deletions

View file

@ -8,6 +8,7 @@
<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="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/engine/DecodeWrittenMorse.js"></script>
@ -20,10 +21,10 @@
</span>
<div class="drawer">
<img src="res/img/drawergraphic.png" class="drawerimg"/>
<div class="draweritem" onclick="writtenMorse()">writtenMorse</div>
<div class="draweritem" onclick="normalMorse()">Normal Morse</div>
<div class="drawerdivider"></div>
<div class="draweritem" onclick="about()">About</div>
<div class="draweritem" onclick="writtenMorse()" id="writtenMorse">writtenMorse</div>
<div class="draweritem" onclick="normalMorse()" id="normalMorse">Normal Morse</div>
<div class="drawerdividerbottom"></div>
<div class="draweritembottom" onclick="about()">About</div>
</div>
<div class="main">
<div class="card">

View file

@ -1,6 +1,6 @@
var dur = 150
var drawerStatus = true
var writtenMorse = true
var wm = true
function drawer(){
if(window.innerWidth <= 1400){
if(drawerStatus){
@ -20,7 +20,7 @@ function drawer(){
function encode(){
var input = $('#textarea').val()
if(writtenMorse){
if(wm){
$("#output").text("The normal morse engine is not ported jet.")
} else {
//TODO port the normal morse decode engine
@ -31,7 +31,7 @@ function encode(){
function decode(){
var input = $('#textarea').val()
if(writtenMorse){
if(wm){
$('#output').text(decodeWrittenMorseManager(input))
} else {
//TODO port the normal morse decode engine
@ -41,12 +41,16 @@ function decode(){
}
function writtenMorse(){
writtenMorse = true
wm = true
$("#normalMorse").css({"color":"#000000"})
$("#writtenMorse").css({"color":"#03a9f4"})
drawer()
}
function normalMorse(){
writtenMorse = false
wm = false
$("#normalMorse").css({"color":"#03a9f4"})
$("#writtenMorse").css({"color":"#000000"})
drawer()
}

View file

@ -37,26 +37,34 @@ body {
border-right-width: 1px;
border-right-color: #cecece;
border-right-style: solid;
z-index: 50; }
z-index: 50;
font-weight: 500; }
.drawerimg {
width: 100%; }
.draweritem {
height: 72px;
line-height: 72px;
.draweritem, .draweritembottom {
height: 58px;
line-height: 58px;
font-size: 18px;
padding-left: 16px;
cursor: pointer; }
.draweritem:hover {
background: #e0e0e0; }
.draweritembottom {
bottom: 0px;
position: absolute;
width: calc(100% - 16px); }
.drawerdivider, .carddivider {
.drawerdivider, .drawerdividerbottom, .carddivider {
border-top-color: #cecece;
border-top-width: 1px;
border-top-style: solid; }
.drawerdividerbottom {
bottom: 60px;
position: absolute;
width: 100%; }
.main {
width: calc(100% - 300px);
height: calc(100%-60px);
@ -104,9 +112,6 @@ body {
color: #03a9f4;
cursor: pointer; }
.cardbutton:hover {
background: #e0e0e0; }
.overlay {
background: #000;
opacity: 0;
@ -127,6 +132,9 @@ body {
#outputcard {
display: none; }
#writtenmorse {
color: #03a9f4; }
@media screen and (max-width: 1400px) {
.drawer {
display: none;

View file

@ -5,9 +5,8 @@ $drawer-width: 300px
$actionbar-height: 60px
$actionbar-shadow: #999
$divider-color: #cecece
$drawer-item-height: 72px
$drawer-item-height: 58px
$drawer-item-font-size: 18px
$hovered-element-color: #e0e0e0
$card-padding: 20px
=border-radius($radius)
@ -59,6 +58,7 @@ body
border-right-color: $divider-color
border-right-style: solid
z-index: 50
font-weight: 500
.drawerimg
width: 100%
@ -70,14 +70,23 @@ body
padding-left: 16px
cursor: pointer
.draweritem:hover
background: $hovered-element-color
.draweritembottom
@extend .draweritem
bottom: 0px
position: absolute
width: calc(100% - 16px)
.drawerdivider
border-top-color: $divider-color
border-top-width: 1px
border-top-style: solid
.drawerdividerbottom
@extend .drawerdivider
bottom: 60px
position: absolute
width: 100%
.main
width: calc(100% - 300px)
height: calc(100%-60px)
@ -120,9 +129,6 @@ body
color: $primary-color
cursor: pointer
.cardbutton:hover
background: $hovered-element-color
.overlay
background: #000
opacity: 0
@ -144,6 +150,9 @@ body
#outputcard
display: none
#writtenmorse
color: $primary-color
@media screen and (max-width: 1400px)
.drawer
display: none