arman/science-ation
1
1
Fork 0
forked from science-ation/science-ation
Code Pull Requests Activity

Improve responsive design

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
common.inc.php
View File

@ -372,10 +372,9 @@ function send_header($title = '', $nav = null, $icon = null, $titletranslated =
echo i18n($config['fairname']); ?></title> 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="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'] ?>/theme/<?= $config['theme'] ?>/style.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'] ?>/tableeditor.css" type="text/css" media="all" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</head> </head>
<body> <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://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/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 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> <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)) { if ($icon && theme_icon($icon)) {
echo '<td width="40">'; echo '<td width="40">';
echo theme_icon($icon); echo theme_icon($icon);
echo '</td><td>'; echo '</td><td id="page-title">';
} else } else
echo '<td>'; echo '<td id="page-title">';
if ($title && !$titletranslated) if ($title && !$titletranslated)
echo '<h2>' . i18n($title) . '</h2>'; echo '<h2>' . i18n($title) . '</h2>';
@ -686,8 +686,8 @@ function send_popup_header($title = '')
<title><?= i18n($title) ?></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="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'] ?>/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 rel="stylesheet" href="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/style.css" type="text/css" media="all" />
<link media=all href="<?= $config['SFIABDIRECTORY'] ?>/tableeditor.css" type=text/css rel=stylesheet> <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" <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> rel="stylesheet">
</head> </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'] ?>/js/sfiab.js"></script>
<script type="text/javascript" src="<?= $config['SFIABDIRECTORY'] ?>/theme/<?= $config['theme'] ?>/theme-script.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> <div id="notice_area" class="notice_area"></div>
<? <?

2
register_participants_safety.php
View File

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

0
theme/classic/sfiab.css → theme/classic/style.css
View File

172
theme/science_ation/sfiab.css → theme/science_ation/style.css
View File

