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> <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">

View file

@ -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()
} }

View file

@ -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;

View file

@ -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