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>
This commit is contained in:
silverwind
GitHub
parent
e204398754
commit
3865ecbf13
6 changed files with 126 additions and 18 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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("")
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
|
||||
<h4 class="file-header ui top attached header">
|
||||
<div class="file-header-left">
|
||||
<div class="file-header-left df ac">
|
||||
{{if .ReadmeInList}}
|
||||
{{if .FileIsSymlink}}
|
||||
<i class="icons"><i class="book icon"></i><i class="bottom left corner tiny inverted share icon"></i></i>
|
||||
{{else}}
|
||||
<i class="book icon"></i>
|
||||
{{end}}
|
||||
{{svg "octicon-book" 16 "mr-3"}}
|
||||
<strong>{{.FileName}}</strong>
|
||||
{{else}}
|
||||
<div class="file-info text grey normal mono">
|
||||
|
|
@ -26,8 +22,8 @@
|
|||
</div>
|
||||
{{end}}
|
||||
{{if .LFSLock}}
|
||||
<div class="file-info-entry">
|
||||
<i class="fa fa-lock poping up disabled" data-content="{{.LFSLockHint}}" data-position="bottom center" data-variation="tiny inverted"></i>
|
||||
<div class="file-info-entry ui" data-tooltip="{{.LFSLockHint}}" data-inverted="">
|
||||
{{svg "octicon-lock" 16 "mr-2"}}
|
||||
<a href="{{AppSubUrl}}/{{.LFSLock.Owner.Name}}">{{.LFSLockOwner}}</a>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -35,7 +31,7 @@
|
|||
{{end}}
|
||||
</div>
|
||||
{{if not .ReadmeInList}}
|
||||
<div class="file-header-right">
|
||||
<div class="file-header-right df ac">
|
||||
<div class="ui right file-actions">
|
||||
<div class="ui buttons">
|
||||
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Reference in a new issue