cbecb73ac1
On screens < 90em (approximately 1600px with default font size) wide,
the `Owner`, `Branch`, `Assignee`, and `Project` sections should
overflow with ellipses.
`Project` is handled as a special case -- because most long project
names usually resemble a directory structure, they are truncated to just
the last two parts of the path, with ellipsees appearing before the
leading slash.
Bug: Issue 4552
Change-Id: Icf882cbcecb741fb9e46141a1fa88f5987a3e674
(cherry picked from commit e420236caa)
126 lines
2.8 KiB
HTML
126 lines
2.8 KiB
HTML
<!--
|
|
Copyright (C) 2015 The Android Open Source Project
|
|
|
|
Licensed 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.
|
|
-->
|
|
<dom-module id="gr-change-list-styles">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
font-size: 13px;
|
|
}
|
|
.topHeader,
|
|
.groupHeader {
|
|
border-bottom: 1px solid #eee;
|
|
font-family: var(--font-family-bold);
|
|
padding: .3em .5em;
|
|
}
|
|
.topHeader {
|
|
background-color: #ddd;
|
|
}
|
|
.noChanges {
|
|
border-bottom: 1px solid #eee;
|
|
padding: .3em .5em;
|
|
}
|
|
.keyboard,
|
|
.star {
|
|
padding: 0;
|
|
}
|
|
gr-change-star {
|
|
vertical-align: middle;
|
|
}
|
|
.keyboard,
|
|
.branch,
|
|
.star,
|
|
.label,
|
|
.number,
|
|
.owner,
|
|
.assignee,
|
|
.updated,
|
|
.size,
|
|
.status,
|
|
.project {
|
|
white-space: nowrap;
|
|
}
|
|
.updated {
|
|
text-align: right;
|
|
}
|
|
.size,
|
|
.updated {
|
|
text-align: right;
|
|
}
|
|
.label {
|
|
text-align: center;
|
|
}
|
|
.truncatedProject {
|
|
display: none;
|
|
}
|
|
@media only screen and (max-width: 90em) {
|
|
.assignee,
|
|
.branch,
|
|
.owner {
|
|
overflow: hidden;
|
|
max-width: 10rem;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.truncatedProject {
|
|
display: inline-block;
|
|
}
|
|
.fullProject {
|
|
display: none;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 50em) {
|
|
:host {
|
|
font-size: 14px;
|
|
}
|
|
gr-change-list-item {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: .25em .5em;
|
|
}
|
|
gr-change-list-item[selected] {
|
|
background-color: transparent;
|
|
}
|
|
.topHeader,
|
|
.keyboard,
|
|
.status,
|
|
.project,
|
|
.branch,
|
|
.updated,
|
|
.label,
|
|
.assignee {
|
|
display: none;
|
|
}
|
|
.star {
|
|
padding-left: .35em;
|
|
padding-top: .25em;
|
|
}
|
|
.subject {
|
|
margin-bottom: .25em;
|
|
width: calc(100% - 2em);
|
|
}
|
|
.owner,
|
|
.size {
|
|
width: auto;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1450px) {
|
|
.project {
|
|
width: 20em;
|
|
}
|
|
}
|
|
</style>
|
|
</template>
|
|
</dom-module>
|