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

made the main outline of the page responsive including toggling the sidebar on smaller screens.

Browse Source
This commit is contained in:
Armanveer Gill 2025-01-14 04:59:28 -05:00
parent 809f63decc
commit 98df775313
3 changed files with 68 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
common.inc.php
View File

@ -397,14 +397,19 @@ function send_header($title="", $nav=null, $icon=null, $titletranslated=false)
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title><? //if($title && !$titletranslated) echo i18n($title); else if($title) echo $title; else echo i18n($config['fairname']); ?></title> <title><? //if($title && !$titletranslated) echo i18n($title); else if($title) echo $title; else echo i18n($config['fairname']); ?></title>
<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/new_default/sfiab.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/new_default/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']?>/tableeditor.css" type="text/css" media="all" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</head> </head>
<body> <body>
<!-- <? if($title && !$titletranslated) echo i18n($title); else if($title) echo $title; else echo i18n($config['fairname']); ?> --> <!-- <? if($title && !$titletranslated) echo i18n($title); else if($title) echo $title; else echo i18n($config['fairname']); ?> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/js/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/js/jqueryui/1.7.2/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>
<script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/theme/new_default/theme-script.js"></script>
<script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/js/tablesorter/jquery.tablesorter.min.js"></script> <script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/js/tablesorter/jquery.tablesorter.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
@ -424,6 +429,14 @@ if(file_exists($prependdir."data/logo-100.gif"))
echo "<img align=\"left\" height=\"50\" src=\"".$config['SFIABDIRECTORY']."/data/logo-100.gif\">"; echo "<img align=\"left\" height=\"50\" src=\"".$config['SFIABDIRECTORY']."/data/logo-100.gif\">";
echo "<h1>".i18n($config['fairname'])."</h1>"; echo "<h1>".i18n($config['fairname'])."</h1>";
echo "<span id='menu-toggle-button' onClick='toggle_sidebar()' class='material-symbols-outlined'>
menu
</span>"
?>
</div>
<hr />
<?
echo "<div align=\"right\" style=\"font-size: 0.75em;\">"; echo "<div align=\"right\" style=\"font-size: 0.75em;\">";
if(isset($_SESSION['users_type'])) { if(isset($_SESSION['users_type'])) {
$types = array('volunteer' => 'Volunteer', 'judge' => 'Judge', $types = array('volunteer' => 'Volunteer', 'judge' => 'Judge',
@ -453,10 +466,9 @@ if(isset($_SESSION['users_type'])) {
} }
echo "</div>"; echo "</div>";
?> ?>
<hr />
</div> <table id='content' cellpadding="5" width="100%">
<table cellpadding="5" width="100%"> <tr><td id='sidebar' width="175">
<tr><td width="175">
<? <?
global $pdo; global $pdo;
//if the date is greater than the date/time that the confirmed participants gets posted, //if the date is greater than the date/time that the confirmed participants gets posted,
@ -569,7 +581,7 @@ echo "</ul>";
?> ?>
</div> </div>
</td><td> </td><td id='main-content'>
<? <?
if(is_array($nav)) { if(is_array($nav)) {
@ -682,6 +694,8 @@ function send_popup_header($title="")
<link rel="stylesheet" href="<?=$config['SFIABDIRECTORY']?>/theme/new_default/sfiab.css" type="text/css" media="all" /> <link rel="stylesheet" href="<?=$config['SFIABDIRECTORY']?>/theme/new_default/sfiab.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']?>/tableeditor.css" type=text/css rel=stylesheet>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head> </head>
<body onLoad="window.focus()"> <body onLoad="window.focus()">
<script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/js/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="<?=$config['SFIABDIRECTORY']?>/js/jquery/1.3.2/jquery.min.js"></script>

44
theme/new_default/sfiab.css
View File

@ -5,7 +5,7 @@ body
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #E0E0FF; background: #E0E0FF;
background: yellow;
height:100%; height:100%;
} }
@ -15,6 +15,8 @@ input, textarea, select
font-size: small; font-size: small;
} }
td { td {
vertical-align: top; vertical-align: top;
} }
@ -29,6 +31,7 @@ table tr.odd {
} }
#header { #header {
height: 50px; height: 50px;
text-align: center; text-align: center;
background: #E0E0FF; background: #E0E0FF;
@ -442,4 +445,43 @@ div.ui-tabs ul.ui-tabs-nav {
#menu-toggle-button{
display: none;
}
#sidebar.active{
display: block;
position: fixed;
top: 20%;
left: 0;
z-index: 100;
}
#sidebar.active ~ #main-content{
opacity: 0.7;
}
#menu-toggle-button:hover{
cursor: pointer;
}
@media (max-width: 480px){
#header{
display: flex;
align-items: center;
}
#sidebar{
display: none;
}
#menu-toggle-button{
display: block;
height: 25px;
width: 25px;
}
}

5
theme/new_default/theme-script.js Normal file
View File

@ -0,0 +1,5 @@
function toggle_sidebar(){
var sidebar = document.querySelector('#sidebar');
sidebar.classList.toggle('active');
}