forge · commit

Improvements for mobile

ef51e7e9ee1716795fb2ce873d6854d50522f8ca

Alexis Sellier committed 1 month ago 1 parent a780e2bc

static/style.css +51 -1

  line-height: 1.4;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  color: var(--bg);
  background: var(--link);

  margin: 0;
  padding: 1rem;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  white-space: pre;
  overflow-x: auto;
}

.blob-view {
  border: 1px solid var(--border);
  border-radius: 4px;

.language-ril .number { color: var(--color-highlight); }
.language-ril .string { color: var(--color-secondary); }
.language-ril .reg { color: var(--color-secondary); }
.language-ril .symbol { color: var(--color-highlight-dim); }
.language-ril .label { color: var(--color-highlight-dim); font-style: italic; }

/* --- Mobile --- */

@media (max-width: 720px) {
  .container {
    padding: 0 0.5rem 2rem;
  }

  .file-view pre,
  .blob-code pre,
  .blob-code .line-num a,
  .diff-hunk pre,
  td.diff-num,
  td.diff-marker { font-size: 0.875rem; }

  .repo-home {
    grid-template-columns: 1fr;
  }
  .repo-home .file-tree {
    display: none;
  }

  .view-nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .view-nav .last-commit {
    margin-left: 0;
    width: 100%;
  }

  .repo-nav {
    flex-wrap: wrap;
  }

  .desktop {
    display: none;
  }

  .commit-title {
    flex-wrap: wrap;
  }

  .diff-header {
    flex-wrap: wrap;
  }
}

templates/index.html +2 -2

{{else}}
<table class="repo-list">
<thead>
  <tr>
    <th>Repository</th>
    <th>Description</th>
    <th class="desktop">Description</th>
    <th>Idle</th>
  </tr>
</thead>
<tbody>
{{range .Data.Repos}}
  <tr>
    <td><a href="{{$.BaseURL}}/{{.Name}}/">{{.Name}}</a></td>
    <td>{{.Description}}</td>
    <td class="desktop">{{.Description}}</td>
    <td>{{if not .LastUpdated.IsZero}}{{timeAgo .LastUpdated}}{{end}}</td>
  </tr>
{{end}}
</tbody>
</table>

templates/log.html +2 -2

<table class="log-list">
<thead>
  <tr>
    <th>Hash</th>
    <th>Subject</th>
    <th>Author</th>
    <th class="author desktop">Author</th>
    <th>Age</th>
  </tr>
</thead>
<tbody>
{{range .Data.Commits}}
  <tr>
    <td class="hash"><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.ShortHash}}</a></td>
    <td class="subject">{{.Subject}}</td>
    <td class="author">{{.Author}}</td>
    <td class="author desktop">{{.Author}}</td>
    <td class="date">{{timeAgo .AuthorDate}}</td>
  </tr>
{{end}}
</tbody>
</table>

templates/refs.html +8 -8

<table class="ref-list">
<thead>
  <tr>
    <th>Branch</th>
    <th>Hash</th>
    <th>Subject</th>
    <th>Author</th>
    <th class="desktop">Subject</th>
    <th class="author desktop">Author</th>
    <th>Idle</th>
  </tr>
</thead>
<tbody>
{{range .Data.Branches}}
  <tr>
    <td><a href="{{$.BaseURL}}/{{$.Repo}}/log/{{.Name}}">{{.Name}}</a></td>
    <td class="hash"><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.ShortHash}}</a></td>
    <td class="subject">{{.Subject}}</td>
    <td class="author">{{.Author}}</td>
    <td class="subject desktop">{{.Subject}}</td>
    <td class="author desktop">{{.Author}}</td>
    <td class="date">{{timeAgo .Date}}</td>
  </tr>
{{end}}
</tbody>
</table>

<table class="ref-list">
<thead>
  <tr>
    <th>Tag</th>
    <th>Hash</th>
    <th>Subject</th>
    <th>Author</th>
    <th class="desktop">Subject</th>
    <th class="author desktop">Author</th>
    <th>Idle</th>
  </tr>
</thead>
<tbody>
{{range .Data.Tags}}
  <tr>
    <td><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.Name}}</a></td>
    <td class="hash"><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.ShortHash}}</a></td>
    <td class="subject">{{.Subject}}</td>
    <td class="author">{{.Author}}</td>
    <td class="subject desktop">{{.Subject}}</td>
    <td class="author desktop">{{.Author}}</td>
    <td class="date">{{timeAgo .Date}}</td>
  </tr>
{{end}}
</tbody>
</table>

252	254		margin: 0;
253	255		padding: 1rem;
254	256		font-family: var(--mono);
255	257		font-size: 1rem;
256	258		line-height: 1.5;
257		-	white-space: pre-wrap;
	259	+	white-space: pre;
	260	+	overflow-x: auto;
