From b4b90da0feef6352555c2bb4cc8f913048090869 Mon Sep 17 00:00:00 2001 From: Ryan Hamilton Date: Thu, 29 Oct 2020 17:48:58 -0400 Subject: [PATCH] Fix oversized width of DAGs table with hide/reveal of "links" (#11866) * Conserve horizontal space by adding hide/reveal "links" in DAGs table * Reverse the order of links to reduce mouse distance for most popular --- airflow/www/static/css/dags.css | 121 +++++++++++++++++++++ airflow/www/static/css/main.css | 10 -- airflow/www/templates/airflow/dags.html | 135 +++++++++++++----------- airflow/www/webpack.config.js | 1 + docs/img/dags.png | Bin 297947 -> 211122 bytes 5 files changed, 194 insertions(+), 73 deletions(-) create mode 100644 airflow/www/static/css/dags.css diff --git a/airflow/www/static/css/dags.css b/airflow/www/static/css/dags.css new file mode 100644 index 0000000000000..5a265a276921d --- /dev/null +++ b/airflow/www/static/css/dags.css @@ -0,0 +1,121 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.dags-table-wrap { + border-radius: 4px 4px 0 0; + background-color: #f0f0f0; +} + +.dags-table-header { + margin: 0; + padding: 16px 0; +} + +.dags-table-more { + position: relative; +} + +.dags-table-more__toggle, +.dags-table-more__toggle:hover, +.dags-table-more__toggle:focus { + display: block; + padding: 8px 16px; + cursor: default; + border-color: transparent; + background: transparent; +} + +.dags-table-more__menu { + position: absolute; + top: 0; + right: 0; + bottom: 0; + padding-right: 4px; + white-space: nowrap; + display: flex; + align-items: center; + overflow: hidden; +} + +.dags-table-more__menu:hover { + overflow: visible; +} + +.dags-table-more__menu::before { + width: 0; + height: 100%; + content: ''; + pointer-events: none; + transition: width 0.3s ease-in; +} + +.dags-table-more__menu:hover::before { + margin-left: -200px; + width: 200px; + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%); +} + +tr:nth-child(odd) .dags-table-more__menu:hover { + background-color: #fff; +} + +tr:nth-child(2n) .dags-table-more__menu:hover { + background-color: #f9f9f9; +} + +tr:nth-child(2n) .dags-table-more__menu:hover::before { + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f9f9f9 100%); +} + +tr:nth-child(odd):hover .dags-table-more__menu:hover, +tr:nth-child(2n):hover .dags-table-more__menu:hover { + background-color: #f5f5f5; +} + +tr:nth-child(odd):hover .dags-table-more__menu:hover::before, +tr:nth-child(2n):hover .dags-table-more__menu:hover::before { + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f5f5f5 100%); +} + +.dags-table-more__links { + margin-right: 16px; + width: 0; + overflow: hidden; +} + +.dags-table-more__menu:hover .dags-table-more__links { + width: auto; + overflow: visible; +} + +.dags-table-more__link { + display: inline-block; + max-width: 0; + overflow: hidden; + margin-right: 16px; + transition: max-width 0.3s ease-in; +} + +.dags-table-more__link:last-child { + margin-right: 0; +} + +.dags-table-more__menu:hover .dags-table-more__link { + max-width: 200px; +} diff --git a/airflow/www/static/css/main.css b/airflow/www/static/css/main.css index 669fdd78357ec..f0500f9a4e7fd 100644 --- a/airflow/www/static/css/main.css +++ b/airflow/www/static/css/main.css @@ -391,16 +391,6 @@ label[for="timezone-other"], background-color: #f5f5f5; } -.dags-table-wrap { - border-radius: 4px 4px 0 0; - background-color: #f0f0f0; -} - -.dags-table-header { - margin: 0; - padding: 16px 0; -} - .dag-view-tools { margin: 16px 0; padding: 16px 0; diff --git a/airflow/www/templates/airflow/dags.html b/airflow/www/templates/airflow/dags.html index d1b5a46f0798c..4078cfe417963 100644 --- a/airflow/www/templates/airflow/dags.html +++ b/airflow/www/templates/airflow/dags.html @@ -31,11 +31,11 @@ {% block head_css %} {{ super() }} + {% endblock %} {% block content %}

DAGs

-
@@ -76,22 +76,22 @@

DAGs

- info + info DAG - Schedule Owner - Recent Tasks - + Runs + + Schedule Last Run - DAG Runs - + Recent Tasks + - Links - Actions + Actions + Links @@ -101,7 +101,7 @@

DAGs

{% for dag in dags %} {# Column 1: Turn dag on/off #} - +