Responsible
This commit is contained in:
mmk2410
parent
0e70a4d47f
commit
5f52be4cac
4 changed files with 223 additions and 17 deletions
27
index.html
27
index.html
|
|
@ -3,12 +3,17 @@
|
|||
<title>Morse Converter</title>
|
||||
<link rel="stylesheet" type="text/css" href="res/css/main.css" />
|
||||
<script src="./res/js/jquery-2.1.3.min.js"></script>
|
||||
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.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="image_src" href="./res/img/favicon.png" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<span class="actionbar">Morse Converter</span>
|
||||
<span class="actionbar">
|
||||
<img src="./res/img/menu.svg" class="menuicon" onclick="drawer()"/>
|
||||
Morse Converter
|
||||
</span>
|
||||
<div class="drawer">
|
||||
<img src="res/img/drawergraphic.png" class="drawerimg"/>
|
||||
<div class="draweritem">writtenMorse</div>
|
||||
|
|
@ -33,10 +38,28 @@
|
|||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var dur = 150
|
||||
var drawerStatus = true
|
||||
function getText(){
|
||||
var input = $('#textarea').val()
|
||||
$('#output').text(input)
|
||||
$('#outputcard').fadeIn(100)
|
||||
$('#outputcard').fadeIn(dur)
|
||||
}
|
||||
function drawer(){
|
||||
if(window.innerWidth <= 1400){
|
||||
if(drawerStatus){
|
||||
$('.drawer').show('slide', {direction: 'left'}, dur)
|
||||
$('.actionbar').before("<div class='overlay' onclick='drawer()'></div>")
|
||||
$('.overlay').animate({"opacity":"0.4"}, dur)
|
||||
drawerStatus = false
|
||||
} else {
|
||||
$('.drawer').hide('slide', {direction: 'left'}, dur)
|
||||
$('.overlay').animate({"opacity":"0"}, dur, function callback (){
|
||||
$('.overlay').remove()
|
||||
})
|
||||
drawerStatus = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,25 @@ body {
|
|||
background: #03a9f4;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding-left: 340px;
|
||||
padding-left: 320px;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
line-height: 60px;
|
||||
-webkit-box-shadow: 4px 4px 4px 0px #999;
|
||||
-moz-box-shadow: 4px 4px 4px 0px #999;
|
||||
-ms-box-shadow: 4px 4px 4px 0px #999;
|
||||
box-shadow: 4px 4px 4px 0px #999; }
|
||||
-webkit-box-shadow: 0px 4px 4px 0px #999;
|
||||
-moz-box-shadow: 0px 4px 4px 0px #999;
|
||||
-ms-box-shadow: 0px 4px 4px 0px #999;
|
||||
box-shadow: 0px 4px 4px 0px #999; }
|
||||
|
||||
.menuicon {
|
||||
height: 30px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 15px;
|
||||
cursor: pointer; }
|
||||
|
||||
.drawer {
|
||||
width: 320px;
|
||||
width: 300px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
|
|
@ -28,7 +36,8 @@ body {
|
|||
background: #fff;
|
||||
border-right-width: 1px;
|
||||
border-right-color: #cecece;
|
||||
border-right-style: solid; }
|
||||
border-right-style: solid;
|
||||
z-index: 50; }
|
||||
|
||||
.drawerimg {
|
||||
width: 100%; }
|
||||
|
|
@ -48,9 +57,9 @@ body {
|
|||
border-top-style: solid; }
|
||||
|
||||
.main {
|
||||
width: calc(100% - 320px);
|
||||
height: 100%;
|
||||
margin-left: 320px;
|
||||
width: calc(100% - 300px);
|
||||
height: calc(100%-60px);
|
||||
margin-left: 300px;
|
||||
margin-top: 60px; }
|
||||
|
||||
.card {
|
||||
|
|
@ -90,12 +99,38 @@ body {
|
|||
.cardbutton {
|
||||
min-width: 64px;
|
||||
margin-left: 8px;
|
||||
padding: 5px; }
|
||||
padding: 5px;
|
||||
color: #03a9f4; }
|
||||
|
||||
.cardbutton:hover {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.overlay {
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 30; }
|
||||
|
||||
#outputcard {
|
||||
display: none; }
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.drawer {
|
||||
display: none;
|
||||
border-right-width: 0px; }
|
||||
|
||||
.actionbar {
|
||||
padding-left: 60px; }
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
margin-left: 0px; } }
|
||||
@media screen and (max-width: 750px) {
|
||||
.card {
|
||||
width: calc(100% - 36px); } }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$font-stack: 'Roboto', sans-serif
|
||||
$body-color: #f4f4f4
|
||||
$primary-color: #03a9f4
|
||||
$drawer-width: 320px
|
||||
$drawer-width: 300px
|
||||
$actionbar-height: 60px
|
||||
$actionbar-shadow: #999
|
||||
$divider-color: #cecece
|
||||
|
|
@ -38,7 +38,15 @@ body
|
|||
color: #fff
|
||||
font-size: 25px
|
||||
line-height: $actionbar-height
|
||||
+box-shadow(4px,4px,4px,0px,$actionbar-shadow)
|
||||
+box-shadow(0px,4px,4px,0px,$actionbar-shadow)
|
||||
|
||||
.menuicon
|
||||
height: 30px
|
||||
position: fixed
|
||||
top: 0px
|
||||
left: 0px
|
||||
padding: 15px
|
||||
cursor: pointer
|
||||
|
||||
.drawer
|
||||
width: $drawer-width
|
||||
|
|
@ -50,6 +58,7 @@ body
|
|||
border-right-width: 1px
|
||||
border-right-color: $divider-color
|
||||
border-right-style: solid
|
||||
z-index: 50
|
||||
|
||||
.drawerimg
|
||||
width: 100%
|
||||
|
|
@ -69,8 +78,8 @@ body
|
|||
border-top-style: solid
|
||||
|
||||
.main
|
||||
width: calc(100% - 320px)
|
||||
height: 100%
|
||||
width: calc(100% - 300px)
|
||||
height: calc(100%-60px)
|
||||
margin-left: $drawer-width
|
||||
margin-top: $actionbar-height
|
||||
|
||||
|
|
@ -107,9 +116,34 @@ body
|
|||
min-width: 64px
|
||||
margin-left: 8px
|
||||
padding: 5px
|
||||
color: $primary-color
|
||||
|
||||
.cardbutton:hover
|
||||
background: $hovered-element-color
|
||||
|
||||
.overlay
|
||||
background: #000
|
||||
opacity: 0
|
||||
position: fixed
|
||||
top: 0px
|
||||
left: 0px
|
||||
width: 100%
|
||||
height: 100%
|
||||
z-index: 30
|
||||
|
||||
#outputcard
|
||||
display: none
|
||||
|
||||
@media screen and (max-width: 1400px)
|
||||
.drawer
|
||||
display: none
|
||||
border-right-width: 0px
|
||||
.actionbar
|
||||
padding-left: 60px
|
||||
.main
|
||||
width: 100%
|
||||
margin-left: 0px
|
||||
|
||||
@media screen and (max-width: 750px)
|
||||
.card
|
||||
width: calc(100% - 36px)
|
||||
|
|
|
|||
114
res/img/menu.svg
Normal file
114
res/img/menu.svg
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="50"
|
||||
height="50"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.5 r10040"
|
||||
sodipodi:docname="menu.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.313709"
|
||||
inkscape:cx="25.03354"
|
||||
inkscape:cy="26.766694"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
showguides="true"
|
||||
inkscape:snap-grids="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:snap-to-guides="true"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="715"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-from-guide="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid2985"
|
||||
empspacing="5"
|
||||
visible="true"
|
||||
enabled="true"
|
||||
snapvisiblegridlinesonly="true" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="5,50"
|
||||
id="guide2987" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="50,40"
|
||||
id="guide2989" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="12,45"
|
||||
id="guide2991" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="20,5"
|
||||
id="guide2993" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="5,29"
|
||||
id="guide2995" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="45,35"
|
||||
id="guide2997" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1002.3622)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||
id="rect2999"
|
||||
width="30"
|
||||
height="4.0000525"
|
||||
x="10"
|
||||
y="1015.3622" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||
id="rect3001"
|
||||
width="30"
|
||||
height="3.9999588"
|
||||
x="10"
|
||||
y="1025.3622" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||
id="rect3003"
|
||||
width="30"
|
||||
height="3.9999943"
|
||||
x="10"
|
||||
y="1035.3622" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Reference in a new issue