258	261		}
259	262
260	263		.blob-view {
261	264		border: 1px solid var(--border);
262	265		border-radius: 4px;

668	671		.language-ril .number { color: var(--color-highlight); }
669	672		.language-ril .string { color: var(--color-secondary); }
670	673		.language-ril .reg { color: var(--color-secondary); }
671	674		.language-ril .symbol { color: var(--color-highlight-dim); }
672	675		.language-ril .label { color: var(--color-highlight-dim); font-style: italic; }
	676	+
	677	+	/* --- Mobile --- */
	678	+
	679	+	@media (max-width: 720px) {
	680	+	.container {
	681	+	padding: 0 0.5rem 2rem;
	682	+	}
	683	+
	684	+	.file-view pre,
	685	+	.blob-code pre,
	686	+	.blob-code .line-num a,
	687	+	.diff-hunk pre,
	688	+	td.diff-num,
	689	+	td.diff-marker { font-size: 0.875rem; }
	690	+
	691	+	.repo-home {
	692	+	grid-template-columns: 1fr;
	693	+	}
	694	+	.repo-home .file-tree {
	695	+	display: none;
	696	+	}
	697	+
	698	+	.view-nav {
	699	+	flex-wrap: wrap;
	700	+	gap: 0.5rem;
	701	+	}
	702	+	.view-nav .last-commit {
	703	+	margin-left: 0;
	704	+	width: 100%;
	705	+	}
	706	+
	707	+	.repo-nav {
	708	+	flex-wrap: wrap;
	709	+	}
	710	+
	711	+	.desktop {
	712	+	display: none;
	713	+	}
	714	+
	715	+	.commit-title {
	716	+	flex-wrap: wrap;
	717	+	}
	718	+
	719	+	.diff-header {
	720	+	flex-wrap: wrap;
	721	+	}
	722	+	}

24	24		<table class="log-list">
25	25		<thead>
26	26		<tr>
27	27		<th>Hash</th>
28	28		<th>Subject</th>
29		-	<th>Author</th>
	29	+	<th class="author desktop">Author</th>
30	30		<th>Age</th>
31	31		</tr>
32	32		</thead>
33	33		<tbody>
34	34		{{range .Data.Commits}}
35	35		<tr>
36	36		<td class="hash"><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.ShortHash}}</a></td>
37	37		<td class="subject">{{.Subject}}</td>
38		-	<td class="author">{{.Author}}</td>
	38	+	<td class="author desktop">{{.Author}}</td>
39	39		<td class="date">{{timeAgo .AuthorDate}}</td>
40	40		</tr>
41	41		{{end}}
42	42		</tbody>
43	43		</table>

28	28		<table class="ref-list">
29	29		<thead>
30	30		<tr>
31	31		<th>Tag</th>
32	32		<th>Hash</th>
33		-	<th>Subject</th>
34		-	<th>Author</th>
	33	+	<th class="desktop">Subject</th>
	34	+	<th class="author desktop">Author</th>
35	35		<th>Idle</th>
36	36		</tr>
37	37		</thead>
38	38		<tbody>
39	39		{{range .Data.Tags}}
40	40		<tr>
41	41		<td><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.Name}}</a></td>
42	42		<td class="hash"><a href="{{$.BaseURL}}/{{$.Repo}}/commit/{{.Hash}}">{{.ShortHash}}</a></td>
43		-	<td class="subject">{{.Subject}}</td>
44		-	<td class="author">{{.Author}}</td>
	43	+	<td class="subject desktop">{{.Subject}}</td>
	44	+	<td class="author desktop">{{.Author}}</td>
45	45		<td class="date">{{timeAgo .Date}}</td>
46	46		</tr>
47	47		{{end}}
48	48		</tbody>
49	49		</table>

66	66		line-height: 1.4;
67	67		color: var(--fg);
68	68		background: var(--bg);
69	69		-webkit-font-smoothing: antialiased;
70	70		-moz-osx-font-smoothing: grayscale;
	71	+	-webkit-text-size-adjust: 100%;
	72	+	text-size-adjust: 100%;
71	73		}
72	74
73	75		::selection {
74	76		color: var(--bg);
75	77		background: var(--link);

4	4		{{else}}
5	5		<table class="repo-list">
6	6		<thead>
7	7		<tr>
8	8		<th>Repository</th>
9		-	<th>Description</th>
	9	+	<th class="desktop">Description</th>
10	10		<th>Idle</th>
11	11		</tr>
12	12		</thead>
13	13		<tbody>
14	14		{{range .Data.Repos}}
15	15		<tr>
16	16		<td><a href="{{$.BaseURL}}/{{.Name}}/">{{.Name}}</a></td>
17		-	<td>{{.Description}}</td>
	17	+	<td class="desktop">{{.Description}}</td>
18	18		<td>{{if not .LastUpdated.IsZero}}{{timeAgo .LastUpdated}}{{end}}</td>
19	19		</tr>
20	20		{{end}}
21	21		</tbody>
22	22		</table>