Commit e1ce1413 authored by Laura Schlimmer's avatar Laura Schlimmer
Browse files

added fn-statistic template

parent 5ceee2b2

libfnord/webui/components/fn-statistic-demo.html

0 → 100644
+92 −0
Original line number Diff line number Diff line 
<!--

  This file is part of the "FnordMetric" project

    Copyright (c) 2014 Laura Schlimmer

    Copyright (c) 2014 Paul Asmuth, Google Inc.



  FnordMetric is free software: you can redistribute it and/or modify it under

  the terms of the GNU General Public License v3.0. You should have received a

  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

-->

<template id="fn-statistic-demo-base-tpl">

  <style type='text/css'>

    p {

      font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;

      font-size: 14px;

      line-height: 1.33;

      color: rgba(0,0,0,.8);

    }

  </style>

  <section>

    <h1><i>Example 1 &raquo;</i> Basic Statistic</h1>

    <fn-statistic>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

  </section>



  <section>

    <h1><i>Example 2 &raquo;</i> Horizontal Statistic</h1>

    <fn-statistic data-direction='horizontal'>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

  </section>



  <section>

    <h1><i>Example 3 &raquo;</i> Grouped Statistics</h1>

    <fn-statistics>

      <fn-statistic>

        <fn-statistic-value>31</fn-statistic-value>

        <fn-statistic-label>Bookings</fn-statistic-label>

      </fn-statistic>

      <fn-statistic>

        <fn-statistic-value>3</fn-statistic-value>

        <fn-statistic-label>Cancellations</fn-statistic-label>

      </fn-statistic>

    </fn-statistics>

  </section>



  <section>

    <h1><i>Example 4 &raquo;</i> Sizes</h1>

    <fn-statistic data-size='mini'>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

    <fn-statistic data-size='tiny'>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

    <fn-statistic data-size='small'>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

    <fn-statistic>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

    <fn-statistic data-size='large'>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

    <fn-statistic data-size='huge'>

      <fn-statistic-value>31</fn-statistic-value>

      <fn-statistic-label>Bookings</fn-statistic-label>

    </fn-statistic>

  </section>



  <section>

    <h1><i>Example 4 &raquo;</i> Floated</h1>

    <fn-statistic data-float='right'>

      <fn-statistic-value>234</fn-statistic-value>

      <fn-statistic-label>Students</fn-statistic-label>

    </fn-statistic>

    <p>

      Lebowski ipsum fuck your sympathy! I don't need your sympathy, man, I need my fucking Johnson! Dolor sit amet, consectetur adipiscing elit praesent. Fuckin' A. Ac magna justo pellentesque ac lectu        s quis elit blandit fringilla. Little matter to me that this woman chose to pursue a career in pornography. A ut turpis praesent felis ligula, malesuada suscipit malesuada. Shut the fuck up, Donny      Non, ultrices non urna sed orci ipsum, placerat id.

    </p>

    <p>

      Lebowski ipsum no ma'am, I didn't mean to give the impression that we're police exactly. We're hoping that it will not be necessary to call the police. Dolor sit amet, consectetur adipiscing elit praesent ac magna. Saturday is shabbos. Jewish day of rest. Means I don't work, I don't drive a car, I don't fucking ride in a car, I don't handle money, I don't turn on the oven, and I sure as shit don't fucking roll! Justo pellentesque ac lectus quis elit blandit fringilla a ut.

    </p>



  </section>

</template>

libfnord/webui/components/fn-statistic.css

0 → 100644
+257 −0
Original line number Diff line number Diff line 
/**

 * Adapted from: Semantic UI:

 *   https://github.com/Semantic-Org/Semantic-UI

 *   http://www.semantic-fn-com/

 */



/*******************************

           Statistic

*******************************/





/* Standalone */

fn-statistic,

.fn-statistic {

  display: inline-block;

  margin: 1em 0em;

  max-width: 175px;

}



fn-statistic + fn-statistic,

.fn-statistic + .fn-statistic {

  margin: 0em 0em 0em 1em;

}



fn-statistic:first-child,

.fn-statistic:first-child {

  margin-top: 0em;

}



fn-statistic:last-child,

