First cut at moving to app-layout
This commit is contained in:
Eric Bidelman
Родитель
07f5c5b687
Коммит
50c21da7d4
|
|
@ -23,6 +23,7 @@
|
|||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"app-layout": "PolymerElements/app-layout#^0.10.0",
|
||||
"polymer": "Polymer/polymer#^1.6.0",
|
||||
"iron-ajax": "PolymerElements/iron-ajax#^1.1.0",
|
||||
"google-apis": "GoogleWebComponents/google-apis#^1.0.2",
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}:host{display:block;padding:5px;position:relative}#ironlist{min-height:0}.milestone-marker{text-align:right;text-transform:uppercase;margin:32px 0 8px 0;font-size:18px;color:#366597}@media only screen and (max-width: 700px){.milestone-marker{font-size:14px;font-weight:500;margin:0}[data-first-of-milestone]:after{font-size:12px;font-weight:normal;top:-22px;opacity:1;text-transform:uppercase}}
|
||||
h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}:host{display:block}#ironlist{min-height:0}.milestone-marker{text-align:right;text-transform:uppercase;margin:32px 0 8px 0;font-size:18px;color:#366597}@media only screen and (max-width: 700px){.milestone-marker{font-size:14px;font-weight:500;margin:0}[data-first-of-milestone]:after{font-size:12px;font-weight:normal;top:-22px;opacity:1;text-transform:uppercase}}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}:host{display:block;position:absolute}paper-dialog{width:80vw}paper-dialog>*{margin:0 24px !important;margin-top:20px !important;padding:0 !important}h3{border-bottom:2px solid #4580c0;padding-bottom:10px;margin-bottom:10px}h3:first-child{margin-top:24px}ul{margin:0 0 15px 0}ul>li{margin:5px 0}label{font-size:12px;font-weight:600;text-transform:uppercase}section{margin-top:10px}section.views{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex}section.views>div{-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0}.queries li span{margin-right:5px;width:200px;display:inline-block}p{margin-top:5px}.content-wrapper ::content .close{position:absolute;right:0;top:0}
|
||||
h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}:host{display:block;position:absolute}paper-dialog{width:80vw}paper-dialog>*{margin:0 24px !important;margin-top:20px !important;padding:0 !important}h3{border-bottom:2px solid #4580c0;padding-bottom:10px;margin-bottom:8px}h3:first-child{margin-top:24px}ul{margin:0 0 15px 0}ul>li{margin:5px 0}label{font-size:12px;font-weight:600;text-transform:uppercase}section{margin-top:10px}section.views{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex}section.views>div{-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0}.queries li span{margin-right:5px;width:200px;display:inline-block}p{margin-top:5px}.content-wrapper ::content .close{position:absolute;right:0;top:0}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}:host{display:block}ul.canaryisdev li:nth-of-type(4)::after{content:'canary/dev'}ul.canaryisdev li:nth-of-type(5)::after{content:'beta'}ul.canaryisdev li:nth-of-type(6)::after{content:'stable'}ul.canaryisdev li:nth-of-type(7)::after{content:''}ul.betaisdev li:nth-of-type(4)::after{content:'canary'}ul.betaisdev li:nth-of-type(5)::after{content:'dev/beta'}ul.betaisdev li:nth-of-type(6)::after{content:'stable'}ul.betaisdev li:nth-of-type(7)::after{content:''}ul li{cursor:pointer;padding:3px 0}ul li::before{content:'';margin-right:5px;border-left:3px solid transparent}ul li::after{font-size:80%;margin-left:10px}ul li:first-of-type,ul li:nth-of-type(2),ul li:nth-of-type(3),ul li:last-of-type{font-size:80%}ul li:nth-of-type(3){border-bottom:1px solid #D4D4D4;padding-bottom:10px;margin-bottom:5px}ul li:nth-of-type(4)::after{content:'canary'}ul li:nth-of-type(5)::after{content:'dev'}ul li:nth-of-type(6)::after{content:'beta'}ul li:nth-of-type(7)::after{content:'stable'}ul li[selected]{font-weight:500;color:#366597}ul li[selected]::before{border-color:#366597}.error{font-size:80%;font-weight:500;font-style:italic;margin:100px 0 0 5px;color:darkred}
|
||||
h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:linear-gradient(#F9F9F9 40%, #E3E3E3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:linear-gradient(#E3E3E3 40%, #F9F9F9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}:host{display:block}ul.canaryisdev li:nth-of-type(4)::after{content:'canary/dev'}ul.canaryisdev li:nth-of-type(5)::after{content:'beta'}ul.canaryisdev li:nth-of-type(6)::after{content:'stable'}ul.canaryisdev li:nth-of-type(7)::after{content:''}ul.betaisdev li:nth-of-type(4)::after{content:'canary'}ul.betaisdev li:nth-of-type(5)::after{content:'dev/beta'}ul.betaisdev li:nth-of-type(6)::after{content:'stable'}ul.betaisdev li:nth-of-type(7)::after{content:''}ul li{cursor:pointer;padding:3px 0}ul li::before{content:'';margin-right:5px;border-left:3px solid transparent}ul li::after{font-size:80%;margin-left:10px}ul li:first-of-type,ul li:nth-of-type(2),ul li:nth-of-type(3),ul li:last-of-type{font-size:80%}ul li:nth-of-type(3){border-bottom:1px solid #D4D4D4;padding-bottom:8px;margin-bottom:8px}ul li:nth-of-type(4)::after{content:'canary'}ul li:nth-of-type(5)::after{content:'dev'}ul li:nth-of-type(6)::after{content:'beta'}ul li:nth-of-type(7)::after{content:'stable'}ul li[selected]{font-weight:500;color:#366597}ul li[selected]::before{border-color:#366597}.error{font-size:80%;font-weight:500;font-style:italic;margin:100px 0 0 5px;color:darkred}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
#content.ready::after{display:none}#content::after{font-size:18px;font-weight:normal;content:'loading...';color:#797979;top:0;left:0;position:absolute;background:white;border:1px dashed #bbb;border-radius:3px;width:100%;height:100%;box-sizing:border-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;z-index:100}#content.error::after{content:'Error loading features list.';color:darkred}chromedash-legend{font-size:90%}chromedash-legend .description{margin-bottom:10px}#panels nav{font-size:120%;font-weight:300;overflow-x:hidden}#panels nav chromedash-metadata{overflow:auto;width:165px;transform:translateZ(0)}#panels nav chromedash-metadata .help{text-align:center}#panels chromedash-featurelist{-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;max-width:760px}#subheader paper-button{color:#366597;background:#fff}@media only screen and (max-width: 700px){body:not(.ready) #content{margin:10px}#content{height:100%}chromedash-featurelist{position:absolute;top:0;left:0;right:0;bottom:0;min-height:100vh}}
|
||||
chromedash-legend{font-size:90%}chromedash-legend .description{margin-bottom:10px}chromedash-featurelist{max-width:760px}#subheader paper-button{color:#366597;background:#fff}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
table tr[hidden] th,table tr[hidden] td{padding:0}table th{max-width:200px}table th,table td{padding-bottom:10px}table .helptext{font-style:italic;font-size:smaller}table input[type="text"],table input[type="url"],table input[type="email"],table textarea{width:100%}table select{max-width:350px}table :required{border:1px solid #366597}table .interacted:valid{border:1px solid green}table .interacted:invalid{border:1px solid rgba(255,0,0,0.75)}table .errorlist{color:red}input,textarea{outline:none;padding:7px}form[name="feature_form"] h3{margin:10px 0}form[name="feature_form"] input[type="submit"]{margin-top:20px}
|
||||
table tr[hidden] th,table tr[hidden] td{padding:0}table th{max-width:200px}table th,table td{padding-bottom:10px}table .helptext{font-style:italic;font-size:smaller}table input[type="text"],table input[type="url"],table input[type="email"],table textarea{width:100%}table select{max-width:350px}table :required{border:1px solid #366597}table .interacted:valid{border:1px solid green}table .interacted:invalid{border:1px solid rgba(255,0,0,0.75)}table .errorlist{color:red}input,textarea{outline:none;padding:7px}form[name="feature_form"] h3{margin:8px 0}form[name="feature_form"] input[type="submit"]{margin-top:16px}
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,2 +1,3 @@
|
|||
<link rel="import" href="common.html">
|
||||
<link rel="import" href="delete-link.html">
|
||||
<link rel="import" href="chromedash-userlist.html">
|
||||
|
|
|
|||
|
|
@ -277,7 +277,6 @@
|
|||
<script>
|
||||
Polymer({
|
||||
is: 'chromedash-feature',
|
||||
extends: 'li',
|
||||
|
||||
properties: {
|
||||
MAX_RISK: {
|
||||
|
|
|
|||
|
|
@ -6,25 +6,19 @@
|
|||
<dom-module id="chromedash-featurelist">
|
||||
<link rel="import" type="css" href="../css/elements/chromedash-featurelist.css">
|
||||
<template>
|
||||
<style>
|
||||
#featurelist {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
<ul id="featurelist">
|
||||
<iron-list items="[[filtered]]" as="feature" id="ironlist">
|
||||
<div id="featurelist">
|
||||
<iron-list id="ironlist" scroll-target="document" items="[[filtered]]" as="feature">
|
||||
<template>
|
||||
<div class="item" tabindex="0">
|
||||
<div hidden$="{{_computeMilestoneHidden(feature, features, filtered)}}"
|
||||
class="milestone-marker">{{_computeMilestoneString(feature.meta.milestone_str)}}</div>
|
||||
<li id="{{feature.id}}" is="chromedash-feature"
|
||||
<chromedash-feature id="{{feature.id}}"
|
||||
feature="[[feature]]" needsflag="[[feature.meta.needsflag]]"
|
||||
whitelisted="[[whitelisted]]"></li>
|
||||
whitelisted="[[whitelisted]]"></chromedash-feature>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
(function() {
|
||||
|
|
@ -82,11 +76,20 @@
|
|||
},
|
||||
|
||||
listeners: {
|
||||
'ironlist.scroll': '_onScrollList',
|
||||
'keyup': '_onKeyUp',
|
||||
'feature-toggled': '_onFeatureToggled'
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
Polymer.RenderStatus.afterNextRender(this, function() {
|
||||
this.listen(window, 'scroll', '_onScrollList');
|
||||
});
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
this.unlisten(window, 'scroll', '_onScrollList');
|
||||
},
|
||||
|
||||
_filterOnCategory: function(val) {
|
||||
var regex = new RegExp(val, 'i');
|
||||
return this.features.filter(function(feature, idx, array) {
|
||||
|
|
@ -210,7 +213,7 @@
|
|||
},
|
||||
|
||||
_onKeyUp: function(e, detail) {
|
||||
var focusedEl = Polymer.dom(e).rootTarget.querySelector('[is=chromedash-feature]');
|
||||
var focusedEl = Polymer.dom(e).rootTarget.querySelector('chromedash-feature');
|
||||
// Check for the ENTER key.
|
||||
if (focusedEl && e.keyCode === 13) {
|
||||
focusedEl.toggle();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<link rel="import" href="/static/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
|
||||
<link rel="import" href="/static/bower_components/app-layout/app-drawer/app-drawer.html">
|
||||
<link rel="import" href="/static/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
|
||||
<link rel="import" href="/static/bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="/static/bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="/static/bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<link rel="import" href="common.html">
|
||||
<link rel="import" href="chromedash-featurelist.html">
|
||||
<link rel="import" href="chromedash-metadata.html">
|
||||
<link rel="import" href="chromedash-legend.html">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- <script src='//www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"],"callback": "onGoogLoad"}]}'></script> -->
|
||||
<!-- <script src='//www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"]}]}'></script> -->
|
||||
|
||||
<link rel="import" href="common.html">
|
||||
<link rel="import" href="chromedash-metrics.html">
|
||||
<link rel="import" href="chromedash-timeline.html">
|
||||
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="common.html">
|
||||
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
|
||||
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ $chromium-color-center: #4580c0;
|
|||
|
||||
/* App specific */
|
||||
$invalid-color: rgba(255,0,0,0.75);
|
||||
$content-padding: 20px;
|
||||
$content-padding: 16px;
|
||||
$default-border-radius: 3px;
|
||||
|
||||
$max-content-width: 760px;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
}
|
||||
|
||||
:host([open]) {
|
||||
// overflow: auto;
|
||||
outline: none;
|
||||
|
||||
.desc summary {
|
||||
|
|
|
|||
|
|
@ -2,18 +2,11 @@
|
|||
|
||||
:host {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#featurelist {
|
||||
//transform: translateZ(0); // force composite layer in stable
|
||||
}
|
||||
|
||||
// See https://crbug.com/553278
|
||||
#ironlist {
|
||||
min-height: 0;
|
||||
//transform: translateZ(0); // force composite layer for non-retina.
|
||||
}
|
||||
|
||||
.milestone-marker {
|
||||
|
|
@ -21,35 +14,10 @@
|
|||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
margin: 32px 0 8px 0;
|
||||
// font-weight: 600;
|
||||
font-size: $milestone-label-size;
|
||||
color: $chromium-color-dark;
|
||||
|
||||
// &:first-of-type {
|
||||
// margin-top: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
// [data-first-of-milestone] {
|
||||
// $milestone-label-size: 14px;
|
||||
// text-align: right;
|
||||
// text-transform: uppercase;
|
||||
// margin-top: 10px;
|
||||
// font-weight: 600;
|
||||
// font-size: $milestone-label-size;
|
||||
// color: $chromium-color-dark;
|
||||
|
||||
// // This one rule cases recalcstyle hot path in Blink. Invalidates all siblings.
|
||||
// // &:first-of-type {
|
||||
// // margin-top: $milestone-label-size + 2;
|
||||
// // }
|
||||
|
||||
// &:after {
|
||||
// content: attr(data-milestone) ""; // force string for FF
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.milestone-marker {
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ ul {
|
|||
//transition: all 500ms ease;
|
||||
|
||||
&::before {
|
||||
//transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
// transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
content: '';
|
||||
margin-right: 5px;
|
||||
border-left: 3px solid transparent;
|
||||
|
|
@ -62,12 +62,11 @@ ul {
|
|||
&:nth-of-type(3),
|
||||
&:last-of-type {
|
||||
font-size: $small-font-size;
|
||||
// font-style: italic;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
border-bottom: 1px solid $bar-border-color;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: $content-padding / 2;
|
||||
margin-bottom: $content-padding / 2;
|
||||
}
|
||||
&:nth-of-type(4)::after {
|
||||
content: 'canary';
|
||||
|
|
|
|||
|
|
@ -1,41 +1,37 @@
|
|||
@import "../vars";
|
||||
|
||||
#content {
|
||||
&.ready::after {
|
||||
display: none;
|
||||
}
|
||||
// #content {
|
||||
// &.ready::after {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
content: 'loading...';
|
||||
color: $gray-3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: 1px dashed #bbb;
|
||||
border-radius: $default-border-radius;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
@include display-flex;
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
z-index: 100;
|
||||
}
|
||||
// &::after {
|
||||
// font-size: 18px;
|
||||
// font-weight: normal;
|
||||
// content: 'loading...';
|
||||
// color: $gray-3;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// position: absolute;
|
||||
// background: white;
|
||||
// border: 1px dashed #bbb;
|
||||
// border-radius: $default-border-radius;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// box-sizing: border-box;
|
||||
// @include display-flex;
|
||||
// @include justify-content(center);
|
||||
// @include align-items(center);
|
||||
// z-index: 100;
|
||||
// }
|
||||
|
||||
&.error::after {
|
||||
content: 'Error loading features list.';
|
||||
color: darkred;
|
||||
}
|
||||
}
|
||||
// &.error::after {
|
||||
// content: 'Error loading features list.';
|
||||
// color: darkred;
|
||||
// }
|
||||
// }
|
||||
|
||||
chromedash-legend {
|
||||
// width: 900px;
|
||||
// @include calc(left, '50% - 900px/2');
|
||||
// top: 3%;
|
||||
// //opacity: 0; // Ensure no FOUC.
|
||||
font-size: 90%;
|
||||
|
||||
.description {
|
||||
|
|
@ -43,33 +39,18 @@ chromedash-legend {
|
|||
}
|
||||
}
|
||||
|
||||
#panels {
|
||||
nav {
|
||||
$nav-width: 150px;
|
||||
// #panels {
|
||||
// nav {
|
||||
// $nav-width: 150px;
|
||||
|
||||
font-size: 120%;
|
||||
font-weight: 300;
|
||||
//width: $nav-width; // slighty smaller than chromedash-metadata to remove scrollbar
|
||||
overflow-x: hidden;
|
||||
// font-size: 120%;
|
||||
// font-weight: 300;
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
// }
|
||||
|
||||
chromedash-metadata {
|
||||
//max-height: 65vh;
|
||||
overflow: auto;
|
||||
width: $nav-width + 15;
|
||||
|
||||
transform: translateZ(0); // force composite layer in stable
|
||||
|
||||
.help {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
chromedash-featurelist {
|
||||
@include flex(1 0 0);
|
||||
// overflow: auto;
|
||||
max-width: $max-content-width;
|
||||
}
|
||||
chromedash-featurelist {
|
||||
max-width: $max-content-width;
|
||||
}
|
||||
|
||||
#subheader {
|
||||
|
|
@ -79,21 +60,21 @@ chromedash-legend {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
body {
|
||||
&:not(.ready) #content {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
#content {
|
||||
height: 100%;
|
||||
}
|
||||
chromedash-featurelist {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
// @media only screen and (max-width: 700px) {
|
||||
// body {
|
||||
// &:not(.ready) #content {
|
||||
// margin: 10px;
|
||||
// }
|
||||
// }
|
||||
// #content {
|
||||
// height: 100%;
|
||||
// }
|
||||
// chromedash-featurelist {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// min-height: 100vh;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -10,17 +10,23 @@ body {
|
|||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: $light-grey;
|
||||
// background: url(../img/bg.png);
|
||||
}
|
||||
|
||||
app-header {
|
||||
background-color: $light-grey;
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
@include display-flex;//@include display-box;
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
text-shadow: 0 1px 0 white;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 15px 0 0 0;
|
||||
@include user-select;
|
||||
|
||||
a {
|
||||
|
|
@ -29,8 +35,6 @@ header {
|
|||
}
|
||||
|
||||
aside {
|
||||
//@include display-flex;
|
||||
//@include align-items(center);
|
||||
@include gradient-bar-bg;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
|
@ -38,19 +42,6 @@ header {
|
|||
border-right: 1px solid $bar-border-color;
|
||||
padding: 0.75em 1em;
|
||||
|
||||
// Small logo.
|
||||
// background: url(/static/img/chromium-128.png) no-repeat 14px 50%, #FAFAFA;
|
||||
// background-size: 45px;
|
||||
// padding-left: 65px;
|
||||
// Larger bg logo.
|
||||
// background: url(/static/img/chromium-128.png) no-repeat 10px 50%, #FAFAFA;
|
||||
// background-size: 25%;
|
||||
// padding-left: 125px;
|
||||
// Multi-background
|
||||
// background: url(/static/img/chrome_logo.svg) no-repeat 52px 50%,
|
||||
// url(/static/img/canary_128.png) no-repeat 30px 50%,
|
||||
// url(/static/img/chromium-128.png) no-repeat 18px 50%;
|
||||
// background-size: 20%, 22%, 20%;
|
||||
background: url(/static/img/chrome_logo.svg) no-repeat 18px 50%;
|
||||
background-size: 20%;
|
||||
background-color: #fafafa;
|
||||
|
|
@ -69,17 +60,18 @@ header {
|
|||
nav {
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
margin-left: 3em;
|
||||
margin-left: $content-padding;
|
||||
|
||||
a {
|
||||
@include gradient-bar-bg;
|
||||
cursor: pointer;
|
||||
margin-right: 1em;
|
||||
margin-right: $content-padding;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: $default-border-radius;
|
||||
border-bottom: 1px solid $bar-border-color;
|
||||
border-right: 1px solid $bar-border-color;
|
||||
white-space: nowrap;
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
|
|
@ -104,22 +96,22 @@ footer {
|
|||
@include flex-direction(column);
|
||||
@include justify-content(center);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: calc(100% - 256px); // 256px is width of drawer.
|
||||
|
||||
div {
|
||||
margin-top: 5px;
|
||||
margin-top: $content-padding / 2;
|
||||
}
|
||||
}
|
||||
|
||||
#subheader, .subheader {
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
margin: $content-padding 0 0 $content-padding + 12;
|
||||
// border-bottom: 1px solid $bar-border-color;
|
||||
max-width: $max-content-width + $content-padding * 7 + 25;
|
||||
margin: $content-padding 0;
|
||||
|
||||
div {
|
||||
margin-right: $content-padding * 2 - 15;
|
||||
margin-right: $content-padding * 2;
|
||||
|
||||
&.feature-count {
|
||||
min-width: 325px;
|
||||
|
|
@ -141,9 +133,6 @@ footer {
|
|||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
@include flex(1 0 0);
|
||||
text-align: right;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -156,11 +145,9 @@ footer {
|
|||
}
|
||||
|
||||
#content {
|
||||
@include display-flex;
|
||||
@include flex(1 0 0);
|
||||
margin: $content-padding + 12;
|
||||
margin: $content-padding;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#panels {
|
||||
|
|
@ -182,9 +169,6 @@ footer {
|
|||
#container {
|
||||
display: block;
|
||||
}
|
||||
#content {
|
||||
margin: 0;
|
||||
}
|
||||
header {
|
||||
margin: 0;
|
||||
display: block;
|
||||
|
|
@ -235,31 +219,6 @@ footer {
|
|||
}
|
||||
|
||||
footer {
|
||||
padding: 0.35em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// // For browsers that don't support :unresolved, need a way to turn this off.
|
||||
// // Code applies .resolved when "WebComponentsReady".
|
||||
// :unresolved:not(.resolved) {
|
||||
// border: 1px dashed #ccc;
|
||||
// display: block;
|
||||
// background: rgba(255,255,255,0.5);
|
||||
// border-radius: $default-border-radius;
|
||||
// @include display-flex;
|
||||
// @include justify-content(center);
|
||||
|
||||
// &:after {
|
||||
// font-size: 12px;
|
||||
// font-weight: normal;
|
||||
// content: 'loading...';
|
||||
// color: #ccc;
|
||||
// @include display-flex;
|
||||
// @include justify-content(center);
|
||||
// @include align-items(center);
|
||||
// padding: 15px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import "features/features.scss"; // Inline features.css to remove 1 request on homepage.
|
||||
// @import "metrics/metrics.scss";
|
||||
|
|
|
|||
|
|
@ -68,20 +68,56 @@ var $$ = function(selector) {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style is="custom-style">
|
||||
app-header {
|
||||
--app-header-shadow: {
|
||||
box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);
|
||||
};
|
||||
}
|
||||
app-toolbar {
|
||||
--app-toolbar-font-size: inherit;
|
||||
}
|
||||
app-drawer {
|
||||
--app-drawer-width: 200px;
|
||||
--app-drawer-content-container: {
|
||||
background: #eee;
|
||||
margin: 16px;
|
||||
};
|
||||
}
|
||||
</style>
|
||||
|
||||
{% block html_imports %}{% endblock %}
|
||||
|
||||
{% block rss %}{% endblock%}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
{% include "header.html" %}
|
||||
{% block subheader %}{% endblock %}
|
||||
<div id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% include "footer.html" %}
|
||||
</div>
|
||||
<app-drawer-layout fullbleed>
|
||||
<app-drawer swipe-open>
|
||||
<div style="height: 100%; overflow: auto;">
|
||||
{% block drawer %}{% endblock %}
|
||||
</div>
|
||||
</app-drawer>
|
||||
<app-header-layout fullbleed>
|
||||
<app-header fixed effects="waterfall">
|
||||
<app-toolbar>
|
||||
<iron-icon icon="icons:menu" drawer-toggle></iron-icon>
|
||||
<div>
|
||||
{% include "header.html" %}
|
||||
{% block subheader %}{% endblock %}
|
||||
</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% include "footer.html" %}
|
||||
|
||||
</app-header-layout>
|
||||
</app-drawer-layout>
|
||||
|
||||
|
||||
{% block js %}{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
{% block subheader %}
|
||||
<div id="subheader">
|
||||
<div class="feature-count">
|
||||
<h2>Web Platform Features (<span id="num-features"></span>)</h2>
|
||||
<h2>Web platform features: <span id="num-features"></span></h2>
|
||||
</div>
|
||||
<div class="search">
|
||||
<input type="search" placeholder="Filter" disabled>
|
||||
|
|
@ -43,6 +43,22 @@
|
|||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block drawer %}
|
||||
<chromedash-metadata
|
||||
impl-statuses='{{IMPLEMENTATION_STATUSES|safe}}'
|
||||
status='{
|
||||
"NO_ACTIVE_DEV": 1,
|
||||
"PROPOSED": 2,
|
||||
"IN_DEVELOPMENT": 3,
|
||||
"BEHIND_A_FLAG": 4,
|
||||
"ENABLED_BY_DEFAULT": 5,
|
||||
"DEPRECATED": 6,
|
||||
"REMOVED": 7,
|
||||
"IN_EXPERIMENTAL_FRAMEWORK": 8,
|
||||
"NO_LONGER_PURSUING": 1000
|
||||
}'></chromedash-metadata>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<chromedash-legend>
|
||||
<p class="description">What you're looking at is a mostly comprehensive list of
|
||||
|
|
@ -55,24 +71,7 @@
|
|||
</div>
|
||||
</chromedash-legend>
|
||||
|
||||
<section id="panels">
|
||||
<nav>
|
||||
<chromedash-metadata
|
||||
impl-statuses='{{IMPLEMENTATION_STATUSES|safe}}'
|
||||
status='{
|
||||
"NO_ACTIVE_DEV": 1,
|
||||
"PROPOSED": 2,
|
||||
"IN_DEVELOPMENT": 3,
|
||||
"BEHIND_A_FLAG": 4,
|
||||
"ENABLED_BY_DEFAULT": 5,
|
||||
"DEPRECATED": 6,
|
||||
"REMOVED": 7,
|
||||
"ORIGIN_TRIAL": 8,
|
||||
"NO_LONGER_PURSUING": 1000
|
||||
}'></chromedash-metadata>
|
||||
</nav>
|
||||
<chromedash-featurelist {% if user.is_whitelisted %}whitelisted{% endif %}></chromedash-featurelist>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
{% load verbatim %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<footer>
|
||||
<p>Except as otherwise noted, the content of this page is licensed under a <a href="https://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 license</a>, and examples are licensed under the <a href="https://src.chromium.org/viewvc/chrome/trunk/src/LICENSE">BSD License</a>.</p>
|
||||
<div><a href="https://groups.google.com/a/chromium.org/forum/#!newtopic/blink-dev">Report content issues</a> | <a href="https://docs.google.com/a/chromium.org/forms/d/1djZD0COt4NgRwDYesNLkYAb_O8YL39eEvF78vk06R9c/viewform">Request "edit" access</a> | <a href="https://github.com/GoogleChrome/chromium-dashboard/issues">Report site bugs</a> | <a href="https://github.com/GoogleChrome/chromium-dashboard">View on Github</a> | <a href="https://docs.google.com/document/d/1jrSlM4Yhae7XCJ8BuasWx71CvDEMMbSKbXwx7hoh1Co/edit?pli=1" target="_blank">About this page</a> |
|
||||
<p>Except as otherwise noted, the content of this page under <a href="https://creativecommons.org/licenses/by/2.5/">CC Attribution 2.5 license</a>. Code examples are <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/LICENSE">Apache2 License</a>.</p>
|
||||
<div><a href="https://groups.google.com/a/chromium.org/forum/#!newtopic/blink-dev">Report a content issue</a> | <a href="https://docs.google.com/a/chromium.org/forms/d/1djZD0COt4NgRwDYesNLkYAb_O8YL39eEvF78vk06R9c/viewform">Request "edit" access</a> | <a href="https://github.com/GoogleChrome/chromium-dashboard/issues">Report site bugs</a> | <a href="https://github.com/GoogleChrome/chromium-dashboard">View on Github</a> | <a href="https://docs.google.com/document/d/1jrSlM4Yhae7XCJ8BuasWx71CvDEMMbSKbXwx7hoh1Co/edit?pli=1" target="_blank">About this page</a> |
|
||||
{% if user %}
|
||||
<b>{{user.email}}</b>
|
||||
{% endif %} <a href="{{login.1}}">{{login.0}}</a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<header>
|
||||
<a href="/">
|
||||
<aside>
|
||||
<!-- <img src="/static/img/chromium-128.png" alt="Chromium Logo"> -->
|
||||
<hgroup>
|
||||
<h1>{{APP_TITLE}}</h1>
|
||||
<span>feature support & usage metrics</span>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче