Browse the code

Download a patch

Differences between 625 and 626 on /.

Number of edited files:

6 (0 added, 0 deleted and 6 modified)

Revision 626

erwanb

About 1 year and 7 months ago.

[user interface] Initial work to get an animated menu for mobile users

Added file(s)	Deleted file(s)	Modified file(s)
		/trunk/inc/classes/template.php ↓ /trunk/inc/globalFunctions.php ↓ /trunk/inc/modules/index/views/default.php ↓ /trunk/inc/templates/default/mobile.css ↓ /trunk/inc/templates/default/screen.css ↓ /trunk/inc/templates/default/scripts/functions.js ↓


               ($tab['module'] == 'index' && $this->page[1] != 'project' &&
                !in_array($this->page[1], $modlist)))
                $npmenu .= '<li><a href="'.htmlspecialchars($tab['link']).
                           '" class="current">'.htmlspecialchars($tab['title']).
                           '</a></li>';
                           '&quot; class="current"><strong>'.
                           mb_substr(htmlspecialchars($tab['title']), 0, 2).
                           '</strong><span>'.htmlspecialchars($tab['title']).
                           '</span></a></li>';
            else
                $npmenu .= '<li><a href="'.htmlspecialchars($tab['link']).
                           '">'.htmlspecialchars($tab['title']).'</a></li>';
                           '"><strong>'.
                           mb_substr(htmlspecialchars($tab['title']), 0, 2).
                           '</strong><span>'.
                           htmlspecialchars($tab['title']).'</span></a></li>';
        }
        $temp['tpl:notepadmenu'] = $npmenu;



Old	New	Code
866	866	($tab['module'] == 'index' && $this->page[1] != 'project' &&
867	867	!in_array($this->page[1], $modlist)))
868	868	$npmenu .= '<li><a href="'.htmlspecialchars($tab['link']).
869		'" class="current">'.htmlspecialchars($tab['title']).
870		'</a></li>';
	869	'" class="current"><strong>'.
	870	mb_substr(htmlspecialchars($tab['title']), 0, 2).
	871	'</strong><span>'.htmlspecialchars($tab['title']).
	872	'</span></a></li>';
871	873	else
872	874	$npmenu .= '<li><a href="'.htmlspecialchars($tab['link']).
873		'">'.htmlspecialchars($tab['title']).'</a></li>';
	875	'"><strong>'.
	876	mb_substr(htmlspecialchars($tab['title']), 0, 2).
	877	'</strong><span>'.
	878	htmlspecialchars($tab['title']).'</span></a></li>';
874	879	}
875	880	$temp['tpl:notepadmenu'] = $npmenu;
876	881
877	882


 */
function HTMLSourceView($source, $lang, $hlline=FALSE, $link=FALSE, $n=TRUE)
{
    if (file_exists('/usr/share/php-geshi/geshi.php'))
        require_once('/usr/share/php-geshi/geshi.php');
    else
    //if (file_exists('/usr/share/php-geshi/geshi.php'))
    //    require_once('/usr/share/php-geshi/geshi.php');
    //else
        require_once(CT_BASEDIR.'/inc/libs/geshi/geshi.php');

    $geshi = new GeSHi($source, $lang);


Old	New	Code
1170	1170	*/
1171	1171	function HTMLSourceView($source, $lang, $hlline=FALSE, $link=FALSE, $n=TRUE)
1172	1172	{
1173		if (file_exists('/usr/share/php-geshi/geshi.php'))
1174		require_once('/usr/share/php-geshi/geshi.php');
1175		else
	1173	//if (file_exists('/usr/share/php-geshi/geshi.php'))
	1174	// require_once('/usr/share/php-geshi/geshi.php');
	1175	//else
1176	1176	require_once(CT_BASEDIR.'/inc/libs/geshi/geshi.php');
1177	1177
1178	1178	$geshi = new GeSHi($source, $lang);
1179	1179


        $this->error = $error;
        $this->langlist = $langlist;
        $this->lang = $lang;
print_r($this->page);

        // Cleaning URL
        if (isset($this->page[1]) && $this->page[1] == 'api')
            array_pop($this->page);
print_r($this->page);

        // List project by tags if tag specified
        if (!empty($this->page[3]) && !empty($this->page[4]))
        {


Old	New	Code
27	27	$this->error = $error;
28	28	$this->langlist = $langlist;
29	29	$this->lang = $lang;
30		print_r($this->page);
	30
31	31	// Cleaning URL
32	32	if (isset($this->page[1]) && $this->page[1] == 'api')
33	33	array_pop($this->page);
34		print_r($this->page);
	34
35	35	// List project by tags if tag specified
36	36	if (!empty($this->page[3]) && !empty($this->page[4]))
37	37	{
38	38

Old	New	Code
1	1	div#globalmenu {
	2	width: 13%;
	3	}
	4
	5	div#globalmenu #menuabstract {
2	6	display: none;
3	7	}
4	8
	9	div#globalmenu #entries li a span {
	10	display: none;
	11	}
	12
	13	div#globalmenu #entries li a strong {
	14	display: inline;
	15	margin-left: 0.3em;
	16	}
	17
	18	div#globalmenu #footer {
	19	display: none;
	20	}
	21
	22	#header_page img.logo {
	23	margin-left: 18%;
	24	}
	25
5	26	#header_page form, #header_page ul#buttons {
6	27	display: none;
7	28	}
11	32	}
12	33
13	34	#header_menu {
14		overflow: scroll;
15		white-space: nowrap;
	35	overflow: scroll;
	36	white-space: nowrap;
16	37	}
17	38
	39	.userbox li.useractions {
	40	display: none;
	41	}
18	42
19	43	#content {
20		margin-left: 0%;
21		}
	44	margin-left: 10%;
	45	}
22	46


  padding: 10px;
}

div#globalmenu #entries li a span {
  display: inline;
}

div#globalmenu #entries li a strong {
  display: none;
}

#globalmenu li a:hover {
  background-color: {color_800};
  text-decoration: none;


Old	New	Code
73	73	padding: 10px;
74	74	}
75	75
	76	div#globalmenu #entries li a span {
	77	display: inline;
	78	}
	79
	80	div#globalmenu #entries li a strong {
	81	display: none;
	82	}
	83
76	84	#globalmenu li a:hover {
77	85	background-color: {color_800};
78	86	text-decoration: none;
79	87


widemenu = true;
if (window.innerWidth < 800) {
  // Mobile
  var is_mobile = true; 
  var widemenu = false;

  var wide_values = ['50%', '12%', 'inline', 'block', '10%']
  var small_values = ['13%', '4.5em', 'none', 'none', '10%']
} else {
  // Screen
  var is_mobile = false;
  var widemenu = true;

  var wide_values = ['11%', '12%', 'inline', 'block', '12%']
  var small_values = ['3.5em', '4.5em', 'none', 'none', '4.5em']
}

function togglemenu()
{
    menu = document.getElementById('globalmenu');
    logo = document.getElementById('pagelogo');
    abstract = document.getElementById('menuabstract');
    entries = document.getElementById('entries');
    footer = document.getElementById('footer');
    content = document.getElementById('content');
    var menu = document.getElementById('globalmenu');
    var logo = document.getElementById('pagelogo');
    var abstract = document.getElementById('menuabstract');
    var footer = document.getElementById('footer');
    var content = document.getElementById('content');

    var menu_txt = document.querySelectorAll('ul#entries > li > a > span');
    var menu_abs = document.querySelectorAll('ul#entries > li > a > strong');

    if (widemenu == true)
    {
        menu.style.width = '3.5em';
        logo.style.marginLeft = '4.5em';
        abstract.style.display = 'none';
        entries.style.display = 'none';
        footer.style.display = 'none';
        content.style.marginLeft = '4.5em';
        menu.style.width = small_values[0];
        logo.style.marginLeft = small_values[1];
        abstract.style.display = small_values[2];
        footer.style.display = small_values[3];
        content.style.marginLeft = small_values[4];

        menu_abs.forEach(function(item) {
          item.style.display = 'block';
        });

        menu_txt.forEach(function(item) {
          item.style.display = 'none';
        });

        widemenu = false;
    }
    else
    {
        menu.style.width = '11%';
        logo.style.marginLeft = '12%';
        abstract.style.display = 'inline';
        entries.style.display = 'block';
        footer.style.display = 'block';
        content.style.marginLeft = '12%';
        menu.style.width = wide_values[0];
        logo.style.marginLeft = wide_values[1];
        abstract.style.display = wide_values[2];
        footer.style.display = wide_values[3];
        content.style.marginLeft = wide_values[4];

        menu_abs.forEach(function(item) {
          item.style.display = 'none';
        });

        menu_txt.forEach(function(item) {
          item.style.display = 'block';
        });

        widemenu = true;
    }
}


