Making Mobile friendly Website


#1

I am not a coderr. But I understand something about the codding & have a good idea.

So for my prupose I downloaded a php script & edited it as I need.

But the script is not mobile friendly!

The developer made the script pretty well but there was no option to optimize it for mobile!

I tried some css from the W3SCHOOL, also the w3.css file. But I failed to make it as i wanted. it didn’t even went a liitle!

So I need some help making it friendly

If anyone help me in this case that would be helpfull!!

The script is basically a Indexing script! http://prdownloads.sourceforge.net/autoindex/AutoIndex-1.5.4.zip?download Source file Is here.

I am giving the index &css file of mine

The Css


/* Body */
.autoindex_body, html
{
	font-family: verdana, lucidia, sans-serif;
	font-size: 13px;
	background-color: #F0F0F0;
}

/* Images */
.autoindex_body img
{
	border: none;
}

/* Tables */
.autoindex_table
{
	width: 100%;
	border: none;
	border-spacing: 2px;
}
.light_row
{
	background-color: #F2F6FC;
	font-size: 13px;
}
.dark_row
{
	background-color: #DADEEE;
	font-size: 13px;
}
.autoindex_td
{
	font-size: 13px;
	font-family: verdana, lucidia, sans-serif;
	vertical-align: top;
	border: 1px solid #7F8FA9;
	padding: 0px;
	text-align: left;
	white-space: nowrap;
}
.autoindex_td_right
{
	font-size: 13px;
	font-family: verdana, lucidia, sans-serif;
	vertical-align: top;
	border: 1px solid #7F8FA9;
	padding: 0px;
	text-align: right;
	white-space: nowrap;
}
.autoindex_th
{
	font-size: 13px;
	background-color: #7F8FAD;
	border: 1px solid #000010;
	padding: 0px;
}

/* Links */
.plain_link
{
	color: #000000;
	text-decoration: none;
}
.autoindex_a:link
{
	color: #0000FF;
	text-decoration: none;
}
.autoindex_a:visited, .autoindex_a:active, .autoindex_a:hover
{
	color: #00008F;
	text-decoration: none;
}
.light_row:hover, .dark_row:hover
{
	background-color: #FFFFA8;
}

/* Buttons */
.button
{
	color: #707070;
	background-color: #F2F6FC;
	font-family: sans-serif;
	font-size: 11px;
	text-align: left;
	vertical-align: middle;
	font-weight: bold;
	cursor: pointer;
	border: none;
	padding: 3px 10px 3px 10px;
}

/* Misc. */
.paragraph
{
	background: #F2F6FC;
	font-size: 13px;
	color: #000020;
}
.autoindex_hr
{
	color: #000020;
	background-color: #000020;
	border: none;
	width: 75%;
	height: 1px;
}
.autoindex_small
{
	font-size: 10px;
}

The php

<?php

/**
 * Handles all requests by the browser. This is the only file that can be
 * accessed directly.
 *
 * @package AutoIndex
 * @author Justin Hagstrom <JustinHagstrom@yahoo.com>
 * @version 1.2.1 (January 06, 2007)
 *
 * @copyright Copyright (C) 2002-2007 Justin Hagstrom
 * @license http://www.gnu.org/licenses/gpl.html GNU General Public License (GPL)
 *
 * @link http://autoindex.sourceforge.net
 */

/*
   AutoIndex PHP Script is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.

   AutoIndex PHP Script is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/

/**
 * OPTIONAL SETTINGS:
 */

//filenames and paths for configuration related files
define('CONFIG_STORED', 'AutoIndex.conf.php');
define('CONFIG_GENERATOR', 'config.php');

//paths for files that will be included
define('PATH_TO_CLASSES', './classes/');
define('PATH_TO_LANGUAGES', './languages/');
define('LANGUAGE_FILE_EXT', '.txt');

//filenames of template files
define('GLOBAL_HEADER', 'global_header.tpl');
define('GLOBAL_FOOTER', 'global_footer.tpl');
define('TABLE_HEADER', 'table_header.tpl');
define('TABLE_FOOTER', 'table_footer.tpl');
define('EACH_FILE', 'each_file.tpl');

/**
 * When ENABLE_CACHE is true, the indexes of directories will be stored in
 * files in the folder CACHE_STORAGE_DIR. You will notice a speed improvement
 * when viewing folders that contain a few thousand files. However, the contents
 * of the indexed folders will not be updated until you delete the cache file.
 */
define('ENABLE_CACHE', false);

/**
 * This is the folder cache data will be stored in. PHP needs write permission
 * in this directory. You can use an absolute path or a relative path, just
 * make sure there is a slash at the end.
 */
define('CACHE_STORAGE_DIR', './cache/');

/**
 * Format to display dates in.
 * @see date()
 */
define('DATE_FORMAT', 'Y-M-d');

/**
 * Sets debug mode. Off (false) by default.
 */
define('DEBUG', false);

/* END OPTIONAL SETTINGS */


/** The time this script began to execute. */
define('START_TIME', microtime(true));

/** Level for disabled/banned accounts. */
define('BANNED', -1);

/** Level for Guest users (users who are not logged in). */
define('GUEST', 0);

/** Level for regular user accounts. */
define('USER', 1);

/** Level for moderator ("super user") accounts. */
define('MODERATOR', 2);

/** Level for Admin users. */
define('ADMIN', 3);

/**
 * Minimum user level allowed to upload files.
 * Use the ADMIN, MODERATOR, USER, GUEST constants.
 * GUEST will allow non-logged-in users to upload.
 */
define('LEVEL_TO_UPLOAD', USER);

/** The version of AutoIndex PHP Script (the whole release, not based on individual files). */
define('VERSION', '2.2.4');

/**
 * This must be set to true for other included files to run. Setting it to
 * false could be used to temporarily disable the script.
 */
define('IN_AUTOINDEX', true);

if (@get_magic_quotes_gpc())
//remove any slashes added by the "magic quotes" setting
{
	$_GET = array_map('stripslashes', $_GET);
	$_POST = array_map('stripslashes', $_POST);
}


$_GET = array_change_key_case($_GET, CASE_LOWER);
$_POST = array_change_key_case($_POST, CASE_LOWER);

if (@ini_get('zlib.output_compression') == '1')
//compensate for compressed output set in php.ini
{
	header('Content-Encoding: gzip');
}

/*
 * Uncomment the following code to turn on strict XHTML 1.1 compliance in
 * users' browsers. If you do this, make sure any changes you make to the
 * template do not break XHTML 1.1 compliance.
 */
/*if (isset($_SERVER['HTTP_ACCEPT']) && preg_match('#application/(xhtml\+xml|\*)#i', $_SERVER['HTTP_ACCEPT']))
{
	header('Content-Type: application/xhtml+xml');
}*/

session_name('AutoIndex2');
session_start();

/**
 * Formats $text within valid XHTML 1.1 tags and doctype.
 *
 * @param string $text
 * @param string $title
 * @return string
 */
function simple_display($text, $title = 'Error on Page')
{
	return '<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>' . $title . '</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
	<style type="text/css" title="AutoIndex Default">
		html, body
		{
			font-family: verdana, lucidia, sans-serif;
			font-size: 17x;
			background-color: #F0F0F0;
			color: #000000;
            height: auto;
            width: 500px;
		}




	</style>
<p>' . $text . '</p></body></html>

<!--

Powered by AutoIndex PHP Script (version ' . VERSION . ')
Copyright (C) 2002-2007 Justin Hagstrom
http://autoindex.sourceforge.net

-->
';
}

/**
 * This function is automatically called by PHP when an undefined class is
 * called.
 *
 * A file with the classname followed by .php is included to load the class.
 * The class should start with an upper-case letter with each new word also in
 * upper-case. The filename must match the class name (including case).
 *
 * @param string $class The name of the undefined class
 */
function __autoload($class)
{
	if ($class != 'self')
	{
		$file = PATH_TO_CLASSES . $class . '.php';
		/** Try to load the class file. */
		if (!@include_once($file))
		{
			die(simple_display('Error including file <em>'
			. htmlentities($file) . '</em> - cannot load class.'));
		}
	}
}

/**
 * This is used to report a fatal error that we cannot display with the Display
 * class. All Exceptions used in AutoIndex should inherit from this class.
 *
 * @package AutoIndex
 */
