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 928d891

Browse files
committed
Add git status area
1 parent a28fda6 commit 928d891

File tree

4 files changed

+320
-63
lines changed

4 files changed

+320
-63
lines changed

‎config/config.json‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,54 @@
11
{
2-
"1": {
3-
"orden": "1.1",
4-
"titulo": "Got 15 minutes and want to learn Git?",
5-
"tareas": [
6-
"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.",
7-
"Our terminal prompt below is currently in a directory we decided to name 'octobox'. To initialize a Git repository here, type the following command:"
8-
],
9-
"comando": "git init",
10-
"errorMessages": [
11-
"fatal: Not a git repository (or any of the parent directories): .git"
12-
],
13-
"error": "Did not create a Git repo",
14-
"successMessages": [
15-
"Initialized empty Git repository in /.git/"
16-
],
17-
"success": "Success!",
18-
"repoStatus": "Empty"
2+
"config": {
3+
"repoName": "Octobox",
4+
"errorComando": "comand not found"
5+
},
6+
"lecciones": {
7+
"1": {
8+
"orden": "1.1",
9+
"titulo": "Got 15 minutes and want to learn Git?",
10+
"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.",
12+
"Our terminal prompt below is currently in a directory we decided to name 'octobox'. To initialize a Git repository here, type the following command:"
13+
],
14+
"comando": "git init",
15+
"errorMessages": [
16+
"fatal: Not a git repository (or any of the parent directories): .git"
17+
],
18+
"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+
}
25+
},
26+
"2": {
27+
"orden": "1.2",
28+
"titulo": "Checking the Status",
29+
"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.",
31+
"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.",
32+
"Next up, let's type the git status command to see what the current state of our project is:"
33+
],
34+
"comando": "git status",
35+
"errorMessages": [
36+
"fatal: Not a git repository (or any of the parent directories): .git"
37+
],
38+
"alert": "Did not use git status",
39+
"successMessages": [
40+
"# On branch master",
41+
"#",
42+
"# Initial commit",
43+
"#",
44+
"nothing to commit (create/copy files and use 'git add' to track)"
45+
],
46+
"repoStatus": {
47+
"status": {
48+
"folder": [".git"]
49+
},
50+
"unstaged": ["octotext.txt"]
51+
}
52+
}
1953
}
20-
}
54+
}

‎css/style.css‎

Lines changed: 148 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/* =================================
2+
GENERALES
3+
=================================== */
4+
15
* {
26
padding: 0;
37
margin: 0;
@@ -12,6 +16,7 @@ body {
1216
background-color: #eee;
1317
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1418
font-size: 16px;
19+
color: #333;
1520
}
1621

1722
.container {
@@ -24,6 +29,14 @@ main {
2429
flex-direction: column;
2530
}
2631

32+
.hidden {
33+
opacity: 0;
34+
}
35+
36+
/* =================================
37+
AREA DE INSTRUCCIONES
38+
=================================== */
39+
2740
#leccion > div {
2841
padding: 10px;
2942
}
@@ -37,27 +50,37 @@ main {
3750
}
3851

3952
#instrucciones button.comando {
53+
outline: none;
4054
margin-top: 10px;
4155
padding: 10px;
4256
border: none;
4357
border-radius: 3px;
44-
font-size: 1.1rem;
58+
font-size: .9rem;
4559
letter-spacing: 1px;
46-
font-family: monospace;
60+
font-family: 'Source Code Pro',monospace;
4761
background-color: #ccc;
4862
}
4963

5064
#instrucciones button.comando::before {
5165
font-family: FontAwesome;
5266
content: '\f120';
53-
margin-right: 5px;
67+
margin-right: 15px;
5468
}
5569

5670
#instrucciones button.comando:hover {
5771
opacity: .8;
5872
cursor: pointer;
5973
}
6074

