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

Convert language statistics styles to less, use different class names

pull/2135/head
tso 9 years ago
parent
769a1b3096
commit
5f120a86f3
3 changed files with 248 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      public/css/language_statistics.css
  2. 125
      public/less/_language_statistics.less
  3. 146
      templates/repo/language_statistics.tmpl

111
public/css/language_statistics.css
Unescape View File

@ -0,0 +1,111 @@
.statistics {
position: relative;
height: 2.6667em;
border: 1px solid #dedede;
border-radius: 5px;
background: #fff;
/**
* 3D box effect technique
*
* http://codepen.io/rachsmith/pen/cojza
*/
}
.statistics .box3d {
perspective: 1000px;
overflow: hidden;
border-radius: 5px 5px 0 0;
padding: 0 1.5em;
}
.statistics .box3d .toppanel,
.statistics .box3d .bottompanel {
transform-origin: 50% 0;
transition-delay: 125ms;
/**
* this timing function from
* http://codepen.io/sbchewitt/pen/KpPZMx
*/
transition: all 0.5s cubic-bezier(0.57, -0.42, 0.46, 1.4);
}
.statistics .box3d .toppanel {
position: relative;
transform-style: preserve-3d;
background: #fff;
}
.statistics .box3d .bottompanel {
transform: rotateX(-90deg) translateZ(0);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 100%;
background: #999;
}
.statistics .box3d.focusstate .toppanel {
transform: rotateX(90deg) translateY(-22px);
transition-delay: 0s;
}
.statistics .box3d.focusstate .bottompanel {
background: #fff;
transition-delay: 0s;
}
.statistics .box3d .navbar {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
padding: 0.5em;
}
.statistics .box3d .navbar .navitem {
flex: 0 1 auto;
}
.statistics .box3d .navbar .navitem a {
color: #222;
text-decoration: none;
}
.statistics .box3d .repo .navitem:hover a {
color: #4183c4;
}
.statistics .box3d .lang .navitem::before {
background-color: currentColor;
content: '';
display: inline-block;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
vertical-align: middle;
margin: 0 0.25em 2px 0;
cursor: pointer;
}
.statistics .box3d .lang .navitem::after {
content: attr(data-percent);
margin-left: 0.5em;
color: #555;
}
.statistics .underbar {
position: absolute;
left: 0;
padding-top: 5px;
height: 8px;
width: 100%;
bottom: 0;
display: flex;
cursor: pointer;
border-radius: 0 0 5px 5px;
overflow: hidden;
opacity: 0.6;
transition: all 0.5s cubic-bezier(0.57, -0.42, 0.46, 1.4);
}
.statistics .underbar:hover {
opacity: 0.8;
}
.statistics .underbar span {
font-size: 0;
background-color: currentColor;
}
.statistics .box3d.focusstate ~ .underbar,
.statistics .underbar:hover {
opacity: 1;
padding: 0;
padding-top: 3px;
}

125
public/less/_language_statistics.less
Unescape View File

@ -0,0 +1,125 @@
.statistics {
position: relative;
height: 2.6667em;
border: 1px solid #dedede;
border-radius: 5px;
background: #fff;
/**
* 3D box effect technique
*
* http://codepen.io/rachsmith/pen/cojza
*/
.box3d {
perspective: 1000px;
overflow: hidden;
border-radius: 5px 5px 0 0;
padding: 0 1.5em;
.toppanel, .bottompanel {
transform-origin: 50% 0;
transition-delay: 125ms;
/**
* this timing function from
* http://codepen.io/sbchewitt/pen/KpPZMx
*/
transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4);
}
.toppanel {
position: relative;
transform-style: preserve-3d;
background: #fff;
}
.bottompanel {
transform: rotateX(-90deg) translateZ(0);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 100%;
background: #999;
}
&.focusstate {
.toppanel {
transform: rotateX(90deg) translateY(-22px);
transition-delay: 0s;
}
.bottompanel {
background: #fff;
transition-delay: 0s;
}
}
.navbar {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
padding: 0.5em;
.navitem {
flex: 0 1 auto;
}
.navitem a {
color: #222;
text-decoration: none;
}
}
.repo .navitem:hover a {
color: #4183c4;
}
.lang {
.navitem {
&::before {
background-color: currentColor;
content: '';
display: inline-block;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
vertical-align: middle;
margin: 0 0.25em 2px 0;
cursor: pointer;
}
&::after {
content: attr(data-percent);
margin-left: 0.5em;
color: #555;
}
}
}
}
.underbar {
position: absolute;
left: 0;
bottom: 0;
padding-top: 5px;
height: 8px;
width: 100%;
bottom: 0;
display: flex;
cursor: pointer;
border-radius: 0 0 5px 5px;
overflow: hidden;
opacity: 0.6;
transition: all 0.5s cubic-bezier(.57,-0.42,.46,1.4);
&:hover {
opacity: 0.8;
}
span {
font-size: 0;
background-color: currentColor;
}
}
.box3d.focusstate ~ .underbar, .underbar:hover {
opacity: 1;
padding: 0;
padding-top: 3px;
}
}

146
templates/repo/language_statistics.tmpl
Unescape View File

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

Write Preview
Loading…
Cancel
Save