Tristan/OWE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sidebar

Browse Source
This commit is contained in:
Tristan Schneider 2021-02-11 22:59:07 +01:00
parent 780745f3e8
commit ba580d9b1e
3 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.php
View File

@ -78,9 +78,9 @@ $config_data = json_decode($raw_json_config, false);
<title><?php print($config_data->title ?? "One Word Each"); ?></title>
<link rel="stylesheet" href="style.css?<?php print(time()); ?>">
<?php
if (!isset($config_data->send_logo)) {
//if (!isset($config_data->send_logo)) {
print("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' integrity='sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==' crossorigin='anonymous' />");
}
//}
?>
<link rel="icon" href="<?php print($config_data->logo->icon_path ?? "favicon.ico"); ?>" type="image/x-icon">
</head>
@ -95,6 +95,7 @@ $config_data = json_decode($raw_json_config, false);
<div class="header">
<img src="<?php print($config_data->logo->image_path ?? "OWE_Logo.png"); ?>" style="width: 10%; float: left;">
<h3 style="padding: 30px;"><?php print($config_data->headline ?? "One Word Each Seite"); ?></h3>
<button onclick="toggleArchives();" id="sidebar_button"><i class="fas fa-bars"></i></button>
</div>
<div class="content">
@ -107,6 +108,7 @@ $config_data = json_decode($raw_json_config, false);
<br><br>
<a href="admin.php">Admin</a>
</div>
<div class="main">
<div class="sentences">
<?php

17
owe.js
View File

@ -76,11 +76,23 @@ function displayNotification(word) {
}
}
window.onfocus = function() {
function toggleArchives() {
archives = document.getElementsByClassName("archive_links")[0];
if (archives.style.display == "none") {
archives.style.display = "flex";
return;
}
archives.style.display = "none";
}
function resetUnread() {
unread_words = 0;
document.getElementsByTagName("title")[0].innerText = (config_data.title ? config_data.title : "One Word Each");
}
window.onfocus = resetUnread;
//setTimeout(loadSentences, 500);
loadConfig();
loadSentences();
@ -105,9 +117,10 @@ if (!isMobile) {
archives = document.getElementsByClassName("archive_links")[0];
sentences = document.getElementsByClassName("sentences")[0];
scrollbox = document.getElementsByClassName("scrollbox")[0];
archives.style.maxWidth = "20%";
scrollbox.style.flexDirection = "row";
sentences.style.fontSize = "x-large";
archives.style.order = "1";
document.getElementById("sidebar_button").style.display = "inline";
}
if ('serviceWorker' in navigator) {

44
style.css
View File

@ -4,7 +4,8 @@ body, input, button {
background-color: black;
color: white;
font-family: "Courier New", Courier, monospace;
scrollbar-color: rgba(255,255,255,30%) rgba(100,100,100,30%);
scrollbar-color: rgba(255,255,255,40%) rgba(255,255,255,30%);
scrollbar-width: thin;
}
body {
@ -22,30 +23,57 @@ body {
overflow: none;
align-items: center;
display: flex;
justify-content: space-between;
height: 10vw;
}
.sentences, .archive_links {
.main, .archive_links {
padding: 0px 30px 0px;
}
.main {
flex-shrink: 1;
min-width: 0px;
max-width: 50em;
}
.archive_links {
min-width: 50%;
flex-shrink: 0;
min-width: 20%;
display: none;
margin-bottom: 30px;
flex-direction: column;
}
.archive_links a {
display: block;
padding: 30px;
background: rgba(255,255,255,30%);
color: white;
text-decoration: none;
}
.archive_links a:hover {
background: rgba(255,255,255,70%);
}
input, button {
border: 2px solid white;
padding: 0px 5px 0px;
background: transparent;
margin: 30px;
margin: 30px 0px 30px;
}
.content {
flex: 1;
display: flex;
overflow: auto;
overflow-y: auto;
position: absolute;
top: 10vw;
left: 0px;
bottom: 0px;
width: 100%;
justify-content: center;
}
.scrollbox {
@ -72,6 +100,11 @@ a {
width: auto;
}
#sidebar_button {
margin: 30px;
border: none;
}
input, .send_button {
border: none;
@ -82,7 +115,6 @@ input, .send_button {
.word_input_area {
border: 2px solid white;
display: inline-flex;
margin: 0px 30px 0px;
}
table {