Skip to content

make responsive #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jeremyplichta wants to merge 5 commits into
base: master
Choose a base branch
from
Open

make responsive #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
12a6311
make responsive: initial draft
Sep 2, 2024
faa5689
fix player generation for big and small cases
Sep 2, 2024
759539c
prevent zoom on iphone textarea and input select
Sep 3, 2024
2de2526
make side menu slideout on mobile
Sep 8, 2024
b35ed1c
update groups and plaintext to fit on mobile
Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions inc/courselesson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,14 @@ function newc (nc) {
if ($_SESSION['koch_lesson'] == 1) {
echo "<table><tr><td>";
player("KKKKKKKKKKKKKKKKKK", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 1, 1,0);
echo "</td><td>&nbsp;&nbsp;</td><td>";


echo "</td><td>&nbsp;&nbsp;</td><td class='player-large'>";
player("MMMMMMMMMMMMMMMMMM", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 2, 1,0);
echo "</td></tr>";

echo "<tr><td class='player-small'>";
player("MMMMMMMMMMMMMMMMMM", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 3, 1,0);
echo "</td></tr></table>\n";
}
else {
Expand Down Expand Up @@ -279,14 +285,7 @@ function newc (nc) {
<? $text = getgroups($_SESSION['cw_speed'], $_SESSION['cw_eff'], $_SESSION['koch_lesson'], $kochchar, $_SESSION['koch_duration'], $_SESSION['koch_randomlength'], false); ?>

<form action="/courselesson" method="POST" id="eform">
<table>
<tr>
<td><textarea id="textinput" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" name="input" cols="40" rows="10"></textarea></td>
<td>
&nbsp;

<?

<?
if ($_SESSION['player'] != PL_JSCWLIB) {
$playertext = "|W".$_SESSION['cw_ews']." ".$text;
if ($_SESSION['delay_start'] > 0) {
Expand All @@ -301,8 +300,23 @@ function newc (nc) {
else {
$playertext = $text;
}
?>

player("$playertext", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'], 0, 3, 0, 1);
<table class="player-table">
<tr class="player-small">
<td>
<?
player("$playertext", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'], 0, 4, 0, 1);
?>
</td>
</tr>
<tr>
<td><textarea id="textinput" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" name="input" cols="40" rows="10"></textarea></td>
<td class="player-large">
&nbsp;

<?
player("$playertext", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'], 0, 5, 0, 1);
?>

</td>
Expand All @@ -320,7 +334,7 @@ function newc (nc) {
$text2 = stripcommands($text2);
?>
<input type="hidden" name="text" value="<? echo $text2; ?>">
<input type="submit" value=" <? echo l('checkresult',1); ?> " onClick="return checkspaces();"> (<? echo l('notcasesensitive'); ?>)
<input id="checkresult" type="submit" value=" <? echo l('checkresult',1); ?> " onClick="return checkspaces();">(<? echo l('notcasesensitive'); ?>)
</td>
</table>
</form>
Expand Down
2 changes: 1 addition & 1 deletion inc/dologin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

<script>
window.setTimeout( function () {
window.location.href = '<?=BASEURL;?>';
window.location.href = '/';
}, 1000);

</script>
Expand Down
9 changes: 7 additions & 2 deletions inc/groups.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,11 +349,16 @@
<form action="/groups" method="POST" id="eform">
<table>
<tr>
<td class="player-small">
<? player($playertext, $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 1, 0, 1); ?>
</td>
</tr>
<tr>
<td><textarea id="textinput" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" name="input" cols="40" rows="10"></textarea></td>
<td>
<td class="player-large">
&nbsp;

<? player($playertext, $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 1, 0, 1); ?>
<? player($playertext, $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 2, 0, 1); ?>

<br>
</td>
Expand Down
47 changes: 37 additions & 10 deletions inc/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
<meta property="og:url" content="https://lcwo.net/" />
<meta property="og:image" content="https://lcwo.net/pics/lcwo.png" />
<meta property="og:description" content="Learn CW Online - a free web app for learning Morse code!" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico">
<?
Expand Down Expand Up @@ -69,16 +70,13 @@

</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="headerline">
<td style="background-image:url(/pics/lcwo-bg2.png);" width="41%">
<a href="/"><img style="border-style:none;" src="/pics/lcwo.png" height="75" width="214" title="LCWO - Home" alt="[LCWO LOGO]"></a> </td>
<td style="background-image:url(/pics/lcwo-bg2.png);" width="59%">
<header class="header">
<a href="/" style="height:75px;"><img class="logo" style="border-style:none;" src="/pics/lcwo.png" height="75" width="214" title="LCWO - Home" alt="[LCWO LOGO]"></a>
<?
if (DEV) {
?>
&nbsp;<strong>Development Version</strong> (<a href="https://lcwo.net/">Click here to go to LCWO.net</a>) - <a href="/babelfish.php?limit=0">Babelfish</a> -
<div style="margin-left: 15px;" class="wide-dev-info">
<strong>Development Version</strong> (<a href="https://lcwo.net/">Click here to go to LCWO.net</a>) - <a href="/babelfish.php?limit=0">Babelfish</a> -
<?
if ($_SESSION['debug'] == 1) {
echo '<a href="/?debug=2">Switch debug off</a> - ';
Expand All @@ -93,6 +91,10 @@
else {
echo '<a href="/?debug=3">Switch inpage translate on</a><br>';
}
?>

</div>
<?
} /* if DEV */
if ($_SESSION['uid']) {
?>
Expand All @@ -115,9 +117,7 @@
<?
}
?>

&nbsp;
</td> </tr> </tbody></table>
</header>
<script>
function agree_policy () {
var i = document.getElementById("consent");
Expand All @@ -126,4 +126,31 @@ function agree_policy () {
request.open("GET", "//lcwo.net/api/consent.php", true);
request.send();
}
function toggleMenu(selector) {
var el = document.querySelector(selector);
el.classList.toggle('active');
}

function changeInputSize(sz) {
var i = document.getElementById('textinput');
if (i !== null) {
i.style.fontSize = sz;
}

var els = Array.prototype.slice.call(document.getElementsByTagName('input'));
els.forEach(function (el) {
el.style.fontSize = sz;
});
}

function changeInputSizeOnMatch(e) {
if (e.matches) {
changeInputSize('18px');
} else {
changeInputSize('11px');
}
}
const mql = window.matchMedia("(max-width: 900px)");
mql.addListener(changeInputSizeOnMatch);
changeInputSizeOnMatch(mql);
</script>
2 changes: 1 addition & 1 deletion inc/language.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<table width="90%">
<table width="100%">
<tr><th class="tborder">Language</th></tr>
<tr>
<td class="tborder">
Expand Down
8 changes: 4 additions & 4 deletions inc/login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<table width="90%">
<table width="100%">
<tr><th class="tborder"><? echo l('login') ?></th></tr>
<tr><td class="tborder">

<br>

<div align="center">
<form action="/dologin" method="POST">
<table>
<table class="login-table">
<tr>
<td><? echo l('username'); ?>: </td>
<td style="width:20%"><? echo l('username'); ?>: </td>
<td>
<input type="text" size="8" name="username">
</td>
</tr>
<tr>
<td><? echo l('password'); ?>: </td>
<td style="width:20%"><? echo l('password'); ?>: </td>
<td>
<input type="password" size="8" name="password">
</td>
Expand Down
68 changes: 40 additions & 28 deletions inc/menu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,40 @@
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="menuText" width="100%">
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="16" alt=":">
<a class="mLink" href="/"><? echo l('home') ?></a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/users"><? echo l('userlist') ?></a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/highscores"><? echo l('highscores') ?></a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/forum"><? echo l('forum')." ".privmsgcount();?></a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/usergroups"><? echo l('usergroups') ?></a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/about"><? echo l('about') ?></a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<? if ($_SESSION['uid']) { ?>
<a id="logoutlink" class="mLink" href="/logout"><?
echo l('logout')." (".$_SESSION['username']; ?>)</a>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<? } ?>

</td>
</tr>
</tbody></table>

<br>
<div class="menu-icon" onclick="toggleMenu('.menuText')">
<div class="placeholder-menu">Navigation</div>
<div class="menu-lines">☰</div>
</div>
<nav class="menuText" width="100%">
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="16" alt=":">
<a class="mLink" href="/"><? echo l('home') ?></a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/users"><? echo l('userlist') ?></a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/highscores"><? echo l('highscores') ?></a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/forum"><? echo l('forum')." ".privmsgcount();?></a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/usergroups"><? echo l('usergroups') ?></a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<a class="mLink" href="/about"><? echo l('about') ?></a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<? if ($_SESSION['uid']) { ?>
<a id="logoutlink" class="mLink" href="/logout"><?
echo l('logout')." (".$_SESSION['username']; ?>)</a>
</div>
<div>
<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
<? } ?>
</div>
</nav>
2 changes: 1 addition & 1 deletion inc/online.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@



<table width="90%">
<table width="100%">
<tr><th class="tborder"><? echo l('whoisonline') ?> (<?=$onlineusers;?>)</th></tr>
<tr><td class="tborder">
<br>
Expand Down
4 changes: 2 additions & 2 deletions inc/personalmenu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

<table width="90%">
<tr><th class="tborder"><? echo l('menufor')." ".$_SESSION['username']; ?></th></tr>
<table width="100%">
<tr><th class="personalmenu tborder"><? echo l('menufor')." ".$_SESSION['username']; ?></th></tr>
<tr><td class="tborder">
<a href="/"><strong><? echo l('home') ?></strong></a> -
<a href="/news"><strong><? echo l('news') ?></strong></a>
Expand Down
12 changes: 9 additions & 3 deletions inc/plaintext.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,15 @@ function attempt () {
<button id="btn_playpause" onClick="playpause(1); if(tmp=getElementById('eform')){tmp.input.focus();} return false;"><?=l('playpause',1);?></button><br><br>
<form action="/plaintext" method="POST" id="eform">
<table><tr>
<td><input spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" size="60" name="input"></td>
<td><input type="submit" name="submitted" value=" <? echo l('checkresult',1) ?>"></td>
<td><input type="submit" name="cancel" value=" <? echo l('cancel',1) ?>"></td>
<td>
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" cols="30" rows="10" name="input" id="textinput"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submitted" value=" <? echo l('checkresult',1) ?>">
<input type="submit" name="cancel" value=" <? echo l('cancel',1) ?>">
</td>
</tr></table>
<input type="hidden" name="txtext" value="<? echo base64_encode($txtext); ?>">
<input type="hidden" name="slang" value="<? echo $slang; ?>">
Expand Down
42 changes: 20 additions & 22 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,28 +103,26 @@
include("inc/menu.php");

?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="220" valign="top">
<?
if (!$_SESSION['uid']) {
include("inc/login.php");
include("inc/language.php");
}
else {
include("inc/personalmenu.php");
}
?>
<? include("inc/online.php"); ?>
</td>
<td valign="top">
<? include("inc/$p.php"); ?>
</td>
<td width="20">
&nbsp;
</td>
</tr>
</table>
<div class="main-content">
<div class="menu-toggle <? if (!$_SESSION['uid']) { echo('active');} ?>" onclick="toggleMenu('.sidebar'); toggleMenu('.menu-toggle');">
<div class="menu">-- · -· ··-</div>
</div>
<aside id="sidebar" class="sidebar <? if (!$_SESSION['uid']) { echo('active');} ?>">
<?
if (!$_SESSION['uid']) {
include("inc/login.php");
include("inc/language.php");
}
else {
include("inc/personalmenu.php");
}
?>
<? include("inc/online.php"); ?>
</aside>
<main class="content">
<? include("inc/$p.php"); ?>
</main>
</div>

<?
include("inc/footer.php");
Expand Down
Loading