スマホ(縦)でもそこそこ見られるようにcssを調整する。
/gitweb置き場/gitweb_config.perl
に次の文を追加。
our $site_html_head_string = '<meta name="viewport" content="width=device-width,initial-scale=1.0" />';
push @stylesheets, "gitweb-site.css";
/gitweb置き場/gitweb-site.css
を次のように作成。
div.page_header {
height: auto;
}
div.page_body {
overflow: scroll;
}
div.page_footer {
height: auto;
overflow: auto;
}
input {
max-width: 30%;
}
td {
vertical-align: middle;
}
table.object_header > tr > td {
vertical-align: top;
}
@media screen and (max-width:480px){
body { margin: 0; }
td { word-wrap: break-word; }
table { padding-left: 1px; padding-right: 1px;}
td.pre, div.pre, div.diff {
font-size: 8px;
}
td.mode { display: none; font-size: 0; width: 0; padding: 0;}
td.size { display: none; font-size: 0; width: 0; padding: 0;}
table.project_list {
display: fixed;
width: 100%;
}
table.project_list > tr {
width: 100%;
}
table.project_list > tr > td:nth-child(1) {
max-width: 150px;
}
table.project_list > tr > th:nth-child(2){display:none; width:0; padding:0;}
table.project_list > tr > td:nth-child(2){display:none; width:0; padding:0;}
table.project_list > tr > td:nth-child(3) { width: 4em;}
table.project_list > tr > td:nth-child(4) { width: 6.5em;}
div.title_text {
padding: 4px;
}
div.log_link {
float: none;
}
div.log_body {
padding: 4px;
}
table.shortlog {
table-layout: fixed;
width: 100%;
}
table.shortlog > tr{
width: 100%;
}
table.shortlog > tr > td:nth-child(1) {width: 4em;}
table.shortlog > tr > td:nth-child(2) {width: 20%;}
table.shortlog > tr > td:nth-child(4) {width: 6.5em;}
div.header > a.title > span.age {
width: 100%;
}
table.tags {
table-layout: fixed;
width: 100%;
}
table.tags > tr{
width: 100%;
}
table.tags > tr > td:nth-child(1) {width: 4em;}
table.tags > tr > td:nth-child(4) {width: 2.5em;}
table.tags > tr > td:nth-child(5) {width: 5em;}
table.object_header {
table-layout: fixed;
width: 100%;
}
table.object_header > tr {
width: 100%;
}
table.object_header > tr > td:nth-child(1) {width: 4em;}
table.object_header > tr > td:nth-child(3) {width: 5em;}
table.history {
table-layout: fixed;
width: 100%;
}
table.history > tr {
width: 100%;
}
table.history > tr > td:nth-child(1) {width: 4em;}
table.history > tr > td:nth-child(2) {width: 4em;}
table.history > tr > td:nth-child(4) {width: 6.5em;}
}
td.link > a,
div.page_nav > a,
div.log_link > a,
td.selflink > a {
display: inline-block;
background: #ffffff;
padding: 2px;
margin: 1px 1px;
font-weight: bold;
font-size: 11px;
color: black;
text-decoration: none;
border-radius: 3px;
border: 1px solid #e0e0e0;
}
td.link > a:visited,
div.page_nav > a:visited,
div.log_link > a:visited,
td.selflink > a:visited {
color: black;
}
div.log_link > a {
font-size: 70%;
}
div.log_link {
margin-top: -6px;
padding: 0 0 4px 0;
width: 150px;
}
table.tree > tr > td.list
{
padding: 0;
}
table.tree > tr > td.list > a,
table.project_list > tr > td > a.list
{
display: block;
padding: 0.4em 1em;
}
ボタンの間の区切り線(|)が邪魔なので取り除くために gitweb.cgi
を修正する。CSSやJavaScriptでやるのは大変なのでCGIを直接書き換える。 gitweb.cgi
内の " | "
や ' | '
の部分を $linksep
に置き換え、変数 our $linksep = "";
を頭の方で定義しておく。 ただし、run_highlighterのところの " | "
は置き換えてはダメだと思う。