Skip to content
This repository was archived by the owner on May 25, 2020. It is now read-only.

Commit 0d55c74

Browse files
author
Alexander Moerman
committed
Slightly improve styling
1 parent 4be864b commit 0d55c74

File tree

2 files changed

+107
-115
lines changed

2 files changed

+107
-115
lines changed

‎src/TeamCityTheatre.Web/views/home/dashboard.components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const tryRequestFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
5050
* Details of a single view
5151
*/
5252
const View = (props: { view: IView, data: IViewData }) => (
53-
<div id={props.view.id}>
53+
<div className="view" id={props.view.id}>
5454
<button role="button" className="btn btn-primary btn-xs" onClick={tryRequestFullScreen}>
5555
<i className="fa fa-expand"/> Full screen
5656
</button>

‎src/TeamCityTheatre.Web/views/home/dashboard.pcss‎

Lines changed: 106 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -3,142 +3,134 @@
33
padding: 25px;
44
margin: 25px;
55
font-size: 12px;
6-
}
76

8-
@media (min-width: 480px) {
9-
#views .view {
10-
font-size: 24px;
7+
.badge {
8+
font-size: 1em;
119
}
12-
}
1310

14-
@media (min-width: 768px) {
15-
#views .view {
16-
font-size: 56px;
17-
}
11+
@media (min-width: 480px) {
12+
font-size: 24px;
13+
} @media (min-width: 768px) {
14+
font-size: 56px;
1815
}
19-
20-
#views .view .badge {
21-
font-size: 1em;
2216
}
2317

24-
#view {
25-
text-align: center;
26-
}
18+
.view {
19+
#tiles {
20+
width: 100%;
2721

28-
#tiles {
29-
width: 100%;
30-
}
22+
.tiles-wrapper {
23+
margin: 0.25rem;
24+
}
3125

32-
#tiles .tiles-wrapper {
33-
margin: 0.25rem;
34-
}
26+
.tile {
27+
color: #fff;
28+
padding: 10px;
29+
display: inline-block;
3530

36-
.tile {
37-
color: #fff;
38-
padding: 10px;
39-
display: inline-block;
31+
&.height-1 {
32+
height: 185px;
33+
}
34+
&.height-2 {
35+
height: 270px;
36+
}
37+
&.height-3 {
38+
height: 355px;
39+
}
40+
&.height-4 {
41+
height: 440px;
42+
}
43+
&.height-5 {
44+
height: 525px;
45+
}
46+
&.height-6 {
47+
height: 610px;
48+
}
49+
&.height-7 {
50+
height: 695px;
51+
}
52+
&.height-8 {
53+
height: 780px;
54+
}
55+
&.height-9 {
56+
height: 865px;
57+
}
58+
&.height-10 {
59+
height: 950px;
60+
}
4061

41-
&.height-1 {
42-
height: 185px;
43-
}
44-
&.height-2 {
45-
height: 270px;
46-
}
47-
&.height-3 {
48-
height: 355px;
49-
}
50-
&.height-4 {
51-
height: 440px;
52-
}
53-
&.height-5 {
54-
height: 525px;
55-
}
56-
&.height-6 {
57-
height: 610px;
58-
}
59-
&.height-7 {
60-
height: 695px;
61-
}
62-
&.height-8 {
63-
height: 780px;
64-
}
65-
&.height-9 {
66-
height: 865px;
67-
}
68-
&.height-10 {
69-
height: 950px;
70-
}
62+
.tile-title {
63+
display: block;
64+
font-size: 35px;
65+
text-align: center;
66+
white-space: nowrap;
67+
-ms-text-overflow: ellipsis;
68+
-o-text-overflow: ellipsis;
69+
text-overflow: ellipsis;
70+
overflow: hidden;
7171

72-
.tile-title {
73-
display: block;
74-
font-size: 35px;
75-
text-align: center;
76-
white-space: nowrap;
77-
-ms-text-overflow: ellipsis;
78-
-o-text-overflow: ellipsis;
79-
text-overflow: ellipsis;
80-
overflow: hidden;
81-
82-
.tile-status-icon {
83-
display: none;
84-
}
85-
}
72+
.tile-status-icon {
73+
display: none;
74+
}
75+
}
8676

87-
&.success {
88-
background: #499649;
89-
}
90-
&.error, &.failure {
91-
background: #b2423f;
92-
}
77+
&.success {
78+
background: #499649;
79+
}
80+
&.error, &.failure {
81+
background: #b2423f;
82+
}
9383

94-
.tile-builds .tile-build {
95-
box-shadow: 3px 3px 10px 3px rgba(71, 71, 71, 0.5);
96-
border-radius: 15px;
84+
.tile-builds .tile-build {
85+
box-shadow: 3px 3px 10px 3px rgba(71, 71, 71, 0.5);
86+
border-radius: 15px;
9787

98-
.progress {
99-
height: 70px;
100-
background-color: #888;
88+
.progress {
89+
height: 70px;
90+
background-color: #888;
10191

102-
.progress-bar {
103-
text-align: left;
104-
padding-left: 5px;
105-
padding-top: 3px;
92+
.progress-bar {
93+
text-align: left;
94+
padding-left: 5px;
95+
padding-top: 3px;
10696

107-
&.progress-bar-success {
108-
background-color: #5cb85c;
109-
color: #eee;
97+
&.progress-bar-success {
98+
background-color: #5cb85c;
99+
color: #eee;
110100

111-
&:hover {
112-
background-color: #76d776;
113-
}
114-
}
101+
&:hover {
102+
background-color: #76d776;
103+
}
104+
}
115105

116-
&.progress-bar-danger {
117-
background-color: #d9534f;
118-
color: #eee;
106+
&.progress-bar-danger {
107+
background-color: #d9534f;
108+
color: #eee;
119109

120-
&:hover {
121-
background-color: #fa5652;
110+
&:hover {
111+
background-color: #fa5652;
112+
}
113+
}
122114
}
123-
}
124-
}
125115

126-
.branch {
127-
font-size: 40px;
128-
line-height: 45px;
129-
display: block;
130-
white-space: nowrap;
131-
overflow: visible;
132-
}
116+
.branch {
117+
font-size: 40px;
118+
line-height: 45px;
119+
display: block;
120+
white-space: nowrap;
121+
overflow: visible;
122+
}
133123

134-
.remaining,
135-
.execution-timestamp {
136-
display: block;
137-
font-size: 15px;
138-
white-space: nowrap;
139-
overflow: visible;
140-
}
124+
.remaining,
125+
.execution-timestamp {
126+
display: block;
127+
font-size: 15px;
128+
white-space: nowrap;
129+
overflow: visible;
130+
}
141131

132+
}
133+
}
142134
}
143135
}
144-
}
136+
}

0 commit comments

Comments
 (0)