Skip to content

P
Penguidom
Commit 710ed0fa authored by Franco (nextime) Lanza's avatar Franco (nextime) Lanza
Browse files
Options

Working on basic layout for GUI

parent bae78463
Show whitespace changes
Inline Side-by-side
Showing with 86 additions and 20 deletions
Web/resources/page.html
View file @ 710ed0fa
...@@ -42,6 +42,11 @@ body { ...@@ -42,6 +42,11 @@ body {
padding: 16px; padding: 16px;
} }
#main {
transition: margin-left .5s;
transition: margin-right .5s;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */ /* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky { .sticky {
position: fixed; position: fixed;
...@@ -55,9 +60,35 @@ body { ...@@ -55,9 +60,35 @@ body {
} }
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1000; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.column { .column {
float: left; float: left;
width: 33.33%; width: 33.33%;
overflow-y: scroll;
height: 400px;
/* border: 1px solid white; */
} }
/* Clear floats after the columns */ /* Clear floats after the columns */
...@@ -105,7 +136,6 @@ body { ...@@ -105,7 +136,6 @@ body {
text-align: center; text-align: center;
color: #f2f2f2; color: #f2f2f2;
padding: 14px; padding: 14px;
} }
div .menubtn { div .menubtn {
...@@ -122,11 +152,44 @@ div .menubtn div { ...@@ -122,11 +152,44 @@ div .menubtn div {
} }
</style> </style>
<script language="javascript">
function OpenLeft() {
document.getElementById("SidenavRight").style.width = "0px";
document.getElementById("SidenavLeft").style.width = "250px";
}
function OpenRight() {
document.getElementById("SidenavLeft").style.width = "0px";
document.getElementById("SidenavRight").style.width = "250px";
}
function CloseNav() {
document.getElementById("SidenavLeft").style.width = "0px";
document.getElementById("SidenavRight").style.width = "0px";
}
</script>
@SCRIPT@ @SCRIPT@
</head> </head>
<body class="tblack"> <body class="tblack">
<div id="navbar" class="row"> <div id="SidenavLeft" class="sidenav">
<div id="navbtnl"> <a href="javascript:void(0)" class="closebtn" onclick="CloseNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="SidenavRight" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="CloseNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<div id="navbar" class="row">
<div id="navcntr">
<b>Penguidom 0.1</b>
</div>
<div id="navbtnl" onclick="OpenLeft()">
<div class="menubtn"> <div class="menubtn">
<div></div> <div></div>
<div></div> <div></div>
...@@ -134,10 +197,7 @@ div .menubtn div { ...@@ -134,10 +197,7 @@ div .menubtn div {
</div> </div>
<a href="#">plugins</a> <a href="#">plugins</a>
</div> </div>
<div id="navcntr"> <div id="navbtnr" onclick="OpenRight()">
<b>Penguidom 0.1</b>
</div>
<div id="navbtnr">
<div class="menubtn" style="float:right;"> <div class="menubtn" style="float:right;">
<div></div> <div></div>
<div></div> <div></div>
...@@ -145,9 +205,15 @@ div .menubtn div { ...@@ -145,9 +205,15 @@ div .menubtn div {
</div> </div>
<a href="#">options</a> <a href="#">options</a>
</div> </div>
</div> </div>
<div id="content" class="tblack" > <div id="content" class="tblack" >
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
@CONTENT@ @CONTENT@
</div>
</div> </div>
</body> </body>
</html> </html>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment