Skip to content

Commit 3865ecb

Browse files
silverwindzeripathtechknowlogick
authored
File header tweaks, add CSS helpers (#12635)
- replace two instances of fontawesome with octicons - add new "class" optional argument to "svg" helper - add many new CSS helpers and move their import to the end for increaseed precedence Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
1 parent e204398 commit 3865ecb

File tree

6 files changed

+126
-18
lines changed

6 files changed

+126
-18
lines changed

‎.stylelintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ rules:
55
block-closing-brace-empty-line-before: null
66
color-hex-length: null
77
comment-empty-line-before: null
8+
declaration-block-single-line-max-declarations: null
89
declaration-empty-line-before: null
910
indentation: 2
1011
no-descending-specificity: null

‎modules/templates/helper.go‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -468,13 +468,23 @@ func NewTextFuncMap() []texttmpl.FuncMap {
468468
var widthRe = regexp.MustCompile(`width="[0-9]+?"`)
469469
var heightRe = regexp.MustCompile(`height="[0-9]+?"`)
470470

471-
// SVG render icons
472-
func SVG(icon string, size int) template.HTML {
471+
// SVG render icons - arguments icon name (string), size (int), class (string)
472+
func SVG(icon string, others ...interface{}) template.HTML {
473+
var size = others[0].(int)
474+
475+
class := ""
476+
if len(others) > 1 && others[1].(string) != "" {
477+
class = others[1].(string)
478+
}
479+
473480
if svgStr, ok := svg.SVGs[icon]; ok {
474481
if size != 16 {
475482
svgStr = widthRe.ReplaceAllString(svgStr, fmt.Sprintf(`width="%d"`, size))
476483
svgStr = heightRe.ReplaceAllString(svgStr, fmt.Sprintf(`height="%d"`, size))
477484
}
485+
if class != "" {
486+
svgStr = strings.Replace(svgStr, `class="`, fmt.Sprintf(`class="%s `, class), 1)
487+
}
478488
return template.HTML(svgStr)
479489
}
480490
return template.HTML("")

‎templates/repo/view_file.tmpl‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
22
<h4 class="file-header ui top attached header">
3-
<div class="file-header-left">
3+
<div class="file-header-left df ac">
44
{{if .ReadmeInList}}
5-
{{if .FileIsSymlink}}
6-
<i class="icons"><i class="book icon"></i><i class="bottom left corner tiny inverted share icon"></i></i>
7-
{{else}}
8-
<i class="book icon"></i>
9-
{{end}}
5+
{{svg "octicon-book" 16 "mr-3"}}
106
<strong>{{.FileName}}</strong>
117
{{else}}
128
<div class="file-info text grey normal mono">
@@ -26,16 +22,16 @@
2622
</div>
2723
{{end}}
2824
{{if .LFSLock}}
29-
<div class="file-info-entry">
30-
<i class="fa fa-lock poping up disabled" data-content="{{.LFSLockHint}}" data-position="bottom center" data-variation="tiny inverted"></i>
25+
<div class="file-info-entry ui" data-tooltip="{{.LFSLockHint}}" data-inverted="">
26+
{{svg "octicon-lock" 16 "mr-2"}}
3127
<a href="{{AppSubUrl}}/{{.LFSLock.Owner.Name}}">{{.LFSLockOwner}}</a>
3228
</div>
3329
{{end}}
3430
</div>
3531
{{end}}
3632
</div>
3733
{{if not .ReadmeInList}}
38-
<div class="file-header-right">
34+
<div class="file-header-right df ac">
3935
<div class="ui right file-actions">
4036
<div class="ui buttons">
4137
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>

‎web_src/less/_repository.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3139,6 +3139,11 @@ td.blob-excerpt {
31393139
align-items: center;
31403140
}
31413141

3142+
.file-info-entry {
3143+
display: flex;
3144+
align-items: center;
3145+
}
3146+
31423147
.file-info-entry + .file-info-entry {
31433148
border-left: 1px solid currentColor;
31443149
margin-left: 8px;

‎web_src/less/helpers.less‎

Lines changed: 101 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,101 @@
1-
.flex-0 {
2-
flex: 0;
3-
}
4-
.flex-1 {
5-
flex: 1;
6-
}
1+
.df { display: flex; }
2+
.ac { align-items: center; }
3+
.jc { justify-content: center; }
4+
5+
.m-0 { margin: 0 !important; }
6+
.m-1 { margin: .125rem !important; }
7+
.m-2 { margin: .25rem !important; }
8+
.m-3 { margin: .5rem !important; }
9+
.m-4 { margin: 1rem !important; }
10+
.m-5 { margin: 2rem !important; }
11+
12+
.ml-0 { margin-left: 0 !important; }
13+
.ml-1 { margin-left: .125rem !important; }
14+
.ml-2 { margin-left: .25rem !important; }
15+
.ml-3 { margin-left: .5rem !important; }
16+
.ml-4 { margin-left: 1rem !important; }
17+
.ml-5 { margin-left: 2rem !important; }
18+
19+
.mr-0 { margin-right: 0 !important; }
20+
.mr-1 { margin-right: .125rem !important; }
21+
.mr-2 { margin-right: .25rem !important; }
22+
.mr-3 { margin-right: .5rem !important; }
23+
.mr-4 { margin-right: 1rem !important; }
24+
.mr-5 { margin-right: 2rem !important; }
25+
26+
.mt-0 { margin-top: 0 !important; }
27+
.mt-1 { margin-top: .125rem !important; }
28+
.mt-2 { margin-top: .25rem !important; }
29+
.mt-3 { margin-top: .5rem !important; }
30+
.mt-4 { margin-top: 1rem !important; }
31+
.mt-5 { margin-top: 2rem !important; }
32+
33+
.mb-0 { margin-bottom: 0 !important; }
34+
.mb-1 { margin-bottom: .125rem !important; }
35+
.mb-2 { margin-bottom: .25rem !important; }
36+
.mb-3 { margin-bottom: .5rem !important; }
37+
.mb-4 { margin-bottom: 1rem !important; }
38+
.mb-5 { margin-bottom: 2rem !important; }
39+
40+
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
41+
.mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
42+
.mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
43+
.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
44+
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
45+
.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
46+
47+
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
48+
.my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
49+
.my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
50+
.my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
51+
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
52+
.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
53+
54+
.p-0 { padding: 0 !important; }
55+
.p-1 { padding: .125rem !important; }
56+
.p-2 { padding: .25rem !important; }
57+
.p-3 { padding: .5rem !important; }
58+
.p-4 { padding: 1rem !important; }
59+
.p-5 { padding: 2rem !important; }
60+
61+
.pl-0 { padding-left: 0 !important; }
62+
.pl-1 { padding-left: .125rem !important; }
63+
.pl-2 { padding-left: .25rem !important; }
64+
.pl-3 { padding-left: .5rem !important; }
65+
.pl-4 { padding-left: 1rem !important; }
66+
.pl-5 { padding-left: 2rem !important; }
67+
68+
.pr-0 { padding-right: 0 !important; }
69+
.pr-1 { padding-right: .125rem !important; }
70+
.pr-2 { padding-right: .25rem !important; }
71+
.pr-3 { padding-right: .5rem !important; }
72+
.pr-4 { padding-right: 1rem !important; }
73+
.pr-5 { padding-right: 2rem !important; }
74+
75+
.pt-0 { padding-top: 0 !important; }
76+
.pt-1 { padding-top: .125rem !important; }
77+
.pt-2 { padding-top: .25rem !important; }
78+
.pt-3 { padding-top: .5rem !important; }
79+
.pt-4 { padding-top: 1rem !important; }
80+
.pt-5 { padding-top: 2rem !important; }
81+
82+
.pb-0 { padding-bottom: 0 !important; }
83+
.pb-1 { padding-bottom: .125rem !important; }
84+
.pb-2 { padding-bottom: .25rem !important; }
85+
.pb-3 { padding-bottom: .5rem !important; }
86+
.pb-4 { padding-bottom: 1rem !important; }
87+
.pb-5 { padding-bottom: 2rem !important; }
88+
89+
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
90+
.px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
91+
.px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
92+
.px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
93+
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
94+
.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
95+
96+
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
97+
.py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
98+
.py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
99+
.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
100+
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
101+
.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

‎web_src/less/index.less‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@import "~font-awesome/css/font-awesome.css";
22

3-
@import "./helpers.less";
43
@import "./features/gitgraph.less";
54
@import "./features/animations.less";
65
@import "./markdown/mermaid.less";
@@ -21,3 +20,5 @@
2120
@import "_explore";
2221
@import "_review";
2322
@import "_chroma";
23+
24+
@import "./helpers.less";

0 commit comments

Comments
 (0)