From a5e8351152d9513811e2d6d9eaaf2180e35e002d Mon Sep 17 00:00:00 2001 From: Peter Mikus Date: Mon, 10 Jan 2022 13:19:31 +0100 Subject: feat(uti): Dash demo - displays the table with trending data downloaded from trending pages Signed-off-by: Peter Mikus Change-Id: Ic0d48290105ccd846c7de9ee4d8acb78e0b72f00 --- .../tools/dash/app/pal/static/dist/css/styles.css | 1 + .../tools/dash/app/pal/static/dist/img/favicon.svg | 348 +++++++++++++++++++++ resources/tools/dash/app/pal/static/img/logo.svg | 348 +++++++++++++++++++++ .../tools/dash/app/pal/static/less/global.less | 12 + .../tools/dash/app/pal/static/less/header.less | 33 ++ resources/tools/dash/app/pal/static/less/home.less | 64 ++++ .../tools/dash/app/pal/static/less/table.less | 256 +++++++++++++++ 7 files changed, 1062 insertions(+) create mode 100644 resources/tools/dash/app/pal/static/dist/css/styles.css create mode 100644 resources/tools/dash/app/pal/static/dist/img/favicon.svg create mode 100644 resources/tools/dash/app/pal/static/img/logo.svg create mode 100644 resources/tools/dash/app/pal/static/less/global.less create mode 100644 resources/tools/dash/app/pal/static/less/header.less create mode 100644 resources/tools/dash/app/pal/static/less/home.less create mode 100644 resources/tools/dash/app/pal/static/less/table.less (limited to 'resources/tools/dash/app/pal/static') diff --git a/resources/tools/dash/app/pal/static/dist/css/styles.css b/resources/tools/dash/app/pal/static/dist/css/styles.css new file mode 100644 index 0000000000..d77f95a58f --- /dev/null +++ b/resources/tools/dash/app/pal/static/dist/css/styles.css @@ -0,0 +1 @@ +body,html{height:100%!important;margin:0;padding:0;background:#e7ecf7!important;font-family:'Lato',sans-serif}.row .col{padding:0!important}header{position:relative;width:100%;padding:30px 0!important;background:white!important;box-shadow:0 0 5px #bec6cf;font-family:'Lato',sans-serif}header .nav-wrapper{display:flex;align-items:center;justify-content:space-between;width:1000px;max-width:90%;margin:auto}header .nav-wrapper nav{display:flex}header .nav-wrapper .logo{display:inline-block;width:40px}header .nav-wrapper a{color:#70829d;font-size:1em;text-decoration:none;transition:all .3s ease-out}.home-template .container{margin:0!important}.home-template .card{width:800px;max-width:93%;height:fit-content;margin:50px auto;padding:60px;background:white;box-shadow:0 0 5px rgba(65,67,144,0.15);text-align:center}@media(max-width:800px){.home-template .card{max-width:78%;width:unset;padding:40px}}.home-template .card .logo{width:50px;margin:auto}.home-template .card .site-title{margin:10px 0 3px;color:#5f6988;font-family:proxima-nova,sans-serif;font-size:2.3em;line-height:1;text-transform:uppercase}.home-template .card p{margin:0;color:#7f92af;font-size:1.08em}.home-template .card a{color:#79aec8;font-weight:500;text-decoration:none;transition:all .2s ease}.home-template .card .dash-link{display:block;margin-top:30px;font-size:1.1em;font-weight:600}.home-template .card .dash-link:hover{opacity:.7}.home-template .card .dash-link i{margin-left:6px;font-size:.9em}body,html{height:100%!important;padding:0;background:#e7ecf7!important;font-family:'Lato',sans-serif;margin:0}.dash-template h1{display:inline-block;margin:0;font-size:1.5em}.dash-template .logo{width:40px;margin-right:20px}.dash-template .logo:hover{opacity:.7}.dash-template .nav-wrapper a{display:flex;align-items:center}#dash-container{width:1200px;max-width:95%;margin:50px auto 0}.container{margin:90px 30px;color:#182635}#_dash-app-content{max-width:95%!important;margin:90px auto!important;overflow:hidden}nav a{display:flex;align-items:center;justify-content:space-between;color:#59657b;line-height:1;text-decoration:none;transition:all .3s ease-out}nav a:hover{cursor:pointer;opacity:.7}nav a i{margin-right:5px}.dash-spreadsheet-container{max-width:100%;margin:0 auto 20px!important;overflow:hidden;border:0;border-radius:4px;box-shadow:0 0 4px #cdd3e2;font-family:'Lato',sans-serif}.dash-spreadsheet-container *{box-shadow:none!important;font-family:Lato,sans-serif}.dash-spreadsheet-container th,.dash-spreadsheet-container tr{box-shadow:none!important}.dash-spreadsheet-container td:first-of-type,.dash-spreadsheet-container tr:first-of-type{width:55px}.dash-spreadsheet-container td:last-of-type,.dash-spreadsheet-container tr:last-of-type{width:100px}.dash-spreadsheet-container th{padding:25px 12px!important;border-top:0!important;border-right:0!important;border-bottom:1px solid #e5e7eb!important;border-left:0!important;background:white!important;color:#404552}.dash-spreadsheet-container th .column-header--sort{margin-right:7px;transition:all .2s ease-out}.dash-spreadsheet-container th .column-header--sort:hover{color:#9bd2eb!important}.dash-spreadsheet-container th .column-header--sort svg{width:.5em}.dash-spreadsheet-container th .sort{order:2;color:#aeaeae!important;transition:all .3s ease-out}.dash-spreadsheet-container th .sort:hover{text-decoration:none;cursor:pointer;opacity:.7}.dash-spreadsheet-container th>div{display:flex;align-items:center;width:fit-content}.dash-spreadsheet-container th>div span:last-of-type{font-size:.8em;font-weight:600;text-transform:uppercase}.dash-spreadsheet-container td{padding:12px!important;font-size:.95em;text-align:left!important}.dash-spreadsheet-container td:first-of-type,.dash-spreadsheet-container td:last-of-type{max-width:50px!important}.dash-spreadsheet-container td .dash-cell-value{display:block!important;max-width:500px;overflow:hidden!important;font-size:1.2em;font-weight:300;text-align:left;text-overflow:ellipsis;white-space:nowrap;opacity:.8}.dash-spreadsheet-container td[data-dash-column="command"],.dash-spreadsheet-container .column-1{max-width:200px!important}.dash-spreadsheet-container td[data-dash-column="index"]{text-align:center!important}.dash-spreadsheet-container td[data-dash-column="index"] div{text-align:center!important}.dash-spreadsheet-container td[data-dash-column="index"]{color:#939da4;font-size:1.1em;font-weight:500}.dash-spreadsheet-container tr:nth-child(even){background:#f5f8fc!important}table tbody{box-shadow:0 0 7px #bdbdd2!important}table tbody tr{border:0!important}table tbody tr:nth-child(even){background:#e7eefa!important}table tbody tr td{padding:12px 10px!important;overflow:hidden!important;border:0!important;font-size:.65em!important;line-height:1.25!important;text-align:center!important}.dash-spreadsheet-container .dash-spreadsheet-inner td.focused{background-color:rgba(154,212,255,0.2)!important;box-shadow:0 0 4px #cdd3e2}.dash-spreadsheet-container .dash-spreadsheet-inner td .input-cell-value-shadow{width:100%}.dash-spreadsheet-container .dash-spreadsheet-inner td input.dash-cell-value.unfocused{caret-color:#317ed1!important}.dash-spreadsheet-inner .input-active{overflow:visible!important;color:#829ab2;text-align:left!important}.dash-spreadsheet-inner input::placeholder{color:grey}#histogram-graph{margin-bottom:30px;padding-bottom:176px!important;overflow:hidden;border-radius:4px;background:white;box-shadow:0 0 4px #cdd3e2}.main-svg{overflow:visible!important}header .nav-wrapper{width:1200px!important} \ No newline at end of file diff --git a/resources/tools/dash/app/pal/static/dist/img/favicon.svg b/resources/tools/dash/app/pal/static/dist/img/favicon.svg new file mode 100644 index 0000000000..689757e3fd --- /dev/null +++ b/resources/tools/dash/app/pal/static/dist/img/favicon.svg @@ -0,0 +1,348 @@ + + + + + + + + + + + + + + + + + + diff --git a/resources/tools/dash/app/pal/static/img/logo.svg b/resources/tools/dash/app/pal/static/img/logo.svg new file mode 100644 index 0000000000..689757e3fd --- /dev/null +++ b/resources/tools/dash/app/pal/static/img/logo.svg @@ -0,0 +1,348 @@ + + + + + + + + + + + + + + + + + + diff --git a/resources/tools/dash/app/pal/static/less/global.less b/resources/tools/dash/app/pal/static/less/global.less new file mode 100644 index 0000000000..78b7ae4314 --- /dev/null +++ b/resources/tools/dash/app/pal/static/less/global.less @@ -0,0 +1,12 @@ +body, +html { + height: 100% !important; + margin: 0; + padding: 0; + background: #e7ecf7 !important; + font-family: 'Lato', sans-serif; +} + +.row .col { + padding: 0 !important; +} diff --git a/resources/tools/dash/app/pal/static/less/header.less b/resources/tools/dash/app/pal/static/less/header.less new file mode 100644 index 0000000000..49f6769df2 --- /dev/null +++ b/resources/tools/dash/app/pal/static/less/header.less @@ -0,0 +1,33 @@ +header { + position: relative; + width: 100%; + padding: 30px 0 !important; + background: white !important; + box-shadow: 0 0 5px #bec6cf; + font-family: 'Lato', sans-serif; + + .nav-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + width: 1000px; + max-width: 90%; + margin: auto; + + nav { + display: flex; + } + + .logo { + display: inline-block; + width: 40px; + } + + a { + color: #70829d; + font-size: 1em; + text-decoration: none; + transition: all 0.3s ease-out; + } + } +} diff --git a/resources/tools/dash/app/pal/static/less/home.less b/resources/tools/dash/app/pal/static/less/home.less new file mode 100644 index 0000000000..ebd66a2ceb --- /dev/null +++ b/resources/tools/dash/app/pal/static/less/home.less @@ -0,0 +1,64 @@ +.home-template { + .container { + margin: 0 !important; + } + + .card { + width: 800px; + max-width: 93%; + height: fit-content; + margin: 50px auto; + padding: 60px; + background: white; + box-shadow: 0 0 5px rgba(65, 67, 144, 0.15); + text-align: center; + @media (max-width: 800px) { + max-width: 78%; + width: unset; + padding: 40px; + } + + .logo { + width: 50px; + margin: auto; + } + + .site-title { + margin: 10px 0 3px; + color: #5f6988; + font-family: proxima-nova, sans-serif; + font-size: 2.3em; + line-height: 1; + text-transform: uppercase; + } + + p { + margin: 0; + color: #7f92af; + font-size: 1.08em; + } + + a { + color: #79aec8; + font-weight: 500; + text-decoration: none; + transition: all .2s ease; + } + + .dash-link { + display: block; + margin-top: 30px; + font-size: 1.1em; + font-weight: 600; + + &:hover { + opacity: .7; + } + + i { + margin-left: 6px; + font-size: .9em; + } + } + } +} diff --git a/resources/tools/dash/app/pal/static/less/table.less b/resources/tools/dash/app/pal/static/less/table.less new file mode 100644 index 0000000000..40e18e0e64 --- /dev/null +++ b/resources/tools/dash/app/pal/static/less/table.less @@ -0,0 +1,256 @@ +body, +html { + height: 100% !important; + padding: 0; + background: #e7ecf7 !important; + font-family: 'Lato', sans-serif; + margin: 0; +} + +.dash-template { + h1 { + display: inline-block; + margin: 0; + font-size: 1.5em; + } + + .logo { + width: 40px; + margin-right: 20px; + + &:hover { + opacity: .7; + } + } + + .nav-wrapper a { + display: flex; + align-items: center; + } +} + +#dash-container { + width: 1200px; + max-width: 95%; + margin: 50px auto 0; +} + +.container { + margin: 90px 30px; + color: #182635; +} + +#_dash-app-content { + max-width: 95% !important; + margin: 90px auto !important; + overflow: hidden; +} + +nav { + a { + display: flex; + align-items: center; + justify-content: space-between; + color: #59657b; + line-height: 1; + text-decoration: none; + transition: all 0.3s ease-out; + + &:hover { + cursor: pointer; + opacity: 0.7; + } + + i { + margin-right: 5px; + } + } +} + +.dash-spreadsheet-container { + max-width: 100%; + margin: 0 auto 20px !important; + overflow: hidden; + border: 0; + border-radius: 4px; + box-shadow: 0 0 4px #cdd3e2; + font-family: 'Lato', sans-serif; + + * { + box-shadow: none !important; + font-family: Lato, sans-serif; + } + + th, + tr { + box-shadow: none !important; + } + + td:first-of-type, + tr:first-of-type { + width: 55px; + } + + td:last-of-type, + tr:last-of-type { + width: 100px; + } + + th { + padding: 25px 12px !important; + border-top: 0 !important; + border-right: 0 !important; + border-bottom: 1px solid #e5e7eb !important; + border-left: 0 !important; + background: white !important; + color: #404552; + + .column-header--sort { + margin-right: 7px; + transition: all 0.2s ease-out; + + &:hover { + color: #9bd2eb !important; + } + + svg { + width: 0.5em; + } + } + + .sort { + order: 2; + color: #aeaeae !important; + transition: all 0.3s ease-out; + + &:hover { + text-decoration: none; + cursor: pointer; + opacity: 0.7; + } + } + + & > div { + display: flex; + align-items: center; + width: fit-content; + + span:last-of-type { + font-size: 0.8em; + font-weight: 600; + text-transform: uppercase; + } + } + } + + td { + padding: 12px !important; + font-size: .95em; + text-align: left !important; + + &:first-of-type, + &:last-of-type { + max-width: 50px !important; + } + + .dash-cell-value { + display: block !important; + max-width: 500px; + overflow: hidden !important; + font-size: 1.2em; + font-weight: 300; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + opacity: .8; + } + } + + td[data-dash-column="command"], + .column-1 { + max-width: 200px !important; + } + + td[data-dash-column="index"] { + text-align: center !important; + + div { + text-align: center !important; + } + } + + td[data-dash-column="index"] { + color: #939da4; + font-size: 1.1em; + font-weight: 500; + } + + tr:nth-child(even) { + background: #f5f8fc !important; + } +} + +table { + tbody { + box-shadow: 0 0 7px #bdbdd2 !important; + + tr { + border: 0 !important; + + &:nth-child(even) { + background: #e7eefa !important; + } + + td { + padding: 12px 10px !important; + overflow: hidden !important; + border: 0 !important; + font-size: 0.65em !important; + line-height: 1.25 !important; + text-align: center !important; + } + } + } +} + +.dash-spreadsheet-container .dash-spreadsheet-inner td.focused { + background-color: rgba(154, 212, 255, 0.2) !important; + box-shadow: 0 0 4px #cdd3e2; +} + +.dash-spreadsheet-container .dash-spreadsheet-inner td .input-cell-value-shadow { + width: 100%; +} + +.dash-spreadsheet-container .dash-spreadsheet-inner td input.dash-cell-value.unfocused { + caret-color: #317ed1 !important; +} + +.dash-spreadsheet-inner .input-active { + overflow: visible !important; + color: #829ab2; + text-align: left !important; +} + +.dash-spreadsheet-inner input { + &::placeholder { + color: grey; + } +} + +#histogram-graph { + margin-bottom: 30px; + padding-bottom: 176px !important; + overflow: hidden; + border-radius: 4px; + background: white; + box-shadow: 0 0 4px #cdd3e2; +} + +.main-svg { + overflow: visible !important; +} + +header .nav-wrapper { + width: 1200px !important; +} -- cgit 1.2.3-korg