Fossil SCM

Simple changes to the default CSS and Header that seem to help Fossil work better on mobile by avoiding menu wraps.

drh 2018-08-20 16:06 trunk

Commit 5fb040810e8f8ee47cbad0b80999a23442e748c9ccaf0a0a3e9d94cfe947732c

Parent 5416287d18f9486…

2 files changed +27 -1 +10

~ skins/default/css.txt ~ skins/default/header.txt

M skins/default/css.txt

+27 -1

		--- skins/default/css.txt
		+++ skins/default/css.txt
		@@ -1,8 +1,26 @@
	1	+/* Add the "mobileonly" class to any elements that should be visible
	2	+** on narrow-screen mobile devices only */
	3	+@media screen and (min-width: 600px){
	4	+ /* Settings for wide desktop screens */
	5	+ .mobileonly {display: none;}
	6	+}
	7	+/* Add the "desktoponly" class to any elements that should be visible
	8	+** on desktops with at least 600 pixels of horizontal space. */
	9	+@media screen and (max-width: 600px){
	10	+ /* Settings for narrow mobile screens */
	11	+ .desktoponly {display: none;}
	12	+}
	13	+/* Add the "wideonly" class to any elements that should be visible
	14	+** on wide-screen desktops with */
	15	+@media screen and (max-width: 800px){
	16	+ /* Settings for screens that are less than 800px wide */
	17	+ .wideonly {display: none;}
	18	+}
	19	+
1	20	body {
2	21	margin: 0 auto;
3		- min-width: 800px;
4	22	padding: 0px 20px;
5	23	background-color: white;
6	24	font-family: sans-serif;
7	25	font-size:14pt;
8	26	-moz-text-size-adjust: none;
		@@ -83,10 +101,12 @@
83	101	clear:both;
84	102	padding:10px;
85	103	background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
86	104	border:1px solid #eaeaea;
87	105	border-radius:5px;
	106	+ overflow: auto;
	107	+ white-space: nowrap;
88	108	}
89	109
90	110	.mainmenu a {
91	111	padding: 10px 20px;
92	112	text-decoration:none;
		@@ -200,5 +220,11 @@
200	220	white-space: nowrap;
201	221	}
202	222	span.submenuctrl, span.submenuctrl input, select.submenuctrl {
203	223	color: #777;
204	224	}
	225	+span.submenuctrl {
	226	+ white-space: nowrap;
	227	+}
	228	+div.submenu label {
	229	+ white-space: nowrap;
	230	+}
205	231

	--- skins/default/css.txt
	+++ skins/default/css.txt
	@@ -1,8 +1,26 @@



















1	body {
2	margin: 0 auto;
3	min-width: 800px;
4	padding: 0px 20px;
5	background-color: white;
6	font-family: sans-serif;
7	font-size:14pt;
8	-moz-text-size-adjust: none;
	@@ -83,10 +101,12 @@
83	clear:both;
84	padding:10px;
85	background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
86	border:1px solid #eaeaea;
87	border-radius:5px;


88	}
89
90	.mainmenu a {
91	padding: 10px 20px;
92	text-decoration:none;
	@@ -200,5 +220,11 @@
200	white-space: nowrap;
201	}
202	span.submenuctrl, span.submenuctrl input, select.submenuctrl {
203	color: #777;
204	}






205

	--- skins/default/css.txt
	+++ skins/default/css.txt
	@@ -1,8 +1,26 @@
1	/* Add the "mobileonly" class to any elements that should be visible
2	** on narrow-screen mobile devices only */
3	@media screen and (min-width: 600px){
4	/* Settings for wide desktop screens */
5	.mobileonly {display: none;}
6	}
7	/* Add the "desktoponly" class to any elements that should be visible
8	** on desktops with at least 600 pixels of horizontal space. */
9	@media screen and (max-width: 600px){
10	/* Settings for narrow mobile screens */
11	.desktoponly {display: none;}
12	}
13	/* Add the "wideonly" class to any elements that should be visible
14	** on wide-screen desktops with */
15	@media screen and (max-width: 800px){
16	/* Settings for screens that are less than 800px wide */
17	.wideonly {display: none;}
18	}
19
20	body {
21	margin: 0 auto;

22	padding: 0px 20px;
23	background-color: white;
24	font-family: sans-serif;
25	font-size:14pt;
26	-moz-text-size-adjust: none;
	@@ -83,10 +101,12 @@
101	clear:both;
102	padding:10px;
103	background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
104	border:1px solid #eaeaea;
105	border-radius:5px;
106	overflow: auto;
107	white-space: nowrap;
108	}
109
110	.mainmenu a {
111	padding: 10px 20px;
112	text-decoration:none;
	@@ -200,5 +220,11 @@
220	white-space: nowrap;
221	}
222	span.submenuctrl, span.submenuctrl input, select.submenuctrl {
223	color: #777;
224	}
225	span.submenuctrl {
226	white-space: nowrap;
227	}
228	div.submenu label {
229	white-space: nowrap;
230	}
231

M skins/default/header.txt

+10

		--- skins/default/header.txt
		+++ skins/default/header.txt
		@@ -1,5 +1,15 @@
	1	+<html>
	2	+<head>
	3	+<base href="$baseurl/$current_page" />
	4	+<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: 'unsafe-inline'" />
	5	+<meta name="viewport" content="width=device-width, initial-scale=1.0">
	6	+<title>$<project_name>: $<title></title>
	7	+<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="$home/timeline.rss" />
	8	+<link rel="stylesheet" href="$stylesheet_url" type="text/css" media="screen" />
	9	+</head>
	10	+<body>
1	11	<div class="header">
2	12	<div class="title"><h1>$<project_name></h1>$<title></div>
3	13	<div class="status"><th1>
4	14	if {[info exists login]} {
5	15	html "$login — <a href='$home/login'>Logout</a>\n"
6	16

	--- skins/default/header.txt
	+++ skins/default/header.txt
	@@ -1,5 +1,15 @@










1	<div class="header">
2	<div class="title"><h1>$<project_name></h1>$<title></div>
3	<div class="status"><th1>
4	if {[info exists login]} {
5	html "$login — <a href='$home/login'>Logout</a>\n"
6

	--- skins/default/header.txt
	+++ skins/default/header.txt
	@@ -1,5 +1,15 @@
1	<html>
2	<head>
3	<base href="$baseurl/$current_page" />
4	<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: 'unsafe-inline'" />
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>$<project_name>: $<title></title>
7	<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="$home/timeline.rss" />
8	<link rel="stylesheet" href="$stylesheet_url" type="text/css" media="screen" />
9	</head>
10	<body>
11	<div class="header">
12	<div class="title"><h1>$<project_name></h1>$<title></div>
13	<div class="status"><th1>
14	if {[info exists login]} {
15	html "$login — <a href='$home/login'>Logout</a>\n"
16

Fossil SCM

Keyboard Shortcuts