Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 183fd2f

Browse files
committed
Implement folder structure in repo status & staged files
1 parent 05855c6 commit 183fd2f

File tree

5 files changed

+237
-121
lines changed

5 files changed

+237
-121
lines changed

‎README.md‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,30 @@
1-
# GitHub Tutorial 4Geeks #
1+
# Git Tutorial - 4Geeks #
2+
3+
## JSON Structure for Repo Folders ##
4+
5+
- img
6+
- picture.jpg
7+
- dist
8+
- bundle
9+
- bundled_files.txt
10+
- style.css
11+
- index.html
12+
- favicon.ico
13+
14+
This is the JSON necessary to create that folder structure:
15+
16+
```JSON
17+
"root-folder": [
18+
{ "img": [ //folder
19+
"picture.jpg"
20+
] },
21+
{ "dist": [ // folder
22+
{ "bundle": [ // subfolder
23+
"bundled_files.txt"
24+
] },
25+
"style.css"
26+
] },
27+
"index.html", // file in root folder
28+
"favicon.ico" // file in root folder
29+
]
30+
```

‎config/config.json‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,24 @@
88
"orden": "1.1",
99
"titulo": "Got 15 minutes and want to learn Git?",
1010
"tareas": [
11-
"Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other's toes. It's a distributed version control system.",
11+
"Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other's toes. It's a distributed version control system.",
1212
"Our terminal prompt below is currently in a directory we decided to name 'octobox'. To initialize a Git repository here, type the following command:"
1313
],
1414
"comando": "git init",
1515
"errorMessages": [
1616
"fatal: Not a git repository (or any of the parent directories): .git"
1717
],
1818
"alert": "Did not create a Git repo",
19-
"successMessages": ["Initialized empty Git repository in /.git/"],
20-
"repoStatus": {
21-
"status": {
22-
"msg": "No git repository"
23-
}
24-
}
19+
"successMessages": [
20+
"Initialized empty Git repository in /.git/"
21+
],
22+
"repoStatus": {}
2523
},
2624
"2": {
2725
"orden": "1.2",
2826
"titulo": "Checking the Status",
2927
"tareas": [
30-
"Good job! As Git just told us, our 'octobox' directory now has an empty repository in /.git/. The repository is a hidden directory where Git operates.",
28+
"Good job! As Git just told us, our 'octobox' directory now has an empty repository in /.git/. The repository is a hidden directory where Git operates.",
3129
"To save your progress as you go through this tutorial -- and earn a badge when you successfully complete it -- head over to create a free Code School account. We'll wait for you here.",
3230
"Next up, let's type the git status command to see what the current state of our project is:"
3331
],
@@ -44,11 +42,11 @@
4442
"nothing to commit (create/copy files and use 'git add' to track)"
4543
],
4644
"repoStatus": {
47-
"status": {
48-
"folder": [".git"]
49-
},
50-
"unstaged": ["octotext.txt"]
45+
"repoFolder": [
46+
{ ".git": [ ] },
47+
"octotext.txt"
48+
]
5149
}
5250
}
5351
}
54-
}
52+
}

‎css/style.css‎

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,20 @@
1313
}
1414

1515
body {
16-
display: flex;
16+
min-width:600px;
1717
min-height: 100vh;
18+
display: flex;
1819
flex-direction: column;
1920
background-color: #eee;
2021
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
21-
font-size: 16px;
22+
font-size: 14px;
2223
color: #333;
23-
}
24-
25-
main {
26-
flex: 1;
24+
opacity: 0;
25+
transition: opacity 1s;
2726
}
2827

2928
.container {
30-
min-width: 600px;
31-
max-width: 900px;
29+
max-width: 1024px;
3230
margin: 0 auto;
3331
}
3432

@@ -50,9 +48,10 @@ h1 {
5048
=================================== */
5149

5250
#myProgress {
53-
width: 100%;
51+
width: 80%!important;
5452
background-color: #f44336;
5553
border-radius: 30px;
54+
box-shadow: 0 0 20px #434343 inset;
5655
}
5756
#myBar {
5857
width: 0%;
@@ -87,7 +86,8 @@ h1 {
8786
font-size: .9rem;
8887
letter-spacing: 1px;
8988
font-family: 'Source Code Pro', monospace;
90-
background-color: #ccc;
89+
background-color: #1976D2;
90+
color: #eee;
9191
}
9292

9393
#instrucciones button.comando::before {
@@ -97,7 +97,7 @@ h1 {
9797
}
9898

9999
#instrucciones button.comando:hover {
100-
opacity: .8;
100+
opacity: .9;
101101
cursor: pointer;
102102
}
103103

@@ -189,23 +189,24 @@ h1 {
189189
#repository .header {
190190
display: flex;
191191
flex-direction: row;
192-
height: 10%;
192+
height: 11%;
193193
background-color: #424242;
194194
border-top-right-radius: 2px;
195195
border-top-left-radius: 2px;
196-
padding-left: 10px;
197196
}
198197

