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 {
height: 33%;
}
#menu {
#login {
width: 100%;
height: 100%;
}
#content {
height: 85%;
width: 100%;
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>
<body>
<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="flex one half fifth-1000" style="height: 100%">
<div class="loginSpacer"></div>
@@ -26,14 +26,14 @@
</div>
<div id="mainPage" style="display: none;">
<div id="content">
<div id="tasks"></div>
<div id="history"></div>
<div id="addTask"></div>
<div id="tasks" class="screen" style="">a</div>
<div id="history" class="screen" style="display: none;">b</div>
<div id="addTask" class="screen" style="display: none;">c</div>
</div>
<div id="menu" class="flex three">
<button class="third">Tasks</button>
<button class="third">History</button>
<button class="third">Add Task</button>
<button class="third" onclick="switchScreen('task')" id="taskButton">Tasks</button>
<button class="third" onclick="switchScreen('history')" id="historyButton">History</button>
<button class="third" onclick="switchScreen('add')" id="addButton">Add Task</button>
</div>
</div>
</body>

14
frontend/index.js
View File

@@ -23,4 +23,18 @@ async function login() {
document.getElementById("login").setAttribute("style", "display: none;");
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", "");
}
}