Skip to content

Instantly share code, notes, and snippets.

@FGRibreau

FGRibreau/app.htm

Created February 13, 2013 22:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save FGRibreau/4949034 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save FGRibreau/4949034 to your computer and use it in GitHub Desktop.
Download ZIP
#IUT #Nantes #Backbone #JavaScript
Raw
app.htm
<body>
<div class="app container">
<div class="row-fluid">
<div class="span12">
<h2 class="app-heading">Facebook Friends App</h2>
<div class="app-toolbar btn-group">
<button class="btn" id="byName">Sort by name</button>
<button class="btn" id="byBirthday">Sort by birthday</button>
<input type="text" placeholder="Type something to look for..." />
<button class="btn btn-danger" id="removeSearch">
<i class="icon-white icon-remove"></i>
</button>
</div>
<div class="well friendsCount btn-success"><span>0</span> friend(s)</div>
</div>
</div>
<div class="row-fluid">
<div class="statistic span4">Stat 1
</div>
<div class="statistic span4">Stat 2
</div>
<div class="statistic span4">Stat 3
</div>
</div>
<div class="row-fluid">
<div class="statistic span4">Stat 4
</div>
<div class="statistic span4">Stat 5
</div>
<div class="statistic span4">Stat 6
</div>
</div>
<div class="friend-list row-fluid"></div>
</div>
</div>
<!-- inclusion des javascripts & templates ici etc... -->
</body>
Raw
css.htm
<!-- Remplacez les anciens CSS par celui-ci -->
<!-- Ce code doit se trouver dans la balise <head> -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.app {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.app > .row-fluid > .span12{position:relative}
.row-fluid{margin-bottom:1em;padding-top:1em;}
.row-fluid:nth-child(n+2){
border-top:1px solid #ccc;
}
/*
CSS3 FTW
See: http://css-tricks.com/useful-nth-child-recipies/
*/
.row-fluid.friend-list .span4:nth-child(3n+1){
margin-left:0px;
}
.app .app-heading{text-align:center;padding-bottom:1em;}
.app .app-heading,
.app .checkbox {
margin-bottom: 10px;
}
.app input[type="text"],
.app input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.app-toolbar{padding: 10px 0px;}
.app .friend-item{margin-bottom:10px;}
.btn-group input[type=text]{
margin-bottom: 0px;
font-size: 14px;
height: 14px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
}
/* Handle button */
/* Test with/ $('.app').toggleClass('searchmode'); */
#removeSearch{
opacity:0;
-webkit-transition: opacity 500ms ease-out;
}
.app.searchmode input{
border-radius:0px;
border-right:0px;
}
.app.searchmode #removeSearch {
opacity:1;
-webkit-transition: opacity 300ms ease-out;
}
.friendsCount{
font-size: 14px;
position: absolute;
right: 0px;
bottom: 10px;
line-height: 28px;
padding: 0 6px;
margin: 0;
min-height: auto;
}
.statistic{
text-align:center;
min-height:200px;
background-color: #f5f5f5;
padding: 4px;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment