jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-09 12:00:37 -04:00
Code Issues Projects Releases Wiki Activity

fix(UI): make the task challenges be in the grid view (#53687)

Browse Source 
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Manabu Matsumoto
2024-02-24 01:03:28 +09:00
committed by GitHub
parent d5ddb21db8
commit 48cb12ef1c
4 changed files with 88 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/templates/Introduction/intro.css
View File

@@ -125,6 +125,7 @@ button.map-title {
}
.map-challenge-wrap > a,
.map-dialogue-wrap > a,
.map-project-wrap > a {
display: flex;
gap: 7px;
@@ -229,28 +230,15 @@ button.map-title {
.map-challenge-title {
display: flex;
align-items: center;
width: 100%;
font-size: 1.13rem;
}
.map-challenge-title a {
width: 100%;
padding: 10px 15px;
width: 100%;
align-items: center;
}
.map-challenges-grid .map-challenge-title a {
width: 3.4rem;
height: 3.4rem;
min-width: 24px;
min-height: 24px;
padding: 0;
}
.map-challenges-grid .map-challenge-title a:focus {
outline-offset: 1px;
}
.map-challenges-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 3.4rem);
@@ -258,19 +246,40 @@ button.map-title {
justify-content: space-between;
margin: 0 auto 18px;
width: calc(100% - 50px);
list-style: none;
}
.map-challenge-title-grid {
flex: 0 1 60px;
.map-challenges-grid .map-challenge-title a:focus {
outline-offset: 1px;
}
.map-challenges-grid .map-project-wrap {
flex: 1 1 100px;
}
.map-challenge-title-grid a.map-grid-item {
.map-challenges-grid .map-challenge-wrap {
margin: 6px 0;
max-width: 3.4rem;
}
.map-challenge-wrap a.map-grid-item {
justify-content: center;
align-items: center;
width: 3.4rem;
height: 3.4rem;
min-width: 24px;
min-height: 24px;
border: 1px dashed var(--background-quaternary);
}
.map-dialogue-wrap {
grid-column: 1 / -1;
margin: 0 auto 6px;
width: 100%;
}
.map-dialogue-wrap a {
align-items: center;
min-height: 50px;
padding: 0;
}
.block-description {
padding: 18px 0;
}