From 3865ecbf13b5091be6a03913c1a83f361228d556 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 8 Sep 2020 19:17:56 +0200 Subject: [PATCH] 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 Co-authored-by: techknowlogick --- .stylelintrc | 1 + modules/templates/helper.go | 14 ++++- templates/repo/view_file.tmpl | 14 ++--- web_src/less/_repository.less | 5 ++ web_src/less/helpers.less | 107 ++++++++++++++++++++++++++++++++-- web_src/less/index.less | 3 +- 6 files changed, 126 insertions(+), 18 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 0e1b38228fe..427d89b5bcd 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -5,6 +5,7 @@ rules: block-closing-brace-empty-line-before: null color-hex-length: null comment-empty-line-before: null + declaration-block-single-line-max-declarations: null declaration-empty-line-before: null indentation: 2 no-descending-specificity: null diff --git a/modules/templates/helper.go b/modules/templates/helper.go index f86287f10be..c5526b3dea1 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -468,13 +468,23 @@ func NewTextFuncMap() []texttmpl.FuncMap { var widthRe = regexp.MustCompile(`width="[0-9]+?"`) var heightRe = regexp.MustCompile(`height="[0-9]+?"`) -// SVG render icons -func SVG(icon string, size int) template.HTML { +// SVG render icons - arguments icon name (string), size (int), class (string) +func SVG(icon string, others ...interface{}) template.HTML { + var size = others[0].(int) + + class := "" + if len(others) > 1 && others[1].(string) != "" { + class = others[1].(string) + } + if svgStr, ok := svg.SVGs[icon]; ok { if size != 16 { svgStr = widthRe.ReplaceAllString(svgStr, fmt.Sprintf(`width="%d"`, size)) svgStr = heightRe.ReplaceAllString(svgStr, fmt.Sprintf(`height="%d"`, size)) } + if class != "" { + svgStr = strings.Replace(svgStr, `class="`, fmt.Sprintf(`class="%s `, class), 1) + } return template.HTML(svgStr) } return template.HTML("") diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 782331aad70..26f66d2cb59 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -1,12 +1,8 @@

-
+
{{if .ReadmeInList}} - {{if .FileIsSymlink}} - - {{else}} - - {{end}} + {{svg "octicon-book" 16 "mr-3"}} {{.FileName}} {{else}}
@@ -26,8 +22,8 @@
{{end}} {{if .LFSLock}} -
- +
+ {{svg "octicon-lock" 16 "mr-2"}} {{.LFSLockOwner}}
{{end}} @@ -35,7 +31,7 @@ {{end}}
{{if not .ReadmeInList}} -
+
{{.i18n.Tr "repo.file_raw"}} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index c29d0925daa..2a8d3b5693a 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3139,6 +3139,11 @@ td.blob-excerpt { align-items: center; } +.file-info-entry { + display: flex; + align-items: center; +} + .file-info-entry + .file-info-entry { border-left: 1px solid currentColor; margin-left: 8px; diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index d854d288076..ff858ef2831 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -1,6 +1,101 @@ -.flex-0 { - flex: 0; -} -.flex-1 { - flex: 1; -} +.df { display: flex; } +.ac { align-items: center; } +.jc { justify-content: center; } + +.m-0 { margin: 0 !important; } +.m-1 { margin: .125rem !important; } +.m-2 { margin: .25rem !important; } +.m-3 { margin: .5rem !important; } +.m-4 { margin: 1rem !important; } +.m-5 { margin: 2rem !important; } + +.ml-0 { margin-left: 0 !important; } +.ml-1 { margin-left: .125rem !important; } +.ml-2 { margin-left: .25rem !important; } +.ml-3 { margin-left: .5rem !important; } +.ml-4 { margin-left: 1rem !important; } +.ml-5 { margin-left: 2rem !important; } + +.mr-0 { margin-right: 0 !important; } +.mr-1 { margin-right: .125rem !important; } +.mr-2 { margin-right: .25rem !important; } +.mr-3 { margin-right: .5rem !important; } +.mr-4 { margin-right: 1rem !important; } +.mr-5 { margin-right: 2rem !important; } + +.mt-0 { margin-top: 0 !important; } +.mt-1 { margin-top: .125rem !important; } +.mt-2 { margin-top: .25rem !important; } +.mt-3 { margin-top: .5rem !important; } +.mt-4 { margin-top: 1rem !important; } +.mt-5 { margin-top: 2rem !important; } + +.mb-0 { margin-bottom: 0 !important; } +.mb-1 { margin-bottom: .125rem !important; } +.mb-2 { margin-bottom: .25rem !important; } +.mb-3 { margin-bottom: .5rem !important; } +.mb-4 { margin-bottom: 1rem !important; } +.mb-5 { margin-bottom: 2rem !important; } + +.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } +.mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; } +.mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; } +.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; } +.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } +.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; } + +.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; } +.my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; } +.my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; } +.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } +.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; } + +.p-0 { padding: 0 !important; } +.p-1 { padding: .125rem !important; } +.p-2 { padding: .25rem !important; } +.p-3 { padding: .5rem !important; } +.p-4 { padding: 1rem !important; } +.p-5 { padding: 2rem !important; } + +.pl-0 { padding-left: 0 !important; } +.pl-1 { padding-left: .125rem !important; } +.pl-2 { padding-left: .25rem !important; } +.pl-3 { padding-left: .5rem !important; } +.pl-4 { padding-left: 1rem !important; } +.pl-5 { padding-left: 2rem !important; } + +.pr-0 { padding-right: 0 !important; } +.pr-1 { padding-right: .125rem !important; } +.pr-2 { padding-right: .25rem !important; } +.pr-3 { padding-right: .5rem !important; } +.pr-4 { padding-right: 1rem !important; } +.pr-5 { padding-right: 2rem !important; } + +.pt-0 { padding-top: 0 !important; } +.pt-1 { padding-top: .125rem !important; } +.pt-2 { padding-top: .25rem !important; } +.pt-3 { padding-top: .5rem !important; } +.pt-4 { padding-top: 1rem !important; } +.pt-5 { padding-top: 2rem !important; } + +.pb-0 { padding-bottom: 0 !important; } +.pb-1 { padding-bottom: .125rem !important; } +.pb-2 { padding-bottom: .25rem !important; } +.pb-3 { padding-bottom: .5rem !important; } +.pb-4 { padding-bottom: 1rem !important; } +.pb-5 { padding-bottom: 2rem !important; } + +.px-0 { padding-left: 0 !important; padding-right: 0 !important; } +.px-1 { padding-left: .125rem !important; padding-right: .125rem !important; } +.px-2 { padding-left: .25rem !important; padding-right: .25rem !important; } +.px-3 { padding-left: .5rem !important; padding-right: .5rem !important; } +.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } +.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; } + +.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } +.py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; } +.py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; } +.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; } +.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } +.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } diff --git a/web_src/less/index.less b/web_src/less/index.less index bcc0d54d87d..e9ef7199486 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -1,6 +1,5 @@ @import "~font-awesome/css/font-awesome.css"; -@import "./helpers.less"; @import "./features/gitgraph.less"; @import "./features/animations.less"; @import "./markdown/mermaid.less"; @@ -21,3 +20,5 @@ @import "_explore"; @import "_review"; @import "_chroma"; + +@import "./helpers.less";