199198
#repository .header .title {
200199
width: 90%;
200+
font-weight: bold;
201+
padding: 4px 10px;
201202
text-align: left;
202203
user-select: none;
203204
letter-spacing: 1px;
204205
}
205206

206207
#repository .header .buttons {
207208
width: 10%;
208-
padding: 5px;
209+
padding: 8px;
209210
display: flex;
210211
flex-direction: row;
211212
justify-content: space-around;
@@ -221,27 +222,27 @@ h1 {
221222
}
222223

223224
#repository .repo-status {
224-
height: 90%;
225+
height: 89%;
225226
display: flex;
226227
flex-direction: row;
227228
}
228229

229-
#repository .repo-status .unstaged {
230-
background-color: #3F51B5;
230+
#repository .repo-status .repo-folder {
231+
background-color: #3949AB;
231232
}
232233

233-
#repository .repo-status .status {
234-
background-color: #2196F3;
234+
#repository .repo-status .staged {
235+
background-color: #3F51B5;
235236
border-bottom-left-radius: 2px;
236237
}
237238

238239
#repository .repo-status div.commits {
239-
background-color: #03A9F4;
240+
background-color: #5C6BC0;
240241
border-bottom-right-radius: 2px;
241242
}
242243

243-
#repository .repo-status .status,
244-
#repository .repo-status .unstaged,
244+
#repository .repo-status .staged,
245+
#repository .repo-status .repo-folder,
245246
#repository .repo-status .commits {
246247
width: 34%;
247248
height: 100%;
@@ -251,30 +252,57 @@ h1 {
251252
}
252253

253254
#repository .repo-status ul {
254-
margin-top: 10px;
255-
margin-left: 10px;
255+
margin-top: 5px;
256+
margin-left: 5px;
256257
width: 100%;
257258
}
258259

260+
#repository ul li > ul {
261+
margin-top: 0 !important;
262+
margin-left: 20px !important;
263+
}
264+
259265
#repository .repo-status li {
260266
width: 100% !important;
261267
list-style: none;
262268
color: #EEE;
269+
user-select: none;
263270
}
264271

265272
#repository .repo-status li::before {
266273
font-family: FontAwesome;
267274
margin-right: 10px;
268275
}
269276

270-
#repository .repo-status li.folder::before {
277+
#repository li.folder:hover {
278+
cursor: pointer;
279+
opacity: .7;
280+
}
281+
282+
#repository li.folder::before {
283+
content: "\f07c";
284+
color: #795548;
285+
}
286+
287+
/* #repository li.folder.::before {
271288
content: "\f07b";
289+
color: #795548;
290+
} */
291+
292+
#repository li.folder+ li.closed {
293+
display: none;
272294
}
273295

274-
#repository .repo-status .unstaged li::before {
296+
#repository li.file::before {
297+
color: #FF5722;
275298
content: "\f0f6";
276299
}
277300

301+
#repository li.info::before {
302+
color: #f44336;
303+
content: "\f05a";
304+
}
305+
278306
#repository .repo-status li.commit::before {
279307
font-family: FontAwesome;
280308
content: "\f113" !important;
@@ -287,7 +315,7 @@ h1 {
287315
footer {
288316
font-size: .8rem;
289317
padding: 10px;
290-
background-color: #03A9F4;
318+
background-color: #434343;
291319
color: #EEE;
292320
}
293321

‎index.html‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>GitHub Tutorial</title>
7+
<title>Git Tutorial</title>
88
<!-- FontAwesome -->
99
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
1010
<!-- Google Fonts -->
@@ -16,14 +16,12 @@
1616
</head>
1717
<body>
1818
<main>
19-
<div class="container">
20-
<div id="myProgress">
21-
<div id="myBar"></div>
22-
</div>
19+
<div id="myProgress" class="container">
20+
<div id="myBar"></div>
2321
</div>
24-
22+
2523
<div id="area-practica" class="container">
26-
<h1>GitHub Tutorial</h1>
24+
<!-- <h1>Git Tutorial</h1> -->
2725
<section id="leccion">
2826
<div id="instrucciones">
2927
<h3 id="instruccion"><span class="orden"></span> - <span class="titulo">Instrucciones</span></h3>
@@ -53,17 +51,14 @@ <h3 id="instruccion"><span class="orden"></span> - <span class="titulo">Instrucc
5351
</div>
5452
</div>
5553
<div class="repo-status">
56-
<div class="unstaged">
57-
<h3>Unstaged Files</h3>
58-
<ul></ul>
54+
<div class="repo-folder">
55+
<h3>Root folder</h3>
5956
</div>
60-
<div class="status">
61-
<h3>Status</h3>
62-
<ul></ul>
57+
<div class="staged">
58+
<h3>Staged</h3>
6359
</div>
6460
<div class="commits">
6561
<h3>Commits</h3>
66-
<ul></ul>
6762
</div>
6863
</div>
6964
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /