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 aa7b160

Browse files
committed
Add layout change button
1 parent 6fa1b98 commit aa7b160

File tree

5 files changed

+73
-27
lines changed

5 files changed

+73
-27
lines changed

‎public/bundle.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -613,7 +613,7 @@ function loadPage() {
613613
orden.innerHTML = lecciones[leccionActual].orden;
614614

615615
// Actualizar comando en boton
616-
let button = document.querySelector('#instrucciones button');
616+
let button = document.querySelector('.comando');
617617
button.innerHTML = lecciones[leccionActual].comando;
618618

619619
// Limpiar areaTareas
@@ -952,13 +952,34 @@ function loadPage() {
952952
let column2 = document.querySelector('.column-2');
953953
document.querySelector('.show-repo').classList.toggle('hidden');
954954
column1.style.width = '100%';
955+
column1.style.flexDirection = 'row';
955956
column2.classList.toggle('hidden');
957+
958+
// Reordenar columna 1
959+
let instrucciones = document.querySelector('#instrucciones');
960+
let terminal = document.querySelector('#terminal');
961+
instrucciones.style.width = '50%';
962+
instrucciones.style.height = '100%';
963+
consoleArea.style.height = '100%';
964+
terminal.style.width = '50%';
965+
terminal.style.height = '100%';
966+
terminal.style.marginTop = 'auto';
956967
})
957968
// Volver a mostrar columna del repositorio
958969
document.querySelector('.show-repo').addEventListener('click', () => {
959970
let column1 = document.querySelector('.column-1');
960971
let column2 = document.querySelector('.column-2');
972+
// Reordenar columna 1
973+
let instrucciones = document.querySelector('#instrucciones');
974+
let terminal = document.querySelector('#terminal');
961975
column1.style.width = '70%';
976+
column1.style.flexDirection = 'column';
977+
instrucciones.style.width = '100%';
978+
instrucciones.style.height = 'auto';
979+
consoleArea.style.height = '400px';
980+
terminal.style.width = '100%';
981+
terminal.style.height = '400px';
982+
terminal.style.marginTop = '0';
962983
setTimeout(function() {
963984
column2.classList.toggle('hidden');
964985
}, 900);

‎public/css/mediaQueries.css‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,17 @@
1313
box-shadow: 0 -1px 1px 1px #aaa inset;
1414
}
1515

16-
#instruccionesbutton.comando {
17-
left: 30px;
16+
button.comando {
17+
left: 0;
1818
}
1919

20-
#instrucciones button.comando:active {
21-
left: 31px;
20+
button.comando:active {
21+
top: 1px;
22+
left: 0;
23+
}
24+
25+
footer {
26+
font-size: .7rem !important;
2227
}
2328
}
2429

@@ -66,8 +71,8 @@
6671
}
6772

