Skip to content

Commit 98d80dc

Browse files
katjadkatjad
committed
Merge branch 'trianah-cssGrid'
2 parents 2968aad + e4f1454 commit 98d80dc

4 files changed

Lines changed: 144 additions & 117 deletions

File tree

‎public/assets/img/Time-48.png‎

740 Bytes
Loading

‎public/assets/sass/partials/resource.scss‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
.resource {
2+
min-height: 320px;
3+
border: 1px solid #dedede;
4+
background-color: #F1F3F4;
5+
border-radius: 5px;
6+
max-width: 340px;
7+
padding: 0.75em;
8+
font-family: Inconsolata, PTMono, monospace;
9+
font-size: 80%;
10+
11+
h3{
12+
font-size: 120%;
13+
line-height: 1.3;
14+
}
15+
}
16+
17+
.resource--header {
18+
background-color: #E3B300;
19+
border-radius: 3px;
20+
color: white;
21+
padding: 0.75em 0.5em;
22+
font-family: sans-serif;
23+
}
24+
25+
.resource--header h3 {
26+
margin: 0;
27+
}
28+
29+
.resource--info-lines {
30+
list-style: none outside;
31+
padding: 0;
32+
margin: 0;
33+
}
34+
35+
36+
.resource--info-lines li {
37+
margin-top: 14px;
38+
line-height: 1.5;
39+
margin-right: 0.5em;
40+
margin-left: 0.5em;
41+
}
42+
43+
.resource--info-lines li:last-child{
44+
margin-top: 3em;
45+
}
46+
47+
.resource--info-lines li.top {
48+
margin-bottom: 2.5em;
49+
font-size: 0.9em;
50+
51+
}
52+
53+
.difficulty {
54+
width: 1em;
55+
height: 1em;
56+
border-radius: 2px;
57+
//margin-bottom: 0.75em;
58+
}
59+
60+
.difficulty-1 {
61+
background: #7cfc00;
62+
}
63+
.difficulty-2 {
64+
background: #ffff00
65+
}
66+
.difficulty-3 {
67+
background: #ffa500;
68+
}
69+
.difficulty-4 {
70+
background: #ff8c00
71+
}
72+
.difficulty-5 {
73+
background: #ff6200;
74+
}
75+
.difficulty-6 {
76+
background: #89f;
77+
}
78+
79+
.duration {
80+
line-height: 1;
81+
}
82+
83+
84+
.label {
85+
color: #635147;
86+
background: #edff7a;
87+
padding-right: 5px;
88+
padding-left: 5px;
89+
border-radius: 2px;
90+
margin-right: 5px;
91+
}
92+
93+
.duration {
94+
background: url(/assets/img/Time-48.png) no-repeat left;
95+
}
96+
97+
.resource--Podcast {
98+
background: url(/assets/img/Microphone-52.png) no-repeat left;
99+
}
100+
101+
.resource--Video {
102+
background: url(/assets/img/Camcorder-48.png) no-repeat left;
103+
}
104+
105+
.resource--Book {
106+
background: url(/assets/img/Book-48.png) no-repeat left;
107+
}
108+
109+
.resource--Online.interactive {
110+
background: url(/assets/img/Interactive-50.png) no-repeat left;
111+
}
112+
113+
.resource--Online.written {
114+
background: url(/assets/img/ELearning-48.png) no-repeat left;
115+
}
116+
117+
.resource--type, .duration {
118+
padding-left: 1.4em;
119+
line-height: 1.1;
120+
background-size: 1em !important;
121+
background-position: center left;
122+
}
123+
124+
125+
.flex-container.info{
126+
display: flex;
127+
align-items: center;
128+
margin-bottom: 0.25em;
129+
//flex-wrap: wrap;
130+
> *:not(:last-child){
131+
margin-right: 2em;
132+
}
133+
}

‎public/assets/sass/style.scss‎

Lines changed: 8 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -157,23 +157,6 @@ h1.title {
157157
bottom: 5px;
158158
}
159159

160-
.resource {
161-
min-height: 320px;
162-
border: 1px solid #dedede;
163-
border-radius: 5px;
164-
max-width: 320px;
165-
padding: 0 0 10px 0;
166-
margin-bottom: 20px;
167-
}
168-
169-
.resource--header {
170-
background: #ffdb58;
171-
color: #605b56;
172-
margin-top: 0;
173-
border: 1px solid #ffdb58;
174-
175-
176-
}
177160