Old	New	Code
1		widemenu = true;
	1	if (window.innerWidth < 800) {
	2	// Mobile
	3	var is_mobile = true;
	4	var widemenu = false;
	5
	6	var wide_values = ['50%', '12%', 'inline', 'block', '10%']
	7	var small_values = ['13%', '4.5em', 'none', 'none', '10%']
	8	} else {
	9	// Screen
	10	var is_mobile = false;
	11	var widemenu = true;
	12
	13	var wide_values = ['11%', '12%', 'inline', 'block', '12%']
	14	var small_values = ['3.5em', '4.5em', 'none', 'none', '4.5em']
	15	}
	16
2	17	function togglemenu()
3	18	{
4		menu = document.getElementById('globalmenu');
5		logo = document.getElementById('pagelogo');
6		abstract = document.getElementById('menuabstract');
7		entries = document.getElementById('entries');
8		footer = document.getElementById('footer');
9		content = document.getElementById('content');
	19	var menu = document.getElementById('globalmenu');
	20	var logo = document.getElementById('pagelogo');
	21	var abstract = document.getElementById('menuabstract');
	22	var footer = document.getElementById('footer');
	23	var content = document.getElementById('content');
10	24
	25	var menu_txt = document.querySelectorAll('ul#entries > li > a > span');
	26	var menu_abs = document.querySelectorAll('ul#entries > li > a > strong');
	27
11	28	if (widemenu == true)
12	29	{
13		menu.style.width = '3.5em';
14		logo.style.marginLeft = '4.5em';
15		abstract.style.display = 'none';
16		entries.style.display = 'none';
17		footer.style.display = 'none';
18		content.style.marginLeft = '4.5em';
	30	menu.style.width = small_values[0];
	31	logo.style.marginLeft = small_values[1];
	32	abstract.style.display = small_values[2];
	33	footer.style.display = small_values[3];
	34	content.style.marginLeft = small_values[4];
	35
	36	menu_abs.forEach(function(item) {
	37	item.style.display = 'block';
	38	});
	39
	40	menu_txt.forEach(function(item) {
	41	item.style.display = 'none';
	42	});
	43
19	44	widemenu = false;
20	45	}
21	46	else
22	47	{
23		menu.style.width = '11%';
24		logo.style.marginLeft = '12%';
25		abstract.style.display = 'inline';
26		entries.style.display = 'block';
27		footer.style.display = 'block';
28		content.style.marginLeft = '12%';
	48	menu.style.width = wide_values[0];
	49	logo.style.marginLeft = wide_values[1];
	50	abstract.style.display = wide_values[2];
	51	footer.style.display = wide_values[3];
	52	content.style.marginLeft = wide_values[4];
	53
	54	menu_abs.forEach(function(item) {
	55	item.style.display = 'none';
	56	});
	57
	58	menu_txt.forEach(function(item) {
	59	item.style.display = 'block';
	60	});
	61
29	62	widemenu = true;
30	63	}
31	64	}
32	65

Lab

CodingTeam

Browse the code