Improve responsive design

This commit is contained in:
patrick 2025-02-18 05:30:17 +00:00
parent f03b94d5b5
commit 1cf7e7b9c0
5 changed files with 104 additions and 90 deletions

View File

@ -372,10 +372,9 @@ function send_header($title = '', $nav = null, $icon = null, $titletranslated =
echo i18n($config['fairname']); ?></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/sfiab.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/tableeditor.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/tableeditor.css" type="text/css" media="all" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</head>
<body>
@ -389,6 +388,7 @@ function send_header($title = '', $nav = null, $icon = null, $titletranslated =
<script src="https://code.jquery.com/jquery-migrate-3.5.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js" integrity="sha512-O/JP2r8BG27p5NOtVhwqsSokAwEP5RwYgvEzU9G6AfNjLYqyt2QT8jqU1XrXCiezS50Qp1i3ZtCQWkHZIRulGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?= $config['SFIABDIRECTORY'] ?>/js/sfiab.js"></script>
@ -601,9 +601,9 @@ function send_header($title = '', $nav = null, $icon = null, $titletranslated =
if ($icon && theme_icon($icon)) {
echo '<td width="40">';
echo theme_icon($icon);
echo '</td><td>';
echo '</td><td id="page-title">';
} else
echo '<td>';
echo '<td id="page-title">';
if ($title && !$titletranslated)
echo '<h2>' . i18n($title) . '</h2>';
@ -686,8 +686,8 @@ function send_popup_header($title = '')
<title><?= i18n($title) ?></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<!--<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/jquery-ui-1.7.2.custom.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/sfiab.css" type="text/css" media="all" />
<link media=all href="<?= $config['SFIABDIRECTORY'] ?>/tableeditor.css" type=text/css rel=stylesheet>
<link rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/style.css" type="text/css" media="all" />
<link media=all href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/tableeditor.css" type=text/css rel=stylesheet>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
@ -699,6 +699,7 @@ function send_popup_header($title = '')
<script type="text/javascript" src="<?= $config['SFIABDIRECTORY'] ?>/js/sfiab.js"></script>
<script type="text/javascript" src="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/theme-script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
<div id="notice_area" class="notice_area"></div>
<?

View File

@ -103,7 +103,7 @@ if ($q->rowCount()) {
echo '<br />';
echo "<form method=\"post\" action=\"register_participants_safety.php\">\n";
echo "<input type=\"hidden\" name=\"action\" value=\"save\">\n";
echo "<table class=\"tableedit\">\n";
echo "<table class=\"tableedit safety_questions\">\n";
$num = 1;
while ($r = $q->fetch(PDO::FETCH_OBJ)) {
$trclass = ($num % 2 == 0 ? 'odd' : 'even');

View File

@ -2,9 +2,7 @@ html{
overflow-x: hidden;
}
body
{
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: small;
margin: 0;
@ -13,20 +11,34 @@ body
background: #e0e0ff;
overflow-x: hidden;
height: 100%;
}
input, textarea, select
{
input,
textarea,
select {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: small;
}
table {
overflow-x:scroll;
width: 100%;
overflow: scroll;
display:block;
}
#main-content {
width: 100%;
}
#page-title {
vertical-align: bottom;
}
.tableview {
border-collapse: collapse;
border-spacing: 1px;
color: black;
}
td {
vertical-align: top;
@ -72,29 +84,22 @@ table tr.odd {
padding: 5px;
font-size: 1.0em;
box-shadow: 2px 2px 2px black;
border-radius: 0.5rem;
}
#main {
background: #f1eeff;
padding: 3px;
border: 2px solid Silver;
padding: 10px;
min-height: 600px;
width: 99%;
border-radius: 0 0 0.5rem 0.5rem;
}
#mainwhere {
margin-right: 10px;
background: #EEEEFF;
padding: 3px;
border-top: 2px solid Silver;
border-left: 2px solid Silver;
border-right: 2px solid Silver;
font-size: 0.85em;
width: 99%;
padding: 0.5rem;
border-radius: 0.5rem 0.5rem 0 0;
font-size: 1em;
}
@ -109,18 +114,21 @@ h1 {
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 1.6em;
font-weight: bold;
margin-top: 0;
margin-bottom: .3em;
}
h3 {
font-size: 1.4em;
font-weight: bold;
margin-top: 0;
margin-bottom: .2em;
}
h4 {
font-size: 1.2em;
font-weight: bold;
@ -278,6 +286,15 @@ tr.externalaward {
color: #0000AA;
}
.safety_questions tr {
width: 20px;
overflow: scroll;
}
.safety_questions>* {
font-size: 1.5em;
}
.adminconfigtable td {
text-align: center;
@ -471,6 +488,7 @@ div.ui-tabs ul.ui-tabs-nav {
#registration_list {
background: black;
}
#menu-toggle-button {
display: none;
}
@ -486,7 +504,7 @@ div.ui-tabs ul.ui-tabs-nav {
}
#sidebar.active~#main-content {
opacity: 0.7;
opacity: 0.5;
}
#menu-toggle-button:hover {
@ -541,8 +559,8 @@ div.ui-tabs ul.ui-tabs-nav {
display: grid;
grid-template-columns: 1fr 1fr;
}
adminconfigtable
.thematic-break{
adminconfigtable .thematic-break {
display: block;
}
}

View File

@ -22,11 +22,6 @@ input {
border-collapse: collapse;
border-spacing: 1px;
color: black;
margin-left: 20px;
margin-right: 20px;
border: 0px;
font-size: 0.8em;
;
}
.tableview td {