Skip to content

Commit

Permalink
Merge pull request PUGX#60 from toretto460/master
Browse files Browse the repository at this point in the history 
Fixed PUGX#59 - Improved Usability home
  • Loading branch information
@leopro
leopro committed Jun 7, 2013
2 parents 5f8d3c8 + d490d39 commit 99e5661
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 214 deletions.
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ This project is still in ALPHA and you shouldn't use it yet (protocol and domain
[![Latest Unstable Version](https://poser.pugx.org/symfony/symfony/v/unstable.png)](https://packagist.org/packages/pugx/badge-poser)
[![Build Status](https://secure.travis-ci.org/PUGX/badge-poser.png)](http:https://travis-ci.org/PUGX/badge-poser)

## How to create your own Badge
- Go to the [Badge Poser](https://poser.pugx.org) website
- Insert username/repository and click Generate
- That's it! Copy the Markdown into the README.md

## Usage
## Examples

Total downloads [![Downloads](https://poser.pugx.org/symfony/symfony/d/total.png)](https://packagist.org/packages/symfony/symfony)
```md
Expand Down
197 changes: 7 additions & 190 deletions src/PUGX/BadgeBundle/Resources/public/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ body {
*/
background: url(../img/groovepaper.png) repeat;
}

/* Custom container */
.container-narrow {
margin: 0 auto;
Expand Down Expand Up @@ -38,9 +37,15 @@ pre {
strong {
font-weight: 700;
}

.grey-text{
color: #F5F5F5;
}
/* Override the standard prettyprint style*/
.prettyprint{
transition: width 0.5s linear;
-webkit-transition: all 0.5s linear;
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap;
word-wrap: break-word !important;
line-height: 24px !important;
margin-bottom: 30px;
Expand All @@ -52,192 +57,4 @@ hr.styled {
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.36), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.36), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.36), rgba(0,0,0,0));
}
#overlay {
background: rgba(0, 0, 0, 0.84);
width: 700px;
height: 100%;
z-index: 999;
position: absolute;
display: none;
}

/*
* Css Spinner provided by http:https://cssload.net
*/
#spinningSquaresG{
float: right;
display: none;
position:relative;
width:183px;
height:22px}

.spinningSquaresG{
position:absolute;
top:0;
background-color:#1E6DCC;
width:22px;
height:22px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}

#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}

#spinningSquaresG_2{
left:23px;
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-o-animation-delay:0.45s;
animation-delay:0.45s;
}

#spinningSquaresG_3{
left:46px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}

#spinningSquaresG_4{
left:69px;
-moz-animation-delay:0.63s;
-webkit-animation-delay:0.63s;
-ms-animation-delay:0.63s;
-o-animation-delay:0.63s;
animation-delay:0.63s;
}

#spinningSquaresG_5{
left:92px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

#spinningSquaresG_6{
left:114px;
-moz-animation-delay:0.81s;
-webkit-animation-delay:0.81s;
-ms-animation-delay:0.81s;
-o-animation-delay:0.81s;
animation-delay:0.81s;
}

#spinningSquaresG_7{
left:137px;
-moz-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-o-animation-delay:0.9s;
animation-delay:0.9s;
}

#spinningSquaresG_8{
left:160px;
-moz-animation-delay:0.99s;
-webkit-animation-delay:0.99s;
-ms-animation-delay:0.99s;
-o-animation-delay:0.99s;
animation-delay:0.99s;
}

@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#1E6DCC;
}

100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#1E6DCC;
}

100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#1E6DCC;
}

100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#1E6DCC;
}

100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#1E6DCC;
}

100%{
transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}
17 changes: 15 additions & 2 deletions src/PUGX/BadgeBundle/Resources/public/js/snippet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,25 @@ $(document).ready(function(){

var lock = function(){
$('#spinningSquaresG').show();
$('#overlay').fadeIn();
$('.prettyprint').each(function(idx, el){
$(el).addClass('grey-text');
});
$('.spinned').each(function(idx, el){
$(el).fadeOut();
});
};

var unlock = function(){
$('#spinningSquaresG').hide();
$('#overlay').fadeOut(500);
setTimeout(function(){
$('.prettyprint').each(function(idx, el){
$(el).removeClass('grey-text');
});
$('.spinned').each(function(idx, el){
$(el).fadeIn(1500);
});
},200);

};

var generateSnippets = function(snippets_raw_data){
Expand Down
23 changes: 2 additions & 21 deletions src/PUGX/BadgeBundle/Resources/views/Page/home.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,34 +43,15 @@
</p>
<hr class="styled">
<h3 class="centered-content">Create your own Badge</h3>
<form id="generate-form" action="{{ url('pugx_snippet_all') }}" class="form-inline">
<form id="generate-form" action="{{ url('pugx_snippet_all') }}" class="form-inline centered-content">
<input type="text" name="username" class="input-small" placeholder="Username">
/
<input type="text" name="repository" class="input" placeholder="Repository">
<button id="generate" class="btn">Generate</button>
<div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</form>
<small>put the following snippets in your README:</small>
<p class="centered-content"><small >put the following snippets in your README:</small></p>

<div id="badges">
<div id="overlay"></div>
<div>
<h4>Total downloads <img class="pull-right spinned" id="total_img" src="https://poser.pugx.org/symfony/symfony/d/total.png"></h4>
<pre id="total_markdown" class="prettyprint">[![Total Downloads](https://poser.pugx.org/symfony/symfony/d/total.png)](https://packagist.org/packages/symfony/symfony)</pre>
Expand Down

0 comments on commit 99e5661

Please sign in to comment.