.fn-statistic:last-child {

  margin-bottom: 0em;

}



/* Grouped */

fn-statistics > fn-statistic,

.fn-statistics > .fn-statistic {

  display: block;

  float: left;

  margin: 0em 1em 2em;

  max-width: 175px;

}



fn-statistics,

.fn-statistics {

  display:block;

}



/*******************************

            Group

*******************************/



fn-statistics,

.fn-statistics {

  display: block;

  margin: 1em -1em;

}



/* Clearing */

fn-statistics:after,

.fn-statistics:after {

  display: block;

  content: ' ';

  height: 0px;

  clear: both;

  overflow: hidden;

  visibility: hidden;

}

fn-statistics:first-child,

.fn-statistics:first-child {

  margin-top: 0em;

}

fn-statistics:last-child,

.fn-statistics:last-child {

  margin-bottom: 0em;

}



/*******************************

            Content

*******************************/





/*--------------

      Value

---------------*/

fn-statistics fn-statistic > fn-statistic-value,

fn-statistic > fn-statistic-value,

.fn-statistics .fn-statistic > .fn-statistic-value,

.fn-statistic > .fn-statistic-value {

  display:block;

  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;

  font-size: 4rem;

  font-weight: normal;

  line-height: 1em;

  color: #1b1c1d;

  text-transform: uppercase;

  text-align: center;

}



/*--------------

     Label

---------------*/

fn-statistics fn-statistic > fn-statistic-label,

fn-statistic > fn-statistic-label,

.fn-statistics .fn-statistic > .fn-statistic-label,

.fn-statistic > .fn-statistic-label {

  display: block;

  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;

  font-size: 1rem;

  font-weight: normal;

  color: rgba(0, 0, 0, 0.4);

  text-transform: none;

  text-align: center;

}



/* Top Label */

fn-statistics fn-statistic > fn-statistic-label ~ fn-statistic-value,

fn-statistic > fn-statistic-label ~ fn-statistic-value,

.fn-statistics .fn-statistic > .fn-statistic-label ~ .fn-statistic-value,

.fn-statistic > .fn-statistic-label ~ .fn-statistic-value {

  margin-top: 0rem;

}



/* Bottom Label */

fn-statistics fn-statistic > fn-statistic-value ~ fn-statistic-label,

fn-statistic > fn-statistic-value ~ fn-statistic-label,

.fn-statistics .fn-statistic > .fn-statistic-value ~ .fn-statistic-label,

.fn-statistic > .fn-statistic-value ~ .fn-statistic-label {

  margin-top: 0.25rem;

}



/*******************************

            Variations

*******************************/





/*--------------

   Horizontal

---------------*/



fn-statistics[data-direction='horizontal'],

.fn-statistics[data-direction='horizontal']

fn-statistic[data-direction='horizontal'],

.fn-statistic[data-direction='horizontal'] {

  display: block;

  margin: 0em;

  max-width: 9999px;

}



fn-statistics[data-direction='horizontal'] fn-statistic,

.fn-statistics[data-direction='horizontal'] .fn-statistic{

  float: none;

  margin: 1em 0em;

  max-width: 9999px;

}



fn-statistics[data-direction='horizontal'] fn-statistic > fn-statistic-value,

fn-statistic[data-direction='horizontal'] > fn-statistic-value,

.fn-statistics[data-direction='horizontal'] .fn-statistic > .fn-statistic-value,

.fn-statistic[data-direction='horizontal'] > .fn-statistic-value {

  display: inline-block;

  vertical-align: middle;

}



fn-statistics[data-direction='horizontal'] fn-statistic > fn-statistic-label,

fn-statistic[data-direction='horizontal'] > fn-statistic-label,

.fn-statistics[data-direction='horizontal'] .fn-statistic > .fn-statistic-label,

.fn-statistic[data-direction='horizontal'] > .fn-statistic-label {

  display: inline-block;

  vertical-align: middle;

  margin: 0em 0em 0em 0.75em;

}



/*--------------

     Sizes

---------------*/





/* Mini */

fn-statistics[data-size='mini'] fn-statistic > fn-statistic-value,

fn-statistic[data-size='mini'] > fn-statistic-value,