6873
@media screen and (max-width: 749px) {
69-
.not-mobile {
70-
display: hidden !important;
74+
i.hide-repo {
75+
visibility: hidden !important;
7176
}
7277

7378
.only-mobile {
@@ -86,16 +91,19 @@
8691

8792
.main-menu {
8893
display: none;
94+
width: 290px !important;
8995
}
9096

91-
.main-menu.expanded > a img {
92-
width: 150px;
97+
a.logo-link {
98+
background: url('../img/logo.png') no-repeat center;
99+
background-size: contain;
100+
width: 150px !important;
93101
margin-left: 30px;
94102
}
95103

96104
.expanded {
97105
display: block !important;
98-
width: 330px;
106+
width: 290px;
99107
overflow: visible;
100108
overflow-y: auto;
101109
padding-bottom: 40px;

‎public/css/style.css‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ a.logo-link {
196196

197197
.main-menu .nav-text.learning::before {
198198
content: "\f212";
199-
color: #1976D2;
199+
color: #148FCB;
200200
}
201201

202202
/* =================================
@@ -264,39 +264,38 @@ a.logo-link {
264264
padding: 8px 0;
265265
}
266266

267-
#instruccionesbutton.comando {
267+
.comando {
268268
width: fit-content;
269269
outline: none;
270270
margin-top: 10px;
271271
padding: 10px;
272272
border: none;
273-
border-top-left-radius: 3px;
273+
border-top-right-radius: 3px;
274274
font-size: .9rem;
275275
letter-spacing: 1px;
276276
font-family: 'Source Code Pro', monospace;
277277
background-color: #37474F;
278278
position: relative;
279-
top: 10px;
280-
left: 31px;
281279
color: #eee;
282280
align-self: flex-end;
283281
margin-top: auto;
284282
}
285283

286-
#instruccionesbutton.comando::before {
284+
.comando::before {
287285
font-family: FontAwesome;
288286
content: '\f120';
289287
margin-right: 15px;
290288
}
291289

292-
#instruccionesbutton.comando:hover {
290+
.comando:hover {
293291
opacity: .9;
294292
cursor: pointer;
295293
}
296294

297-
#instruccionesbutton.comando:active {
295+
.comando:active {
298296
position: relative;
299-
left: 32px;
297+
left: 0;
298+
top: 1px;
300299
}
301300

302301
/* =================================
@@ -311,7 +310,7 @@ div#terminal {
311310
display: flex;
312311
flex-direction: column;
313312
font-size: .8rem !important;
314-
height: 300px;
313+
height: 400px;
315314
padding: 10px 30px;
316315
font-family: 'Source Code Pro', monospace;
317316
background-color: hsl(220, 13%, 18%);
@@ -408,10 +407,10 @@ div#terminal {
408407
outline: none;
409408
color: #fbfbfb;
410409
position: absolute;
411-
top: 10px !important;
410+
top: 7px !important;
412411
right: 0 !important;
413412
padding: 3px 20px;
414-
height: 35px;
413+
height: 38px;
415414
width: 50px;
416415
z-index: 0;
417416
background-color: #424242;

‎public/index.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ <h3 id="instruccion"><span class="orden"> 1.X </span> - <span class="titulo">Ins
3737
<div class="tareas">
3838
<!-- Tareas cargadas como parrafos desde JSON -->
3939
</div>
40-
<button class="comando"></button>
4140
</div>
4241
<div id="terminal">
42+
<button class="comando"></button>
4343
<div class="console-area">
4444
<p>Presiona Enter para ingresar tus comandos.</p>
4545
<div class="current-line">
@@ -77,9 +77,6 @@ <h3>Commits</h3>
7777
<p class="company">Copyright &copy; 4Geeks Academy LLC 2017. All rights reserved.</p>
7878
<p class="coder">Coded by <a href="//manten-dev.me">Manten Dev.</a></p>
7979
</footer>
80-
81-
<!-- Sweet Alerts Script -->
82-
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
8380
<!-- My script -->
8481
<script src="./bundle.js"></script>
8582
</body>

‎src/js/main.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function loadPage() {
5353
orden.innerHTML = lecciones[leccionActual].orden;
5454

5555
// Actualizar comando en boton
56-
let button = document.querySelector('#instrucciones button');
56+
let button = document.querySelector('.comando');
5757
button.innerHTML = lecciones[leccionActual].comando;
5858

5959
// Limpiar areaTareas
@@ -392,13 +392,34 @@ function loadPage() {
392392
let column2 = document.querySelector('.column-2');
393393
document.querySelector('.show-repo').classList.toggle('hidden');
394394
column1.style.width = '100%';
395+
column1.style.flexDirection = 'row';
395396
column2.classList.toggle('hidden');
397+
398+
// Reordenar columna 1
399+
let instrucciones = document.querySelector('#instrucciones');
400+
let terminal = document.querySelector('#terminal');
401+
instrucciones.style.width = '50%';
402+
instrucciones.style.height = '100%';
403+
consoleArea.style.height = '100%';
404+
terminal.style.width = '50%';
405+
terminal.style.height = '100%';
406+
terminal.style.marginTop = 'auto';
396407
})
397408
// Volver a mostrar columna del repositorio
398409
document.querySelector('.show-repo').addEventListener('click', () => {
399410
let column1 = document.querySelector('.column-1');
400411
let column2 = document.querySelector('.column-2');
412+
// Reordenar columna 1
413+
let instrucciones = document.querySelector('#instrucciones');
414+
let terminal = document.querySelector('#terminal');
401415
column1.style.width = '70%';
416+
column1.style.flexDirection = 'column';
417+
instrucciones.style.width = '100%';
418+
instrucciones.style.height = 'auto';
419+
consoleArea.style.height = '400px';
420+
terminal.style.width = '100%';
421+
terminal.style.height = '400px';
422+
terminal.style.marginTop = '0';
402423
setTimeout(function() {
403424
column2.classList.toggle('hidden');
404425
}, 900);

0 commit comments

Comments
(0)

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