chopster44/GiacPoints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic screen switching

Browse Source
This commit is contained in:
chopster44
2023-07-21 15:33:45 +01:00
parent d014848e71
commit 677ac0241d
3 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/index.css
View File

@@ -1,8 +1,34 @@
.flex {
margin-left: 0;
}
.loginSpacer { .loginSpacer {
height: 33%; height: 33%;
} }
#menu { #login {
width: 100%;
height: 100%;
}
#content {
height: 85%;
width: 100%; width: 100%;
padding: 5%; padding: 5%;
} }
#menu {
height: 5%;
width: 100%;
padding: 5%;
}
#mainPage {
width: 100%;
height: 100%;
}
.screen {
width: 95%;
height: 100%;
}

14
frontend/index.html
View File

@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<script src="/frontend/index.js"></script> <script src="/frontend/index.js"></script>
<div id="login" class="flex three" style="height: 100%"> <div id="login" class="flex three">
<div class="fourth two-fifth-1000"></div> <div class="fourth two-fifth-1000"></div>
<div class="flex one half fifth-1000" style="height: 100%"> <div class="flex one half fifth-1000" style="height: 100%">
<div class="loginSpacer"></div> <div class="loginSpacer"></div>
@@ -26,14 +26,14 @@
</div> </div>
<div id="mainPage" style="display: none;"> <div id="mainPage" style="display: none;">
<div id="content"> <div id="content">
<div id="tasks"></div> <div id="tasks" class="screen" style="">a</div>
<div id="history"></div> <div id="history" class="screen" style="display: none;">b</div>
<div id="addTask"></div> <div id="addTask" class="screen" style="display: none;">c</div>
</div> </div>
<div id="menu" class="flex three"> <div id="menu" class="flex three">
<button class="third">Tasks</button> <button class="third" onclick="switchScreen('task')" id="taskButton">Tasks</button>
<button class="third">History</button> <button class="third" onclick="switchScreen('history')" id="historyButton">History</button>
<button class="third">Add Task</button> <button class="third" onclick="switchScreen('add')" id="addButton">Add Task</button>
</div> </div>
</div> </div>
</body> </body>

14
frontend/index.js
View File

@@ -24,3 +24,17 @@ async function login() {
document.getElementById("mainPage").setAttribute("style", ""); document.getElementById("mainPage").setAttribute("style", "");
} }
} }
function switchScreen(button) {
document.getElementById("tasks").setAttribute("style", "display: none;");
document.getElementById("history").setAttribute("style", "display: none;");
document.getElementById("addTask").setAttribute("style", "display: none;");
if (button === "task") {
document.getElementById("tasks").setAttribute("style", "");
} else if (button === "history") {
document.getElementById("history").setAttribute("style", "");
} else if (button === "add") {
document.getElementById("addTask").setAttribute("style", "");
}
}