playground
/
gogs
mirror of https://github.com/gogits/gogs.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

spaces -> tabs

pull/2135/head
tso 9 years ago
parent
2ae1600684
commit
eb287f36bb
1 changed files with 117 additions and 117 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 234
      templates/repo/language_statistics.tmpl

234
templates/repo/language_statistics.tmpl
Unescape View File

@ -1,60 +1,60 @@
<div class="statistics"> <div class="statistics">
<div class="statistics-box"> <div class="statistics-box">
<div class="statistics-box__toppanel statistics-box__repo"> <div class="statistics-box__toppanel statistics-box__repo">
<ul class="statistics-nav"> <ul class="statistics-nav">
<li class="statistics-nav__item"> <li class="statistics-nav__item">
<i class="octicon octicon-history"></i> <i class="octicon octicon-history"></i>
<a href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">{{.CommitsCount}} Commit(s)</a> <a href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">{{.CommitsCount}} Commit(s)</a>
</li> </li>
<li class="statistics-nav__item"> <li class="statistics-nav__item">
<i class="octicon octicon-git-branch"></i> <i class="octicon octicon-git-branch"></i>
{{len .Branches}} Branch(es) {{len .Branches}} Branch(es)
</li> </li>
<li class="statistics-nav__item"> <li class="statistics-nav__item">
<i class="octicon octicon-tag"></i> <i class="octicon octicon-tag"></i>
<a href="{{.RepoLink}}/releases">{{.Repository.NumTags}} Release(s)</a> <a href="{{.RepoLink}}/releases">{{.Repository.NumTags}} Release(s)</a>
</li> </li>
<li class="statistics-nav__item"> <li class="statistics-nav__item">
<i class="octicon octicon-organization"></i> <i class="octicon octicon-organization"></i>
1337 Contributors 1337 Contributors
</li> </li>
</ul> </ul>
<div class="statistics-box__bottompanel statistics-box__lang"> <div class="statistics-box__bottompanel statistics-box__lang">
<ul class="statistics-nav"> <ul class="statistics-nav">
{{range $Lang := .LanguageStats}} {{range $Lang := .LanguageStats}}
<li class="statistics-nav__item" <li class="statistics-nav__item"
style="color:{{$Lang.Color}}" style="color:{{$Lang.Color}}"
data-percent="{{$Lang.Percent}}"> data-percent="{{$Lang.Percent}}">
<a href="#">{{$Lang.Name}}</a> <a href="#">{{$Lang.Name}}</a>
</li> </li>
{{end}} {{end}}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!-- <!--
would prefer not to use inline styles for this would prefer not to use inline styles for this
in favor of data-* attributes + attr() in css in favor of data-* attributes + attr() in css
however browsers do not support this yet however browsers do not support this yet
and JavaScript cannot target ::before, ::after and JavaScript cannot target ::before, ::after
--> -->
<div class="statistics-underbar" <div class="statistics-underbar"
title="Language Statistics" title="Language Statistics"
onclick="document.querySelector('.statistics-box').classList.toggle('statistics-box__focusstate')"> onclick="document.querySelector('.statistics-box').classList.toggle('statistics-box__focusstate')">
{{range $Lang := .LanguageStats}} {{range $Lang := .LanguageStats}}
<span style="color:{{$Lang.Color}};flex-basis:{{$Lang.Percent}}">{{$Lang.Name}}</span> <span style="color:{{$Lang.Color}};flex-basis:{{$Lang.Percent}}">{{$Lang.Name}}</span>
{{end}} {{end}}
</div> </div>
</div> </div>
<style> <style>
.statistics { .statistics {
position: relative; position: relative;
height: 2.6667em; height: 2.6667em;
border: 1px solid #dedede; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
background: #fff; background: #fff;
} }
/** /**
@ -63,106 +63,106 @@
* http://codepen.io/rachsmith/pen/cojza * http://codepen.io/rachsmith/pen/cojza
*/ */
.statistics-box { .statistics-box {
perspective: 1000px; perspective: 1000px;
overflow: hidden; overflow: hidden;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
padding: 0 1.5em; padding: 0 1.5em;
} }
.statistics-box__toppanel, .statistics-box__bottompanel { .statistics-box__toppanel, .statistics-box__bottompanel {
transform-origin: 50% 0; transform-origin: 50% 0;
transition-delay: 125ms; transition-delay: 125ms;
/** /**
* this timing function from * this timing function from
* http://codepen.io/sbchewitt/pen/KpPZMx * http://codepen.io/sbchewitt/pen/KpPZMx
*/ */
transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4); transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4);
} }
.statistics-box__toppanel { .statistics-box__toppanel {
position: relative; position: relative;
transform-style: preserve-3d; transform-style: preserve-3d;
background: #fff; background: #fff;
} }
.statistics-box__bottompanel { .statistics-box__bottompanel {
transform: rotateX(-90deg) translateZ(0); transform: rotateX(-90deg) translateZ(0);
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
top: 100%; top: 100%;
background: #999; background: #999;
} }
.statistics-box__focusstate .statistics-box__toppanel { .statistics-box__focusstate .statistics-box__toppanel {
transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px);
transition-delay: 0s; transition-delay: 0s;
} }
.statistics-box__focusstate .statistics-box__bottompanel { .statistics-box__focusstate .statistics-box__bottompanel {
background: #fff; background: #fff;
transition-delay: 0s; transition-delay: 0s;
} }
/*ul*/.statistics-nav { /*ul*/.statistics-nav {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 0.5em; padding: 0.5em;
} }
/*li*/.statistics-nav__item { /*li*/.statistics-nav__item {
flex: 0 1 auto; flex: 0 1 auto;
} }
/*li*/.statistics-nav__item a { /*li*/.statistics-nav__item a {
color: #222; color: #222;
text-decoration: none; text-decoration: none;
} }
.statistics-box__repo /*li*/.statistics-nav__item:hover a { .statistics-box__repo /*li*/.statistics-nav__item:hover a {
color: #4183c4; color: #4183c4;
} }
.statistics-box__lang /*li*/.statistics-nav__item::before { .statistics-box__lang /*li*/.statistics-nav__item::before {
background-color: currentColor; background-color: currentColor;
content: ''; content: '';
display: inline-block; display: inline-block;
width: 0.75em; width: 0.75em;
height: 0.75em; height: 0.75em;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
margin: 0 0.25em 2px 0; margin: 0 0.25em 2px 0;
cursor: pointer; cursor: pointer;
} }
/*li*/.statistics-nav__item::after { /*li*/.statistics-nav__item::after {
content: attr(data-percent); content: attr(data-percent);
margin-left: 0.5em; margin-left: 0.5em;
color: #555; color: #555;
} }
.statistics-underbar { .statistics-underbar {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
padding-top: 5px; padding-top: 5px;
height: 8px; height: 8px;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
overflow: hidden; overflow: hidden;
opacity: 0.6; opacity: 0.6;
transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4); transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4);
} }
.statistics-box__focusstate ~ .statistics-underbar, .statistics-box__focusstate ~ .statistics-underbar,
.statistics-underbar:hover { .statistics-underbar:hover {
opacity: 1; opacity: 1;
padding: 0; padding: 0;
padding-top: 3px; padding-top: 3px;
} }
.statistics-underbar:hover { .statistics-underbar:hover {
opacity: 0.8; opacity: 0.8;
} }
.statistics-underbar span { .statistics-underbar span {
font-size: 0; font-size: 0;
background-color: currentColor; background-color: currentColor;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save