@ -1,32 +1,44 @@
html{ html {
overflow-x:hidden; 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-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: small; font-size: small;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #E0E0FF; background: #E0E0FF;
background: #e0e0ff; background: #e0e0ff;
overflow-x:hidden; overflow-x: hidden;
height:100%; 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-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: small; font-size: small;
} }
table{ 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 { td {
vertical-align: top; vertical-align: top;
@ -46,7 +58,7 @@ table tr.odd {
height: 50px; height: 50px;
text-align: center; text-align: center;
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
} }
@ -55,7 +67,7 @@ table tr.odd {
#footer { #footer {
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color : #5C6F90; background-color: #5C6F90;
font-size: 0.8em; font-size: 0.8em;
} }
@ -72,29 +84,22 @@ table tr.odd {
padding: 5px; padding: 5px;
font-size: 1.0em; font-size: 1.0em;
box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black;
border-radius: 0.5rem;
} }
#main { #main {
background: #f1eeff;
padding: 10px;
background:#f1eeff;
padding: 3px;
border: 2px solid Silver;
min-height: 600px; min-height: 600px;
width: 99%; border-radius: 0 0 0.5rem 0.5rem;
} }
#mainwhere { #mainwhere {
margin-right: 10px; background: #EEEEFF;
background: #EEEEFF; padding: 0.5rem;
padding: 3px; border-radius: 0.5rem 0.5rem 0 0;
border-top: 2px solid Silver; font-size: 1em;
border-left: 2px solid Silver;
border-right: 2px solid Silver;
font-size: 0.85em;
width: 99%;
} }
@ -108,19 +113,22 @@ h1 {
font-weight: bold; font-weight: bold;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
h2 { h2 {
font-size: 1.6em; font-size: 1.6em;
font-weight: bold; font-weight: bold;
margin-top: 0; margin-top: 0;
margin-bottom: .3em; margin-bottom: .3em;
} }
h3 { h3 {
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
margin-top: 0; margin-top: 0;
margin-bottom: .2em; margin-bottom: .2em;
} }
h4 { h4 {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
@ -129,35 +137,35 @@ h4 {
} }
ul.mainnav { ul.mainnav {
list-style : none; list-style: none;
margin : 0; margin: 0;
padding : 0; padding: 0;
background-color : #d6d6d6; background-color: #d6d6d6;
width: 165px; width: 165px;
} }
ul.mainnav li { ul.mainnav li {
display : block; display: block;
border-top : 1px solid #a5b5c6; border-top: 1px solid #a5b5c6;
} }
ul.mainnav li a { ul.mainnav li a {
display : block; display: block;
margin : 0; margin: 0;
padding : 6px; padding: 6px;
background-color: #e0e0ff; background-color: #e0e0ff;
font : bold 0.9em/1.5em Arial, sans-serif; font: bold 0.9em/1.5em Arial, sans-serif;
color: black; color: black;
text-decoration : none; text-decoration: none;
} }
ul.mainnav li a:hover { ul.mainnav li a:hover {
background-color: white; background-color: white;
color:black; color: black;
text-decoration: none; text-decoration: none;
} }
@ -187,7 +195,7 @@ a:hover {
padding: 0px; padding: 0px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
} }
.summarytable th { .summarytable th {
@ -200,7 +208,7 @@ a:hover {
font-weight: bold; font-weight: bold;
} }
.summarytable th a{ .summarytable th a {
font-size: 1.0em; font-size: 1.0em;
color: white; color: white;
font-weight: bold; font-weight: bold;
@ -235,7 +243,7 @@ a:hover {
.notice { .notice {
font-weight: bold; font-weight: bold;
border: 1px solid Silver; border: 1px solid Silver;
/*background: #E0E0FF; */ /*background: #E0E0FF; */
background: #FFFFE0; background: #FFFFE0;
font-size: 1em; font-size: 1em;
} }
@ -278,6 +286,15 @@ tr.externalaward {
color: #0000AA; color: #0000AA;
} }
.safety_questions tr {
width: 20px;
overflow: scroll;
}
.safety_questions>* {
font-size: 1.5em;
}
.adminconfigtable td { .adminconfigtable td {
text-align: center; text-align: center;
@ -314,7 +331,7 @@ tr.externalaward {
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
font-size: 0.8em; font-size: 0.8em;
} }
.fundraisingtable th { .fundraisingtable th {
@ -328,7 +345,7 @@ tr.externalaward {
text-align: left; text-align: left;
} }
.fundraisingtable th a{ .fundraisingtable th a {
color: white; color: white;
font-weight: normal; font-weight: normal;
} }
@ -371,7 +388,7 @@ div.notice_area div.error {
} }
div.notice_area div.happy { div.notice_area div.happy {
/* border: 2px solid white; /* border: 2px solid white;
color: green; color: green;
background-color: #99FF99;*/ background-color: #99FF99;*/
color: white; color: white;
@ -379,7 +396,7 @@ div.notice_area div.happy {
} }
.date { .date {
width: 80px; width: 80px;
} }
@ -401,8 +418,8 @@ div.notice_area div.happy {
/* Override the titlebar padding, it's too big, make the font /* Override the titlebar padding, it's too big, make the font
* a happy size */ * a happy size */
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding: 0.2em 0.5em 0.2em .5em ; padding: 0.2em 0.5em 0.2em .5em;
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -441,7 +458,7 @@ div.ui-tabs ul.ui-tabs-nav {
} }
.ui-datepicker { .ui-datepicker {
z-index: 1003; z-index: 1003;
} }
.text-link { .text-link {
@ -464,20 +481,21 @@ div.ui-tabs ul.ui-tabs-nav {
color: #c0c0c0; color: #c0c0c0;
} }
.tablesorter-headerRow{ .tablesorter-headerRow {
background:black; background: black;
} }
#registration_list{ #registration_list {
background:black; background: black;
} }
#menu-toggle-button{
#menu-toggle-button {
display: none; display: none;
} }
#sidebar.active{ #sidebar.active {
display: block; display: block;
position: fixed; position: fixed;
top: 20%; top: 20%;
@ -485,11 +503,11 @@ div.ui-tabs ul.ui-tabs-nav {
z-index: 100; z-index: 100;
} }
#sidebar.active ~ #main-content{ #sidebar.active~#main-content {
opacity: 0.7; opacity: 0.5;
} }
#menu-toggle-button:hover{ #menu-toggle-button:hover {
cursor: pointer; cursor: pointer;
} }
@ -510,39 +528,39 @@ div.ui-tabs ul.ui-tabs-nav {
display: block; display: block;
height: 25px; height: 25px;
width: 25px; width: 25px;
} }
.user-info-table td{ .user-info-table td {
display: block; display: block;
} }
.adminconfigtable tr{ .adminconfigtable tr {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
} }
.thematic-break{ .thematic-break {
display: none; display: none;
} }
@media screen and (max-width: 410px){ @media screen and (max-width: 410px) {
.adminconfigtable{ .adminconfigtable {
margin: auto; margin: auto;
} }
.adminconfigtable tr{
.adminconfigtable tr {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
adminconfigtable
.thematic-break{ adminconfigtable .thematic-break {
display: block; display: block;
} }
} }

5
tableeditor.css → theme/science_ation/tableeditor.css
View File

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