epagris/SpreadQuiz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- mobile device support added

Browse Source
This commit is contained in:
Wiesner András 2024-04-05 15:27:42 +02:00
parent afeda936c1
commit 5793c6d673
5 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
default_frame.php
View File

@ -14,6 +14,7 @@ if (!get_autologin_state()) {
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>SpreadQuiz</title> <title>SpreadQuiz</title>
<script src="js/req.js"></script> <script src="js/req.js"></script>
<script src="js/o.js"></script> <script src="js/o.js"></script>
@ -21,6 +22,7 @@ if (!get_autologin_state()) {
<script src="js/spreadquiz.js"></script> <script src="js/spreadquiz.js"></script>
<script src="js/default_frame.js"></script> <script src="js/default_frame.js"></script>
<link rel="stylesheet" href="style/spreadquiz.css"> <link rel="stylesheet" href="style/spreadquiz.css">
<link rel="stylesheet" href="style/spreadquiz_mobile.css">
</head> </head>
<body> <body>
<section id="game_list_panel"> <section id="game_list_panel">

2
login.php
View File

@ -12,10 +12,12 @@ if (get_autologin_state()) {
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>SpreadQuiz :: Bejelentkezés</title> <title>SpreadQuiz :: Bejelentkezés</title>
<script src="js/req.js"></script> <script src="js/req.js"></script>
<script src="js/spreadquiz.js"></script> <script src="js/spreadquiz.js"></script>
<link rel="stylesheet" href="style/spreadquiz.css"> <link rel="stylesheet" href="style/spreadquiz.css">
<link rel="stylesheet" href="style/spreadquiz_mobile.css">
</head> </head>
<body style="display: flex;left: 0;top: 0;right: 0;bottom: 0;position: fixed;align-items: center;justify-content: center;background-color: whitesmoke"> <body style="display: flex;left: 0;top: 0;right: 0;bottom: 0;position: fixed;align-items: center;justify-content: center;background-color: whitesmoke">
<section id="login_sec"> <section id="login_sec">

2
main.php
View File

@ -20,11 +20,13 @@ $privilege = $user_data["privilege"];
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>SpreadQuiz</title> <title>SpreadQuiz</title>
<script src="js/req.js"></script> <script src="js/req.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/spreadquiz.js"></script> <script src="js/spreadquiz.js"></script>
<link rel="stylesheet" href="style/spreadquiz.css"/> <link rel="stylesheet" href="style/spreadquiz.css"/>
<link rel="stylesheet" href="style/spreadquiz_mobile.css"/>
</head> </head>
<body> <body>
<section id="screen_panel"> <section id="screen_panel">

63
style/spreadquiz_mobile.css Normal file
View File

@ -0,0 +1,63 @@
@media only screen and (max-width: 800px) {
section#info_pane {
height: 4.5em;
overflow: clip;
left: 0;
bottom: 0;
right: 0;
top: unset;
width: 100%;
}
section#content_pane {
width: 100vw;
}
iframe#content_frame {
width: 100vw;
}
section.game-box {
width: calc(100vw - 6.5em);
height: calc(100vw - 6.5em);
margin-right: 0;
margin-bottom: 1em;
}
section#info_pane:active, section#info_pane:hover, section#user_info {
height: 12em;
}
section.challenge {
width: calc(100vw - 3em);
}
section#infobox {
top: unset;
left: 0;
right: 0;
bottom: 0;
max-height: 4em;
min-height: unset;
transition: 0.3s ease;
}
section#infobox:active, section#infobox:hover {
max-height: 50vh;
}
section#test_display {
position: fixed;
display: block;
top: 0;
bottom: 6em;
left: 0;
right: 0;
overflow: scroll;
padding-top: 2em;
}
section.game-box-caption {
width: 100vw;
}
}

2
testground.php
View File

@ -19,6 +19,7 @@ if ($testid === "") {
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>SpreadQuiz</title> <title>SpreadQuiz</title>
<script src="js/req.js"></script> <script src="js/req.js"></script>
<script src="js/spreadquiz.js"></script> <script src="js/spreadquiz.js"></script>
@ -26,6 +27,7 @@ if ($testid === "") {
<script src="js/common.js"></script> <script src="js/common.js"></script>
<script src="js/testground.js"></script> <script src="js/testground.js"></script>
<link rel="stylesheet" href="style/spreadquiz.css"> <link rel="stylesheet" href="style/spreadquiz.css">
<link rel="stylesheet" href="style/spreadquiz_mobile.css">
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head> </head>
<body> <body>