Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(412)

Side by Side Diff: chrome/browser/resources/md_history/app.vulcanized.html

Issue 2412003002: MD History: Fix overlapping of sidebar footer in very short windows (Closed)
Patch Set: Layout tweaks Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <html><head><!-- 1 <html><head><!--
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
(...skipping 3647 matching lines...) Expand 10 before | Expand all | Expand 10 after
3658 3658
3659 button.more-vert-button div { 3659 button.more-vert-button div {
3660 border: 2px solid var(--secondary-text-color); 3660 border: 2px solid var(--secondary-text-color);
3661 border-radius: 2px; 3661 border-radius: 2px;
3662 margin: 1px 10px; 3662 margin: 1px 10px;
3663 pointer-events: none; 3663 pointer-events: none;
3664 transform: scale(0.8); 3664 transform: scale(0.8);
3665 } 3665 }
3666 3666
3667 :host { 3667 :host {
3668 display: block; 3668 display: flex;
3669 flex-direction: column;
3669 height: 100%; 3670 height: 100%;
3670 padding-top: 5px; 3671 overflow-x: hidden;
3672 overflow-y: auto;
3671 width: var(--side-bar-width); 3673 width: var(--side-bar-width);
3672 } 3674 }
3673 3675
3676 :host([drawer]) {
3677 height: calc(100% - var(--toolbar-height));
3678 }
3679
3674 div.separator { 3680 div.separator {
3675 background-color: rgba(0, 0, 0, 0.08); 3681 background-color: rgba(0, 0, 0, 0.08);
3682 flex-shrink: 0;
3676 height: 1px; 3683 height: 1px;
3677 margin: 8px 0; 3684 margin: 8px 0;
3678 } 3685 }
3679 3686
3680 #clear-browsing-data { 3687 #clear-browsing-data {
3681 justify-content: space-between; 3688 justify-content: space-between;
3682 } 3689 }
3683 3690
3684 #clear-browsing-data iron-icon { 3691 #clear-browsing-data iron-icon {
3685 -webkit-margin-end: 24px; 3692 -webkit-margin-end: 24px;
3686 color: var(--paper-grey-400); 3693 color: var(--paper-grey-400);
3687 height: 20px; 3694 height: 20px;
3688 margin-bottom: 10px; 3695 margin-bottom: 10px;
3689 margin-top: 10px; 3696 margin-top: 10px;
3690 width: 20px; 3697 width: 20px;
3691 } 3698 }
3692 3699
3693 iron-selector { 3700 iron-selector {
3694 -webkit-user-select: none; 3701 -webkit-user-select: none;
3695 background-color: transparent; 3702 background-color: transparent;
3696 color: #5a5a5a; 3703 color: #5a5a5a;
3704 display: flex;
3705 flex: 1;
3706 flex-direction: column;
3707 padding-top: 5px;
3697 } 3708 }
3698 3709
3699 iron-selector > a { 3710 iron-selector > a {
3700 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height); 3711 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height);
3701 -webkit-padding-start: 24px; 3712 -webkit-padding-start: 24px;
3702 align-items: center; 3713 align-items: center;
3703 box-sizing: border-box; 3714 box-sizing: border-box;
3704 color: inherit; 3715 color: inherit;
3705 cursor: pointer; 3716 cursor: pointer;
3706 display: flex; 3717 display: flex;
3707 font-size: 14px; 3718 font-size: 14px;
3708 font-weight: 500; 3719 font-weight: 500;
3709 min-height: 48px; 3720 min-height: 48px;
3710 position: relative; 3721 position: relative;
3711 text-decoration: none; 3722 text-decoration: none;
3712 } 3723 }
3713 3724
3714 iron-selector > a.iron-selected { 3725 iron-selector > a.iron-selected {
3715 color: var(--google-blue-500); 3726 color: var(--google-blue-500);
3716 font-weight: 500; 3727 }
3728
3729 #spacer {
3730 flex: 1;
3717 } 3731 }
3718 3732
3719 #footer { 3733 #footer {
3720 bottom: 0; 3734 color: var(--paper-grey-600);
3721 color: var(--paper-grey-600);
3722 position: absolute;
3723 width: var(--side-bar-width); 3735 width: var(--side-bar-width);
3724 } 3736 }
3725 3737
3726 :host([drawer]) #footer {
3727 bottom: 120px;
3728 }
3729
3730 #footer-text { 3738 #footer-text {
3731 -webkit-padding-end: 16px; 3739 -webkit-padding-end: 16px;
3732 -webkit-padding-start: 24px; 3740 -webkit-padding-start: 24px;
3733 line-height: 20px; 3741 line-height: 20px;
3734 margin: 24px 0; 3742 margin: 24px 0;
3735 } 3743 }
3736 3744
3737 #footer a { 3745 #footer a {
3738 color: var(--google-blue-700); 3746 color: var(--google-blue-700);
3739 text-decoration: none; 3747 text-decoration: none;
3740 } 3748 }
3741 3749
3742 </style> 3750 </style>
3743 3751
3744 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_"> 3752 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_">
3745 <a href="/" class="page-item" path="history" on-click="onItemClick_"> 3753 <a href="/" class="page-item" path="history" on-click="onItemClick_">
3746 $i18n{historyMenuItem} 3754 $i18n{historyMenuItem}
3747 <paper-ripple></paper-ripple> 3755 <paper-ripple></paper-ripple>
3748 </a> 3756 </a>
3749 <a href="/syncedTabs" class="page-item" path="syncedTabs" on-click="onItem Click_"> 3757 <a href="/syncedTabs" class="page-item" path="syncedTabs" on-click="onItem Click_">
3750 $i18n{openTabsMenuItem} 3758 $i18n{openTabsMenuItem}
3751 <paper-ripple></paper-ripple> 3759 <paper-ripple></paper-ripple>
3752 </a> 3760 </a>
3753 <div class="separator"></div> 3761 <div class="separator"></div>
3754 <a href="chrome://settings/clearBrowserData" on-tap="onClearBrowsingDataTa p_" id="clear-browsing-data"> 3762 <a href="chrome://settings/clearBrowserData" on-tap="onClearBrowsingDataTa p_" id="clear-browsing-data">
3755 $i18n{clearBrowsingData} 3763 $i18n{clearBrowsingData}
3756 <iron-icon icon="cr:open-in-new"></iron-icon> 3764 <iron-icon icon="cr:open-in-new"></iron-icon>
3757 <paper-ripple id="cbd-ripple"></paper-ripple> 3765 <paper-ripple id="cbd-ripple"></paper-ripple>
3758 </a> 3766 </a>
3767 <div id="spacer"></div>
3759 <div id="footer" hidden="[[!showFooter]]"> 3768 <div id="footer" hidden="[[!showFooter]]">
3760 <div class="separator"></div> 3769 <div class="separator"></div>
3761 <div id="footer-text">$i18nRaw{sidebarFooter}</div> 3770 <div id="footer-text">$i18nRaw{sidebarFooter}</div>
3762 </div> 3771 </div>
3763 </iron-selector> 3772 </iron-selector>
3764 </template> 3773 </template>
3765 </dom-module> 3774 </dom-module>
3766 </div><dom-module id="history-app" css-build="shadow"> 3775 </div><dom-module id="history-app" css-build="shadow">
3767 <template> 3776 <template>
3768 <style scope="history-app">[hidden] { 3777 <style scope="history-app">[hidden] {
(...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after
3878 height: 100%; 3887 height: 100%;
3879 } 3888 }
3880 3889
3881 #drawer:unresolved { 3890 #drawer:unresolved {
3882 display: none; 3891 display: none;
3883 } 3892 }
3884 3893
3885 #drawer-header { 3894 #drawer-header {
3886 align-items: center; 3895 align-items: center;
3887 border-bottom: 1px solid rgba(0, 0, 0, 0.08); 3896 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
3897 box-sizing: border-box;
3888 display: flex; 3898 display: flex;
3889 height: var(--toolbar-height); 3899 height: var(--toolbar-height);
3890 margin-bottom: 5px;
3891 } 3900 }
3892 3901
3893 h1 { 3902 h1 {
3894 -webkit-padding-start: 24px; 3903 -webkit-padding-start: 24px;
3895 color: rgb(66, 66, 66); 3904 color: rgb(66, 66, 66);
3896 font-size: 123%; 3905 font-size: 123%;
3897 font-weight: 400; 3906 font-weight: 400;
3898 } 3907 }
3899 3908
3900 #drop-shadow { 3909 #drop-shadow {
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
3943 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer=""> 3952 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer="">
3944 </history-side-bar> 3953 </history-side-bar>
3945 </app-drawer> 3954 </app-drawer>
3946 </template> 3955 </template>
3947 3956
3948 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 3957 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
3949 </iron-media-query> 3958 </iron-media-query>
3950 </template> 3959 </template>
3951 </dom-module> 3960 </dom-module>
3952 <script src="app.crisper.js"></script></body></html> 3961 <script src="app.crisper.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698