Source of file listview.php
Size: 15,403 Bytes - Last Modified: 2021-12-24T07:20:59+00:00
/var/www/docs.ssmods.com/process/src/public/listview.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379 | <?php include("header.php")?> <div class="page secondary"> <div class="page-header"> <div class="page-header-content"> <h1>List view<small>demo</small></h1> <a href="/" class="back-button big page-back"></a> </div> </div> <div class="page-region"> <div class="page-region-content"> <div class="span10"> <h2>List view</h2> <ul class="listview"> <li class="bg-color-pinkDark fg-color-white"> <div class="icon"> <img src="images/onenote2013icon.png" /> </div> <div class="data"> <h4 class="fg-color-white">OneNote 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> <li> <div class="icon"> <img src="images/excel2013icon.png" /> </div> <div class="data"> <h4>Excel 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> <li class="selected"> <div class="icon"> <img src="images/word2013icon.png" /> </div> <div class="data"> <h4>Word 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> <li> <div class="icon"> <img src="images/firefox.png" /> </div> <div class="data"> <h4>Firefox</h4> <div class="progress-bar"> <div class="bar" style="width: 75%"></div> </div> <p>Download...</p> </div> </li> </ul> <pre class="prettyprint linenums span10"> <ul class="listview"> <li> <div class="icon"> <img /> </div> <div class="data"> <h4>Title</h4> ... <p>text</p> </div> </li> ... </ul> </pre> <h2>List view Fluid</h2> <ul class="listview fluid"> <li> <div class="icon"> <img src="images/onenote2013icon.png" /> </div> <div class="data"> <h4>OneNote 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> <li> <div class="icon"> <img src="images/firefox.png" /> </div> <div class="data"> <h4>Firefox</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>Free</p> </div> </li> <li class="bg-color-blueDark fg-color-white"> <div class="icon"> <img src="images/word2013icon.png" /> </div> <div class="data"> <h4 class="fg-color-white">Word 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> <li class="selected"> <div class="icon"> <img src="images/excel2013icon.png" /> </div> <div class="data"> <h4>Excel 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> </ul> <pre class="prettyprint linenums span10"> <ul class="listview fluid"> ... </ul> </pre> <h2>ListView Image</h2> <ul class="listview image"> <li> <div class="icon"> <img src="images/myface.jpg" /> </div> <div class="data"> <h4>This is a my face</h4> <p> Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine. </p> <a href="mailto:sergey@pimenov.com.ua">sergey@pimenov.com.ua</a> </div> </li> <li class="bg-color-red fg-color-white"> <div class="icon"> <img src="images/1.jpg" /> </div> <div class="data"> <h4 class="fg-color-white">Bear</h4> <p> Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives. </p> </div> </li> <li class="selected"> <div class="icon"> <img src="images/myface.jpg" /> </div> <div class="data"> <h4>This is a my face</h4> <div class="static-rating small"> <div class="rating-value" style="width: 100%"></div> </div> <p> Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine. </p> <a href="mailto:sergey@pimenov.com.ua">sergey@pimenov.com.ua</a> </div> </li> </ul> <pre class="prettyprint linenums span10"> <ul class="listview image"> ... </ul> </pre> <h2>ListView Image Fluid</h2> <ul class="listview image fluid"> <li> <div class="icon"> <img src="images/myface.jpg" /> </div> <div class="data"> <h4>This is a my face</h4> <p> Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine. </p> <a href="mailto:sergey@pimenov.com.ua">sergey@pimenov.com.ua</a> </div> </li> <li class="bg-color-red fg-color-white"> <div class="icon"> <img src="images/myface.jpg" /> </div> <div class="data"> <h4 class="fg-color-white">This is a my face</h4> <p> Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine. </p> <a class="fg-color-yellow" href="mailto:sergey@pimenov.com.ua">sergey@pimenov.com.ua</a> </div> </li> <li class="selected"> <div class="icon"> <img src="images/myface.jpg" /> </div> <div class="data"> <h4>This is a my face</h4> <div class="static-rating small"> <div class="rating-value" style="width: 100%"></div> </div> <p> Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine. </p> <a href="mailto:sergey@pimenov.com.ua">sergey@pimenov.com.ua</a> </div> </li> </ul> <pre class="prettyprint linenums span10"> <ul class="listview image fluid"> ... </ul> </pre> <h2>ListView Iconic</h2> <ul class="listview iconic"> <li> <div class="icon"> <img src="images/excel2013icon.png" /> </div> <div class="data"> <h4>Excel 2013</h4> </div> </li> <li> <div class="icon"> <img src="images/word2013icon.png" /> </div> <div class="data"> <h4>Word 2013</h4> </div> </li> <li> <div class="icon"> <img src="images/onenote2013icon.png" /> </div> <div class="data"> <h4>OneNote 2013</h4> </div> </li> </ul> <pre class="prettyprint linenums span10"> <ul class="listview iconic"> ... </ul> </pre> <h2>List view with badges</h2> <p> You can use badges with any listview type. To set background or foreground color of badge, you can use color classes.<br /> If you want to strech the badge, you need to add the class strech to the div badge. </p> <h3>Classes</h3> <p> <b>.strech</b> - Strech your badge dimension<br /> <b>.right</b> - Set your badge to right (default: left)<br /> <b>.bottom</b> - Set your badge to bottom (default: top)<br /> </p> <br /> <ul class="listview"> <li> <div class="badge">1 new</div> <div class="icon"> <i class="icon-mail"></i> </div> <div class="data"> <h4>Mail from <a href="mailto:vabatta@gmail.com">vabatta@gmail.com</a></h4> <p> Hey Sergey, your metro UI is awesome!<br /> Keep up the hard work! </p> </div> </li> <li> <div class="badge strech">6 new documents</div> <div class="icon"> <img src="images/word2013icon.png" /> </div> <div class="data"> <h4>Word 2013</h4> <div class="static-rating small"> <div class="rating-value" style="width: 75%"></div> </div> <p>1 RUB</p> </div> </li> <li> <div class="badge bg-color-red right bottom">75% done</div> <div class="icon"> <img src="images/firefox.png" /> </div> <div class="data"> <h4>Firefox</h4> <div class="progress-bar"> <div class="bar" style="width: 75%"></div> </div> <p>Download...</p> </div> </li> </ul> <pre class="prettyprint linenums span10"> <ul class="listview"> <li> <div class="badge"> text </div> ... </li> ... </ul> <ul class="listview"> <li> <div class="badge strech"> text </div> ... </li> ... </ul> </pre> </div> </div> </div> </div> <?php include("footer.php")?> |