75+
#instrucciones button.comando:active {
76+
position: relative;
77+
top: 1px;
78+
}
79+
80+
/* =================================
81+
TERMINAL AREA
82+
=================================== */
83+
6184
.console-area {
6285
display: flex;
6386
flex-direction: column;
@@ -72,6 +95,11 @@ main {
7295
letter-spacing: .5px !important;
7396
}
7497

98+
.console-area .line-marker {
99+
color: lightskyblue;
100+
font-weight: bold;
101+
}
102+
75103
.console-area .current-line {
76104
width: 100%;
77105
margin-top: 15px;
@@ -120,17 +148,131 @@ main {
120148
outline: none;
121149
}
122150

123-
footer {
124-
padding: 10px;
151+
/* =================================
152+
REPO FOLDER STRUCTURE
153+
=================================== */
154+
#repository {
155+
height: 250px;
156+
margin: 5px 0 15px 0;
157+
font-size: .9rem;
158+
}
159+
160+
#repository .header {
161+
display: flex;
162+
flex-direction: row;
163+
height: 10%;
164+
color: #FFF;
165+
background-color: #424242;
166+
border-top-right-radius: 2px;
167+
border-top-left-radius: 2px;
168+
padding-left: 10px;
125169
}
126170

171+
#repository .header .title {
172+
width: 90%;
173+
text-align: left;
174+
user-select: none;
175+
letter-spacing: 1px;
176+
}
177+
178+
#repository .header .buttons {
179+
width: 10%;
180+
padding: 5px;
181+
display: flex;
182+
flex-direction: row;
183+
justify-content: space-around;
184+
}
185+
186+
#repository .header .buttons i:hover {
187+
cursor: pointer;
188+
color: #ccc;
189+
}
190+
191+
#repository .header .buttons i.close:hover {
192+
color: #d32f2f;
193+
}
194+
195+
#repository .repo-status {
196+
height: 90%;
197+
display: flex;
198+
flex-direction: row;
199+
}
127200

201+
#repository .repo-status .unstaged {
202+
background-color: #009688;
203+
}
204+
205+
#repository .repo-status .status {
206+
background-color: #4CAF50;
207+
border-bottom-left-radius: 2px;
208+
}
209+
210+
#repository .repo-status div.commits {
211+
background-color: #8BC34A;
212+
border-bottom-right-radius: 2px;
213+
}
214+
215+
#repository .repo-status .status,
216+
#repository .repo-status .unstaged,
217+
#repository .repo-status .commits {
218+
width: 34%;
219+
height: 100%;
220+
padding: 5px 10px;
221+
columns: #232323;
222+
overflow-y: auto;
223+
}
224+
225+
#repository .repo-status ul {
226+
margin-top: 10px;
227+
margin-left: 10px;
228+
width: 100%;
229+
}
230+
231+
#repository .repo-status li {
232+
width: 100% !important;
233+
list-style: none;
234+
color: #EEE;
235+
}
236+
237+
#repository .repo-status li::before {
238+
font-family: FontAwesome;
239+
margin-right: 10px;
240+
}
241+
242+
#repository .repo-status li.folder::before {
243+
content: "\f07b";
244+
}
245+
246+
#repository .repo-status .unstaged li::before {
247+
content: "\f0f6";
248+
}
249+
250+
#repository .repo-status li.commit::before {
251+
font-family: FontAwesome;
252+
content: "\f113" !important;
253+
}
254+
255+
/* =================================
256+
FOOTER
257+
=================================== */
258+
259+
footer {
260+
position: absolute;
261+
bottom: 0;
262+
width: 100%;
263+
font-size: .8rem;
264+
padding: 10px;
265+
background-color: #ddd;
266+
}
128267

268+
/* =================================
269+
ANIMACIONES
270+
=================================== */
129271

130272
.typed {
131273
white-space: nowrap;
132274
overflow: hidden;
133-
animation: type 5s steps(60, end);
275+
animation: type 4s steps(60, end);
134276
}
135277

136278
@keyframes type{

‎index.html‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,33 @@ <h3 id="instruccion"><span class="orden"></span> - <span class="titulo">Instrucc
3030
<p>Presiona Enter para ingresar tus comandos.</p>
3131
<!-- </div> -->
3232
<div class="current-line">
33-
<span>$ </span><textarea id="console-input" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"></textarea>
33+
<spanclass="line-marker">満 </span><textarea id="console-input" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"></textarea>
3434
</div>
3535
</div>
3636
</div>
37-
38-
<div id="repo-status">
39-
<div class="folder-root">
40-
37+
38+
<div id="repository">
39+
<div class="header">
40+
<p class="title"></p>
41+
<div class="buttons">
42+
<i class="fa fa-window-minimize" aria-hidden="true"></i>
43+
<i class="fa fa-window-maximize" aria-hidden="true"></i>
44+
<i class="fa fa-window-close close" aria-hidden="true"></i>
45+
</div>
46+
</div>
47+
<div class="repo-status">
48+
<div class="unstaged">
49+
<h3>Unstaged Files</h3>
50+
<ul></ul>
51+
</div>
52+
<div class="status">
53+
<h3>Status</h3>
54+
<ul></ul>
55+
</div>
56+
<div class="commits">
57+
<h3>Commits</h3>
58+
<ul></ul>
59+
</div>
4160
</div>
4261
</div>
4362
</section>

0 commit comments

Comments
(0)

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