178161
.dummy {
179162
color: #605b56;
@@ -183,73 +166,6 @@ h1.title {
183166
color: #f2fbe0;
184167
}
185168

186-
.resource--header h3 {
187-
padding: 5px 0 8px 0;
188-
margin: 0;
189-
}
190-
191-
.resource--info-lines {
192-
list-style: none outside;
193-
padding: 0;
194-
margin: 0;
195-
}
196-
197-
198-
.resource--info-lines li {
199-
margin-top: 14px;
200-
margin-right: 10px;
201-
margin-left: 10px;
202-
line-height: 1.4;
203-
}
204-
205-
.resource--info-lines li.top {
206-
border-bottom: 1px #fbceb1 dashed
207-
}
208-
209-
.difficulty {
210-
width: 20px;
211-
height: 20px;
212-
border-radius: 2px;
213-
}
214-
215-
.difficulty-1 {
216-
background: #7cfc00;
217-
}
218-
.difficulty-2 {
219-
background: #ffff00
220-
}
221-
.difficulty-3 {
222-
background: #ffa500;
223-
}
224-
.difficulty-4 {
225-
background: #ff8c00
226-
}
227-
.difficulty-5 {
228-
background: #ff6200;
229-
}
230-
.difficulty-6 {
231-
background: #89f;
232-
}
233-
234-
.duration {
235-
line-height: 1.4;
236-
height: 28px;
237-
font-size: 10px;
238-
}
239-
240-
.description {
241-
color: #765;
242-
}
243-
244-
.label {
245-
color: #635147;
246-
background: #edff7a
247-
; padding-right: 5px;
248-
padding-left: 5px;
249-
border-radius: 2px;
250-
margin-right: 5px;
251-
}
252-
253169
.text--centered {
254170
text-align: center;
255171
}
@@ -263,38 +179,16 @@ body {
263179
font-size: 16px;
264180
}
265181

266-
.resource--Podcast {
267-
background: url(/assets/img/Microphone-52.png) no-repeat right;
268-
}
269-
270-
.resource--Video {
271-
background: url(/assets/img/Camcorder-48.png) no-repeat right;
272-
}
273-
274-
.resource--Book {
275-
background: url(/assets/img/Book-48.png) no-repeat right;
276-
}
277182

278-
.resource--Online.interactive {
279-
background: url(/assets/img/Interactive-50.png) no-repeat right;
280-
background-size: 25px;
281-
}
282183

283-
.resource--Online.written {
284-
background: url(/assets/img/ELearning-48.png) no-repeat right;
285-
background-size: 25px;
286-
}
184+
/*
185+
---------------------
186+
---- RESOURCE ---------
187+
---------------------
188+
*/
287189

190+
@import "partials/resource";
288191

289-
.resource--type {
290-
padding-right: 30px;
291-
margin-right: 5px;
292-
font-size: 12px;
293-
height: 28px;
294-
line-height: 2.2;
295-
text-align: right;
296-
background-size: 25px;
297-
}
298192

299193
/*
300194
---------------------
@@ -336,7 +230,8 @@ body {
336230
}
337231

338232
.grid_cell {
339-
width: 310px;
233+
max-width: 380px;
234+
padding: 1em;
340235
}
341236

342237
@media (min-width: 700px) {

‎src/components/routes/app/results/ItemTile.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ class ItemTile extends Component {
4646
</div>
4747
<ul className="resource--info-lines">
4848
<li className="top">
49-
<div className="grid_container info">
49+
<div className="flex-container info">
5050
<div>
5151
<div className={difficultyClass}></div>
5252
</div>
@@ -59,15 +59,14 @@ class ItemTile extends Component {
5959
</div>
6060
</div>
6161
</div>
62+
<span>Author:</span> {resource.author}
6263
</li>
6364

6465
{linkitem}
6566
<li className="description">
6667
{resource.description}
6768
</li>
68-
<li>
69-
<span className="key">Author:</span> {resource.author}
70-
</li>
69+
7170
<li>
7271
<span className="label">{resource.tags}</span>
7372
</li>

0 commit comments

Comments
 (0)