Skip to content

Commit

Permalink
[Minor] Fix padding on home page (#19025)
Browse files Browse the repository at this point in the history 
* [Minor] fix padding on home page

* fix lint

* Move filters and pagination out from dags-table-wrap

* - fix last row of a table
 - col span should be 10 instead of 9

* add bottom padding

* Update airflow/www/static/css/dags.css

Co-authored-by: Ryan Hamilton <[email protected]>

Co-authored-by: Ryan Hamilton <[email protected]>
  • Loading branch information
@prabhjyotsingh @ryanahamilton
prabhjyotsingh and ryanahamilton authored Oct 20, 2021
1 parent 05eea00 commit 91a12a7
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 37 deletions.
8 changes: 5 additions & 3 deletions airflow/www/static/css/dags.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,12 @@
.dags-table-body {
margin: 0 1px;
overflow-x: auto;
padding-bottom: 34px;
}

/* This allows small dropdowns to overlap the table element */
padding-bottom: 55px;
margin-bottom: -55px;
.no-x-padding {
padding-left: 0;
padding-right: 0;
}

.dags-table-more {
Expand Down
68 changes: 34 additions & 34 deletions airflow/www/templates/airflow/dags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,41 +78,41 @@
{% block content %}
<h2>{{ page_title }}</h2>
<div id="main_content">
<div class="dags-table-wrap">
<div class="row dags-table-header">
<div class="col-md-4">
<div class="form-group btn-group">
<a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="Show active and paused DAGs">All <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
<a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="Show only active DAGs">Active <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
<a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="Show only paused DAGs">Paused <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<form id="tags_form" style="width: 100%; text-align: left;">
<div class="form-group search-input" style="width:100%;">
<select multiple name="tags" id="tags_filter" class="select2-drop-mask" style="width: 100%;">
{% for tag in tags %}
<option value="{{ tag.name }}" {% if tag.selected %}selected{% endif %}>{{ tag.name }}</option>
{% endfor %}
</select>
{% if tags_filter|length > 0 %}
<button type="reset" aria-label="Clear all tags" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
{% endif %}
</div>
</form>
</div>
<div class="col-sm-6 col-md-3 col-md-offset-2">
<form id="search_form">
<div class="form-group search-input" style="width: 100%;">
<label for="dag_query" class="sr-only">Search DAGs</label>
<input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
{% if search_query %}
<button type="reset" aria-label="Clear DAG Search Term" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
{% endif %}
</div>
</form>
<div class="row dags-table-header">
<div class="col-md-4 no-x-padding">
<div class="form-group btn-group">
<a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="Show active and paused DAGs">All <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
<a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="Show only active DAGs">Active <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
<a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="Show only paused DAGs">Paused <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<form id="tags_form" style="width: 100%; text-align: left;">
<div class="form-group search-input" style="width:100%;">
<select multiple name="tags" id="tags_filter" class="select2-drop-mask" style="width: 100%;">
{% for tag in tags %}
<option value="{{ tag.name }}" {% if tag.selected %}selected{% endif %}>{{ tag.name }}</option>
{% endfor %}
</select>
{% if tags_filter|length > 0 %}
<button type="reset" aria-label="Clear all tags" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
{% endif %}
</div>
</form>
</div>
<div class="col-sm-6 col-md-3 col-md-offset-2 no-x-padding">
<form id="search_form">
<div class="form-group search-input" style="width: 100%;">
<label for="dag_query" class="sr-only">Search DAGs</label>
<input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
{% if search_query %}
<button type="reset" aria-label="Clear DAG Search Term" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
{% endif %}
</div>
</form>
</div>
</div>
<div class="dags-table-wrap">
<div class="dags-table-body">
<table class="table table-striped table-bordered table-hover">
<thead>
Expand Down Expand Up @@ -141,7 +141,7 @@ <h2>{{ page_title }}</h2>
</thead>
<tbody>
{% if dags|length == 0 %}
<tr><td colspan="9">No results</td></tr>
<tr><td colspan="10">No results</td></tr>
{% endif %}
{% for dag in dags %}
<tr>
Expand Down

0 comments on commit 91a12a7

Please sign in to comment.