~homeworkprod/byceps

863bd35950f75ff210a118378a7903f4725ceb14 — Jochen Kupperschmidt 1 year, 2 months ago 207af92
Extract common progress bar styles, add examples to style guide
M byceps/blueprints/admin/dashboard/templates/admin/dashboard/view_party.html => byceps/blueprints/admin/dashboard/templates/admin/dashboard/view_party.html +3 -13
@@ 10,17 10,7 @@
    <link rel="stylesheet" href="{{ url_for('static', filename='style/admin_dashboard.css') }}">
    <style>
      .progress {
        background-color: #dddddd;
        border-radius: 3px;
        height: 0.125rem;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        overflow: hidden;
      }

      .progress-bar {
        background-color: #666666;
        height: 100%;
        height: 0.25rem;
      }
    </style>
{%- endblock %}


@@ 36,7 26,7 @@
      {%- with tickets_total_max_specified = (ticket_sale_stats.tickets_max is not none) %}
        <div class="progress">
          {%- if tickets_total_max_specified %}
          <div class="progress-bar" style="width: calc(100% * {{ ticket_sale_stats.tickets_sold }} / {{ ticket_sale_stats.tickets_max }});"></div>
          <div class="progress-bar color-success" style="width: calc(100% * {{ ticket_sale_stats.tickets_sold }} / {{ ticket_sale_stats.tickets_max }});"></div>
          {%- endif %}
        </div>
        <div class="row row--space-between" style="font-size: 0.75rem;">


@@ 51,7 41,7 @@
    {%- call render_cell(href=url_for('ticketing_checkin.index', party_id=party.id)) %}
      <div class="dimmed" style="font-size: 0.75rem; margin-bottom: 1rem; text-transform: uppercase;">Tickets eingecheckt</div>
        <div class="progress">
          <div class="progress-bar" style="width: calc(100% * {{ tickets_checked_in }} / {{ ticket_sale_stats.tickets_sold }});"></div>
          <div class="progress-bar color-success" style="width: calc(100% * {{ tickets_checked_in }} / {{ ticket_sale_stats.tickets_sold }});"></div>
        </div>
        <div class="row row--space-between" style="font-size: 0.75rem;">
          <div class="column-auto" style="font-weight: bold;">{{ tickets_checked_in|separate_thousands }}</div>

M byceps/blueprints/admin/shop/article/templates/admin/shop/article/view.html => byceps/blueprints/admin/shop/article/templates/admin/shop/article/view.html +1 -11
@@ 9,17 9,7 @@
{% block head %}
    <style>
      .progress {
        background-color: #dddddd;
        border-radius: 3px;
        display: flex;
        height: 0.25rem;
        margin: 0.25rem 0 0.5rem 0;
        overflow: hidden;
      }

      .progress-bar {
        background-color: #666666;
        height: 100%;
        height: 0.3rem;
      }

      .progress-bar.color--available {

M byceps/blueprints/common/style_guide/templates/common/style_guide/index.html => byceps/blueprints/common/style_guide/templates/common/style_guide/index.html +4 -0
@@ 73,6 73,7 @@
    <li><a class="tabs-tab" href="#buttons">Buttons</a></li>
    <li><a class="tabs-tab" href="#dropdowns">Dropdown Menus</a></li>
    <li><a class="tabs-tab" href="#tags">Tags</a></li>
    <li><a class="tabs-tab" href="#progress">Progress</a></li>
    <li><a class="tabs-tab" href="#forms">Forms</a></li>
    <li><a class="tabs-tab" href="#icons">Icons</a></li>
  </ol>


@@ 98,6 99,9 @@
  <h2 id="tags">Tags</h2>
{%- include 'common/style_guide/sections/_tags.html' %}

  <h2 id="progress">Progress</h2>
{%- include 'common/style_guide/sections/_progress.html' %}

  <h2 id="forms">Forms</h2>
{%- include 'common/style_guide/sections/_forms.html' %}


A byceps/blueprints/common/style_guide/templates/common/style_guide/sections/_progress.html => byceps/blueprints/common/style_guide/templates/common/style_guide/sections/_progress.html +37 -0
@@ 0,0 1,37 @@
  {%- set example_progress -%}

<p>Basic progress bars:</p>
<div class="progress">
  <div class="progress-bar" style="width: 0%;"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 42%;"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 100%;"></div>
</div>

<p>Custom-colored, shorter progress bar:</p>
<div class="progress" style="background-color: #88ccff; width: 8rem;">
  <div class="progress-bar" style="background-color: #1199ff; width: 75%;"></div>
</div>

<p>Stacked, colored, thinner progress bars:</p>
<div class="progress" style="height: 0.3rem;">
  <div class="progress-bar color-danger" style="width: 16%;"></div>
  <div class="progress-bar color-warning" style="width: 42%;"></div>
  <div class="progress-bar color-success" style="width: 23%;"></div>
</div>

  {%- endset %}

  <div class="example">
    <div class="example-result">
{{ example_progress }}
    </div>
    <div class="example-code">
      {% call render_code_block() -%}
{{ example_progress }}
      {%- endcall %}
    </div>
  </div>

M byceps/blueprints/site/tourney/templates/site/tourney/tourney_view.html => byceps/blueprints/site/tourney/templates/site/tourney/tourney_view.html +0 -4
@@ 28,16 28,12 @@

  .progress {
    background-color: #cccccc;
    border-radius: 3px;
    height: 0.3rem;
    overflow: hidden;
    width: 4rem;
  }

  .progress-bar {
    background-color: #666666;
    box-shadow: 1px 0 1px #333;
    height: 100%;
  }

  .progress-bar.color--available {

M byceps/static/style/common.css => byceps/static/style/common.css +21 -0
@@ 627,6 627,23 @@ nav.pagination li.current {
}


/* progress bars */

.progress {
  background-color: #dddddd;
  border-radius: 3px;
  display: flex;
  height: 0.5rem;
  margin: 0.25rem 0;
  overflow: hidden;
}

.progress-bar {
  background-color: #666666;
  height: 100%;
}


/* tags */

.tag {


@@ 777,6 794,7 @@ table.user-badges-list td {
  border-color: #ffcc11;
}

.progress-bar.color-danger,
.tag.color-danger {
  background-color: #ff2222;
}


@@ 785,14 803,17 @@ table.user-badges-list td {
  background-color: #aaaaaa;
}

.progress-bar.color-info,
.tag.color-info {
  background-color: #1199ff;
}

.progress-bar.color-success,
.tag.color-success {
  background-color: #55cc00;
}

.progress-bar.color-warning,
.tag.color-warning {
  background-color: #ffcc11;
}