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>

diff --git a/.stylelintrc b/.stylelintrc
index 0e1b38228fe9c1490cef54542dc2c79a1e3bef7c..427d89b5bcda7d99d71808d8b7158ca79629d9b6 100644 (file)
--- 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 f86287f10bef95dfaf196bf888ae0b4912c6fe29..c5526b3dea144776c083dab7201fd87d2273c5df 100644 (file)
--- 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 782331aad70d7a5d930d10175e4d18ec7d1f3b15..26f66d2cb597f4ab6679e15cb052e0fff34ba6f0 100644 (file)
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -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>

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index c29d0925daa8c9afbe0680c334002699e9e6e321..2a8d3b5693a9bc1f6f159a91fdbc2e3917bc23d2 100644 (file)
--- 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 d854d288076e04cbf4c3b26178eb38825d80ed2a..ff858ef28316263ed428fc10b253bdd5f7a69adf 100644 (file)
--- 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 bcc0d54d87d890e123aed337807fbe61c8a11065..e9ef7199486bbdc9f91d01aa02081a7f4e43a1eb 100644 (file)
--- 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";