Fossil

Check-in [5fb04081]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Simple changes to the default CSS and Header that seem to help Fossil work better on mobile by avoiding menu wraps.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | mobile
Files: files | file ages | folders
SHA3-256:5fb040810e8f8ee47cbad0b80999a23442e748c9ccaf0a0a3e9d94cfe947732c
User & Date: drh 2018-08-20 16:06:04
Context
2018-08-20
17:31
On the flat /dir webpage, automatically adjust the number of columns based on the screen width. check-in: 50698a3c user: drh tags: mobile
16:06
Simple changes to the default CSS and Header that seem to help Fossil work better on mobile by avoiding menu wraps. check-in: 5fb04081 user: drh tags: mobile
2018-08-17
15:38
Fix the /setup_smtp page so that it edits the routing table sensibly. check-in: 5416287d user: drh tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/default/css.txt.




















1
2
3
4
5
6
7
8
9
10
..
81
82
83
84
85
86
87


88
89
90
91
92
93
94
...
198
199
200
201
202
203
204

























body {
    margin: 0 auto;
    min-width: 800px;
    padding: 0px 20px;
    background-color: white;
    font-family: sans-serif;
    font-size:14pt;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -mx-text-size-adjust: none;
................................................................................
.mainmenu {
    font-size:.8em;
    clear:both;
    padding:10px;
    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;


}

.mainmenu a {
    padding: 10px 20px;
    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
................................................................................
div.timelineDate {
    font-weight: bold;
    white-space: nowrap;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl {
  color: #777;
}






>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>


<







 







>
>







 







>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

22
23
24
25
26
27
28
..
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
...
218
219
220
221
222
223
224
225
226
227
228
229
230
/* Add the "mobileonly" class to any elements that should be visible
** on narrow-screen mobile devices only */
@media screen and (min-width: 600px){
  /* Settings for wide desktop screens */
  .mobileonly {display: none;}
}
/* Add the "desktoponly" class to any elements that should be visible
** on desktops with at least 600 pixels of horizontal space. */
@media screen and (max-width: 600px){
  /* Settings for narrow mobile screens */
  .desktoponly {display: none;}
}
/* Add the "wideonly" class to any elements that should be visible
** on wide-screen desktops with  */
@media screen and (max-width: 800px){
  /* Settings for screens that are less than 800px wide */
  .wideonly {display: none;}
}

body {
    margin: 0 auto;

    padding: 0px 20px;
    background-color: white;
    font-family: sans-serif;
    font-size:14pt;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -mx-text-size-adjust: none;
................................................................................
.mainmenu {
    font-size:.8em;
    clear:both;
    padding:10px;
    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;
    overflow: auto;
    white-space: nowrap;
}

.mainmenu a {
    padding: 10px 20px;
    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
................................................................................
div.timelineDate {
    font-weight: bold;
    white-space: nowrap;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl {
  color: #777;
}
span.submenuctrl {
  white-space: nowrap;
}
div.submenu label {
  white-space: nowrap;
}

Changes to skins/default/header.txt.











1
2
3
4
5
6
7










<div class="header">
  <div class="title"><h1>$<project_name></h1>$<title></div>
    <div class="status"><th1>
 if {[info exists login]} {
   html "$login — <a href='$home/login'>Logout</a>\n"
 } else {
   html "<a href='$home/login'>Login</a>\n"
>
>
>
>
>
>
>
>
>
>







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