class ExceptionFatal extends Exception {}

try
{
	//now we need to include either the stored settings, or the config generator:
	if (@is_file(CONFIG_STORED))
	{
		if (!@is_readable(CONFIG_STORED))
		{
			throw new ExceptionFatal('Make sure PHP has permission to read the file <em>'
			. Url::html_output(CONFIG_STORED) . '</em>');
		}
		$config = new ConfigData(CONFIG_STORED);
	}
	else if (@is_file(CONFIG_GENERATOR))
	{
		/** Include the config generator so a new config file can be created. */
		if (!@include_once(CONFIG_GENERATOR))
		{
			throw new ExceptionFatal('Error including file <em>'
			. Url::html_output(CONFIG_GENERATOR) . '</em>');
		}
		die();
	}
	else
	{
		throw new ExceptionFatal('Neither <em>'
		. Url::html_output(CONFIG_GENERATOR) . '</em> nor <em>'
		. Url::html_output(CONFIG_STORED) . '</em> could be found.');
	}
	
	
	//find and store the user's IP address and hostname:
	$ip = (isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : 'N/A');
	if (isset($_SESSION['host']))
	{
		$host = $_SESSION['host'];
	}
	else
	{
		$_SESSION['host'] = $host = @gethostbyaddr($ip);
	}

	
	//Create a language object:
	$words = new Language();
	
	
	//Create a logging object:
	$log = new Logging($config -> __get('log_file'));
	
	
	foreach ($config as $key => $item)
	/* Go through each config setting, and set a constant with each setting's
	 * name to either true or false depending on if the config setting is
	 * enabled.
	 */
	{
		$key = strtoupper($key);
		if (defined($key))
		{
			throw new ExceptionFatal(Url::html_output($key)
			. ' is already defined in <em>' . basename(Url::html_output($_SERVER['PHP_SELF']))
			. '</em>, and should not be in the config file.');
		}
		define($key, ($item != 'false' && $item != '0'));
	}
	
	
	//make sure all required settings are set in the config file
	foreach (array('base_dir', 'icon_path', 'language', 'template',
		'log_file', 'description_file', 'user_list', 'download_count',
		'hidden_files', 'banned_list', 'show_dir_size', 'use_login_system',
		'force_download', 'search_enabled', 'anti_leech', 'entries_per_page',
		'must_login_to_download', 'archive', 'days_new', 'thumbnail_height',
		'bandwidth_limit', 'md5_show', 'parse_htaccess') as $set)
	{
		if (!defined(strtoupper($set)))
		{
			throw new ExceptionFatal('Required setting <em>' . $set
			. '</em> is not set in <em>' . Url::html_output(CONFIG_STORED)
			. '</em>');
		}
	}
	
	
	/* From this point on, we can throw ExceptionDisplay rather than
	 * Exception since all the configuration is done.
	 */
	
	$b_list = $only_these_ips = $banned_ips = array();
	if (BANNED_LIST && @is_file($config -> __get('banned_list')))
	//make sure the user is not banned
	{
		$b_list = @file($config -> __get('banned_list'));
		if ($b_list === false)
		{
			throw new ExceptionDisplay('Error reading from banned_list file.');
		}
		for ($i = 0; $i < count($b_list); $i++)
		{
			$b_list[$i] = rtrim($b_list[$i], "\r\n");
			if (ConfigData::line_is_comment($b_list[$i]))
			{
				continue;
			}
			if ($b_list[$i]{0} === ':')
			{
				$only_these_ips[] = substr($b_list[$i], 1);
			}
			else
			{
				$banned_ips[] = $b_list[$i];
			}
		}
		if (count($only_these_ips) > 0)
		{
			if (!(DirectoryList::match_in_array($ip, $only_these_ips) ||
				DirectoryList::match_in_array($host, $only_these_ips)))
			{
				throw new ExceptionDisplay($words -> __get('the administrator has blocked your ip address or hostname') . '.');
			}
		}
		else if (DirectoryList::match_in_array($ip, $banned_ips) ||
			DirectoryList::match_in_array($host, $banned_ips))
		{
			throw new ExceptionDisplay($words -> __get('the administrator has blocked your ip address or hostname') . '.');
		}
	}
	
	$show_only_these_files = $hidden_files = array();
	if (HIDDEN_FILES && @is_file($config -> __get('hidden_files')))
	//store the hidden file list in $hidden_list
	{
		$hidden_list = @file($config -> __get('hidden_files'));
		if ($hidden_list === false)
		{
			throw new ExceptionDisplay('Error reading from "hidden_files" file.');
		}
		for ($i = 0; $i < count($hidden_list); $i++)
		{
			$hidden_list[$i] = rtrim($hidden_list[$i], "\r\n");
			if (ConfigData::line_is_comment($hidden_list[$i]))
			{
				continue;
			}
			if ($hidden_list[$i]{0} === ':')
			{
				$show_only_these_files[] = substr($hidden_list[$i], 1);
			}
			else
			{
				$hidden_files[] = $hidden_list[$i];
			}
		}
	}
	
	
	//size of the "chunks" that are read at a time from the file (when $force_download is on)
	$speed = (BANDWIDTH_LIMIT ? $config -> __get('bandwidth_limit') : 8);
	
	
	if (DOWNLOAD_COUNT)
	{
		if (!@is_file($config -> __get('download_count')))
		{
			$h = @fopen($config -> __get('download_count'), 'wb');
			if ($h === false)
			{
				throw new ExceptionDisplay('Could not open download count file for writing.'
				. ' Make sure PHP has write permission to this file.');
			}
			fclose($h);
		}
		$downloads = new ConfigData($config -> __get('download_count'));
	}
	
	
	//create a user object:
	$log_login = false;
	if (USE_LOGIN_SYSTEM && isset($_POST['username'], $_POST['password'])
		&& $_POST['username'] != '' && $_POST['password'] != '')
	{
		$you = new UserLoggedIn($_POST['username'], sha1($_POST['password']));
		$log_login = true;
		$_SESSION['password'] = sha1($_POST['password']);
		unset($_POST['password']);
		$_SESSION['username'] = $_POST['username'];
	}
	else if (USE_LOGIN_SYSTEM && isset($_SESSION['username'], $_SESSION['password']))
	{
		$you = new UserLoggedIn($_SESSION['username'], $_SESSION['password']);
	}
	else
	{
		$you = new User();
		if (MUST_LOGIN_TO_DOWNLOAD && USE_LOGIN_SYSTEM)
		{
			$str = '<p>You must login to view and download files.</p>'
			. '<table border="0" cellpadding="8" cellspacing="0">'
			. '<tr class="paragraph"><td class="autoindex_td">'
			.  $you -> login_box() . '</td></tr></table>';
			echo new Display($str);
			die();
		}
	}
	
	
	//set the logged in user's home directory:
	$dir = Item::make_sure_slash((($you -> home_dir == '') ? $config -> __get('base_dir') : $you -> home_dir));
	$config -> set('base_dir', $dir);
	$subdir = '';
	
	if (isset($_GET['dir']))
	{
		$dir .= Url::clean_in

So What change in the php or the css file will make it more mobile friendly?

**Thanks in advance **


#2

Welcome to the forums, @nafio62346.

Do you have a link to a live page where we can see this in action? If not, can you please post the HTML for the page. (View the page source and post the rendered HTML, rather than the PHP which produces it.)


#4

https://mirror.textile.cf
That’s the website I run :blush:
This is the live version also :grin:


#6

It looks as though you need to make your table responsive. @PaulOB has a codepen demonstrating how this can be done here.


#7

Here’s another mobile table example from a recent question on the forums.

You also need the meta viewort tag in the head of your page otherwise media queries will not take effect.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media queries will be needed to modify the layout for smaller screens and to make elements fit better in the available space.

I would also suggest that you revise the html to use modern techniques as your page is using some very old fashioned code. :slight_smile: The page doesn’t really seem to have any cohesive structure (apart from your table) and really needs some design and thought put into it. There is a centred table with text at left edge and right edge of the browser window which looks very bad on my widescreen. You would be better off using a wrapper and setting a max-width to avoid this happening.

If this is a learning process we can help you through this a step at a time but (unless you are lucky) no one is going to re-write it for free :slight_smile:

Lastly take a trip to the validator to fix some simple errors in your html.


#8

Thanks for your suggestion dude!!!