зеркало из https://github.com/docker/kitematic.git
New container page style change.
This commit is contained in:
Sean Li
Родитель
600c258d65
Коммит
da8bc924ab
|
|
@ -213,11 +213,13 @@ module.exports = React.createClass({
|
|||
|
||||
return (
|
||||
<div className="details">
|
||||
<div className="header-section">
|
||||
<div className="text">
|
||||
Create Container
|
||||
</div>
|
||||
</div>
|
||||
<div className="new-container">
|
||||
<div className="new-container-header">
|
||||
<div className="text">
|
||||
Select a Docker image to create a container.
|
||||
</div>
|
||||
<div className="search">
|
||||
<div className="search-bar">
|
||||
<input type="search" ref="searchInput" className="form-control" placeholder="Search Docker Hub for an image" onChange={this.handleChange}/>
|
||||
|
|
@ -225,14 +227,14 @@ module.exports = React.createClass({
|
|||
<div className={loadingClasses}><div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="results">
|
||||
<div className="results-filters">
|
||||
<span className="results-filter results-filter-title">FILTER BY</span>
|
||||
<span className={`results-filter results-all tab ${filter === 'all' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'all')}>All</span>
|
||||
<span className={`results-filter results-recommended tab ${filter === 'recommended' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'recommended')}>Recommended</span>
|
||||
<span className={`results-filter results-userrepos tab ${filter === 'userrepos' ? 'active' : ''}`} onClick={this.handleFilter.bind(this, 'userrepos')}>My Repositories</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="results">
|
||||
{results}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.left-header {
|
||||
display: flex;
|
||||
min-width: 260px;
|
||||
min-width: @sidebar-width + 1px;
|
||||
}
|
||||
|
||||
.updates {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
border-right: 1px solid @color-divider;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 260px;
|
||||
min-width: @sidebar-width;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.sidebar-header {
|
||||
flex: 0 auto;
|
||||
min-width: 240px;
|
||||
min-width: @sidebar-width;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
|
@ -37,6 +37,9 @@
|
|||
display: block;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&.active {
|
||||
.btn-new {
|
||||
opacity: 0.3;
|
||||
|
|
@ -65,7 +68,7 @@
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
max-width: 260px;
|
||||
max-width: @sidebar-width;
|
||||
ul {
|
||||
flex: 1 auto;
|
||||
margin: 0;
|
||||
|
|
@ -89,7 +92,7 @@
|
|||
}
|
||||
&:first-child {
|
||||
li {
|
||||
border-top: 1px solid @color-divider;
|
||||
//border-top: 1px solid @color-divider;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
|
|
@ -100,7 +103,7 @@
|
|||
li {
|
||||
height: 45px;
|
||||
border-bottom: none;
|
||||
.brand-gradient();
|
||||
background-color: @brand-primary;
|
||||
.name {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -144,12 +147,12 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 45px;
|
||||
border-bottom: 1px solid @color-divider;
|
||||
//border-bottom: 1px solid @color-divider;
|
||||
.info {
|
||||
margin-left: 1rem;
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 140px;
|
||||
max-width: @sidebar-text-overflow-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
|
@ -161,7 +164,7 @@
|
|||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 140px;
|
||||
max-width: @sidebar-text-overflow-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -247,8 +250,8 @@
|
|||
/* Sidebar Buttons */
|
||||
|
||||
.sidebar-buttons {
|
||||
border-top: 1px solid #F0F4F8;
|
||||
min-height: 48px;
|
||||
border-top: 1px solid @color-divider;
|
||||
min-height: 40px;
|
||||
flex: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -280,13 +283,13 @@
|
|||
|
||||
.btn-terminal {
|
||||
flex: 1 auto;
|
||||
border-right: 1px solid #F0F4F8;
|
||||
border-right: 1px solid @color-divider;
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.btn-feedback {
|
||||
border-right: 1px solid #F0F4F8;
|
||||
border-right: 1px solid @color-divider;
|
||||
}
|
||||
.btn {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
display: flex;
|
||||
flex: 1 auto;
|
||||
flex-direction: column;
|
||||
padding: 25px 0 0;
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
|
|
@ -43,35 +42,6 @@
|
|||
flex: 1 auto;
|
||||
color: @gray-normal;
|
||||
|
||||
.results-filters {
|
||||
flex: 0 auto;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
font-size: 13px;
|
||||
margin: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.results-filter {
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
min-width: 40px;
|
||||
&.tab {
|
||||
&:hover {
|
||||
border-radius: 40px;
|
||||
background-color: @gray-lightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results-filter-title {
|
||||
color: @gray-lighter;
|
||||
font-weight: 500;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
flex: 1 auto;
|
||||
display: flex;
|
||||
|
|
@ -115,45 +85,47 @@
|
|||
}
|
||||
}
|
||||
.new-container-header {
|
||||
margin: 0 20px 8px;
|
||||
background-color: white;
|
||||
height: 42px;
|
||||
border-bottom: 1px solid @color-divider;
|
||||
display: flex;
|
||||
flex: 0 auto;
|
||||
flex-shrink: 0;
|
||||
.text {
|
||||
flex: 1 auto;
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
color: @gray-normal;
|
||||
}
|
||||
.search {
|
||||
flex: 1 auto;
|
||||
.search-bar {
|
||||
top: -7px;
|
||||
position: relative;
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 10px;
|
||||
top: 11px;
|
||||
left: 13px;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 18px;
|
||||
color: @gray-lighter;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
top: 11px;
|
||||
left: 13px;
|
||||
}
|
||||
input {
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
padding: 4px 8px 4px 35px;
|
||||
transition: all 140ms;
|
||||
width: 75%;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
font-size: 13px;
|
||||
height: 43px;
|
||||
padding: 4px 8px 4px 40px;
|
||||
color: @gray-darkest;
|
||||
margin-bottom: 3px;
|
||||
border-color: @gray-lighter;
|
||||
box-shadow: none;
|
||||
border: 1px solid @color-divider;
|
||||
&:hover {
|
||||
border: 1px solid @gray-lighter;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: @brand-primary;
|
||||
border: 1px solid @brand-primary;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: @gray-lighter;
|
||||
|
|
@ -162,6 +134,22 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.results-filters {
|
||||
font-size: 13px;
|
||||
margin: 1.2rem 1.2rem 0 0;
|
||||
|
||||
.results-filter {
|
||||
text-align: center;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.results-filter-title {
|
||||
color: @gray-lighter;
|
||||
font-weight: 400;
|
||||
padding-top: 0.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,16 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header-section {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: @gray-darker;
|
||||
font-weight: 500;
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
}
|
||||
.details-subheader {
|
||||
flex: 0 auto;
|
||||
display: flex;
|
||||
|
|
@ -113,25 +123,24 @@
|
|||
}
|
||||
|
||||
.tab {
|
||||
margin-left: 16px;
|
||||
padding: 6px 10px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
margin: 0 0.6rem;
|
||||
transition: all 0.3s;
|
||||
color: @gray-normal;
|
||||
border-bottom: 3px solid transparent;
|
||||
&.active {
|
||||
border-radius: 40px;
|
||||
color: white;
|
||||
.brand-gradient();
|
||||
color: @gray-darkest;
|
||||
border-bottom: 3px solid @brand-primary;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
border-radius: 40px;
|
||||
background-color: transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-radius: 40px;
|
||||
background-color: @gray-lightest;
|
||||
color: @gray-darkest;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,3 +26,6 @@
|
|||
@font-code: Menlo;
|
||||
|
||||
@border-radius: 0.2rem;
|
||||
|
||||
@sidebar-width: 220px;
|
||||
@sidebar-text-overflow-width: 140px;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче