Design improvements
This commit is contained in:
mmk2410
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>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Reference in a new issue