git ssb

30+

cel / git-ssb-web



Commit bdbeb9c156a4c8b0e0ecd33e2613564c8491ee66

Browse Files

css and html facelift

Andre Staltz committed on 6/4/2018, 8:22:42 PM
Parent: a7471b627ea57d0a21ed90814501993e9d28e8dc

Files changed

index.jschanged
lib/repos/index.jschanged
static/styles.csschanged
index.jsView
@@ -520,32 +520,33 @@
520520 … '</head>\n',
521521 … '<body>',
522522 … '<header>'
523523 … ]),
524 …+ pull.once(
525 …+ '<h1><a href="/">' + app +
526 …+ (appName == 'ssb' ? '' : ' <sub>' + appName + '</sub>') +
527 …+ '</a></h1> ' +
528 …+ '<form action="/search" method="get">' +
529 …+ '<input class="search-bar" name="q" size="60"' +
530 …+ ' placeholder="Search" value="' + q + '" />' +
531 …+ '</form>'),
524532 … self.isPublic ? null : u.readOnce(function (cb) {
525533 … self.about(self.myId, function (err, about) {
526534 … if (err) return cb(err)
527535 … cb(null,
528- '<a href="' + u.encodeLink(self.myId) + '">' +
536 …+ '<a class="profile-icon" href="' + u.encodeLink(self.myId) + '">' +
529537 … (about.image ?
530- '<img class="profile-icon icon-right"' +
538 …+ '<img class="profile-icon"' +
531539 … ' src="/' + encodeURIComponent(about.image) + '"' +
532540 … ' alt="' + u.escape(about.name) + '">' : u.escape(about.name)) +
533541 … '</a>')
534542 … })
535543 … }),
536544 … pull.once(
537- '<form action="/search" method="get">' +
538- '<h1><a href="/">' + app +
539- (appName == 'ssb' ? '' : ' <sub>' + appName + '</sub>') +
540- '</a></h1> ' +
541- '<input class="search-bar" name="q" size="60"' +
542- ' placeholder=" Search" value="' + q + '" />' +
543- '</form>' +
544545 … '</header>' +
545- '<article><hr />'),
546 …+ '<article>'),
546547 … this.renderTry(read),
547- pull.once('<hr/><p style="font-size: .8em;">Built with <a href="http://git-ssb.celehner.com">git-ssb-web</a></p></article></body></html>')
548 …+ pull.once('<p style="font-size: .8em;">Built with <a href="http://git-ssb.celehner.com">git-ssb-web</a></p></article></body></html>')
548549 … ])
549550 … }
550551 …
551552 … G.serveError = function (req, err, status) {
lib/repos/index.jsView
@@ -277,31 +277,9 @@
277277 … }
278278 …
279279 … R.serveRepoTemplate = function (req, repo, page, branch, titleTemplate, body) {
280280 … var self = this
281- var gitUrl = 'ssb://' + repo.id
282- var host = req.headers.host || '127.0.0.1:7718'
283- var path = '/' + encodeURIComponent(repo.id)
284- var httpUrl = 'http://' + encodeURI(host) + path
285281 … var digsPath = [repo.id, 'digs']
286- var cloneUrls = '<div class="clone-urls">' +
287- '<select class="custom-dropdown clone-url-protocol" ' +
288- 'onchange="with(this.nextSibling.firstChild) {' +
289- 'value = this.value; select() }">' +
290- '<option selected="selected" value="' + gitUrl + '">SSB</option>' +
291- '<option class="http-clone-url" value="' + httpUrl + '">HTTP</option>' +
292- '</select>' +
293- '<div class="clone-url-wrapper">' +
294- '<input class="clone-url" readonly="readonly" ' +
295- 'value="ssb://' + repo.id + '" size="45" ' +
296- 'onclick="this.select()"/>' +
297- '<script>' +
298- 'var httpOpt = document.querySelector(".http-clone-url")\n' +
299- 'if (location.protocol === "https:") httpOpt.text = "HTTPS"\n' +
300- 'httpOpt.value = location.origin + "' + path + '"\n' +
301- '</script>' +
302- '</div>' +
303- '</div>'
304282 …
305283 … var done = multicb({ pluck: 1, spread: true })
306284 … self.web.getRepoName(repo.feed, repo.id, done())
307285 … self.web.about.getName(repo.feed, done())
@@ -350,9 +328,9 @@
350328 … )
351329 … ]),
352330 … forms.name(req, isLocal, repo.id, repoName, 'repo-name', null, req._t('repo.Rename'),
353331 … h('h2', {class: 'bgslash'},
354- (authorName ? u.link([repo.feed], authorName) + ' / ' : '') +
332 …+ (authorName ? u.link([repo.feed], authorName, false, 'class="repo-author"') + ' / ' : '') +
355333 … u.link([repo.id], repoName) +
356334 … (repo.private ? ' ' + u.privateIcon(req) : ''))
357335 … ),
358336 … ]),
@@ -370,9 +348,9 @@
370348 … }) : req._t('Issues'), 'issues'],
371349 … [[repo.id, 'pulls'], self.web.indexCache ? req._t('PullRequestsN', {
372350 … count: self.web.indexCache.getPRsCount(repo.id, '…')
373351 … }) : req._t('PullRequests'), 'pulls']
374- ], page, cloneUrls),
352 …+ ], page),
375353 … body
376354 … ])
377355 … ))
378356 … })
@@ -413,30 +391,52 @@
413391 … var title =
414392 … (path.length ? `${path.join('/')} · ` : '') +
415393 … '%{author}/%{repo}' +
416394 … (repo.head == `refs/heads/${rev}` ? '' : `@${rev}`)
395 …+ var gitUrl = 'ssb://' + repo.id
396 …+ var host = req.headers.host || '127.0.0.1:7718'
397 …+ var targetpath = '/' + encodeURIComponent(repo.id)
398 …+ var httpUrl = 'http://' + encodeURI(host) + targetpath
399 …+ var cloneUrls = '<div class="clone-urls">' +
400 …+ '<select class="custom-dropdown clone-url-protocol" ' +
401 …+ 'onchange="with(this.nextSibling.firstChild) {' +
402 …+ 'value = this.value; select() }">' +
403 …+ '<option selected="selected" value="' + gitUrl + '">SSB</option>' +
404 …+ '<option class="http-clone-url" value="' + httpUrl + '">HTTP</option>' +
405 …+ '</select>' +
406 …+ '<div class="clone-url-wrapper">' +
407 …+ '<input class="clone-url" readonly="readonly" ' +
408 …+ 'value="ssb://' + repo.id + '" size="45" ' +
409 …+ 'onclick="this.select()"/>' +
410 …+ '<script>' +
411 …+ 'var httpOpt = document.querySelector(".http-clone-url")\n' +
412 …+ 'if (location.protocol === "https:") httpOpt.text = "HTTPS"\n' +
413 …+ 'httpOpt.value = location.origin + "' + targetpath + '"\n' +
414 …+ '</script>' +
415 …+ '</div>' +
416 …+ '</div>'
417417 …
418418 … return this.serveRepoTemplate(req, repo, 'code', rev, title,
419419 … u.readNext((cb) => {
420420 … if (!rev) return cb(null, this.renderEmptyRepo(req, repo))
421421 … repo.getLatestAvailableRev(rev, 10e3, (err, revGot, numSkipped) => {
422422 … if (err) return cb(err)
423423 … cb(null, cat([
424424 … h('section', {class: 'branch-info light-grey', method: 'get'}, [
425- h('form', {action: '', method: 'get'},
426- h('h3', {class: 'rev-menu-line'}, [
425 …+ h('form', {action: '', method: 'get'}, [
426 …+ h('div', {class: 'rev-menu-line'}, [
427427 … h('span', `${req._t(type)}: `),
428428 … this.revMenu(req, repo, rev)
429- ])
430- ),
429 …+ ]),
430 …+ cloneUrls
431 …+ ]),
431432 … u.when(numSkipped > 0, () =>
432433 … h('div', {class: 'missing-blobs-warning mt2'},
433434 … h('em', req._t('missingBlobsWarning', numSkipped))
434435 … )
435- ),
436- u.when(type === 'Branch', () => renderRepoLatest(req, repo, revGot))
436 …+ )
437437 … ]),
438- h('section', {class: 'files'}, renderRepoTree(req, repo, revGot, path)),
438 …+ h('section', {class: 'files'}, renderRepoTree(req, repo, revGot, path, type)),
439439 … this.renderRepoReadme(req, repo, revGot, path)
440440 … ]))
441441 … })
442442 … }))
@@ -619,22 +619,20 @@
619619 … var commitPath = [repo.id, 'commit', commit.id]
620620 … var actor = commit.separateAuthor ? 'author' : 'committer'
621621 … var actionKey = actor.slice(0,1).toUpperCase() + actor.slice(1) + 'ReleasedCommit'
622622 … cb(null,
623- '<div class="mt2">' +
624- '<span>' +
625- req._t(actionKey, {
626- name: u.escape(commit[actor].name),
627- commitName: u.link(commitPath, commit.title)
628- }) +
629- '</span>' +
630- '<tt class="float-right">' +
631- req._t('LatestOn', {
632- commitId: commit.id.slice(0, 7),
633- date: commit[actor].date.toLocaleString(req._locale)
634- }) +
635- '</tt>' +
636- '</div>'
623 …+ '<span>' +
624 …+ req._t(actionKey, {
625 …+ name: u.escape(commit[actor].name),
626 …+ commitName: u.link(commitPath, commit.title)
627 …+ }) +
628 …+ '</span>' +
629 …+ '<span class="float-right">' +
630 …+ req._t('LatestOn', {
631 …+ commitId: commit.id.slice(0, 7),
632 …+ date: commit[actor].date.toLocaleString(req._locale)
633 …+ }) +
634 …+ '</span>'
637635 … )
638636 … })
639637 … })
640638 … }
@@ -647,9 +645,9 @@
647645 … return u.link(basePath.concat(path.slice(0, i+1)), dir)
648646 … }).concat(last).join(' / ')
649647 … }
650648 …
651-function renderRepoTree(req, repo, rev, path) {
649 …+function renderRepoTree(req, repo, rev, path, type) {
652650 … var source = repo.readDir(rev,path)
653651 … var pathLinks = path.length === 0 ? '' :
654652 … ': ' + linkPath([repo.id, 'tree'], [rev].concat(path))
655653 …
@@ -660,16 +658,23 @@
660658 … }
661659 …
662660 … return cat([
663661 … location,
664- h('table', {class: "files w-100"}, u.sourceMap(source, file =>
665- h('tr', [
666- h('td', [
667- h('i', fileIcon(file))
668- ]),
669- h('td', u.link(filePath(file), file.name))
670- ])
671- ))
662 …+ h('table', {class: "files w-100", cellspacing: "0"}, cat([
663 …+ u.when(type === 'Branch', () =>
664 …+ h('thead', h('tr', h('td', {colspan: '2'}, [
665 …+ renderRepoLatest(req, repo, rev)
666 …+ ])))
667 …+ ),
668 …+ u.sourceMap(source, file =>
669 …+ h('tr', [
670 …+ h('td', [
671 …+ h('i', fileIcon(file))
672 …+ ]),
673 …+ h('td', u.link(filePath(file), file.name))
674 …+ ])
675 …+ )
676 …+ ]))
672677 … ])
673678 …
674679 … function fileIcon(file) {
675680 … return fileType(file) === 'tree' ? '📁' : '📄'
@@ -706,9 +711,10 @@
706711 … '<p>' + req._t('NoReadme') + '</p>'))
707712 … repo.getObjectFromAny(file.id, function (err, obj) {
708713 … if (err) return cb(err)
709714 … cb(null, cat([
710- pull.once('<section class="readme">'),
715 …+ pull.once('<section class="readme">' +
716 …+ '<div class="readme-filename">' + file.name + '</div>'),
711717 … self.web.renderObjectData(obj, file.name, repo, branch, path),
712718 … pull.once('</section>')
713719 … ]))
714720 … })
@@ -930,9 +936,9 @@
930936 … : '')
931937 … : '') + '</td>'
932938 … }).join('') +
933939 … '<td class="code-text">' + html + '</td></tr>' +
934- (lineCommentThreads[newLineNum] ?
940 …+ (lineCommentThreads[newLineNum] ?
935941 … '<tr><td colspan=4>' +
936942 … lineCommentThreads[newLineNum] +
937943 … '</td></tr>'
938944 … : commit && query.comment === id ?
static/styles.cssView
@@ -1,6 +1,6 @@
11 … body {
2- margin: 1em;
2 …+ margin: 0;
33 … line-height: 1.6;
44 … color: #333;
55 … background: #fff;
66 … font-family: 'Source Sans Pro', sans-serif;
@@ -9,14 +9,15 @@
99 … * {
1010 … word-break: break-word;
1111 … }
1212 …
13-article, header {
14- width: 777px;
13 …+article {
14 …+ width: 800px;
1515 … min-width: 60%;
1616 … max-width: 100%;
1717 … margin-left: auto;
1818 … margin-right: auto;
19 …+ margin-top: 1.5em;
1920 … }
2021 …
2122 … .code-wrap {
2223 … padding: .5em 1.25ex;
@@ -27,23 +28,24 @@
2728 … .diff-hunk-header,
2829 … .code-linenum,
2930 … .code-text {
3031 … font: .8em Consolas, "Liberation Mono", Menlo, Courier, monospace;
31- white-space: pre-wrap;
32 …+ white-space: pre-wrap;
3233 … }
3334 …
3435 … pre {
3536 … font: .8em Consolas, "Liberation Mono", Menlo, Courier, monospace;
36- padding: .5em 1.25ex;
37- border: 1px solid #ddd;
38- background: #f5f5f5;
39- white-space: pre-wrap;
37 …+ padding: 1em 1.25ex;
38 …+ background: #f6f8fa;
39 …+ white-space: pre-wrap;
40 …+ font-size: 1em;
41 …+ border-radius: 2px;
4042 … }
4143 …
4244 … section code {
4345 … padding: .5ex;
4446 … border-radius: .5ex;
45- background-color: #fff;
47 …+ background-color: #eff1f4;
4648 … }
4749 …
4850 … .code-wrap > code,
4951 … pre > code {
@@ -52,79 +54,110 @@
5254 … }
5355 …
5456 … /* header */
5557 …
58 …+header {
59 …+ width: 100%;
60 …+ padding: 0 calc((100% - 800px)*0.5);
61 …+ min-height: 56px;
62 …+ background-color: #2f8eea;
63 …+ box-sizing: border-box;
64 …+ display: flex;
65 …+ flex-direction: row;
66 …+ line-height: 56px;
67 …+ justify-content: flex-start;
68 …+ align-items: center;
69 …+}
70 …+
5671 … header h1 {
57- font-weight: bold;
72 …+ font-weight: 100;
5873 … font-size: 1.5em;
5974 … display: inline;
6075 … }
6176 …
6277 … header h1 :link,
6378 … header h1 :visited {
64- color: #666;
79 …+ color: #fff;
6580 … }
6681 …
6782 … header h1 sub {
68- color: #444;
83 …+ color: #fff;
6984 … font-style: oblique;
7085 … font-size: small;
7186 … }
7287 …
7388 … header .search-bar {
74- float: right;
75- margin-top: .5em;
76- margin-left: 1ex;
77- max-width: 35%;
78- padding: .25em;
79- font-size: .8em;
80- background: #f5f5f5;
81- border-radius: 1em;
82-}
83-
84-.profile-icon {
89 …+ margin-left: 1em;
8590 … height: 1.6em;
86- width: 1.6em;
87- margin: .4em .2em .5em .15em;
88- border: 1px solid #eee;
89- float: left;
91 …+ max-width: 300px;
92 …+ padding: .25em .7em;
93 …+ background: #1273d0;
94 …+ border-radius: .25em;
95 …+ border: none;
96 …+ color: #98c4ff;
9097 … }
9198 …
92-.icon-right {
93- float: right;
99 …+a.profile-icon {
100 …+ margin-left: auto;
101 …+ height: 56px;
102 …+ display: flex;
103 …+ justify-content: center;
104 …+ align-items: center;
94105 … }
106 …+img.profile-icon {
107 …+ height: 2em;
108 …+ width: 2em;
109 …+ border-radius: 3px;
110 …+}
95111 …
96112 … /* content */
97113 …
98114 … section {
99115 … background-color: white;
100- padding: 1ex 0;
101- margin-bottom: .5em;
116 …+ margin-bottom: .75em;
102117 … border-radius: 0;
103118 … border-bottom: 1px solid #eee;
104119 … }
105120 …
106121 … section.branch-info, section.files {
107122 … border: none;
108123 … }
109124 …
125 …+.branch-info > form {
126 …+ display: flex;
127 …+}
128 …+
110129 … .rev-menu-line {
111- clear: both;
130 …+ flex: 1;
112131 … }
113132 …
114133 … .missing-blobs-warning {
115134 … color: black;
116135 … }
117136 …
118137 … section.readme {
119- margin-top: 2em;
120- padding: 2em 2em 4em;
121- box-shadow: 2px 2px 10px #efefef;
122- border: 1px #efefef solid;
138 …+ padding: calc(2em + 36px) 2em 2em;
139 …+ border: 1px #dedede solid;
140 …+ border-radius: 3px;
141 …+ position: relative;
123142 … }
124143 …
144 …+.readme-filename {
145 …+ position: absolute;
146 …+ left: 0;
147 …+ right: 0;
148 …+ top: 0;
149 …+ height: 36px;
150 …+ line-height: 36px;
151 …+ background-color: #f5f5f5;
152 …+ border-bottom: 1px solid #dedede;
153 …+ font-weight: 600;
154 …+ padding: 0 10px;
155 …+ box-sizing: border-box;
156 …+}
157 …+
125158 … section.collapse {
126- margin-bottom: 0;
159 …+ margin-bottom: 0;
127160 … }
128161 …
129162 … h1, h2, h3, h4, h5, h6 {
130163 … margin: 0;
@@ -134,13 +167,13 @@
134167 … margin-top: 1em;
135168 … }
136169 …
137170 … a:link, a:visited {
138- color: #08c;
171 …+ color: #1273d0;
139172 … text-decoration: none;
140173 … }
141174 … a:hover {
142- color: #005580;
175 …+ text-decoration: underline;
143176 … }
144177 …
145178 … hr {
146179 … border: 0;
@@ -175,8 +208,12 @@
175208 … .repo-title h2 {
176209 … height: 1.2em;
177210 … }
178211 …
212 …+.repo-author {
213 …+ font-weight: normal;
214 …+}
215 …+
179216 … .bgslash {
180217 … color: #888;
181218 … }
182219 …
@@ -193,22 +230,26 @@
193230 … .right-bar .btn {
194231 … margin-top: 0.2em;
195232 … }
196233 …
197-input { border: 1px solid #eee;}
234 …+input { border: 1px solid #eee;}
198235 …
199236 … .btn {
200237 … background: #eee;
201238 … border: 1px solid #e7e7e7;
239 …+ border-bottom: 2px solid #ccc;
202240 … margin-top: .5em;
203241 … padding: .3em .6em;
204- border-radius: .7em;
242 …+ border-radius: .3em;
205243 … cursor: pointer;
244 …+ color: #333;
245 …+ font-weight: 600;
206246 … }
207247 …
208248 … .btn:hover {
209249 … background: #ddd;
210250 … border: 1px solid #ccc;
251 …+ border-bottom: 2px solid #aaa;
211252 … }
212253 …
213254 … .btn.btn-primary {
214255 … background: #0092db;
@@ -250,20 +291,17 @@
250291 … display: none;
251292 … }
252293 …
253294 … .clone-urls {
254- white-space: nowrap;
255- float: right;
256- display: block;
257295 … position: relative;
258296 … width: 21rem;
259297 … max-width: 100%;
260298 … min-width: 3rem;
261299 … height: 1.5rem;
262300 … }
263301 …
264302 … select.custom-dropdown.clone-url-protocol {
265- border-radius: 0.5rem 0 0 0.5rem;
303 …+ border-radius: .3rem 0 0 .3rem;
266304 … width: 5rem;
267305 … position: absolute;
268306 … left: 0;
269307 … }
@@ -276,9 +314,10 @@
276314 …
277315 … .clone-url {
278316 … font-size: 1rem;
279317 … border: 1px #e1e1e1 solid;
280- border-radius: 0 0.5rem 0.5rem 0;
318 …+ border-radius: 0 .3rem .3rem 0;
319 …+ box-sizing: border-box;
281320 … margin: 0;
282321 … padding: .1rem;
283322 … width: 100%;
284323 …
@@ -290,9 +329,9 @@
290329 … color: #000;
291330 … }
292331 …
293332 … nav {
294- margin: .5em 0 1ex 0;
333 …+ margin: 1em 0 1em 0;
295334 … clear: left;
296335 … }
297336 …
298337 … nav a {
@@ -321,15 +360,31 @@
321360 … /* files list */
322361 …
323362 … table.files {
324363 … border: 1px #dedede solid;
364 …+ border-radius: 3px;
325365 … }
326366 …
327-.files td:first-child {
367 …+.files thead td {
368 …+ background-color: #f5f5f5;
369 …+ border-bottom: 1px solid #dedede;
370 …+ padding: 5px 10px;
371 …+ box-sizing: border-box;
372 …+}
373 …+
374 …+.files tbody td:first-child {
328375 … padding: 0 1ex;
329376 … width: .7rem;
330377 … }
331378 …
379 …+.files tbody tr:not(:first-child) td {
380 …+ border-top: 1px solid #eaeaea;
381 …+}
382 …+
383 …+.files tbody tr:hover {
384 …+ background-color: #f5f5f5;
385 …+}
386 …+
332387 … /* user page */
333388 …
334389 … .user-id {
335390 … float: right;
@@ -462,13 +517,12 @@
462517 … color: grey;
463518 … }
464519 …
465520 … .code td {
466- padding: 0 1ex 0;
521 …+ padding: .5ex 1ex .5ex;
467522 … }
468523 …
469-:target,
470-.code tr:hover {
524 …+:target {
471525 … background-color: #fff8d2 !important;
472526 … }
473527 …
474528 … .code-linenum {
@@ -572,17 +626,17 @@
572626 …
573627 … select.custom-dropdown {
574628 … -webkit-appearance: none; /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
575629 … -moz-appearance: none; /*REMOVES DEFAULT FIREFOX STYLE*/
576-
630 …+
577631 … -webkit-border-radius: 1rem;
578632 … border: 1px #e1e1e1 solid;
579- border-radius: 0.5rem;
633 …+ border-radius: .3em;
580634 … font-size: 1rem;
581635 … padding: .125rem;
582636 … width: 30%;
583637 … cursor: pointer;
584-
638 …+
585639 … background: #fff url(drop-down-arrow.png) no-repeat right center;
586640 … background-size: 32px 32px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */
587641 … }
588642 …

Built with git-ssb-web