.fn-statistics[data-size='mini'] .fn-statistic > .fn-statistic-value,

.fn-statistic[data-size='mini'] > .fn-statistic-value {

  font-size: 1.5rem;

}





/* Tiny */

fn-statistics[data-size='tiny'] fn-statistic > fn-statistic-value,

fn-statistic[data-size='tiny'] > fn-statistic-value,

.fn-statistics[data-size='tiny'] .fn-statistic > .fn-statistic-value,

.fn-statistic[data-size='tiny'] > .fn-statistic-value {

  font-size: 2rem;

}



/* Small */

fn-statistics[data-size='small'] fn-statistic > fn-statistic-value,

fn-statistic[data-size='small'] > fn-statistic-value,

.fn-statistics[data-size='small'] .fn-statistic > .fn-statistic-value,

.fn-statistic[data-size='small'] > .fn-statistic-value {

  font-size: 3rem;

}



/* Medium */

fn-statistics fn-statistic > fn-statistic-value,

fn-statistic > fn-statistic-value,

.fn-statistics .fn-statistic > .fn-statistic-value,

.fn-statistic > .fn-statistic-value {

  font-size: 4rem;

}





/* Large */

fn-statistics[data-size='large'] fn-statistic > fn-statistic-value,

fn-statistic[data-size='large'] > fn-statistic-value,

.fn-statistics[data-size='large'] .fn-statistic > .fn-statistic-value,

.fn-statistic[data-size='large'] > .fn-statistic-value {

  font-size: 5rem;

}

.ui.large.horizontal.statistics .statistic > .value,

.ui.large.horizontal.statistic > .value {

  font-size: 4rem;

}



/* Huge */

fn-statistics[data-size='huge'] fn-statistic > fn-statistic-value,

fn-statistic[data-size='huge'] > fn-statistic-value,

.fn-statistics[data-size='huge'] .fn-statistic > .fn-statistic-value,

.fn-statistic[data-size='huge'] > .fn-statistic-value {

  font-size: 6rem;

}

.ui.huge.horizontal.statistics .statistic > .value,

.ui.huge.horizontal.statistic > .value {

  font-size: 5rem;

}



/*--------------

    Floated

---------------*/

fn-statistic[data-float='left'],

.fn-statistic[data-float='left'] {

  float: left;

  margin: 0em 2em 1em 0em;

}



fn-statistic[data-float='right'],

.fn-statistic[data-float='right'] {

  float: right;

  margin: 0em 0em 1em 2em;

}



fn-statistic[data-float]:last-child,

.fn-statistic[data-float]:last-child {

  margin-bottom: 0em;

}

libfnord/webui/demo.html

+3 −0
Original line number Diff line number Diff line
@@ -27,6 +27,7 @@ 
    <link rel="stylesheet" href="components/fn-input.css" type='text/css'>

    <link rel="stylesheet" href="components/fn-card.css" type='text/css'>

    <link rel="stylesheet" href="3rdparty/fontawesome.css" type="text/css">

    <link rel="stylesheet" href="components/fn-statistic.css" type='text/css'>

    <style type="text/css">

      @font-face {

        font-family: 'FontAwesome';
@@ -170,6 +171,7 @@ 
    <link rel="import" href="components/fn-flexbox-demo.html" data-component="fn-flexbox-demo">

    <link rel="import" href="components/fn-card.html" data-component="fn-card">

    <link rel="import" href="components/fn-card-demo.html" data-component="fn-card-demo">

    <link rel="import" href="components/fn-statistic-demo.html" data-component="fn-statistic-demo">



    <div id="sidebar">

      <div style="padding: 15px;">
@@ -207,6 +209,7 @@ 
          <fn-menu-item data-target-demo="fn-modal">fn-modal</fn-menu-item>

          <fn-menu-item data-target-demo="fn-tooltip">fn-tooltip</fn-menu-item>

          <fn-menu-item data-target-demo="fn-divider">fn-divider</fn-menu-item>

          <fn-menu-item data-target-demo="fn-statistic">fn-statistic</fn-menu-item>

        </fn-submenu>



        <fn-submenu>

CRA Git | Maintained and supported by SUSTech CRA and CCSE